< 목차 >
1. 디자인 시스템이 필요한 이유
2. 디자인 시스템을 구축하면 좋은 점
3. 디자인 시스템 구축 순서 및 방법 (with storybook)
설문 조사에서 디자인 시스템을 사용하는 응답자의 약 90%가 주당 최소 1시간의 작업 시간을 절약했다고 보고했다. 약 50%는 매주 6시간 이상 작업을 절약할 수 있다고 말했다.
- Invision DSM
‘디자인 시스템을 왜 도입해야 하는 거지? 🤔’ 라는 의문이 떠오른다면 이 링크(https://yozm.wishket.com/magazine/detail/1830/)를 참고하길 바란다.
- 프로젝트 초기에 주요 UI 패턴을 분석하여 디자인 시스템에 반영
- 팀의 요구사항에 맞는 워크플로우를 설정하고 지속적으로 개선
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 등)를 활용해 사용법, 디자인 원칙 작성
'[Front-end] 개발자 공부' 카테고리의 다른 글
| Storybook 설치 및 세팅 방법 (1) | 2025.01.01 |
|---|---|
| 아이콘 효율적으로 관리하기 (1) | 2025.01.01 |
| Qodana Error | Run autofix to sort these imports! (simple-import-sort/imports) (0) | 2024.12.31 |
| Qodana Error | Install the 'eslint' package (ESLint 패키지 미설치 에러) (1) | 2024.12.30 |
| eslint-config-prettier랑 eslint-plugin-prettier로 ESLint와 Prettier를 통합해 자동 코드 정렬과 (2) | 2024.12.29 |