업그레이드 검증의 핵심은 “이쁘다”가 아니라 같은 설정이 같은 결과를 만드는가다.
이 페이지는 themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css의 값을 시각적으로 확인하기 위해 만들었다.
특히 layout, spacing, typography, radius, motion, component, color의 각 축이 한 번에 보여야 한다.
검증 기준
| 기준 | 확인 대상 | 실패 징후 |
|---|---|---|
| 셸 일관성 | page/nav/content 폭, padding, header/footer 높이 | 상단과 본문 폭이 따로 놀거나 푸터가 밀림 |
| 리듬 일관성 | space scale, table cell padding, content gap | 카드/표/목록 간격이 각각 다른 리듬으로 보임 |
| 타이포그래피 | font family, font size, line height, letter spacing | 본문과 코드, 한글과 라틴이 따로 뜸 |
| 조형 일관성 | radius, border, shadow, control size | 버튼/카드/입력 톤이 분리됨 |
| 색상 계층 | brand / neutral / semantic / effect | light/dark 전환 시 색의 역할이 뒤섞임 |
| 상속 구조 | component.* 토큰과 fallback 값 | 개별 컴포넌트가 중앙 토큰을 우회함 |
핵심 검증
design probe
중앙 소스는 `theme-vars.css`이며, 이 페이지는 구조 확인용 안내문이다.
중앙 제어 파일
`themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css`
이 파일만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다.
해석 기준
• 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다.
• 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다.
• 레거시 `params.design.toml`은 문서/검증용 참고값으로만 남긴다.
읽는 순서
- 상단의 셸 샘플로 폭과 간격을 먼저 본다.
- 토큰 트리에서 config → CSS → HTML 연결을 본다.
- 라이트/다크 색상과 컴포넌트 샘플을 비교한다.
- 마지막으로 fallback-only 항목이 남아 있는지 확인한다.
빠른 합격 기준
theme-vars.css의 값이 CSS 변수로 유지된다.- 라이트/다크 모드에서 색 역할이 바뀌지 않는다.
- component 토큰이 페이지별 CSS를 대체하지 않고 상속으로 연결된다.
- fallback-only 항목은 허용하되, 이름이 바뀌면 반드시 표시가 깨진다.