디자인 시스템이 필요한 이유, 간략한 구축 방법

< 목차 >

1. 디자인 시스템이 필요한 이유

2. 디자인 시스템을 구축하면 좋은 점

3. 디자인 시스템 구축 순서 및 방법 (with storybook)

 

 

설문 조사에서 디자인 시스템을 사용하는 응답자의 약 90%가 주당 최소 1시간의 작업 시간을 절약했다고 보고했다. 약 50%는 매주 6시간 이상 작업을 절약할 수 있다고 말했다.

- Invision DSM

 

‘디자인 시스템을 왜 도입해야 하는 거지? 🤔’ 라는 의문이 떠오른다면 이 링크(https://yozm.wishket.com/magazine/detail/1830/)를 참고하길 바란다.

 

- 프로젝트 초기에 주요 UI 패턴을 분석하여 디자인 시스템에 반영

- 팀의 요구사항에 맞는 워크플로우를 설정하고 지속적으로 개선

 

 

[이미지 출처] https://yozm.wishket.com/magazine/detail/1067

 

 

1. 디자인 시스템이 필요한 이유

1) 중복 개발 방지

: 동일한 UI를 매번 새로 개발하지 않고 재사용할 수 있음

 

2) 브랜드 아이덴티티 유지

: 프로젝트 전반에 걸쳐 브랜드 스타일과 톤을 유지

 

3) 시간과 비용 절약

: 반복 작업을 줄이고 고유 기능 개발에 집중 가능

 

4) 버그 감소

: 잘 테스트된 컴포넌트를 반복 사용함으로써 품질 유지

 

5) 확장성과 유연성

: 다양한 프로젝트 간 통합과 확장이 용이

 

 

2. 디자인 시스템을 구축하면 좋은 점

1) 일관된 사용자 경험

- 모든 페이지와 컴포넌트에서 일관된 UI와 UX를 제공

- 브랜딩 일관성 강화

 

2) 생산성 향상

- 컴포넌트 재사용으로 새로운 UI를 빠르게 개발

- 개발자와 디자이너 간 커뮤니케이션 효율성 증가

 

3) 유지보수 용이

- 디자인이나 기능 변경 시 시스템 중심으로 관리 가능

- 변경 사항을 프로젝트 전체에 쉽게 반영

 

4) 효율적인 확장

- 새로운 기능 추가 시 기존 시스템과 조화롭게 통합 가능

- 팀의 성장이나 프로젝트 확장 시에도 일관성을 유지

 

5) 협업 강화

- 명확한 가이드라인과 컴포넌트 문서화로 디자이너와 개발자의 협업이 원활

- 온보딩 시간을 단축

 

 

3. 디자인 시스템 구축 순서 및 방법 (with storybook)

1) Storybook 설치 및 세팅

- Storybook을 초기 세팅한 후, 기본적인 구조 확인

- Next.js와 TypeScript 환경에 맞춰 설정

 

2) 디자인 토큰 설정

- (색상, 폰트, 간격, 크기, 그림자 등) 공통 스타일 속성의 디자인 토큰 정의

- Storybook에 글로벌 스타일로 적용

 

3) 컴포넌트 구현

- 버튼, 카드, 입력 필드 등 프로젝트에서 공통적으로 사용하는 UI 컴포넌트 설계

- Tailwind의 theme 커스터마이징을 통해 프로젝트와 맞는 기본 스타일 설정

- Atomic Design 원칙(Atoms → Molecules → Organisms)을 적용하면 구조적 개발에 도움

   - Atoms(Button, Input 등)부터 구현하고 Storybook에 스토리를 추가

- 각 컴포넌트에 대해 다양한 상태(Props, 이벤트 등)를 시뮬레이션

 

4) 컴포넌트 검증 및 문서화

- Storybook을 활용해 컴포넌트를 문서화하고 독립적으로 테스트

- 팀원들이 컴포넌트를 쉽게 이해하고 활용하도록 가이드라인 제공

- Storybook을 통해 디자이너와 협업하며 컴포넌트 스타일과 동작 검증

   - Figma와 같은 디자인 도구에서 토큰과 컴포넌트를 개발자가 바로 사용할 수 있도록 동기화

- Storybook의 Docs 애드온을 활용해 컴포넌트 사용법을 문서화

 

5) 디자인 시스템 확장

: Molecules(Card, Modal 등), Organisms(Header, Footer 등) 순으로 컴포넌트를 확장

 

6) 반응형과 접근성 고려

- 모바일과 데스크탑 환경을 모두 지원할 수 있도록 반응형 설계

- ARIA 속성, 키보드 네비게이션 등을 고려해 접근성 강화

 

7) [추천] 버전 관리와 문서화

- 디자인 시스템을 NPM 패키지화하여 여러 프로젝트에서 재사용

- 문서화 도구(Docusaurus, Notion 등)를 활용해 사용법, 디자인 원칙 작성