도움말/기준
12블록 프리뷰 규격 소개
디자인시스템 프리뷰는 12블록 한 장 규격으로 통일합니다 — 어떤 시스템이든 같은 순서로 비교할 수 있습니다.
왜 규격화하나
디자인시스템은 문서 양이 제각각이라 비교가 어렵습니다. DesignSkill은 모든 시스템을 같은 블록, 같은 순서의 preview.html 한 장으로 보여줍니다. 두 시스템을 나란히 열면 버튼은 버튼끼리, 폼은 폼끼리 바로 비교됩니다.
12블록 구성
| # | 블록 | 확인 포인트 |
|---|---|---|
| 01 | 컬러 토큰 | 주·보조·배경·텍스트 색과 변수 이름 |
| 02 | 타이포 스케일 | 제목~캡션 크기 단계와 행간 |
| 03 | 버튼 | 주/보조/비활성 상태와 라운드 |
| 04 | 입력 폼 | 인풋·셀렉트·포커스 스타일 |
| 05 | 카드 | 그림자·테두리·패딩 리듬 |
| 06 | 배지·칩 | 상태 표시 색 사용법 |
| 07 | 내비게이션 | 헤더·활성 상태 표기 |
| 08 | 탭·세그먼트 | 선택 상태 전환 |
| 09 | 테이블·리스트 | 행 구분과 밀도 |
| 10 | 알림·배너 | 정보·경고·오류 톤 |
| 11 | 모달·다이얼로그 | 오버레이와 층위 |
| 12 | CTA 배너 | 전환 구간의 색 대비 |
모든 블록이 변수만 참조
프리뷰의 모든 블록은 :root CSS 변수만 참조하도록 작성됩니다. 변수 값만 바꾸면 12블록 전체가 한 번에 리스킨되므로, 프리뷰 자체가 토큰 동작 테스트 역할도 합니다.
공개 자산은 핵심 블록부터 순차적으로 채워가고 있으며, 각 자산이 구현한 블록은 상세 페이지의 「섹션 구성」에 표기됩니다.