换页不再白屏一下、注册页的「手机号注册」能点了
- 点站内链接时，旧页面不再先淡成一片白底 —— 之前新页面要等网络往返才到，中间那一下就是白屏。现在旧页面保持原样，换页后新页面照旧淡入、内容依次上滑。
- 注册页的「手机号注册」原来点了像是没反应：它只是把单选按钮选中，页面上的提示文案与「发验证码」的去向都没变。现在切一下就整页重渲染，提示、去向、表单都跟着变。
- 如果站点没有配置短信服务，注册页不会再把你留在「手机号注册」这个空壳上，而是自动退回邮箱注册。
업데이트 내역
웹사이트와 서버 모드의 업데이트 내역이에요. 최신 것부터 순서대로 있습니다
CloudRidge 웹사이트와 서버 모드의 모든 업데이트를 최신순으로 정리했어요. 어떤 기능이 언제 추가됐는지, 어떤 문제가 언제 고쳐졌는지 돌아볼 때 확인해 보세요.
상단에는 로그인 버튼 하나만, 3D 히어로 크기 조정
- 상단에서 QQ 진입점을 뺐습니다. 로그인 전에는 버튼 두 개가 나란히 있었지만 이제는 로그인 하나만 남습니다. QQ는 로그인·회원가입 화면에서만 보입니다.
- 3D 카메라 거리를 모델 높이로 계산하도록 바꿨습니다. 창이 높으면 장면이 화면을 덮지 않고, 낮으면 작게 뭉치지 않습니다.
- 블록 색을 벚꽃 계열로 모았습니다. 진홍빛 목재·네더 사마귀·산호를 벚나무 목재·꽃잎·잎으로 매핑해 색 노이즈처럼 보이지 않습니다. 블록 배치는 하나도 바꾸지 않았습니다.
첫 화면이 드래그로 돌려 볼 수 있는 3D 장면이 되었습니다
- 첫 화면 전체가 3D 정원 장면이 되었습니다. 드래그로 회전, 휠로 확대, 클릭으로 블록을 캐면 10초 뒤에 다시 생깁니다.
- 휴대폰과 WebGL2 미지원 브라우저에서는 3D를 강제로 불러오지 않습니다. 같은 각도의 정적 포스터를 보여 주고, 모서리의 3D로 보기를 눌러야 불러옵니다.
- 페이지 전환도 부드러워졌습니다. 현재 페이지가 사라지고 새 페이지가 나타나며 각 블록이 차례로 올라옵니다. 동작 줄이기가 켜져 있으면 기존처럼 바로 이동합니다.
- 눈에 띄던 QQ 파란 타일을 공식 16×16 최소 아이콘으로 바꿨습니다. 다른 아이콘과 같은 무게감입니다.
QQ 로그인 버튼을 사이트 전체에서 하나로
- 로그인 페이지, 가입 페이지, 상단 바, 마이페이지가 이제 같은 QQ 버튼을 씁니다. 텐센트 공식 작은 아이콘에 사이트 자체의 테두리 알약을 씌운 형태이며, 공식 규격이 허용하는 「작은 아이콘 + 글자」 방식이고 아이콘은 공식 원본 그대로입니다.
- 마이페이지의 「계정과 보안」에 「QQ 연동」을 추가했습니다. 연동, 재연동, 해제가 가능합니다. 로그인 비밀번호가 없는 계정은 해제할 수 없습니다. QQ로만 가입한 계정은 비밀번호가 없어 해제하면 다시 들어올 수 없기 때문입니다.
- 조판과 질감: 제목은 더 조이고 굵게, 섹션 여백은 넓게, 카드에는 포인터를 따라오는 부드러운 빛이 생깁니다.
- 모션: 첫 화면이 한 줄씩 떠오르고, 숫자가 올라가고, 상단에 읽기 진행 막대가 생기며, 홈 카드가 살짝 시차로 움직입니다. 시스템에서 「동작 줄이기」를 켜면 전부 꺼지고, 호버가 없는 기기에서는 빛도 켜지지 않습니다.
QQ 로그인을 텐센트 공식 버튼으로 교체 — 로그인·회원가입 페이지와 상단 내비게이션 세 곳
- 로그인과 회원가입 페이지에는 직접 그린 펭귄 아이콘과 「QQ 원클릭 로그인」 문구가 쓰이고 있었습니다. 텐센트의 「웹사이트 프런트엔드 페이지 규정」은 공식 「QQ登录」 표식을 반드시 사용하고 임의로 수정하지 못하도록 합니다. 그래서 두 곳 모두 텐센트 공식 230×48 긴 아이콘 원본을 원래 크기로 표시하도록 바꿨습니다. 늘리거나 줄이지 않습니다.
- 상단 내비게이션에도 하나 추가했습니다. 넓은 화면에서는 공식 76×24 「QQ登录」 버튼, 375px 이하에서는 공식 24×24 아이콘으로 바뀌어 헤더에 가로 스크롤이 생기지 않습니다.
- 덤으로 두 가지를 고쳤습니다. 공식 버튼은 어떤 상태에서도 회색으로 변하지 않습니다. 이용약관 체크가 꺼져 있을 때 누르면 체크박스까지 스크롤해 빨갛게 강조할 뿐, 버튼을 비활성화하지 않습니다(회색이 된 버튼은 꼭 "버튼을 잘못 놓은" 것처럼 보입니다). 그리고 「이 사이트는 이메일 + 비밀번호로 로그인합니다」라는 문장은 이미 사실이 아니어서, 10개 언어 모두 가입 안내 절반만 남겼습니다.
휴대폰의 「서버 가이드」에서 본문이 목차에 가려지던 문제를 고쳤습니다
- 가이드 사이드바는 데스크톱에서 왼쪽 위에 고정되는 좁은 열입니다. 한 열로 바뀐 휴대폰에서는 폭이 꽉 차고 높이가 화면 하나를 넘는 큰 덩어리가 되는데도 화면 위쪽에 고정되어 있었습니다. 그래서 본문이 그 아래로 지나가며 글자가 겹쳐 보이고, 흰 상자가 떠다니고, 내용이 없는 것처럼 보였습니다. 900px 이하에서는 페이지와 함께 흐르게 했고 데스크톱은 그대로 고정입니다. 이 문제는 이번 변경 이전부터 있었고 휴대폰에서 발견되지 않았을 뿐입니다.
작은 도구들을 고쳤습니다: 탭 바가 실제로 눌리고, 그라데이션이 더 자유로워졌고, 계산기가 그대로 채워서 열 수 있는 목록을 줍니다
- 도구 열 개가 원래 한 페이지에 전부 깔려 있었고 위쪽 캡슐을 눌러도 앵커로 이동만 해서 아무 반응이 없는 것처럼 보였습니다. 지금은 진짜 탭 바라서 한 번에 하나만 보여 줍니다. 주소창에
#t-xxx를 넣으면 해당 도구를 바로 열 수 있고, 휴대폰에서는 탭 바를 옆으로 밀 수 있습니다. 그라데이션 글자는 고정된 두 색에서 2~6 개 색 표시점으로 바뀌었습니다: 막대를 누르면 하나 추가되고, 끌면 위치가 조정되며, 표시점을 고르고 「이 색 삭제」를 누르면 사라집니다. 색은 위치에 따라 글자 단위로 보간되므로 § 코드 / MiniMessage / tellraw / MOTD 네 가지 결과가 함께 바뀌고, MOTD 가 너무 길면 알려 줍니다 - 서버 구성 계산기가 세 가지 예산 등급에서 아홉 개 입력으로 늘었습니다. 모드 수, 시야 거리, 시뮬레이션 거리, 레드스톤 회로 사용 여부, 목표 TPS, 버전을 모두 채울 수 있습니다. 출력도 숫자 몇 줄이 아닙니다: 메모리가 왜 늘어나는지 알려 주고, 바로 복사할 수 있는 시작 명령과 Aikar’s flags, server.properties 와 spigot.yml 의 줄별 제안, 플레이 성향별 모드 / 플러그인 목록도 함께 줍니다. 가장 자주 바뀌는 세 가지 계수(인당 메모리, 모드 계수, 레드스톤 계수)는 관리자 화면 「도구」로 옮겼고, 고친 뒤 새로 고치면 적용됩니다
- 렉 점검이 항목별 원인 계산으로 바뀌었고, 이 사이트의 실시간 데이터와도 비교합니다. 입력에 상주 엔티티, 청크 로더, 레드스톤 가루, 자동 농장 네 항목이 늘었습니다. 출력은 MSPT 를 일곱 항목으로 나눠 비중과 밀리초를 보여 주고, 정말 큰 비중(45% 이상)을 차지할 때만 「이것이 끌고 있다」고 지목합니다. 아니라면 「가장 큰 것은 이것이지만 전체는 높지 않다」고 솔직하게 말합니다. 모든 항목에 실행 가능한 개선 방법이 붙고, 이 사이트의 실시간 데이터를 끌어와 「입력한 규모가 이론상 얼마나 먹고 이 사이트에 지금 얼마나 남았는지」도 알려 줍니다. 데이터를 못 받으면 로컬 추정만 하고 오류는 띄우지 않습니다
액체 유리를 Apple 방식으로 다시 만들다: 굴절하고, 하이라이트가 있고, 흰 배경에서도 버틴다
- ① 지난 버전의 유리는 사실상 흰 한 겹뿐이라 흰 카드 위에 놓이면 보이지 않았습니다. 이번에는 iOS 26 방식을 따라 재질부터 다시 만들었습니다. 위에 밝은 선, 아래에 어두운 선, 바깥에 1px 헤어라인 링, 안쪽에 은은한 빛, 그리고 아주 가벼운 그림자. 데스크톱에서는 여전히 진짜 굴절입니다(배경이 살짝 휘고, 호버하면 판 전체가 1픽셀 떠오르고 누르면 다시 내려앉습니다). 주요 버튼과 위험 버튼은 이전에 유리에서 통째로 빠져 있었는데 이제 들어옵니다. 브랜드 색 그라데이션은 버튼 자체에 남고, 흰 글자의 대비는 그대로이며, 유리 층은 하이라이트와 테두리만 맡고 굴절은 겹치지 않습니다. 같은 재질을 입력창, 셀렉트, 태그, 게임·도구·플레이어 배지, 상단 내비게이션까지 넓혔습니다.
- ② 휴대폰에서는 굴절을 돌리지 않고(가장 비싼 단계입니다) 흐림과 하이라이트 테두리로 자동 열화합니다. 여전히 유리처럼 보이지만 GPU는 거의 쓰지 않습니다. 덤으로 진짜 문제 하나를 고쳤습니다. 휴대폰 분기가 그냥 빠져나가 열화 처리조차 실행하지 않았기 때문에, 휴대폰에서는 유리가 아예 없었습니다. 데스크톱에서도 두 가지. 같은 크기의 유리는 변위 맵을 한 장만 생성하고(홈의 유리 7개가 4장만 씁니다) 화면 밖으로 나간 것은 더 이상 계산하지 않습니다. 또 한 장의 면적이 30만 픽셀을 넘거나 한 페이지에 80장을 넘으면 생성을 멈춥니다. 한 장이 빠지는 편이 스크롤이 느려지는 것보다 낫습니다.
- ③ 관리자 화면의 「외형」에 있는 스위치는 그대로이고 기본값이 켜짐으로 바뀌었습니다. backdrop-filter를 지원하지 않는 브라우저(Safari, Firefox)는 자동으로 무광으로 물러나며 고장 난 것이 아닙니다. 이번에는 색상도 레이아웃도 건드리지 않았고 테마는 여전히 Cloudridge Blue입니다. 지난 버전의 Apple식 흰 배경은 사이트 전체에서 되돌렸고(관리자, 포럼, 갤러리, 지도 모두 원래대로) 남긴 것은 진짜 버그 두 건의 수정뿐입니다. 관리자 화면의 위험한 작업 확인창은 원래 스타일이 전혀 없었고(43곳의 삭제 확인이 배경 차단도 없는 민짜 상자로 떴습니다) 갤러리의 좁은 화면 제목은 마우스를 올릴 때만 나타났습니다.
사이트 전체를 Apple 스타일로: 흰 배경, 헤어라인, 캡슐 버튼, 그리고 잘못된 숫자까지 한 번에 정리
- 사이트 전체의 겉모습을 Apple 방식으로 다시 만들었습니다. 흰 배경, 거의 검은 글자, 그림자 대신 1px 헤어라인 한 줄, 버튼과 필터 태그는 높이 44의 캡슐로 통일, 상단 바는 스크롤을 넘기면 반투명에서 불투명으로 바뀝니다. 유리 효과는 전부 걷어냈습니다 —— 데이터 카드, 타임라인, 상태 카드에 있던 흐림 층이 모두 사라지고 상단 바 한 겹의 아주 옅은 반투명만 남았습니다. 중국어 제목에는 더 이상 음수 자간을 넣지 않습니다. 중국어 글자는 원래 자리폭을 꽉 채우기 때문에 좁히면 뭉쳐서 굵게 보입니다. 좁혀야 하는 것은 숫자뿐입니다. 관리자 화면도 함께 다시 정리했고, 진짜 버그도 하나 고쳤습니다. 위험한 작업의 확인 창이 관리자 화면에서는 스타일이 전혀 없어서, 배경 차단도 위치 지정도 없는 민짜 상자로 떠 있었고 사이트 전체 51곳의 삭제 확인이 모두 영향을 받았습니다. 이제는 배경 차단이 있고 제목이 붉게 물든 가운데 카드입니다. 이 전체는 Apple이라는 색상 테마 아래에 붙어 있습니다(관리자 → 외형에서 선택). Cloudridge Blue로 되돌리면 코드를 건드리지 않고 전부 원래대로 돌아갑니다.
- 이번 모바일 쪽은 「쓰기에 충분히 좋지 않은」 부분만 정확히 겨냥했습니다. 데이터 페이지의 큰 숫자 네 개는 원래 하나가 한 줄을 다 차지했는데, 이제 2×2로 한 화면에 다 들어옵니다. 플레이어 검색창과 검색 버튼은 원래 겹쳐 있었고(버튼이 안내 문구를 70픽셀 가까이 가렸습니다), 이제 한 줄에 나란히 섭니다. 순위표는 각 줄의 위아래 회색 선이 겹쳐 두꺼운 막대가 되던 것을 1px 헤어라인 하나로 바꿨습니다. 타임라인의 「카드 안의 카드」 이중 테두리, 곳곳의 점선 테두리, Windows의 짙은 회색 두꺼운 스크롤바까지 한꺼번에 정리했습니다. 가이드 페이지 사이드바의 서버 현황은 라벨과 값이 붙어 있었는데(버전1.21.1처럼 표시), 좌우로 나누고 구분선을 넣었습니다.
- 감사에서 나온 데이터 문제 10건을 고쳤습니다. 가장 중요한 두 가지. 첫째, 홈의 누적 접속 시간이 초를 시간으로 표시했습니다(35.7M h로 나왔지만 실제 값은 9907시간이며 3600배 차이입니다). 둘째, 차단 목록의 4명이 「해제됨」으로 표시되면서 실제로는 계속 유효했습니다 —— 하트비트가 「이미 존재함」을 보고하면 상태만 조용히 유효로 되돌리고, 이력도 쓰지 않고 플레이어의 차단 표시도 되돌리지 않았기 때문입니다. 나머지. 상태 페이지의 「설치된 모드」가 세 곳에서 각각 0 / 12 / 160으로 달랐고(실제 값은 160), 운영체제는 대시로 표시됐습니다. 둘 다 원인은 같습니다 —— 하위 조회가 화이트리스트 방식이라 이 두 필드가 빠져 있었습니다. 순위표에서는 UUID 문자열이 이름으로 상위를 차지하고 있었는데, 이제 「알 수 없는 플레이어 · 87274f」로 표시합니다. 가동률 상한은 99.2퍼센트로 고정돼 있었고(30초 고정 간격으로 계산했지만 실측 하트비트는 31초), K/D는 사망 기록이 없을 때 천문학적인 숫자를 냈는데 이제 대시로 표시합니다. 나머지 두 건은 순위표 정책(역할 기준과 계정 기준의 두 가지 통합 방식, 킬 수만 가진 그림자 계정)에 속해 강제로 고치지 않았고, 차이와 그 대가를 코드 주석에 적어 두고 운영자 판단을 기다립니다.
가짜 실제 IP로 가는 길을 nginx부터 애플리케이션 계층까지 모두 막았습니다
- ① 먼저 재고 나서 변경: 운영 서버의 탐침으로 두 가지를 실측했습니다 —— 바오타 nginx는 PROXY 프로토콜을 쓰기 때문에 진짜 클라이언트 주소가 이미 REMOTE_ADDR에 들어 있습니다(실측값은 222.212.76.94이고 127.0.0.1이 아닙니다). 그리고 클라이언트가 직접 넣은 X-Real-IP / X-Forwarded-For / CF-Connecting-IP는 nginx가 그대로 PHP로 넘기며, 위조한 세 헤더가 전부 그대로 도착하고 nginx는 어느 것도 덮어쓰지 않습니다. ② 양쪽 끝을 함께 단단히: nginx가 자체 프록시만 아는 키를 주입하고(클라이언트가 이 헤더를 위조해도 nginx가 덮어씁니다), 애플리케이션 계층에 「REMOTE_ADDR이 공인 주소면 그대로 채택하고 프록시 헤더는 보지 않는다」는 관문을 하나 더 두었습니다 —— 혹시라도 trust_proxy를 잘못 켜더라도 속도 제한, 잠금, 감사에 남는 IP가 방문자가 지정한 값이 되지 않습니다.
- 겸사겸사 세 가지: site/config/config.php의 오해를 부르는 주석(「CDN / 리버스 프록시 뒤에 있으면 true로 설정」)을 실측 결론과 경고로 바꿨습니다 —— 이 사이트에서 그대로 따르면 위조 가능한 헤더를 권위 있는 값으로 승격시킬 뿐입니다. 이번 변경에는 자동 테스트를 붙였고(trust_proxy 켬 + 공인 REMOTE_ADDR + 위조 헤더 ⇒ 그래도 실제 주소를 반환), 테스트가 81개에서 83개로 늘어 전부 통과했습니다. 운영 점검용 임시 탐침은 약속대로 삭제했고, 이제 요청하면 404입니다.
휴대폰 스크롤이 더 부드러워지고, 보안 구멍 몇 개를 막았으며, 채팅 기록이 중간을 더는 건너뛰지 않습니다
- 휴대폰 부드러움 관련 네 곳: 스크롤할 때 상단 바에 걸리던 반투명 유리, 좁은 화면에서 모든 카드에 걸려 있던 반투명 유리, 등장 애니메이션이 요소마다 계속 살려 두던 합성 레이어, 스크롤 1픽셀마다 리플로우를 일으키던 읽기 진행 표시줄 —— 모두 같으면서도 더 싼 방식으로 바꿨습니다(스크롤 상태의 상단 바는 어차피 불투명하니 그 흐림은 순전히 헛계산이었고, 애니메이션이 실제로 시작되면 브라우저가 알아서 레이어를 승격합니다). 폭 390 휴대폰 뷰포트 + CPU 20배 스로틀링 실측: 최대 프레임이 364밀리초에서 57밀리초로 줄었습니다. 전체 프레임 수의 차이는 이 장비의 노이즈에 묻혀 안정적인 결론을 낼 수 없습니다 —— 그래서 위 항목들은 모두 구조적으로 설명이 될 때만 손댔습니다.
- 보안 세 곳(높음/중간 위험, 바로 수정했습니다): ① 로컬 디버깅용
_admlogin.php는 이제 운영 환경에서 반드시 404여야 합니다(방문자를 곧바로 관리자로 만들 수 있었습니다).?to=도 더는 사이트 밖으로 나갈 수 없습니다. ② 속도 측정 페이지의 ping / dns는 도메인 이름을 넘겨 포트를 확인하는 구조라 DNS 리바인딩으로 내부망을 탐색당할 수 있었습니다. 이제는 이미 검증한 IP에만 접속합니다. ③ 위조한X-Real-IP/CF-Connecting-IP로 IP 기준 속도 제한을 우회할 수 있었습니다. 이제는 요청 출처가 정말 루프백일 때만 이런 헤더를 믿습니다. ③을 완전히 막으려면 nginx에서X-CDR-Proxy-Secret를 주입하고site/config/config.php에security.proxy_secret를 채워야 합니다 —— 서버 설정을 건드리는 일이라 확인해 주시면 진행하겠습니다. - 채팅 기록의 진짜 버그 세 가지: ① 하루 메시지가 200건을 넘으면 가운데 큰 구간이 페이지에서 영영 보이지 않았습니다(가장 바쁜 날은 2796건인데 예전 경로로는 500건까지만 거슬러 올라갈 수 있어 가운데 2296건은 아무도 볼 수 없었습니다). ② 정렬이 기본 키 id만 보는 탓에 날짜 경계를 넘는 날에는 자정 이후 메시지가 창 밖으로 밀려났습니다(실측으로 53건의 더 새로운 메시지가 영구히 건너뛰어졌습니다). ③ 전송에 실패했을 때 화면은 이미 보낸 것처럼 꾸몄습니다. 이제는 시간 기준으로 가져오고, 「더 이전 불러오기」 버튼으로 앞으로 넘길 수 있으며, 실패하면 분명히 알려 주고 다시 시도할 수 있습니다.
- 겸사겸사: 방문자용 페이지는 더 이상 일괄적으로 캐시 금지가 아닙니다(뒤로·앞으로가 조금 빨라집니다). 로그인 상태는 예전처럼 전혀 캐시하지 않습니다. 사이트 전체 PHP 파일 218개의 문법 오류는 0건이고, 자체 테스트 스크립트 59개를 모두 돌렸습니다 —— 이번 변경과 관련된 15개 스위트의 결과는 변경 전과 완전히 동일합니다(원래 있던 로컬 환경 실패가 하나도 늘지 않았습니다).
서버 메인 스레드를 더 아끼는 버전
- 지도 보고를 「서버의 그 tick 안에서 19.7만 개 점의 JSON을 조립」에서 「그 tick은 데이터만 넘기고 조립은 백그라운드 스레드에서」로 바꿨습니다. 모드 전체에서 유일하게 「한 tick에 수백 밀리초」를 일으킬 수 있는 곳이며, 30분에 한 번씩 나타나는 간헐적 스파이크와 정확히 대응합니다.
- 나머지 인원수·엔티티 수에 따라 커지는 부분도 함께 최적화했습니다. TAB 숫자 포매팅은 tick 단위 캐시로, 이름으로 플레이어 찾기는 tick마다 한 번 만드는 이름 색인으로, 업적 목록은 항목마다 문자열을 만들지 않도록, 30초마다 읽던 설정 파일과 차단 목록은 백그라운드로, 채팅 큐 길이 판정은 카운터로, 네트워크 샘플링은 20초마다 스레드를 새로 만들지 않도록, 명령 스로틀링 테이블은 계속 늘어나기만 하지 않도록 했습니다. 보고 형식, 필드 이름, 값 취득 시점은 모두 그대로입니다.
서버 모드 다이어트: 인원수에 따라 커지는 비용을 메인 스레드 밖으로 옮겼습니다
- 모드 보고에서 가장 큰 덩어리는 지도입니다. 지도 3장이 각각 256×256이고 점이 약 19.7만 개입니다. 예전에는 이 점들을 서버의 그 tick 안에서 바로 JSON으로 조립했고, 조립이 끝나야 서버가 계속 진행했습니다 —— 30분에 한 번이라, 「가끔 한 번씩 끊기는」 그 스파이크와 정확히 맞아떨어집니다. 이제는 수집하는 tick은 데이터만 넘기고 조립은 백그라운드 스레드로 옮겼습니다. 데이터는 이미 다 있는 것이고, JSON 조립이 메인 스레드를 붙잡을 이유는 없었습니다.
- 겸사겸사 접속 인원수에 따라 커지는 몇 가지 비용도 정리했습니다. TAB 목록의 숫자(플레이 시간, 접속 인원 등)는 30초에 한 번만 바뀌는데도 플레이어마다 줄마다 다시 계산했습니다. 이름으로 플레이어를 찾는 폴백은 전체 표를 줄 단위로 훑었습니다(10명이면 100번 조회). 업적 목록은 10분마다 1000개가 넘는 레시피 항목까지 훑었습니다. 30초마다 엔티티를 세기 위해서만 모든 월드의 엔티티를 전부 순회했고, 그동안 메인 스레드에서 설정 파일과 차단 목록을 읽었습니다. 이제는 각각 캐시, 색인, 한 번만 계산, 백그라운드 읽기로 바꿨습니다 —— 사이트로 보내는 내용은 1바이트도 바뀌지 않았습니다. 페이지 표시도 예전과 완전히 같습니다.
관리 화면과 프로필 공개 설정을 개선했습니다
- 사이드바의 미승인 배지는 포럼과 갤러리 두 개만 세고 있었는데 관리 패널은 다섯 개를 세고 있었습니다. 이제 모두 하나의 함수에서 나오고, 메뉴 항목마다 자기 숫자가 붙습니다. 파괴적인 작업(사용자 그룹 삭제, 내비 항목 삭제, 채팅 로그 정리, 캐시 비우기)은 확인 없이 실행되던 것을 이제 확인합니다. 스킨·아바타 배경·채팅 로그 목록은 200건과 60건에서 멈춰 있었는데 이제 페이지를 넘길 수 있습니다.
- 다른 사람에게 프로필 공개 설정은 팀 페이지에만 적용됐고 프로필 자체는 누구나 볼 수 있었습니다. 이제 본인을 제외하고 실제로 적용됩니다. 비밀번호 변경과 다른 기기 로그아웃도 감사 로그에 남습니다.
빨간 확인/삭제 버튼이 다시 보입니다
- 메시지 철회 확인 버튼이 빈칸으로 나왔습니다. 액체 유리가 켜져 있으면 유리 규칙이 버튼 배경만 지우고 흰 글자는 남겨서, 빨간 버튼이 흰 바탕에 흰 글자가 되었습니다. 이제 빨간 단색 버튼은 파란 기본 버튼과 똑같이 유리 대상에서 빠집니다.
- 같은 문제가 사이트의 모든 빨간 버튼(철회, 삭제, 연동 해제 등)에 있었고 함께 고쳤습니다.
페이지를 넘겨도 맨 위로 튀지 않습니다
- 아래쪽에서 다음 페이지를 누르면 맨 위로 되돌아갔습니다. 이제는 페이지 버튼 위의 목록을 기준으로 맞추고, 그 목록이 이미 보이면 아무것도 하지 않습니다. 뒤로/앞으로는 이전 스크롤 위치로 돌아갑니다.
- 겸사겸사 몇 가지: 내비게이션 서버에 시드 맵 추가, 페이지 내 앵커가 고정 헤더에 가리지 않음, 갤러리 카드에 작성자 표시, 홈의 접속 중 플레이어를 누르면 프로필로 이동합니다.
관리 권한 강화 및 자잘한 오류 수정
- 설정, 키 재발급, 백업, 시스템 도구는 이제 운영자 전용입니다. 서버 관리자는 콘텐츠, 신고, 화이트리스트를 그대로 담당합니다.
- 페이지를 넘길 때의 자잘한 문제를 고쳤습니다. 다크 모드가 유지되고, 폼이 두 번 전송되지 않으며, 카운트다운이 정상 속도로 흐르고, 정렬 선택이 페이지를 새로 고치지 않습니다.
페이지를 넘겨도 전체 새로고침 없음
- 페이지 넘김, 필터, 검색, 정렬은 내용만 바꿔 끼웁니다. 주소는 그대로 바뀌고 뒤로 가기도 정상 동작합니다.
- 저장, 심사, 삭제는 이전처럼 페이지를 이동합니다.
플레이어 목록 검색창이 카드에 가려지던 문제 수정
- 애니메이션 요소는 will-change 를 갖고 있고 will-change 는 스태킹 컨텍스트를 만들어, 드롭다운의 z-index 가 자기 카드 안에서만 유효해 DOM 순서상 뒤에 오는 통계 카드에 밀렸습니다
- 검색 카드 전체를 위로 올려 드롭다운이 온전히 위에 뜹니다
모바일 프로필 페이지가 스크롤되지 않던 문제 수정
- 3D 스킨 모델이 touch-action:none 으로 고정되어 있고 touchstart/touchmove 에서 무조건 preventDefault 를 호출해, 손가락이 닿아 있으면 페이지가 멈췄습니다. 세로는 브라우저 스크롤, 가로만 모델 회전으로 바꿨습니다
- 헤더의 배경 드래그도 마우스 전용으로 좁혔습니다
서버 가이드를 전면 개편했습니다. 분량은 두 배, 명령어도 플레이어용이 구분됩니다
- 시작하기, 규칙, 자주 묻는 질문, CloudRidge 소개 네 페이지를 모두 다시 썼고, 왜 필요한지와 실패했을 때 어떻게 하는지까지 담았습니다
- 명령어 페이지 상단에 플레이어용 명령어를 추가해 첫걸음 / 이동 / 채팅 / 확인으로 묶었습니다. 435줄 전체 목록은 아래에 그대로 있습니다
모바일 가로 스크롤 안내가 표에 붙어 보이지 않습니다
- 표 위 안내가 위쪽 테두리에 딱 붙어 겹쳐 보였습니다. 여백을 넣었습니다
- 스크롤하면 헤더가 완전히 불투명해집니다(예전에는 반투명이라 큰 글자가 비쳤습니다)
업로드된 SVG의 보안 취약점을 수정했습니다
- 교묘하게 만든 SVG 아이콘이나 배경을 올리기만 해도 그것을 본 사람의 IP 주소와 브라우저 정보가 새어 나가는 상태였습니다. 지금은 외부 참조가 자동으로 제거되며, 그림 자체의 모습은 달라지지 않습니다.
- 함께 HSTS 와 몇 가지 보수적인 콘텐츠 보안 정책을 추가했습니다.
심사 배지가 계속 켜져 있지 않습니다 + 상태 페이지에서 내부 주소를 숨깁니다
- 관리자 「심사」 배지는 5개 대기열을 세는데, 「서버 관리」 패널은 그중 2개만 처리할 수 있었습니다. 그래서 배지는 켜져 있는데 심사할 것이 없었습니다. 이제 두 기준을 맞췄고, 패널 위에 「더 볼 것」 줄(앨범 / 스킨 / 포럼)을 추가해 해당 관리 페이지로 바로 이동할 수 있습니다.
- 서버 상태 페이지의 「웹 지도」 줄은
127.0.0.1:8100(내부 주소, 연결 확인용)으로 표시되었습니다. 이제 공개된 웹 지도 주소를 보여줍니다.
관리자 화면에서 영상을 바로 볼 수 있습니다
- 동적 배경 영상이 붙은 배경은 심사 카드에서 그 영상을 그대로 재생합니다. 재생 버튼을 누르면 볼 수 있고, 기본적으로 앞부분만 불러옵니다(트래픽 절약). 「영상 있음」 표시도 붙습니다.
- 예전에는 카드에 플레이어가 따로 고른 커버 이미지만 나와서 영상 내용과 전혀 무관할 수 있었습니다. 이제 헷갈리지 않습니다.
- 「업로드 시간이 1970-01-01로 표시되는」 문제도 고쳤습니다. 제가 자료를 대신 올리는 도구에서 시간 형식을 잘못 썼고, 데이터와 도구 모두 수정했습니다.
로그인 500 오류 수정 + 표시 2가지 조정
- 500 오류를 고쳤습니다: 이전 버전에서 「로그인 성공」 뒤 감사 로그의 인자 위치를 잘못 넣어 로그인에 성공하면 반드시 내부 오류가 났습니다. 이제 정상적으로 이동합니다.
- 「다음을 읽고 동의합니다: 이용약관 및 개인정보 처리방침」 줄을 폼 맨 아래(로그인 버튼 아래)로 옮겼습니다. 체크하지 않으면 로그인할 수 없는 점은 그대로입니다.
- 플레이어 페이지 상단의 어둡게 덮는 층을 부드러운 그라데이션으로 바꿔, 눈에 띄던 가로줄을 없앴습니다.
로그인 시 약관 동의가 필요합니다
- 로그인 페이지에 체크박스가 생겼습니다: 「다음을 읽고 동의합니다: 이용약관 및 개인정보 처리방침」——체크하지 않으면 로그인할 수 없습니다. QQ 원클릭과 이메일+비밀번호 두 경로 모두 막히며, 서버에서도 검증합니다(버튼 비활성화만으로는 막을 수 없기 때문입니다).
- 「이용약관」과 「개인정보 처리방침」 두 페이지를 새로 작성했습니다. QQ가 주는 닉네임과 openid, 이메일과 비밀번호 해시, 연동한 캐릭터, 게임 통계, 업로드한 이미지, 로그인 IP와 시각을 항목별로 적었습니다.
- 공유 대상도 명시했습니다 —— QQ 인터커넥트(로그인), mc-heads.net(직접 올린头像이 없을 때 스킨头像), 126 메일(인증 코드) 세 곳뿐입니다. 광고 네트워크는 없고 데이터를 판매하지 않습니다.
- 보관 기간, 삭제·내보내기 요청 방법, 미성년자 처리도 담았습니다. 푸터의 바로가기에서도 두 페이지로 갈 수 있습니다.
밝은 프레임에서도 머리글 글자가 잘 보입니다
- 동영상이 사진을 대신한 뒤 머리글의 흰 글자는 밝은 하늘과 구름 위에서 최악 1.16:1 로 거의 읽을 수 없었습니다. 원인은 그리기 순서였습니다. 동영상은 실제 자식 요소이고 어둡게 하는 그라데이션은
body.cdr-body::before(생성 콘텐츠)에 있었는데, 생성 콘텐츠는 항상 실제 자식보다 먼저 그려지므로 동영상이 그라데이션을 통째로 덮어 아무 효과도 없었습니다 - 해결은 어둡게 하는 층을 머리글 자신의 배경으로 만드는 것입니다. 위에서 아래로 가는 그라데이션(상단 62%, 350px 에서 사라짐)이 머리글 띠만 덮고 인물과 지면, 물은 한 픽셀도 건드리지 않습니다. 고정 위치 레이어를 새로 추가하지 않아 페이지 높이는 6816px 그대로입니다
- 가장 밝은 프레임에서 머리글 대비는 1.16~2.63:1 에서 4.85~6.91:1 로 올랐습니다(흰 글자 기준 4.5:1). 온라인에서만 나타나던 회귀도 함께 고쳤습니다. 액체 유리 아래 「뒤로」 버튼은 표면이 반투명이라 어둡게 하는 층에 함께 어두워졌고(5.19:1 이 2.14:1 로 하락), 이제 라벨도 흰색이 되어 최악 6.04:1 입니다
- 배너를 설정한 페이지에만 적용됩니다. 설정하지 않은 페이지는 1 바이트도 바뀌지 않습니다. 휠, 버튼, 동영상 재생은 모두 재검증했습니다
움직이는 배경: 휠과 클릭이 안 되던 진짜 원인을 찾았습니다
- 원인은 클래스 이름 충돌이었습니다.
.pub-bg-video가 동영상 요소의 클래스이면서 동시에<html>에 붙이는 스위치 클래스로도 쓰여, 화면을 가득 채우는 고정 동영상 레이어 규칙이 루트 요소에 적용됐습니다. 루트가position: fixed가 되면서 페이지 높이가 한 화면으로 무너졌고, 휠로 움직일 여지가 사라졌습니다 - 더 까다로운 점은
pointer-events: none이 상속된다는 것입니다. 문서 트리 전체가 마우스를 받지 못하고<html>만 반응해서 「뒤로」 버튼을 누를 수 없었습니다 - 수정은 상태 클래스를
pub-bg-on으로 바꾸고 요소 규칙을video.pub-bg-video로 좁히는 것입니다. 다시는 같은 이름이 충돌하지 않습니다 - 배경 소재는 첫 버전으로 되돌렸고(4.50 MB → 4.41 MB) 어둡게 하는 처리를 영상에 굽지 않아 색이 정상으로 돌아왔습니다. 로컬 검증대 3개도 함께 수정했습니다 — 동영상 레이어를 재는 줄 알았지만 실제로는
<html>을 재고 있었습니다
움직이는 배경: 공짜로 늘어난 높이 한 화면 제거, 드래그가 더 눈에 띄게
- 새 영상(15.98 MB → 4.50 MB). 어둡게 하는 처리는 영상에 직접 구워 넣었고, 모바일에서 보이는 정지 화면도 같은 이미지
- 보이지도 않으면서 한 화면 이상의 높이를 몰래 더하던 불필요한 오버레이 레이어 제거
- 페이지 상단에서 커서가 「잡는 손」 모양이 되어 어디를 끌면 되는지 보입니다. 터치스크린 노트북도 되도록 판정 완화
- 휠 문제는 계속 확인 중이며, 이번 버전은 위 세 가지를 고쳤습니다
프로필에 동영상 배경을 쓸 수 있습니다
- 5초~1분 길이의 무음 클립을 올리면 PC에서 반복 재생됩니다. 휴대폰은 정지 이미지 그대로라 데이터를 전혀 더 쓰지 않습니다
- 동영상을 넣을 수 있는 곳은 「배너」 한 칸뿐이며, 이미지와 같은 심사를 거칩니다. 상한은 6 MB이고 넘으면 분명히 거부되며 조용히 실패하지 않습니다
- 휴대폰에 보이는 정지 이미지가 바로 그 배너이니, 영상과 분위기가 맞는 사진을 골라 주세요
- 이 기능은 기본적으로 꺼져 있습니다. 관리자 화면에서 켜야 업로드 칸이 나타납니다
「이미지를 골라 저장했는데 아무 일도 없음」을 고쳤습니다
- 한 플레이어가 아이콘과 배너를 업로드하고 영상까지 보내줬는데, 관리자 쪽에는 검토 대기가 하나도 없었습니다 —— 그 이미지는 서버에 도착하지 않았습니다. $_FILES는 처음부터 끝까지 비어 있었습니다
- 원인은 iPhone의 HEIC입니다. 브라우저가 디코딩하지 못하는데, 자르기 창이 이를 「취소」로 처리했고 취소는 파일을 폼에서 지워 버립니다. 파일이 없으니 서버는 「이번에는 이미지를 바꾸지 않음」으로 해석해 초록색 성공 메시지만 돌려줬습니다
- 이제 디코딩할 수 없는 이미지는 버리지 않습니다 —— 원본 그대로(자르지 않고) 업로드하고 이유도 알려 드립니다
- 서버 쪽 안전장치도 추가했습니다. 브라우저가 골랐다고 했는데 파일이 오지 않으면 오류를 내고, 성공한 척하지 않습니다. 실제로 취소한 경우에도 분명히 알려 드립니다
「알 수 없는 플레이어」 이름 수정을 관리자 페이지로
- 명령줄 스크립트 .tools/_backfill-names.php 가 관리자 「시스템 도구」의 버튼이 되었습니다
- 과거 백업의 usercache.json 을 읽어 「이름이 아직 UUID」인 행을 실제 이름으로 되돌리고, 세션 기록 / 업적 / 스킨도 함께 옮깁니다
- 어떤 행이 무엇으로 바뀌는지 먼저 보여 주고, 실행 전에 데이터베이스 스냅숏을 자동으로 남깁니다
- 이름 전체가 UUID 인 행만 건드립니다. 실제 이름이 이미 쓰이면 병합하고, 일반 플레이어 이름은 절대 건드리지 않습니다
순위표: 9개 항목 상위 10명을 한 화면에
- 요청하신 "세분화된 순위표"입니다. 플레이어 목록의 정렬은 한 번에 한 항목만 볼 수 있어서 "누가 가장 많이 캤는지"와 "누가 가장 많이 죽었는지"를 비교하려면 계속 바꿔야 했습니다. /ranking은 9개 항목의 상위 10명을 한 화면에 모았습니다
- 항목마다 카드 하나, 그 안에 순위·아바타·이름·해당 항목의 값이 들어갑니다.
- 값은 플레이어 목록과 글자 하나까지 동일합니다 (같은 포맷 코드를 씁니다). 이름을 누르면 개인 페이지로 이동합니다
- 카드 오른쪽 위의 「전체 보기」는 해당 항목으로 정렬된 전체 목록을 엽니다(?sort=). 입구는 플레이어 목록 제목 아래의 「순위표」 버튼입니다. 데이터가 없는 항목은 빈 카드를 만들지 않고, 봇도 이전처럼 제외됩니다
프로필 배경을 드래그할 수 있게 되었습니다
- 배너를 올린 페이지에서는 배경 사진을 마우스로 누른 채 끌 수 있습니다. 풍경 사진을 밀어 보는 느낌이고, 헤더·아이콘·이름은 그 위에 그대로 얹혀 있습니다
- 끌 수 있는 곳은 맨 위 헤더 부분뿐입니다. 아래의 카드·표·버튼은 평소대로 동작하고 글자 선택도 방해하지 않습니다. 버튼을 눌러도 드래그가 시작되지 않습니다
- 손을 떼면 원래 자리로 돌아옵니다. 끝까지 밀면 거기서 멈추고(사방에 약간의 여유를 남김) 사진이 화면 밖으로 나가 배경색이 드러나지 않습니다
- 마우스·트랙패드에서만 동작합니다. 터치 화면과 “동작 줄이기”를 켠 사용자는 제외되며 이전과 똑같이 동작합니다
“알 수 없는 플레이어”가 스스로 본명으로 돌아옵니다
- 목록에 “알 수 없는 플레이어 · 87274f”로 표시되는 행이 있습니다. 그 문자열은 사실 그 사람의 UUID 입니다. 서버의 이름 캐시는 약 한 달만 보관되므로, 오래된 멤버가 한동안 접속하지 않으면 모드가 이름을 찾지 못해 UUID 를 올려보냅니다
- 문제는 이런 행이 지금까지 절대 고쳐지지 않았다는 점입니다. 본인이 돌아와 서버가 이름을 알게 되어도 이름 변경은 “이름 중복 불가” 제약에 걸리고(본명 행은 다른 보고로 이미 만들어져 있는 경우가 많음), 예외는 삼켜져 UUID 가 그대로 남았습니다
- 이제 두 경로 모두 동작합니다. 본명이 비어 있으면 이름을 바꾸고 그 기간의 세션 기록·업적·스킨도 함께 옮깁니다. 본명이 이미 있으면 그 행으로 병합합니다(플레이 시간 합산, 진행도 합집합, 최초·최종 시각은 경계값)
- 따로 하실 일은 없습니다. 다음 접속 때 자동으로 고쳐집니다. 동기화 로그에 “adopted=N” 이 기록되며 관리자 “시스템 도구”에서 확인할 수 있습니다
아바타가 모든 페이지에 반영됩니다 / 로그인 기록 페이지 나누기 / 연한 버튼 색 문제 수정
- 업로드한 아바타는 이전에는 프로필 페이지에서만 보였습니다. 다른 페이지의 아바타는 업로드 여부를 알지 못하는 다른 경로를 사용했기 때문입니다. 이제 플레이어 목록, 댓글, 내비게이션에서도 표시됩니다. 업로드한 적 없는 사용자는 이전과 같습니다
- 「최근 로그인 기록」은 한 페이지에 30개였으나 이제 10개입니다. 하단 페이저는 사이트의 다른 목록과 동일합니다(한 페이지뿐이면 표시되지 않습니다)
- 「모든 배지 펼치기」 버튼이 회색으로 비활성처럼 보인 것은 명시도 문제였습니다. 연한 버튼의 파란 배경이 기본 흰색 레이어에 밀렸고 자체 배경도 지워졌습니다. 수정했습니다
- 프로필 왼쪽 열 아래의 빈 공간: 왼쪽 열이 오른쪽 열과 같은 높이로 늘어나고 마지막 순위 카드가 채웁니다. 배지를 펼치든 접든 빈틈이 생기지 않습니다. 레이더 설명도 기본으로 접힙니다
리퀴드 글래스를 참고대로 다시 썼습니다: 이번이 진짜 유리입니다
- 이전 버전은 "그라디언트 맵 하나 + 변위"뿐이라 어떻게 조정해도 비슷해지지 않았습니다. 참고와 한 줄씩 비교해 보니 빠진 것이 셋이었고, 이번에 모두 채웠습니다
- ① 굴절을 실제 광학으로 계산합니다: 유리 두께, 모서리 베벨, 굴절률(1.0~3.0), 둥근 곡면이 모두 계산에 들어가 가장자리에 "두꺼운 유리"의 확대감이 생깁니다
- ② 하이라이트 층을 추가했습니다 —— 가장자리를 따라 한 방향으로 빛나는 반사입니다. 리퀴드 글래스에서 가장 눈에 띄는 특징인데 이전 버전에는 아예 없었습니다
- ③ 변위 후 채도를 되돌리고(굴절은 색을 회색으로 만듭니다) 약간의 계단 현상도 제거했습니다. 블러는 0.3px 그대로: 더 키우면 이웃 화소의 차이가 사라져 굴절이 완전히 없어집니다
이제 아바타를 직접 잘라 쓸 수 있습니다. 끌어 보세요, 틀 안이 그대로 결과입니다
- 예전에는 이미지를 통째로 올리고 사이트가 가운데 기준으로 줄였습니다 —— 얼굴이 한쪽으로 치우쳐 있으면 그대로였죠. 이제 이미지를 고르면 자르기 틀이 뜹니다: 끌어서 위치를 옮기고 휠이나 슬라이더로 확대·축소하면, 틀 안이 최종 아바타가 됩니다
- 내보내기는 512×512(서버 상한과 동일)이고 형식은 WebP입니다. 작은 이미지는 확대하지 않습니다 —— 확대하면 더 흐려질 뿐이라 원래 크기로 자릅니다. 틀은 좁은 화면에서 자동으로 작아져 휴대폰에서도 쓸 수 있습니다
- 일부러 자르지 않는 이미지가 두 가지 있습니다: GIF 애니메이션(자르면 한 프레임만 남아 움직임이 사라집니다)과 SVG이며, 둘은 예전 흐름 그대로 갑니다. 자르는 도중 문제가 생기면(브라우저 미지원, 메모리 부족) 원본을 그대로 보냅니다 —— "골랐는데 반응이 없다"에서 막히는 일은 없습니다
- 배너는 자르지 않습니다 —— 원래 가로로 넓고 정사각형으로 만들 의미가 없습니다. 이 기능은 마이페이지 → 프로필에서 아바타를 올릴 때만 나옵니다.
좁은 화면에서 유리 효과를 한 단계 가볍게 했습니다. 모바일 끊김이 줄어듭니다
- 모바일 프로필 페이지의 끊김은 애니메이션 문제가 아니라 블러 자체가 너무 비쌌기 때문이었습니다. 모든 카드에
blur(32px) saturate(180%)가 걸려 있고, 이 페이지는 한 번에 7~8개의 유리 면이 보여서 스크롤할 때마다 그 뒤 픽셀을 전부 다시 샘플링했습니다 - 32px와 14px의 차이는 눈으로 거의 구분되지 않습니다 — 카드는 이미 .70~.78의 흰색 위에 있고 블러는 뒤 사진을 부드럽게 할 뿐입니다. 반면 샘플링 비용은 반지름의 제곱에 가깝게 늘어납니다. 채도도 180%에서 150%로 낮췄습니다. 이 페이지에 더 선명한 색이 필요한 곳은 없습니다
- 좁은 화면에서만 한 단계 낮췄습니다. 데스크톱은 1픽셀도 바뀌지 않았습니다. 순수한 성능 변경이라 눈에 띄지 않지만, 휴대폰 스크롤은 훨씬 부드러워집니다
- 눈에 띄지 않는 순수한 성능 개선입니다 —— 그래도 휴대폰에서 버벅인다면 어느 화면인지 알려주세요. 계속 살펴보겠습니다.
모바일 상태 페이지가 훨씬 짧아졌고, 차단 목록의 모든 행에 "QQ 미연동"이 붙지 않습니다
- 휴대폰에서는 각 서비스 행이 두세 줄로 접혔습니다. 원인은 명확했습니다. 그 행은 3열 그리드였고 최소 너비 합계가 504px인데, 휴대폰 뷰포트는 492px — 딱 맞지 않아 강제로 줄바꿈되었습니다. 좁은 화면에서는 2열로 바꾸고 비고를 독립된 줄로 만들어 페이지가 500px 이상 짧아졌습니다
- 패널 여백, 가용성 막대, 노드 카드 크기도 좁은 화면에 맞춰 한 단계 조였습니다. 이 변경은 상태 페이지 안의 스타일 블록에만 있으며 다른 페이지는 1픽셀도 바뀌지 않습니다
- 차단 목록에서는 모든 행의 플레이어 이름 아래에 똑같은 "QQ 미연동"이 붙어 있어 표가 망가진 것처럼 보였습니다. 확인해 보니 관리 화면의 "차단 페이지에서 QQ 숨기기" 스위치는 계산만 되고 한 번도 사용되지 않아 설정이 계속 죽어 있었습니다
- 이제 세 곳 모두 이 스위치를 따릅니다 — 목록 행, 아바타의 QQ 배지와 툴팁, 펼친 상세입니다. 차단 사유는 여전히 중국어가 하드코딩되어 있어(10개 언어 모두 중국어 표시) 따로 처리하겠습니다
배경 이미지가 움직입니다. 마우스 반대쪽으로 살짝 비켜납니다
- 이제 GIF 애니메이션 배경을 지원합니다. 지원하지 않았던 것이 아니라, 지원은 하되 움직임이 눌려 있었습니다 —— 모든 업로드가 WebP 로 다시 인코딩되는데 GIF 디코딩은 첫 프레임만 얻으므로 애니메이션이 정지 화면으로 도착했습니다
- 해법은 여러 프레임 GIF 를 다시 인코딩하지 않고 그대로 저장하는 것입니다. 움직임이 온전히 남습니다. 대신 애니메이션은 1920x1080 으로 축소되지 않습니다 (다시 인코딩하면 움직임이 죽으므로 의도된 절충입니다)
- 배경이 이제 마우스를 따라 움직입니다. 포인터가 움직이면 배경 레이어가 반대 방향으로 최대 10 픽셀 어긋나, 사진에 깊이가 있는 것처럼 보입니다
- 매 프레임 CSS 변수 하나만 바꾸므로 사진 자체는 한 번도 다시 그려지지 않습니다. 포인터가 멈추면 수렴하고 프레임 요청도 멈춰, 정지 상태의 비용은 이전과 같습니다. 마우스와 트랙패드에서만 켜지고, 동작 줄이기 설정에서는 완전히 꺼집니다
"뒤로" 버튼의 "十" 자: 네 번 살펴보니 원인은 주석 안에 있었습니다
- 그 "十" 자는 사라졌습니다. 정체는 작은 상자에서 배경을 샘플링할 때 브라우저가 위쪽 가장자리 중앙에 남기는 밝은 점입니다 —— 이 버튼은 58x35 에 불과해 점이 차지하는 비중이 눈에 띕니다. 카드는 면적이 커서 같은 점이 희석되어 보이지 않습니다
- 해법은 이 작은 버튼에서 배경 샘플링을 하지 않는 것입니다. 색을 8% 에서 14% 로 올려 투명감을 보완했습니다. 비용은 0 입니다 —— 굴절을 켜고 끈 이 버튼의 픽셀 차이는 0 / 1766688 (최대 채널 차 1)
- 정말 까다로운 것은 그다음 층이었습니다. 규칙은 맞는데 효과가 없었습니다. 주석 안에서 참고 CSS 를 그대로 인용하며
/* 6% */라고 썼는데 —— CSS 주석은 중첩되지 않습니다 —— 그*/가 바깥 주석을 일찍 닫고, 뒤따르는}가 규칙을 일찍 닫아 파서가 이후 규칙을 전부 삼켰습니다 - 이 잘못된 주석은 1.9.42 부터 있었으므로 세 버전 내내 버튼 유리의 안쪽 광채와 바깥 그림자가 빠져 있었습니다 —— 이번에 함께 돌아왔습니다. 교훈은 테스트로 남겼습니다: 주석을 일찍 끝내는 것을 주석에 쓰지 말 것 (같은 함정에 PHP 에서 이미 두 번 걸렸습니다)
마우스를 움직이면 번쩍이던 그 가로줄: 여덟 버전 만에, 원인은 호버 시 2px 들림이었습니다
- 원인은 하이라이트도, 유리 면적도 아니었습니다. 사이트 전체의 호버 규칙이었죠. 포인터가 카드를 지날 때마다 카드가 2px 올라가고, 카드에는 유리가 걸려 있어 움직이는 순간 브라우저가 뒤 영상을 다시 샘플링합니다. 그 샘플링은 타일로 잘리고, 타일 이음매가 바로 그 선이었습니다
- 그동안 다섯 번 헛짚었습니다(하이라이트를 배경에서 의사 요소로, transform으로, 실제 자식 요소로, 유리 밖으로, 그리고 전부 삭제). 모두 «될 것» 같았지만 원인은 건드리지 못했습니다
- 수정: 유리 면은 호버에서 움직이지 않고 테두리와 그림자로 반응합니다. 또한 폭 전체를 차지하던 유리 두 곳(내비게이션 바와 고정된 이름 줄)에서 블러를 제거했습니다. 넓은 면적 샘플링이 가장 비쌉니다
- 같은 배치에서 눈에 보이는 두 가지도 했습니다: 마우스 추적 하이라이트는 전부 삭제(너무 흔들림), 버튼 유리는 참고대로 세 층으로 재작성(굴절과 착색 분리)
관리자 로그인 버튼이 사라졌습니다: 지난 버전에서 제가 만든 명시도 버그
- v1.9.42 에 넣은 버튼 유리에 명시도 실수가 있었습니다: 기본이 되는 8% 흰색 착색 층은 "클래스 5개 + 요소 2개"인데, 주 버튼의 남색 그라데이션은 "클래스 3개"뿐 —— 그래서 기본 층이 항상 이겨 그라데이션이 전혀 그려지지 않았습니다. 게다가 같은 블록의
background: none이 주 버튼 자체의 그라데이션을 지웠습니다. 남색 바탕에 흰 글자가 흰 바탕에 흰 글자가 되어 버튼이 통째로 사라졌습니다 - 해결: 단색 브랜드 버튼(주 버튼)은 유리에 참여하지 않게 했습니다. 남색 바탕에 흰 글자인 버튼이고, 이 유리는 밝은 버튼에만 어울립니다. 주 버튼은 원래의 단색 스타일로 돌아왔습니다
- 같은 버그가 호버 시 밝아짐도 조용히 삼키고 있었습니다(이것도 "클래스 4개"라 5개에 졌습니다) —— 지난 버전의 "올리면 차이가 납니다"는 실제로 한 번도 적용된 적이 없었습니다. 이제는 적용됩니다
- 또 하나:
background: none이 로딩 중 버튼까지 지웠고 유리 층은 그것들을 제외하므로, 로딩 중 몇 초 동안 버튼이 완전히 투명했습니다. 이제 로딩 중 버튼도 배경이 돌아옵니다
마우스를 따라오던 빛을 삭제했습니다
- 무엇을 삭제했나: 카드 위에서 포인터를 따라다니던 차가운 파란 빛무리입니다. 변수, 스위치, 그 레이어, 스크립트까지 조각 하나 남기지 않고 전부 제거했습니다
- 왜 삭제했나: 같은 증상을 네 번 보고하셨습니다(「마우스를 움직이면 그 부분이 번쩍인다」 / 「가로줄이 하나 생긴다」). 저는 네 가지 방식으로 다시 작성했습니다(카드 배경에 그리기 → 의사 요소로 옮기기 → 실제 자식 요소로 만들기 → 페이지 전체의 독립 레이어로 옮기기). 모두 고쳐지지 않았습니다. 마지막 지시가 「마우스 추적 하이라이트는 삭제해 주세요, 너무 어지러워요」였기에 삭제했습니다
- 부수적인 효과: 삭제 후에는 포인터를 움직여도 어떤 재그리기도 일어나지 않습니다. 이것이 그 가로줄 퍼즐의 마지막 조각이기도 했습니다 —— 반투명 유리 요소 내부에서 매 프레임 무언가가 바뀌면 브라우저는 그 뒤의 화면을 계속 다시 계산합니다. 그 계산은 타일 단위로 이루어지므로 타일의 이음매가 바로 그 줄이었습니다
- 나머지는 그대로입니다: 유리의 투명도, 사진만 보이는 첫 화면, 고정되는 이름 줄, 버튼의 리퀴드 글라스 모두 그대로입니다. 마우스가 없는 방문자와 터치 사용자는 애초에 이 빛을 볼 수 없었으므로 그분들에게는 이번 업데이트가 무변화입니다
마우스가 요소를 넘어갈 때 빛이 튀지 않게 했고, 버튼의 리퀴드 글라스를 강화했습니다
- 마우스 추적 빛이 더 이상 "튀지" 않습니다: 예전에는 포인터가 한 카드에서 다른 카드로 옮겨가면 빛이 순간이동했습니다 —— 이전 것이 사라지고 새 것이 곧바로 나타났습니다. 지금은 이전 빛이 제자리에서 사라지고 새 빛이 포인터 위치에서 나타나며, 중심점도 부드럽게 이동합니다(전체 약 180ms)
- CSS transition을 쓰지 않은 이유:
transition은 선언을 통째로 바꾸는 규칙이라 "한 속성에만 전환을 붙이는" 방법이 없습니다. 그렇게 하려면 카드 등장 애니메이션과 호버 애니메이션까지 덮어쓰는 선택자가 필요하고, 스크롤 등장이 "페이드 + 떠오름"에서 뚝 끊기는 전환으로 바뀝니다. 그래서 스크립트가 숫자 하나(빛의 세기)를 매 프레임 완만하게 움직이고, 다 되면 멈추는 방식으로 바꿨습니다 - 버튼의 리퀴드 글라스를 강화했습니다: 굴절 변위를 14 → 50으로, 모따기 폭을 넓혔고, 실제로 "유리처럼" 보이게 하는 요소들 —— 상단의 거울 하이라이트, 좌우의 따뜻한/차가운 색분산 테두리, 안쪽 광택 —— 을 더했습니다. 동시에 블러를 1.5px에서 0.8px로 좁혔습니다(블러는 변위가 먹어야 할 디테일을 정확히 지워 버립니다)
- 솔직한 단서는 그대로입니다: Chrome / Edge에서만 그려집니다. 게다가 굴절은 굴절시킬 것이 있어야 보입니다 —— 흰 카드 위에서는 거의 0이고, 명암이 있는 배너 사진 위에서야 눈에 띕니다. 스위치는 관리자 「시스템 설정 → 외관 효과」에 있고 기본값은 꺼짐입니다
첫 화면은 사진만 보이고, 아래로 스크롤하면 내용이 올라오고, 버튼에 리퀴드 글래스가 들어갔습니다
- 첫 화면을 「히어로」로: 배너를 올린 플레이어 페이지는 들어가면 페이지 헤드와 배경 사진만 화면을 채우고 내용 영역은 전혀 표시되지 않습니다. 휠을 한 번 아래로 굴리면 내용 블록 전체가 페이드되며 올라오고(투과율은 28% 그대로), 맨 위로 돌아가면 다시 접힙니다. 반복해서 볼 수 있습니다
- 왜 감싸는 요소가 아니라 내용 블록 자체를 움직이는가: 조상에 「불투명도 1 미만」이 있으면 새로운 백드롭 루트가 생기고, 그 안의
backdrop-filter는 빈 배경을 샘플링해 흐린 유리가 완전히 깨집니다. 블록을 각각 페이드하면 그런 조상이 생기지 않습니다. 본문에서position: fixed인 것은 배경 레이어와 고정되는 이름 줄 두 개뿐이고 둘 다 이 집합 밖이라 이동해도 안전합니다 - 버튼의 리퀴드 글래스 굴절(관리자 「시스템 설정 → 외관 효과」에 스위치 추가, 기본 꺼짐): 버튼 가장자리가 두꺼운 유리처럼 뒤의 무늬를 조금 휘게 만듭니다. SVG 변위 맵 +
backdrop-filter를 쓰며, 맵은 페이지를 열 때 canvas 로 한 번만 그립니다. 프레임마다 도는 스크립트는 없습니다 - Chrome / Edge 에서만 그려집니다: Safari 와 Firefox 는 이 CSS 기능을 지원하지 않고 조용히 실패합니다(오류도 없고 그려지지도 않음). 그 경우 지금까지의 흐린 유리로 자동 복귀합니다. 그리고 굴절은 굴절할 대상이 있어야 보입니다 —— 흰 카드처럼 평평한 면 위에서는 거의 0이고, 배너 사진처럼 명암이 있는 곳에서만 눈에 띕니다
카드가 조금 더 비치고, 마우스 광이 작아지고, 고정될 때 미끄러져 들어옵니다
- 무엇이 바뀌었나: 배너를 올린 페이지에서 큰 카드의 투과율이 5~10%에서 약 28%로 올라갔고(사진이 보입니다), 통계 칸과 레이더 카드도 같은 만큼 옅어졌습니다
- 통계 칸 한 줄이 두 가지 색으로 보인 이유: 마우스 추적 광은 반경 320px, alpha .22의 차가운 파란 얼룩이었습니다. 카드 왼쪽 절반을 덮으면 첫 칸은 rgb(189,193,197), 덮이지 않는 네 번째 칸은 rgb(245,246,247)로 측정 —— 같은 줄에서 56단계 차이입니다. 지금은 반경 200px, alpha .10으로 줄였고, 칸은 더 이상 단독으로 빛나지 않습니다(항상 가장 바깥 카드가 빛납니다). 같은 줄의 실측 차이는 3단계입니다
- 「깜빡임」의 나머지 절반: 카드 여백에서 칸으로 포인터를 옮기면 스크립트의 대상이 「카드 전체」와 「그 칸」 사이를 오가며 광이 큰 면에서 작은 점으로 순간 이동했습니다. 칸을 광 대상에서 빼면서 이 이동이 사라졌습니다
- 고정될 때 미끄러지는 동작 추가: 이름 줄이 내비게이션 아래에서 10px 미끄러지며 180ms 동안 페이드인합니다. 「동작 줄이기」가 켜져 있으면 이 애니메이션과 버튼 스프링이 꺼집니다(마우스 추적 광은 유지)
아래로 스크롤하면 이름 줄이 내비게이션 아래에 고정됩니다
- 무엇이 바뀌었나: 배너를 올린 플레이어 페이지에서 아래로 스크롤하면 「아바타 + 이름 + 레벨 + 배지」 줄이 사이트 내비게이션 바로 아래에 고정되고 카드가 그 밑으로 지나갑니다. 서명은 이 줄에 없고 이전처럼 스크롤되어 사라지며, 「뒤로」 버튼은 이름과 함께 고정됩니다
- `position: sticky`를 쓸 수 없는 이유: 이 줄의 부모는
.cdr-container이고 높이가 페이지 헤드만큼밖에 되지 않습니다. 그래서 sticky의 이동 범위가 그 안에 갇혀 헤드를 지나면 함께 사라집니다. 그래서position: fixed로 바꾸고, 스크립트로 원래 자리에 같은 높이의 자리표시자를 넣었습니다(fixed는 문서 흐름에서 벗어나므로 넣지 않으면 고정되는 순간 페이지 전체가 86px 튀어 오릅니다) - 고정되면 글자색을 뒤집어야 합니다: 이 줄은 평소 배너 사진 위에 얹히는 흰 글자이지만, 고정되면 아래가 밝은 유리면이 됩니다. 흰 바탕에 흰 글자는 보이지 않습니다(실측 빌드에서는 아바타와 「온라인」 배지는 보이는데 이름 칸만 비어 있었습니다). 그래서 고정 상태에서는 이름·레벨·배지를 유리면용 잉크 색으로 바꿉니다
- 배너를 올린 플레이어 페이지에만 적용됩니다 —— 올리지 않은 페이지(예:
/players/zlc)는 단 1바이트도 건드리지 않았습니다
포인터 하이라이트가 빛나야 할 한 면만 비춥니다
- 원인은 사용자 정의 속성이 상속된다는 점이었습니다. 스크립트가 포인터 아래의 카드에
.is-lit을 붙이면--glass-spot이 상속 체인을 따라 그 카드 안의 모든.stat-mini로 전달됩니다 —— 스위치 하나가 일곱여덟 개의 빛나는 면이 되었습니다. 의뢰하신 「마우스는 다른 곳에 있는데 왜 전부 켜지나요」가 바로 이것입니다. 증거: 프로브 노란 막대에spot=카운터를 추가했습니다. 이것은.is-lit의 개수가 아니라 계산된--glass-spot이 투명이 아닌 요소의 수를 셉니다 —— 수정 전에는 포인터를 카드 제목 여백에 두면lit=1 spot=8/27이었습니다 - 수정 내용: 각 유리 면이 스스로
--glass-spot을transparent로 되돌려 상속 체인을 거기서 끊습니다. 포인터가 실제로 올라간 면만 스크립트가.is-lit을 붙입니다. 수정 후spot=1/27 - 함께 고친 두 번째 함정: 그 리셋은
.is-lit규칙과 특이도가 같고 뒤에 쓰여 있습니다 —— 「나중 것이 이긴다」에 따라 순수한body.cdr-body .is-lit은 통째로 덮여 하이라이트가 완전히 사라집니다(실측lit=1 spot=0/27). 그래서.is-lit규칙은 네 선택자를 모두 나열해 특이도를 올려야 합니다. 이 단계를 빠뜨리면 「너무 많이 켜짐」에서 곧바로 「전혀 안 켜짐」이 됩니다 - 좌표도
requestAnimationFrame만 기다리지 않고 새 요소에 들어갈 때 동기적으로 한 번 쓰도록 바꿨습니다. 그렇지 않으면 첫 프레임에 좌표가 없어 빛이 카드 가운데에 잠깐 나타났다가 포인터로 튑니다. 이제 하나의.is-lit이 하나의 빛나는 면입니다 —— 포인터가 있는 곳이 곧 빛나는 곳입니다
리퀴드 글래스에 손맛 두 가지 추가: 포인터 추적 하이라이트와 버튼 스프링
- 포인터 추적 하이라이트: 포인터가 유리 표면 위를 움직이면 차가운 청백색 빛 한 덩어리가 포인터를 따라갑니다 —— 포인터 아래에 있는 카드만 밝아지고 나머지는 그대로입니다. 카드 배경에 그린
radial-gradient한 겹이며, 스크립트가 실시간으로 쓰는--glass-mx/--glass-my를 읽습니다. 노드를 늘리지 않고, 스태킹 컨텍스트도 건드리지 않으며, 카드의 블러도 방해하지 않습니다. 라이트 테마에서 쓰는 것은 흰색이 아니라 차가운 청백색입니다: 흰 카드(rgb 229~245)에 흰빛을 더해 봐야 최대 6단계밖에 올라가지 않아 눈에 띄지 않습니다 - 페이지 헤드 사진 띠를 높임:
.page-head의 아래 패딩을 30px에서 160px로 (전체 약 317px). 흰 카드 줄이 통째로 내려가 아바타·이름·레벨 배지가 배너 이미지 위에 올라갑니다 —— 이것이 「배경을 더 보여주기」입니다. 높이만 키우고 내용은 늘리지 않았습니다. 작은 화면에서는 72px로 줄어듭니다. 내용을 통째로 내리지 않은 이유는 위쪽의 가장 어두운 마스크가 무의미해져 하얗게 바뀐 줄이 읽기 어려워지기 때문입니다 - 버튼 스프링: 누르면 .955까지 줄고, 놓으면
cubic-bezier(.34, 1.56, .64, 1)로 돌아옵니다 —— 두 번째 제어점의 y = 1.56 > 1이라 곡선이 목표를 지나쳤다가 되돌아옵니다. 그 초과분이 「튕김」입니다. 순수 CSS이며 JS도 물리 엔진도 쓰지 않습니다 prefers-reduced-motion폴백은 이제 「자율적 움직임」만 줄입니다: 버튼 스프링(놓은 뒤 스스로 튕기는 움직임)은 평범한 짧은 트랜지션으로 바뀌고 누르는 피드백은 남습니다. 반면 포인터 하이라이트는 유지합니다 —— 포인터 추적은 직접 조작이고, 움직이는 것은 포인터 자체이지 페이지가 아닙니다. 의뢰하신 리퀴드 글래스 자료에도 「displacement를 빼고 blur + 하이라이트는 남긴다」고 적혀 있습니다. 이 머신에서 하이라이트를 볼 수 있는 유일한 방법이기도 합니다: Windows 애니메이션 효과가 꺼져 있어(MinAnimate = 0/DragFullWindows = 0/VisualFXSetting = 2) 브라우저가 이를 그대로reduce로 보고합니다 —— 함께 꺼 버리면 영영 볼 수 없습니다- 위 내용은 모두 배너를 올린 프로필에만 적용됩니다(블록은 여전히
$pubBgCss !== ''안에 있습니다). 나머지 페이지 —— 배너 없는 프로필 포함 —— 는 1바이트도 바뀌지 않았습니다. 테스트 스위트에는 이를 지키는 assertion이 4개 있습니다 - 솔직히 한 가지: 둘 다 「손맛」 효과라 정지 화면에서는 알 수 없습니다 —— 실제로 포인터를 움직여 보고 실제로 버튼을 눌러 보세요. 겸사겸사 Windows 애니메이션을 다시 켜 두시길 권합니다(설정 → 접근성 → 시각 효과 → 애니메이션 효과). 그렇지 않으면 브라우저가 모든 사이트에 「사용자가 동작 줄이기를 요청함」이라고 계속 알립니다
리퀴드 글래스 재작업: 스크롤해도 카드 색이 변하지 않습니다
- 원인은 렌더링 엔진이 아닙니다. 프로필 페이지는 배경 이미지를
body에background-attachment: fixed로 걸어 두었습니다. 이 선언은 "이미지를 뷰포트에 고정한다"는 뜻이고, 독립된 합성 레이어가 아닙니다 —— 브라우저는 카드의backdrop-filter를 위해 매 프레임 다시 샘플링해야 하며, 샘플링 범위와 스크롤 위치가 어긋나면 색이 튑니다. 게다가 카드는 움직이고 이미지는 멈춰 있으니 반투명 카드가 사진 전체를 훑습니다. 이 둘이 겹쳐서 "어떨 땐 진하고 어떨 땐 옅고 어떨 땐 정상"이 되었습니다 - 스크롤 중 깜빡임 해결: 배경을
body에서 전용position: fixed레이어(body::before,z-index: -1,pointer-events: none,will-change: transform)로 옮겼습니다. 전용 레이어는 합성 레이어로 승격될 수 있어 스크롤 내내 샘플링 원본이 이미 합성된 하나의 비트맵이 됩니다 - 정지 상태의 농도 차이 해결: 카드가 스스로 색을 정합니다. 근거는 실측에서 뽑은 선형 외삽입니다 —— 변동 ≈ (1−alpha)×53 이므로 4단계 이내로 묶으려면 alpha ≥ .925가 필요합니다. 큰 카드는 상단 72% → 95%, 하단 60% → 90%, 통계 칩은 80%/70% → 97%/94%, 레이더 카드는 76%/66% → 96%/92%입니다. 사진은 5~10% 그대로 비치며, 그게 유리 색감의 근원입니다
- 유리는 이제 다층 재질입니다: 노이즈 층 + 세로 그라데이션 + 가장자리 스침 하이라이트 + 내부 굴절 베벨. 모든 파라미터는 변수로 노출했습니다(
--glass-blur--glass-sat--glass-highlight--glass-displacement--glass-noise). 솔직히 한 가지: 진짜 SVGfeDisplacementMap굴절은 불가능합니다 —— Chromium과 Safari의backdrop-filter는 필터 함수만 받고url(#svgfilter)는 받지 않기 때문에, 내부 굴절 베벨로 그 느낌을 근사했습니다 - 결과: 같은 위치에서 스크롤에 따른 차이는 3~6단계(이전 버전 18단계, 최초 100단계), 전체 밝기는 229~245, 다크 테마는 1~3단계입니다. 아울러 유리 표면의
text-shadow흰 번짐을 제거했습니다 —— 카드가 안정된 지금은 도움이 되지 않고 12px 글자의 획만 먹습니다 - 「능력 레이더 글자가 잘 안 보인다」도 함께 수정: 투명도는 전혀 건드리지 않았습니다. 「전체 평균」 보조 라벨을 .76rem에서 본행과 같은 .84rem으로, 흐린 회색에서 본문 색으로, 자간 대신 약간의 굵기를 더했습니다. 진짜 원인은 12px과 13px 한자가 Windows에서 다른 안티에일리어싱 단계를 타는 것입니다. 이상은 배너를 올린 프로필에만 영향을 주며, 배너 없는 페이지는 1바이트도 바뀌지 않았습니다
스크롤할 때 카드 밝기가 달라지던 문제를 고쳤습니다
- 원인은 렌더링 버그가 아닙니다. 프로필 페이지의 배경 이미지에
background-attachment: fixed를 써서 이미지가 뷰포트에 고정되고 카드만 스크롤됩니다 —— 그래서 반투명 카드가 사진 전체를 훑게 되어, 어두운 하늘 위에서는 어둡게, 밝은 건물 위에서는 하얗게 뜹니다. 같은 카드가 스크롤 위치에 따라 rgb(99,107,125)에서 rgb(201,197,200)까지 100단계나 흔들렸습니다 - 해결책은 유리 자체를 한 단계 진하게 만드는 것입니다 —— 투명도와 안정성을 함께 지킬 수 있는 유일한 손잡이는 alpha입니다: 큰 카드는 상단 56% → 72%, 하단 34% → 60%, 통계 칩은 76%/60% → 80%/70%, 레이더 카드는 70%/52% → 76%/66%. 밀도 순서(큰 카드가 가장 옅고 칩이 가장 진함)는 그대로입니다
- 결과: 같은 위치에서 스크롤에 따른 차이가 14단계(기존 47단계)로 줄고, 전체 밝기는 163~206에 자리 잡았습니다 —— 「회색으로 가라앉던」 모습에서 뚜렷한 밝은 반투명 유리로. 다크 테마도 같이 진하게 했고(82%/72% 단계), 남은 흔들림은 4~8단계입니다
- 배너 이미지를 올린 프로필에만 영향을 줍니다. 배너가 없는 페이지(예:
/players/zlc)는 이 유리 스타일을 아예 출력하지 않으므로 단 1바이트도 바뀌지 않았습니다
「하루 평균 86시간」을 고쳤습니다
- 예전 계산식은 「누적 플레이 시간 ÷ 세션 기록이 있는 일수」였습니다 —— 분자는 10년치인데 분모는 2026-09-12 이후 11일뿐이었습니다. 서로 다른 시대를 나눈 결과가 「하루 86시간」입니다. 분자가 틀린 게 아니라 분모가 대부분 빠져 있었습니다
- 분모를 평생 활성 일수로 바꿨습니다: 채팅 기록, 업적 해금, 접속 세션 세 표를 날짜 단위로 중복 제거해 합칩니다 —— 이 계정은 423일. 941시간 ÷ 423일 = 하루 2시간, 드디어 자릿수가 맞습니다
- 덤으로 두 곳 더 고쳤습니다: 로그인 횟수를 평생 누적으로 (1,655회, 예전에는 오래된 플레이어 929명이 0으로 표시됐습니다), 최장 단일 플레이 시간에 「평균 21분인데 최장 0시간」 같은 불가능한 조합이 나오지 않습니다
- 업적 세 개도 함께 풀렸습니다: 활성 7 / 30 / 100일 은 같은 분모 때문에 영원히 달성할 수 없었습니다 —— 서버 전체 세션 기록이 최대 16일뿐이라 기준에 닿지 못했습니다
- 보안 감사(1): 실제로 악용 가능한 부분을 수정 —— 업로드한 SVG 안에서 이스케이프로 외부 링크를 숨길 수 있었고(아바타로 방문자 IP 유출), 관리 화면에서 uploads 밖의 파일을 삭제할 수 있었고, 로그인에 오픈 리다이렉트가 있었고, 백업 압축 안의 스크립트가 웹셸로 설치될 수 있었고, 로컬 디버그 스크립트 두 개가 운영 서버에서 접근 가능했습니다
- 보안 감사(2): API와 관리 화면 강화 —— 빈 목록으로 서버 전체 차단을 한 번에 해제할 수 없게 되었습니다, 보고에 행 수 상한, 화이트리스트 이름 검증, 채팅 한 건 실패로 전체 배치가 죽지 않음, 데이터베이스 오류 상세를 방문자에게 반환하지 않음
레이더 칸의 작은 글씨가 이제 읽힙니다
- 「능력 레이더」 칸의 작은 글씨(축 이름, 오른쪽 수치, 「전체 평균」 줄, 아래 설명)는 34% 유리 위에 있었고, 가장 어두운 부분의 대비는 3.3 : 1 에 불과했습니다 —— 작은 글씨에 필요한 4.5 : 1 보다 낮습니다. 이것이 말씀하신 「읽기 어렵다」이고, 지난 릴리스에서 제가 놓친 부분입니다
- 두 가지를 고쳤습니다: 보조 글자 색을 한 단계 더 진하게 했고, 동시에 「능력 레이더」 카드 전체에 전용 바탕을 주었습니다 —— 이 카드는 거의 전부가 작은 글씨라, 큰 카드와 같은 투명도를 공유해서는 안 됩니다
- 큰 카드는 그대로입니다: 스킨 카드, 업적 카드, 푸터는 여전히 34% 이고 뒤의 이미지가 그대로 비칩니다. 통계 칸의 진한 바탕도 변하지 않았습니다
- 다크 테마에도 같은 처리를 했습니다. 그리고 이것 역시 배너를 올린 적이 있는 페이지에서만 일어납니다 —— 배너가 없는 페이지는 1 픽셀도 움직이지 않았습니다
한 단계 더 투명하게, 글자는 그대로 읽히게
- 프로필: 위쪽을 62% → 56%, 아래쪽을 40% → 34% 로 낮췄습니다. 이제 뒤의 이미지가 정말로 보입니다 —— 탑 조명의 세로줄, 지평선, 멀리 있는 블록 윤곽이 비쳐 보이고, 더 이상 반투명 판처럼 보이지 않습니다
- 「이미지가 보인다」와 「글자가 읽힌다」는 원래 충돌합니다. 그래서 나눠서 처리했습니다. 통계 칸(「누적 플레이 시간」「로그인 횟수」처럼 작은 글씨가 모인 곳)만 더 진한 전용 바탕(76% → 60%)을 쓰고, 큰 카드는 아주 투명하게 유지합니다. 작은 것은 진하게, 큰 것은 투명하게 —— 애플의 층위와 반대이며 의도한 선택입니다
- 글자에는 아주 옅은 같은 방향의 후광(
text-shadow)을 더했습니다 —— 바탕이 밝으면 보이지 않고 어두울 때만 드러나므로, 글자가 자기만의 국소 바탕을 갖는 셈입니다. 그래서 34%까지 내려도 안전합니다 - 다크 테마에는 대응하는 어두운 유리와 어두운 후광을 넣었습니다. 그리고 이것 역시 배너를 올린 적이 있는 페이지에서만 일어납니다 —— 배너가 없는 페이지는 1 픽셀도 움직이지 않았습니다
유리가 더 투명해지고, 더 애플스러워졌습니다
- 프로필: 더 이상 균일한 「흰색 68%」가 아니라 위는 밝고 아래는 비치는 세로 그라데이션(62% → 40%)입니다. 가우시안 블러는 22px → 32px, 여기에
saturate(180%)와brightness(1.12)를 더했습니다. 애플식 유리는 뒤의 색을 끌어올리는 방식이고, 흐리게만 하면 그냥 반투명 유리에 그칩니다 - 유리 가장자리에 굴절 테두리가 생겼습니다 —— 위쪽 1px 스치는 하이라이트와 안쪽을 한 바퀴 도는 아주 옅은 선입니다. 그림자도 두 겹(바닥에 닿는 접촉 그림자 + 넓게 퍼지는 환경 그림자)으로 나눠, 종이처럼 붙은 게 아니라 이미지 위에 떠 보이게 했습니다
- 더 투명하게 만들고 나서야 드러난 문제도 고쳤습니다. 「누적 플레이 시간」「로그인 횟수」 같은 보조 라벨이 거의 보이지 않았습니다 —— 쓰던 회색이 반투명 흰색 위에서 대비 2.5:1 밖에 안 됐습니다. 유리 면 안쪽만 더 어두운 색으로 바꾸고, 배너 위에 직접 놓인 작은 글씨는 그대로 두었습니다
- 다크 테마에도 어두운 유리 값을 맞춰 넣었습니다. 그리고 이 변화는 여전히 배너를 올린 적이 있는 페이지에서만 일어납니다 —— 배너가 없는 캐릭터 페이지는 1 픽셀도 움직이지 않았습니다
프로필이 「리퀴드 글라스」가 되었습니다
- 카드, 스킨 패널, 6개의 통계 타일, 그리고 푸터 전체가 반투명 유리(흰색 68% + 22px 가우시안 블러)가 되어 뒤의 배너가 흐려지며 비칩니다. 글자는 어두운 색 그대로라 이미지 위에서도 잘 보입니다. 다크 테마에서는 어두운 유리로 바뀝니다
- 업적 카드 제목줄에 「모두 접기 / 모두 펼치기」가 생겼습니다. 8개 분류를 한 번에 접을 수 있어 98개 배지 벽 맨 아래까지 내려갈 필요가 없습니다
- 오른쪽 아래 관리 서랍에 네 번째 탭 「아바타 / 배경」이 추가되었습니다. 검수 대기 중인 이미지를 거기서 승인하거나 거부할 수 있습니다. 관리자 페이지의 「플레이어와 데이터 → 아바타 / 배경」과 같은 데이터라 어디서 검수하든 동일합니다
- 이 변화는 배너를 올린 적이 있는 페이지에서만 일어납니다 —— 배너가 없는 캐릭터 페이지는 1 픽셀도 움직이지 않았습니다(변경 전후 스크린샷을 픽셀 단위로 비교했습니다)
- 유리를 쓸 수 없을 때(구형 브라우저)는 기존의 불투명 카드로 되돌아갑니다. 다만 시스템의 「투명도 줄이기」 설정은 일부러 따르지 않았습니다 —— 사이트 관리자 본인의 Windows 에서 투명 효과가 꺼져 있어, 따르면 본인이 유리를 전혀 볼 수 없게 되기 때문입니다
프로필 페이지가 화면을 가득 채웁니다
- 배경 —— 배너를 올린 적이 있다면, 캐릭터 페이지가 그 이미지로 브라우저 창 전체를 채우고, 아바타·닉네임·레벨·위치가 그 위에 놓입니다. 배너가 없는 페이지는 1 픽셀도 바뀌지 않습니다
- 위치 —— 개인 센터 「개인화」에서 국가(중국을 고르면 성/도까지)를 선택할 수 있습니다. 설정하면 프로필의 「오프라인 / 순위 #8」 옆에 표시되고, 선택하지 않으면 아무것도 나오지 않습니다
- 플레이어 목록의 앞머리 아이콘은 이제 직접 올린 이미지를 우선 사용합니다. 예전에는 항상 해외 호스트에서 공식 스킨 아바타를 받아왔고 여기서는 거의 불러오지 못해 늘 알록달록한 글자 타일만 보였습니다
- 올린 아바타와 배경은 검수를 거친 뒤에 페이지에 반영됩니다. 검수 대기 중에는 이전 이미지가 계속 표시되어 「절반만 새로운」 상태가 되지 않습니다. 되돌리고 싶을 때의 「제거」는 즉시 적용됩니다
- 업로드 상한을 넓혔습니다: 배너 최대 3840×2160(기존 1920×1080), 그리고 SVG 를 지원 —— SVG 는 안전을 위해 정제하며 스크립트·외부 참조·내장 HTML 은 모두 제거합니다
팝업이 새로워졌습니다 · 예전 차단도 되돌렸습니다
- 사이트 전체 16 곳의 팝업을 사이트 자체 다이얼로그로 통일했습니다. 예전에는 브라우저 자체 창이라 위에 「cloudridge.cn 표시」가 붙었고, 모바일에서는 특히 어색했으며 사이트 스타일도 전혀 따르지 않았습니다. 이제 제목·본문·버튼을 모두 사이트가 제어하고, 위험한 작업은 빨간 버튼, Esc 취소, Enter 확인, 닫으면 방금 누른 버튼으로 초점이 돌아옵니다
- 예전 서버가 문을 닫을 때까지 차단되어 있던 8명 + 3개 IP 를 차단 목록에 복원했습니다. 공개 페이지는 이제 12명 + 7개 IP 입니다. 이름·IP·차단 시각·처리자는 모두 당시 기록 그대로 옮겼고 지어낸 값은 없습니다. 한 가지 덧붙이면, 모드는 서버의 차단 파일을 읽어서 보고할 뿐이고 게임 안에서 실제로 막는 것은 서버 목록입니다 —— 반영에는 서버 재로드가 필요합니다
그 「알 수 없는 플레이어」는 같은 사람이었습니다
- 플레이어 목록에는 줄곧 「未知玩家 · 000000」 라는 행이 있어, 집계되지 않은 네 번째 사람처럼 보였습니다. 원인을 밝혔습니다: 예전 서버의 floodgate 가 베드락 플레이어에게 발급한 UUID 는
00000000-0000-0000-0009-…라는 자리표시자 영역이었고, 모드는 「이름」만 보고할 수 있었는데 —— 그 순간의 이름이 마침 그 UUID 였습니다. 실체는birdzhonghuifei가 베드락으로 놀던 기간이며, 본인 행으로 병합했습니다 - 병합 규칙: 카운트 항목(플레이 시간, 로그인 횟수, 사망, 채굴, 설치, 이동 거리)은 더하고, 진척도는 합집합, 최초 접속은 더 이른 쪽, 마지막 접속은 더 늦은 쪽을 씁니다 —— 시각은 절대 더하면 안 됩니다. 그 행에 붙어 있던 배지 9개는 본인이 이미 같은 것을 가지고 있어 중복분은 버렸습니다. 순위표가 한 줄 줄었고
birdzhonghuifei의 숫자는 더 완전해졌습니다
달력에서 연/월을 바로 고를 수 있습니다
- 달력 팝업 왼쪽 위에 「연」 「월」 드롭다운이 생겼습니다. 연도를 고르고 월을 고르면 두 번 만에 아무 달로나 이동합니다 ——
‹를 눌러 한 달씩 넘길 필요가 없습니다. 앞뒤 버튼과 「오늘」은 그대로이고, 넘길 때 드롭다운도 함께 따라옵니다 - 정렬 문제도 함께 고쳤습니다: 「최초 접속」으로 정렬하면 날짜를 알 수 없는 행이 1~4위로 올라와 순위표 전체가 망가진 것처럼 보였습니다 —— 「값이 없음」은 「가장 이름」과 다릅니다. 이제 이런 행은 오름차순이든 내림차순이든 항상 맨 아래로 내려갑니다
채팅 기록 229건 추가 복원
TrChat플러그인 로그는 2023-09-01부터만 기록되어 2024년 하반기 일부가 비어 있었습니다. 한 번도 가져오지 않았던 예전 서버의CoreProtect데이터베이스 3개에서 2024-07~2024-12 채팅 34,417건을 찾아냈고, 중복을 제거한 뒤 229건의 발언을 복원했습니다(37일에 걸쳐 있으며 가장 이른 것은 2024-07-11)- 중복 판정은 "같은 플레이어가 ±5초 안에 같은 말을 했다"를 기준으로 합니다 —— 같은 발언이
TrChat과CoreProtect에 각각 기록되고 타임스탬프는 보통 1초 차이, 때로는 분 경계를 넘습니다. 분 단위로 비교하면 그 수십 건이 새 발언으로 잘못 다시 들어옵니다 - 이 37일이 원래 텅 비어 있던 것은 아닙니다 —— 당시
TrChat이 대부분의 대화를 기록했고, 되찾은 것은 빠졌던 몇 줄입니다. 2024년 7~12월의 이 날짜를 열면 당시 대화가 더 온전하게 보입니다
계정 안의 부캐를 펼칠 수 있습니다
- 플레이어 목록에서 캐릭터를 둘 이상 가진 행 앞에 화살표가 생겼습니다. 기본은 접힘이고, 한 번 누르면 각 캐릭터가 개별 행으로 펼쳐져 각자의 누적 플레이 시간, 로그인 횟수, 마지막 접속, 상태가 그대로 보입니다(상위 행은 합계, 하위 행은 개별 값). 다시 누르면 접힙니다
- 부캐 이름으로 검색하면 그 행이 자동으로 펼쳐집니다 ——
Winter를 검색하면Fruity_oxygen옆에서 자기 수치를 바로 볼 수 있어, 누구 아래에 숨어 있는지 짐작할 필요가 없습니다. 오래된 버그도 함께 고쳤습니다: 플레이어 이름으로 정렬하면 머리글이 본문보다 한 열 적어 표 전체가 어긋났습니다
플레이어 순위를 계정 단위로 · 3년치 채팅 복원
- 「플레이어 목록」이 이제 한 줄 = 사이트 계정 하나입니다. 같은 계정에 속한 캐릭터는 데이터를 합산합니다(
Fruity_oxygen과Winter가 한 줄,ElfinLettuc과Faithe가 한 줄). 계정을 연결한 적 없는 사람은 각자 한 줄입니다. 이름 옆의 「N개 캐릭터」 배지로 누가 어디에 합쳐졌는지 볼 수 있습니다 — 예전에는 본캐와 부캐가 다른 줄로 갈라져 부캐의 시간이 헛된 것처럼 보였습니다 - 계정 페이지(
/accounts/번호)를 새로 만들었습니다. 계정에 속한 캐릭터를 하나씩 나열해 각자의 플레이 시간과 로그인 횟수를 보여주고, 위쪽 요약 수치는 이들을 더한 값입니다. 이 페이지는 완전 공개라 로그인 없이도 볼 수 있습니다. 존재하지 않는 계정 번호를 가리키던 잘못된 데이터 한 건도 함께 정리했습니다 - 줄곧 자리표시자 값으로 남아 있던 세 필드를 채웠습니다: 마지막 접속(캐릭터 929개가 모두 2026-09-13으로 적혀 있었습니다), 최초 접속(936개가 똑같이 가짜 2026-09-13), 로그인 횟수(사이트 전체 합계가 291뿐이어서 928명이 「—」로 표시). 마지막 접속은 서버 저장 파일의 수정 시각에서, 최초 접속과 로그인 횟수는 역대 서버 로그에서 가져왔습니다. 이제
wwwsum은 2024-08-22,7Strawberry는 2024-03-07로 정확히 표시되고, 로그인 합계는 291에서 21,766이 되었습니다 - 채팅창이 개설 이래의 기록을 모두 되찾았습니다. 2022-12-16의 첫 줄부터 2026-09-25에 모드의 실시간 보고가 이어받기 전까지 174,457건의 발언과 입·퇴장 기록(발언 124,024, 입장 25,424, 퇴장 25,009)입니다. 예전에는 모드를 설치한 며칠치만 있었지만, 이제 웹 지도에서 아무 날이나 눌러도 그날의 대화를 볼 수 있습니다
- 달력은 최근 400일만 클릭할 수 있었기 때문에 복원한 729일 중 492일은 열리지 않았습니다 — 복원했는데 볼 수 없는 상태였죠. 이제 기록이 있는 날은 모두 클릭할 수 있습니다. 또한 「등록 플레이어」 숫자가 홈과 목록에서 2만큼 달랐는데(791 대 789) 계정 기준으로 통일했습니다
날짜는 해당 버전의 공개일이에요. 새로운 문제를 발견하면 게시판에 알려 주시거나 서버 관리자에게 직접 연락해 주세요.