디자인 시스템이란?
- 재사용 가능한 UI 컴포넌트로 구성된 시스템
- 디자이너와 개발자 간 협업을 위한 공용 컴포넌트
- 브랜드 스타일을 토큰화하고 문서화하여 일관된 UI/UX 제공
누가 사용해야 하나요?
- 단일 앱, 소규모 팀에게는 과한 도구일 수 있음
- 여러 앱/팀에서 컴포넌트를 공유하는 경우 효과적
작업 흐름
- UI 컴포넌트는 분리하여 작업
- 리뷰를 통해 합의를 이끌어내고 피드백을 수집
- UI에서 발생하는 버그를 방지하기위해 테스트
- 빠른 적용을 위한 문서화
- 사용자 프로젝트에 디자인 시스템 배포
컴포넌트에서 디자인 시스템 추출하기
문제 인식
- 대규모 조직에서는 잘못된 소통, 중복 작업, UI 일관성 부족 등 비효율 발생
- 같은 UI라도 외관, 기능이 제각각
- 기존 컴포넌트를 기반으로 중앙 집중화된 표준화 필요
디자인 시스템이란?
- 공통 UI 컴포넌트를 중앙 저장소(Package Manager 등)를 통해 배포하는 체계
- UI 재사용 가능, 비즈니스 로직은 제외
- 전역 스타일은 디자인 토큰으로 정의
디자인 시스템 vs 컴포넌트
| 항목 | 디자인 시스템 | 컴포넌트 |
|---|---|---|
| 범용성 | 조직 전체 | 특정 앱 중심 |
| 구성 | UI 기본 요소 | 화면 구성 포함 가능 |
| 목적 | 재사용, 표준화 | 기능 구현 중심 |
구성 기준
- 3회 이상 사용되는 UI 패턴 → 재사용 컴포넌트
- 3개 이상 프로젝트/팀에서 사용 → 디자인 시스템 포함
UI 컴포넌트 구축하기
디자인 시스템을 어떻게 구축하는지 보여주는 챕터로 실습위주의 내용
팀과 함께 리뷰하기
단일한 진실 지점(SSOT),단일한 장애 지점(SPOF)
- 디자인 시스템은 의존성: 수정 시 전체 영향
- 지속적인 유지보수 필요
비주얼 리뷰란?
- UI 기능과 미학을 확인하는 필수 과정
- 코드 리뷰와 같이 필요
공통 레퍼런스 포인트 만들기
- 로컬 환경 차이를 없애기 위해 스토리북 클라우드 배포 필요
스토리북 퍼블리싱 with Chromatic
- GitHub PR 생성 시 Chromatic 자동 배포
- 링크를 팀 협업 툴에 공유
크로마틱 장점
- 모든 PR에 대해 스토리북 배포
- 예상치 못한 변경 식별
- 디자이너/제품 오너 피드백 수집
Github
참고
개발 노트