AI 시대, 디자인 시스템의 핵심은 '기준'이다.
디자인 시스템(Design System)의 핵심은 일관성 유지와 판단 비용 관리이며, AI 시대에는 기준 설정(Standardization)이 더욱 중요해짐
ADS 2.0에서 3.0으로의 개편은 구성 요소 추가 대신, 기준 규격 재정비(Standard Refinement)에 초점을 맞춤
팔레트(Palette) 값 단계화, 시멘틱 토큰(Semantic Token) 변경 등을 통해 선택지 단순화(Choice Simplification)를 시도
AI를 활용한 팔레트 매핑(Palette Mapping) 과정에서 AI의 한계(AI Limitations)를 인지하고, 사람의 판단 중요성을 강조
AI가 반복 작업을 덜어낼수록, 디자인 시스템은 결정의 기준(Decision Criteria)을 명확히 하는 데 집중해야 함
디자인 시스템 개편의 핵심: 적정 밀도
본문은 디자인 시스템(Design System) 개편의 핵심을 '적정 밀도'로 정의하며, 시스템이 담당해야 할 판단과 그렇지 않은 판단의 경계를 명확히 하는 것이 중요하다고 강조한다.
일관성 유지(Consistency Maintenance): 기능 증가에 따라 디자인 시스템은 일관성을 유지해야 함
판단 비용 관리(Decision Cost Management): 불필요한 판단을 줄여 개발 속도를 향상시켜야 함
AI 시대의 변화: AI가 초안을 빠르게 생성할수록, 명확한 기준 설정이 중요해짐
결과적으로, 디자인 시스템은 단순한 컴포넌트 모음이 아닌, 결정을 위한 가이드라인(Guideline for Decisions) 역할을 해야 한다.
ADS 2.0에서 3.0으로의 변화: 기준 재정립
ADS 2.0에서 3.0으로의 개편은 구성 요소 추가가 아닌, 기존 기준의 규격을 재정비하는 데 초점을 맞췄다. 이는 디자인 시스템의 효율성을 높이고, 개발팀의 생산성을 향상시키기 위한 전략이다.
Semantic 변경: Emphasis 대신 Foreground와 같이, 역할 중심의 언어 사용
Typography 단순화: 스케일과 Weight 조합 제한 및 네이밍 단순화
Palette 단계화: 선택지를 구조화하여 판단의 일관성 확보
이러한 변화는 디자인 시스템의 유지보수성(Maintainability)을 높이고, 개발자의 인지 부하(Cognitive Load)를 줄이는 데 기여한다.
AI를 활용한 팔레트 매핑(Palette Mapping) 과정
AI를 활용하여 팔레트(Palette) 값을 매핑하는 과정에서, AI의 한계와 사람의 판단 중요성을 인지했다. AI는 빠른 초안을 제공하지만, 실제 UI에서의 의도와 맥락을 완벽하게 반영하지 못하는 경우가 발생했다.
CSV 추출 및 비교: 기존 팔레트 값을 CSV로 추출하고, 공개 팔레트와 비교
AI 매핑: ΔRGB + 3×ΔL 기준으로 가장 근접한 단계를 매핑
검토 및 수정 반복: AI 매핑 결과를 검토하고, 수정을 반복하는 과정을 통해 정확도 향상
결과적으로, AI는 보조 도구일 뿐이며, 최종 판단은 사람의 몫(Human Judgment)임을 강조한다.
팔레트(Palette) 개선: 감(感)에서 구조(構造)로
팔레트(Palette) 개선은 디자인 시스템의 일관성을 높이는 핵심적인 작업 중 하나이다. 기존 팔레트의 세분화된 값들로 인해, 새로운 화면을 만들 때마다 어떤 색상을 사용해야 할지 고민하는 문제가 발생했다.
데이터 기반 분석: 팔레트 값을 CSV로 추출하여 분석하고, 공개 팔레트와 비교
구조화된 선택지: 21개였던 회색 단계를 줄여, 선택의 어려움 해소
마이그레이션 전략: 기존 시스템에 3.0 값을 덮어씌워, 시각적 변화 검증
이러한 과정을 통해, 선택의 직관성(Intuitive Choice)을 높이고, 디자인 시스템의 유지보수성을 향상시켰다.
시멘틱 토큰(Semantic Token) 도입: 협업 도구에서 시스템 언어로
ADS 2.0의 시멘틱 토큰(Semantic Token)은 주로 디자인 협업을 위한 것이었으나, 3.0에서는 시스템 언어로서의 역할을 강화했다. 이는 개발자와 디자이너 간의 소통을 원활하게 하고, 디자인 시스템의 일관성을 높이기 위한 전략이다.
Foreground 개념 도입: Emphasis 대신 Foreground를 사용하여, 텍스트뿐 아니라 배경 요소까지 포괄
해석의 여지 최소화: 협업을 위한 목적보다, 해석의 여지를 줄이는 데 집중
가이드라인 강화: 상태와 예외까지 포함하는 명확한 가이드라인 제시
결과적으로, 디자인 시스템은 화면을 그리기 위한 정책과 우선순위를 정의하는 역할(Defining Policies and Priorities)을 수행해야 한다.
