크로스플랫폼 디자인 시스템: 1.5년 여정 (1부)

카테고리

디자인

서브카테고리

UX 디자인

대상자

UX 디자이너, 제품 팀, 크로스플랫폼 디자인 시스템 구축 담당자

핵심 요약

• 디자인 시스템의 핵심은 "제품 언어(product language)"와 "일반용 디자인 시스템(general-purpose design system)"의 구분
• 디자인 토큰(design tokens)은 인간과 기계 모두가 읽을 수 있는 디자인 결정을 기록한 기계가독 형식의 데이터
• Figma 내 DSL 기반 디자인 토큰 관리 및 CSS 변수, CSS-in-JS 도구와의 통합 구현

섹션별 세부 요약

1. 디자인 시스템의 방향성 설정

• "디자인 시스템"이라는 용어의 모호성으로 인한 팀 내 혼란 방지 필요
• Chakra(유연성 강조) vs Spectrum(일관성 강조) 사례로 디자인 시스템의 핵심 가치 분석
• 제품 언어(product language)는 브랜딩, 앱 특성 등 기업 고유 결정을 반영하는 디자인 시스템

2. 디자인 시스템 구축 시 주의점

• 목표 설정 부재로 인한 잘못된 기준 선택(예: 응답형 웹 기반 디자인 시스템 참조)
• 단일 디자인 시스템으로 다중 환경 커버 시도 실패 (관리 비용 증가)
• 제품 언어는 디자인 결정 집합이 아닌 UI 라이브러리의 수단

3. 디자인 토큰의 기능과 구현

• 디자인 토큰은 "인간-기계 간 디자인 결정 공유"를 위한 기계가독 형식의 데이터
• 값(value), 의도(intent), 컨텍스트(context) 3가지 계층 구조로 구성
• 예: $carrot-500 → primary brand 의도 + light/dark mode 컨텍스트
• Figma 내 DSL 기반 디자인 토큰 관리 및 자동 문서화, 다크 모드 미리보기 구현

4. 프론트엔드 구현 사례

• CSS 변수와 데이터 속성(data attribute)을 통해 컨텍스트 분기 처리
• CSS-in-JS 도구(Emotion, vanilla-extract)와의 호환성 확보
• 다양한 기술 스택 지원을 위한 복수 접근 방식 구현

결론

• 디자인 시스템은 "제품 언어"와 "일반용 시스템"의 선택에 따라 구조가 달라짐
• 디자인 토큰은 컨텍스트와 계층 구조를 통해 모든 플랫폼에서 디자인 결정을 효과적으로 공유
• Figma 내 DSL 기반 관리와 CSS-in-JS 도구 통합이 실무 적용에 유리