스킬 자체의 표현으로
이 스킬은 타이포그래피 스케일, 색상 이론, 스페이싱 시스템, 아이콘그래피 기본 원칙을 활용하여 일관되고 접근 가능한 비주얼 시스템을 구축하는 방법을 알려줍니다. 모듈형 타입 스케일, 8포인트 그리드 스페이싱, WCAG 대비 요구 사항을 반영한 시맨틱 색상 팔레트, 아이콘 크기 체계를 이용한 디자인 토큰 수립을 다룹니다.
이 스킬은 Tailwind CSS, 반응형 유동 타이포그래피, 시맨틱 토큰 기반 다크 모드 테마, 접근성 검증을 위한 구체적인 구현 패턴을 제공합니다. 비율 기반 스케일과 재사용 가능한 토큰 시스템을 정의함으로써 일관되지 않은 스페이싱, 낮은 대비, 임의의 매직 넘버 같은 흔한 비주얼 디자인 문제를 해결합니다.
산출물
- CSS 커스텀 프로퍼티 또는 Tailwind 설정에 정의된 디자인 토큰
- 크기 변형이 있는 아이콘 컴포넌트
작동 방식
- 01모듈형 디자인 토큰 수립
비율 기반 크기 조정(0.75rem~3rem)을 적용한 타이포그래피 스케일, 8포인트 그리드 스페이싱(4px~64px), 브랜드·상태·중립색을 위한 시맨틱 색상 토큰을 정의합니다.
- 02반응형 타이포그래피 적용
뷰포트에 반응하는 크기 조정을 위해 clamp()를 사용한 유동 타이포그래피를 적용하고, 가독성을 위해 최대 65자의 최적 읽기 너비를 유지합니다.
- 03접근 가능한 색상 팔레트 구현
WCAG 대비 비율을 충족하는 컬러 시스템을 구축합니다: 본문 텍스트는 4.5:1, 큰 텍스트와 UI 구성 요소는 3:1을 기준으로 하며, 프로그래밍 방식으로 대비를 검사합니다.
- 04일관된 아이콘 시스템 만들기
12px에서 32px까지의 아이콘 크기 스케일을 정의하고, size prop을 받아들이며 flex-shrink-0 동작을 유지하는 재사용 가능한 컴포넌트를 만듭니다.
- 05시맨틱 토큰으로 다크 모드 디자인하기
외형이 아닌 용도에 따라 시맨틱 토큰 이름을 사용하여, 컴포넌트 변경 없이 data attribute를 통한 테마 전환이 가능하도록 합니다.
- 06수직 리듬 유지하기
정의된 스케일 값을 사용하여 인접 요소에 일관된 간격 규칙을 적용해 인터페이스 전반에 시각적 조화를 만듭니다.