회사에서 운영하는 서비스가 늘어갈수록 UI에 대한 반복작업은 점차 많아지게 됩니다. 곧 디자인시스템의 필요성이 나타는데요. 여러가지를 아우르는 디자인시스템에서 개발자들은 특히 UI 컴포넌트 라이브러리에 책임을 두고 있습니다. 도입하게 된다면 각 서비스에서 UI에 관한 코드를 작성하는 효율도 높아지고 유지보수도 간단해질 것입니다. 다음 기술들과 함께 시작해보겠습니다.
- Typescript, React
- Emotion: CSS in JS 라이브러리로 컴포넌트의 모든 스타일에 적용합니다.
- Rollup: 모듈 빌드와 트리쉐이킹에 특화된 빌드툴을 사용합니다.
- NPM: 빌드된 코드를 어디서든 사용할 수 있게 배포합니다.
- Storybook: 테스팅, 협업, 문서화 등의 기능으로 디자인시스템 구축을 쉽게 시작할 수 있습니다.
전제적인 적용 사례를 공유하겠지만, 기본 사용법은 각 기술들의 공식문서를 참조하는 것이 가장 좋습니다. 특히 디자인시스템에 대한 전반적인 이해와 구축 방법에 대해서는 스토리북의 튜토리얼을 통해 학습해보실 수 있습니다.
Storybook: Frontend workshop for UI development
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.
storybook.js.org
디자인 시스템이란?
간단히 설명하자면 일관된 하나의 철학과 원칙에 따라서 만들어진 디자인 리소스이라고 할 수 있다. 다음과 같은 요소들이 합쳐졌을 때 하나의 시스템이 구축되었다고 말할 수 있겠다.
- 기본철학과 원칙: 일관성 있는 결과물을 위한 제작의 시작점이라고 생각한다.
- 디자인가이드: 타이포그래피, 컬러팔레트, 그리드시스템 그리고 UX Writing까지도.
- 디자인리소스: Figma 등 디자인툴을 이용한 컴포넌트의 디자인 결과물이다. 디자인 컴포넌트들을 이용해 빠르게 프로토타입을 제작할 수 있게 된다.
- UI 컴포넌트: 디자인리소스에서 만들어진 디자인을 코드로 구현해둔 결과물이다. 우리가 학습할 지점이다.
- 문서: 사용되지 않는 시스템은 필요가 없다. 친절한 문서화를 통해서 디자인시스템의 사용자들이 쉽게 시스템에 녹아들 수 있도록 반드시 신경써야한다. 아마도 만드는거보다 더 중요한게 문서화일지도!?
UI 컴포넌트 라이브러리 만들기
디자인 가이드와 리소스를 바탕으로 실제 사용가능한 UI 컴포넌트를 제작하는 단계입니다. 여러 서비스에서 동시다발적으로 사용가능하기 때문에 특히 버그도 발생하지 않아야하고 유지보수성도 좋아야겠습니다. UI의 작은 버그가 사용하는 여러 서비스에서 큰 문제를 발생시킬 수 있기 때문이다. 그 점을 유의하며 앞으로 다음의 내용들을 공유해보겠습니다.,
- 타입스크립트로 라이브러리 배포하기
- 컬러, 타이포그래피, 그리드시스템을 적용하는 Global Theme 만들기
- 스토리북을 기반으로 테스팅, Accessibiliy
- 스토리북과 TDD로 버튼 만들기
다음 포스트에서는 스토리북의 디자인시스템 튜토리얼 소스를 받아서 전체적인 프로세스를 살펴보도록 하겠습니다. 참고로 작성일 기준(2023.08.15) 스토리북은 vite로 빌드하고 있는데요. 한글화 문서에 해당 내용이 업데이트가 되지 않아 영어로 접근하시길 추천드립니다.
'Projects' 카테고리의 다른 글
| [UI 컴포넌트 라이브러리] 2. 라이브러리 배포하고 사용하기 (NPM, Github Packages, Docker) (1) | 2023.09.02 |
|---|---|
| [UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 (0) | 2023.08.22 |