이 섹션은 글을 읽는 곳이 아니라 웹사이트가 제대로 만들어졌는지 점검하는 곳이다.
검증의 중심은 한 가지다.
중앙 토큰과 중앙 정책이 아래 계층으로 내려가면서, 페이지·숏코드·목록·언어·상태가 같은 톤으로 유지되는지 본다.
점검 순서#
theme-vars.css가 실제 화면의 색, 간격, 서체, 반경을 모두 책임지는가- Markdown 기본문법이 제목, 목록, 표, 코드, 인용, 각주에서 깨지지 않는가
- CTA, figure, collapse, raw HTML, 방향성 블록이 서로 충돌하지 않는가
- page bundle 리소스가 상대 경로로 안정적으로 읽히는가
- 카테고리와 태그가 검토하기 쉬운 축으로 정리되어 있는가
- 한국어 우선 구조를 유지하면서도 다른 언어가 같은 트리 규칙을 따르는가
바로 이동#
중앙 통제 범위#
- 디자인과 UI의 기준값:
themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css - 세부 모듈:
themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/*.css - 라우팅과 언어 정책:
config/_default/hugo.toml - 화면용 문구의 중앙 번역:
themes/(0000-0000-0000-0001)/i18n/*
검토 기준#
| 축 | 확인 내용 | 기대 결과 |
|---|---|---|
| 디자인 토큰 | 색상, 표면, 간격, 서체, 반경, 그림자 | 한 파일만 바꿔도 전체 인상이 같이 움직여야 한다 |
| 렌더링 | Markdown, shortcode, raw HTML, 이미지 | 콘텐츠만으로도 실제 UI가 드러나야 한다 |
| 구조 | 번들, 택소노미, 번역 키, 메뉴 | 언어가 늘어도 구조가 흔들리지 않아야 한다 |
| 운영 | 업데이트 로그, 검증 로그, 요약 | 나중에 다시 봐도 무엇을 바꿨는지 바로 읽혀야 한다 |
한 페이지에서 보는 대표 화면#
design probe
중앙 소스는 `theme-vars.css`이며, 이 페이지는 구조 확인용 안내문이다.
중앙 제어 파일
`themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/`
이 파일만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다.
해석 기준
• 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다.
• 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다.
• 레거시 디자인 경로는 사용하지 않는다.
design-probe는 토큰의 시각적 읽기를 빠르게 돕는 샘플이다.- 아래 페이지들은 같은 원본을 서로 다른 방식으로 풀어낸다.
- 각 글은 설명문이면서 동시에 프런트엔드 검증 화면이다.
이 랩의 목표는 예쁜 글을 쓰는 것이 아니라, 예쁜 결과가 우연이 아니라 시스템의 결과인지 확인하는 것이다.