크라우니 디자인 검토 — 기본방침 + 토큰 SSOT
배경
클라우드 셸이 crowny.org 본체와 다른 팔레트(#f4f1ea 베이지)로 보였다. 검토 결과 두 디자인 패밀리 공존: crowny.org 본체 #FAF9F7 vs 서비스 셸 패밀리 #faf8f3(34개)·memo #f4f1ea·kps #faf7f0. 근인: 셸이 본체 토큰을 import/참조하지 않고 각자 다른 템플릿에서 복제됨.조치 (2026-06-21)
- 전 37개 서비스 셸 + landing() 템플릿을 본체 canonical 토큰으로 통일 → 발산 0.
- 클라우드 셸은 본체값으로 정렬 후 crowny-ai로 재동기화.
디자인 토큰 SSOT (= crowny.org 본체 crowny-ai/public/index.html :root)
라이트(기본)| 토큰 | 값 | 용도 |
|---|---|---|
| --bg | #FAF9F7 | 페이지 배경 |
| --bg-sidebar/패널 | #F4F1ED | 사이드바·서브패널 |
| --panel/카드/입력 | #FFFFFF | 카드·입력 |
| --text/ink | #1A1A1A | 본문 |
| --text2/sub | #6B6B6B | 보조 텍스트 |
| --text3 | #A0A0A0 | 흐린 텍스트 |
| --border/line | #E5E2DD | 테두리 |
| --border2 | #D4D0C8 | 강조 테두리 |
| --accent/gold | #C9A961 | 골드 강조 |
| --accent-dim | #A08840 | 골드 진한 |
| --coral | #D4743A | 코랄(클로드 밸런스) |
| --font | 'Söhne','Pretendard Variable','Pretendard',system | 본문 폰트 |
| --radius | 8/12/16px | 모서리 |
기본방침 — 디자인 검토를 디폴트로
- 모든 UI 산출물은 위 SSOT 토큰만 사용. 새 bg/text/border 색을 임의 정의 금지. 임의 베이지·다른 회색 만들지 말 것.
- 신규 서비스 셸은 landing() 템플릿(이미 canonical) 상속 또는 본체 토큰 복사. 가능하면 공유 토큰 import.
- 디자인 검토는 기본 단계(디폴트) — UI 작업 전/후 토큰 일관성 점검. 인라인이 어려우면 병렬 에이전트로라도 반드시 수행:
grep -oE "\-\-bg: *#[0-9A-Fa-f]{6}" public/*/index.html → 전부 #FAF9F7인지.
- 본체 대조: crowny-ai/public/index.html :root 와 비교.
- 임베드 일관성: crowny.org에 탭/iframe으로 박히는 셸(클라우드 등)은 본체와 같은 origin·같은 토큰이어야 이질감 0.
- 위반 발견 시 즉시 canonical로 정렬 + 이 문서·가드레일·메모리 갱신.
점검 체크리스트 (UI 작업 시 디폴트)
- 배경/텍스트/보더가 SSOT 토큰값과 일치?
- 폰트 스택이 --font(Söhne/Pretendard)와 일치?
- 골드 강조 #C9A961, 코랄 #D4743A 외 임의 강조색 없음?
- 다크모드 토큰도 SSOT 일치?
- 모바일 터치타겟 44px, viewport 존재?
- (임베드 셸) 본체 origin/토큰과 동일?
구조화 완료 (2026-06-21) — 공유 crowny-tokens.css
권고였던 "공유 토큰 단일 import"를 실제 구축, 발산을 구조적으로 차단:- 단일 원본:
crowny-services/public/_shared/crowny-tokens.css(라이트+다크 전 토큰, 별칭 포함 --bg/--ink/--text·--line/--border·--gold/--accent 양쪽 정의). - 서빙: 서비스서버.js에
/crowny-tokens.css공유 라우트(어느 SERVICE든 _shared에서 서빙, max-age 3600). crowny-ai는public/crowny-tokens.css정적(자동) — 클라우드 탭(same-origin)도 동일 파일. - 결선: 전 37개 셸
<head>공통 폰트 link 직후<link href="/crowny-tokens.css">주입(정확히 1개씩). 클라우드는 인라인 :root 제거하고 link로 전환(레퍼런스). - 실증: 토큰 파일에서 --gold만 임시 변경 → cloud·memo·bible·crowny.org 전부 즉시 반영(셸 무수정) → 복원. 색 변경 한 곳 = 전 서비스 반영.
- 한선씨 동반
토큰검증.한선(셸상태 import/정렬/발산 판정 6/6) + 학습. - 인라인 :root 정리 완료(2026-06-21): 36개 셸의 인라인 :root에서 공유 토큰과 이름+값 모두 일치하는 색 정의만 결정론적 스크립트로 제거(라이트152+다크). 셸 고유변수(--bubble-ai/--tag-bg/--safe-top 등)·다른값 커스텀(memo --accent:#1A1A1A 검정강조, --gold-d 커스텀)은 100% 보존 — 고아 var 참조 0, 전 37셸 HTML 유효. 라이트 :root 토큰겹침 잔존 0(완전 정리). 다크 :root 일부 토큰동일값 잔존(무해, link가 채움). 백업 /tmp/shell_bak. SSOT 실증 재확인(gold 변경→전 서비스 즉시).
다크모드 SSOT 일원화 (2026-06-22)
라이트는 이미 토큰 SSOT였으나 다크는 분기 상태였음을 발견·해소:
- 실태: 공유 토큰 다크블록은 워치림(#0a0908/#f4e9d8/골드)인데 36셸이 인라인 회색 팔레트(#16140f/#ececec/#2a2a2a, 악센트 #cfcabb)로 덮어씀 → 토큰 다크는 사실상 cloud(다크블록 없음, 토큰 의존) 1곳만 사용. crowny-ai는 별도 네임스페이스(--c-, 보라빛 다크)라 동일 SSOT 아님.
- 판단 근거: 헤드리스 크롬(CDP
Emulation.setEmulatedMediaprefers-color-scheme=dark)으로 37셸 전부 다크 실촬영 → 갤러리(/tmp/dark_gallery.html, :18099). 사용자 확인 "다 맘에 듦" → 회색이 사실상 표준. - 조치(옵션 A): 토큰 다크블록의 셸오버라이드 5변수(--bg/--ink/--sub/--line/--card)만 회색 합의값으로 교체(panel/text/border 등 부수 워치림톤 유지) → 36셸 인라인 exact-match만 제거(121줄). 셸 변형값(--sub #9a9a8a 등)·고유변수·cloud는 보존.
- cloud 예외: 워치림 유지 위해 바뀐 5변수만 인라인 핀(문서화된 예외, /cloud/index.html).
- 검증: 제거 전후 37셸 다크 재촬영 md5 비교 → 26 픽셀동일, 11은 애니메이션/라이브 타임스탬프 차이만(memo=HTML무변경인데 diff→노이즈 입증, bible=fade-in 중). 색 변화 0 확정. 백업 /tmp/dark_bak. HTML 유효·빈 :root 0·다크 토큰겹침 잔존=cloud 핀 5(의도).
- 결과: 라이트+다크 모두 토큰 SSOT. 색 변경 = crowny-tokens.css 한 곳(cloud만 워치림 예외).
관련 파일
- 본체 SSOT: crowny-ai/public/index.html :root (= public/_shared/crowny-tokens.css 동일값)
- 다크 도구: /tmp/dark_shots.js(CDP 다크 촬영), /tmp/strip_dark.js(exact-match 제거), /tmp/build_gallery.js
- 공유 토큰: crowny-services/public/_shared/crowny-tokens.css + 라우트 서비스서버.js, crowny-ai/public/crowny-tokens.css
- 통합 셸: crowny-services/public//index.html (37개, 토큰 link 결선), landing() 템플릿=서비스서버.js
- 한선씨 동반: crowny-services/토큰검증.한선