크로스플랫폼 디자인 시스템: 1.5년 여정 (Part 2) 요약
카테고리
디자인
서브카테고리
UX 디자인
대상자
디자이너, 개발자, 프로덕트 매니저 등 디자인 시스템을 구축하거나 이해하고자 하는 사람들
핵심 요약
- 컴포넌트 기능과 표현 분리를 통해 일관성과 유연성을 동시에 달성
- Core, Composable, Pre-Composed 3단계 패키지 구조로 확장성 확보
state chart와DOM binding을 활용한 React와의 무관한 핵심 로직 설계- CSS 및 CSS-in-JS를 단일 스키마에서 생성하여 시스템 일관성 유지
섹션별 세부 요약
1. API 설계: 일관성과 유연성 균형
- Spectrum과 Chakra의 API 비교를 통해 90%의 일반 사용 사례를 커버하는 일관성 중심 접근이 필요하지만, 10%의 특수 상황 대응을 위해 Core 패키지와 Composable 패키지 분리
- Pre-Composed 패키지: 기본값 기반의 일관성 제공, Composable 패키지: 레이아웃 속성(
margin) 제한된 스타일링 props 지원
2. 컴포넌트 구현: 상태 및 컨텍스트 적용
- 기능적 구현
- state chart와 DOM binding 분리: 상태 변화(isSelected, isDisabled)를 DOM 속성(checked, disabled)에 매핑
- onChange 이벤트를 state chart로 전달하여 상태 업데이트 처리
- React 통합
- useSyncExternalStore, useEffect 등 React 기능을 사용한 상태 동기화 로직 포함
- headless checkbox 컴포넌트를 위한 state 및 context 인터페이스 정의
3. 표현 측면: CSS 및 CSS-in-JS 일관성 유지
- Variants 표현식을 통해 시각적 옵션(
size,selected) 정의
- root height 32px (large), 24px (medium) 등 규칙 정의
- CSS 네임스페이스 생성:
checkbox__root--size_large와 같은 클래스명 자동 생성 - CSS-in-JS 코드 생성:
checkboxVariantProps인터페이스와class name생성 함수를 통해 스타일링 적용
4. 컴포넌트 분리: 일관성과 유연성 균형 달성
- Pre-Composed 컴포넌트: 기본값 기반의 일관성 제공
- Composable 패키지: 개발자 맞춤형 조합 가능
- React 외 프레임워크 재사용성 향상: 복잡한 React 의존성 제거
5. 테스트 및 문서화 자동화
- 스냅샷 테스트 및 QA 자동화를 위한 모든 렌더링 상태 사전 계산
- Figma Variables를 활용한 Figma와 웹 사이의 컴포넌트 명세 자동 생성 및 동기화
결론
- Core/Composable/Pre-Composed 3단계 패키지 구조를 통해 일관성과 유연성 균형 달성
state chart와DOM binding분리로 프레임워크 독립적 핵심 로직 설계 가능- CSS 및 CSS-in-JS 단일 스키마 기반 생성으로 디자인 시스템 일관성 유지
- Figma와 웹 간 자동 문서화 기능을 통해 개발-디자인 협업 효율성 향상