피드로 돌아가기
Dev.toFrontend
원문 읽기
실제 사용성 기반의 버튼 스케일 최적화로 유틸리티 중심 Design System 구축
Component Anatomy #1: Perfect on Paper, Wrong in Production
AI 요약
Context
이론적 수치와 대칭성에 기반한 초기 ADR 설계로 인해 실제 UI 레이아웃과 괴리된 56px(xl) 사이즈 도입. 디자인 토큰의 수학적 완결성만 추구하여 실제 프로덕트 컨텍스트에서의 사용성이 결여된 아키텍처의 한계 노출.
Technical Solution
- 실효성 없는 56px(xl) 사이즈 제거를 통한 불필요한 Design Token 정리
- sm(32px)과 default(40px) 사이의 시각적 간극 해결을 위한 md(36px) 사이즈 신규 도입
- WCAG 2.5.8 AA 기준인 24px 대신 사용자 경험(UX) 향상을 위해 xs 사이즈를 28px로 설정
- Tailwind CSS의 h-7(28px) 토큰과 정렬하여 개발 생산성 및 시스템 일관성 확보
- 단순 수치적 대칭보다 실제 컴포넌트 배치 시의 시각적 적합성을 우선하는 Validation 프로세스 적용
실천 포인트
- Design Token 정의 시 수학적 대칭성보다 실제 UI 배치 시의 시각적 간극(Gap)을 우선 검토할 것 - Accessibility 기준(WCAG)은 최소 하한선으로 설정하고, 실제 Target Goal은 HIG나 Material Design 등 검증된 가이드를 참고할 것 - 이론적 설계(ADR)와 실제 프로덕션 적용 결과의 괴리를 빠르게 파악하여 토큰을 전면 재조정하는 반복적 검증 과정을 거칠 것