디자인 시스템은 컴포넌트 라이브러리가 아니다
부품(컴포넌트)과 형태(구조)의 차이
- 동일한 컴포넌트 라이브러리(Base UI)와 디자인 토큰을 사용하더라도, 개발 팀이나 AI 아젠트마다 화면을 구성하는 패턴(카드 레이아웃, 탭 사용, 자동 저장 vs 명시적 저장 버튼 등)이 서로 다르게 나타납니다.
- 문제는 UI 부품의 결함이 아니라 구조적 배치 및 동작 패턴에 대한 명확한 규칙/결정의 부재에 있습니다.
진정한 디자인 시스템의 역할
- 단순한 컴포넌트 공급을 넘어, 반복되는 디자인 의사결정(구조, 레이아웃, 상호작용 규칙)을 표준화하고 재사용 가능하게 만드는 것이 진정한 디자인 시스템의 핵심 역할입니다.
- 아토믹 디자인(Atomic Design) 단계를 응용하여 레이아웃과 동작의 규칙을 명확히 정의해야 합니다:
- Atoms: 버튼, 스위치, 입력 필드
- Molecules: 유효성 검사 입력 필드, 확인 절차가 포함된 스위치
- Organisms: 라벨-설명-컨트롤이 결합된 설정 행(SettingRow)
- Template: 일관된 스코프와 순서를 가진 전체 페이지 프레임(SettingsFrame)
명확한 규칙 적용의 효과
- AI 아젠트에게 단순 컴포넌트만 제공했을 때와 달리, 페이지 구성 규칙, 레이아웃 표준, 상호작용 지침(예: 자동 저장, Danger zone 위치 제약 등)을 명시적으로 전달했을 때 비로소 제품 전반에 걸쳐 통일감 있고 일관된 결과를 얻을 수 있었습니다.
진정한 디자인 시스템은 "부품을 제공하는 라이브러리"가 아니라 "반복적인 의사결정을 표준화(가이드)하여 제공하는 체계"입니다.
