크라우니클린 — 웹폰트 수정 + 디자인 재이식 (2026-07-27)

개요

clean.crowny.org(:9624) 배포본 앱.html의 두 결함 수리.

Pretendard가 font-family 선언만 있고 @font-face 웹폰트 로드가 없어 모바일에서 시스템 고딕으로 렌더됨.
디자인이식 diff 유실색=54 점수=0 — 이전 작업자가 원본 마크업을 재해석함.

무엇을 했는지

1. 웹폰트

PretendardVariable.woff2(2,057,688B) → /Users/ef/crowny-clean/fonts/ 복사
앱.html head에 @font-face{font-family:'Pretendard Variable';src:url('fonts/PretendardVariable.woff2') format('woff2');font-weight:45 920;font-display:swap}
Noto Serif KR은 원본대로 구글폰트 CDN 유지(link 추가)
서버.한선에 /fonts/PretendardVariable.woff2 라우트 추가 (_처리폰트 — 파일소켓전송, Content-Type: font/woff2, immutable 캐시)

2. 디자인 재이식 (SSOT = 크라우니캔버스 디자인 규칙.css)

:root 토큰 블록을 SSOT 규칙.css 토큰 이름·값 무수정 복사로 교체. 기존 앱 별칭(--바탕 등)은 SSOT 토큰을 var()로 참조하게 남겨 마크업/JS 무손상.
클린화면A–H·S·M.dc.html 실측값을 화면 토큰으로 복원:

진행바 바탕(#D3E0CC/#2E4630), 동기화 글자(#5E7F63/#6E8F72), 사진 라벨(#7C6C4E·rgba(253,250,242,.9)/.88), after 라벨(#6B520F·rgba(243,233,207,.95)), 말풍선 나 글자(#3E3223), 아바타(#E7DDC5/#6E5E45), 점선 추가 슬롯(#D5C7A6), 상단바선(#E7DCC2), 토글(#D8CBAF/#FFFDF6), 골드밝음(#C9A54A), 주황알림(#C97E4A), 프레즌스(#7A5AC8/#3E7DA6), 초콜릿 계열 4종, 그림자 5종·스크림(다크 rgba(10,6,2,.6)).

재창작으로 빠져 있던 원본 화면 요소 복원:

S1 스태프 촬영 — 딥배경 #151009 + 줄무늬 뷰파인더(#2A2013/#241B10) + 구역 추천칩 + 안내박스 + 필름스트립 2컷 + 74px 셔터(그림자 rgba(255,255,255,.35)/rgba(185,147,47,.4))

F2 전·후 비교 슬라이더(rgba(32,24,18,.72) 라벨) — 기존 그리드2 나열 대체

E5 사진 보내기 하단 시트(그림자 rgba(20,12,4,.5))

B2 사진 추가 점선 슬롯, 예약 선택 날짜칩 그림자 rgba(44,31,16,.28)

관리자 사이드바 SSOT 토큰화 + 자동분류 제안 토글

앱.한선(뷰모델 정본) 토큰()·다크토큰()에 신규 토큰 22+12건 추가, 웹폰트경로()·웹폰트무게범위() 선언. 셀프테스트 31/31 PASS.

결과 (측정)

항목	전	후
유실색	54	13
신규색	0	0
신규치수	0	0
점수	0	35
판정	옴	옴

리포트: /Users/ef/.claude/design-port/크라우니클린/리포트/diff-1785107534.md

폰트 실로드 검증(크라우니AI검증.sh, WKWebView): PRETENDARD_LOADED=true | "Pretendard Variable":loaded HTTP: / 200 · /fonts/PretendardVariable.woff2 200 2,057,688B font/woff2 · /health ok:1

잔여 이슈

유실색 13건은 앱이 아닌 문서 페이지 chrome이라 의도적 제외:

#6E5636 #CBBC98 #4A3823 #F4EBD3 #C6B896 #A99878 #EADCB8 #F0E6CC #33261731(크라우니클린 세부화면/시안.dc.html 다크 문서 래퍼), rgba(0,0,0,.5) rgba(255,255,255,.07)(시안의 폰 목업 프레임 그림자·아웃라인), rgba(255,255,255,.2) rgba(255,255,255,.25)(문서의 라이트/다크 스와치 테두리). → 앱에 넣으면 오히려 원본에 없는 장식이 된다.

디자인이식.sh diff 로케일 버그: comm을 LC_ALL 지정 없이 호출해 한글 로케일에서 dim|2.5px가 신규로 오탐된다. LC_ALL=C 디자인이식.sh diff <프로젝트>로 실행하면 정상(신규치수 1→0, 점수 32→35).