개요
최근에 프로젝트인 “Rolling”을 진행하고 있는데 공통으로 사용되고 있는 컴포넌트와 Util함수, customHooks와 추후에 개발 예정인 Admin도 고려하여 공통로직들을 어떻게 처리할까? 라는 문제가 머리에 쏟아졌다. 이를 해결하기위해 나는 Storybook이라는 디자인 시스템을 만들기로 하였다.
Storybook… 그게 뭐야??
Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이다.
프론트엔드 디자인 시스템을 만들기 위해 흔히 사용된다.
처음엔 리액트 기반으로 개발되었지만, Vue, Angular, Web Components, Svelte, Next 등등
다양한 프레임워크를 지원하고 있다.
장점으로는
- 다른사람의 코드를 이해하는데 드는 노력을 줄일 수 있다.
- 자연스럽게 컴포넌트 단위를 생각하면서 개발이 가능하다.
- 코드의 재사용성이 가능하다.
난 이 장점들 중에서 컴포넌트 단위의 개발이 가능하며 중복된 코드를 작성하지 않아도 된다는 점에 큰 메리트를 느껴 바로 구축하기로 하였다.
How?
세팅하기에 앞서 나는 yarn berry를 사용할 것이다. 그럼 한번 해보자!!
먼저 폴더를 만든 후, 터미널을 켜준다.
아래 명령어를 실행한다!!
🔦 yarn init -w그럼 vsc를 들어가 아래사진처럼 package.json이 생성된 것을 볼 수 있다.
이제 yarn berry를 세팅해보자, 설치하면 폴더에 .yarn폴더와 .yarrc.yml 파일이 생성될 것이다.
🔦 yarn set version berry
했다면 타입스크립트를 설치해준다.
🔦 yarn add typescript@^4.9.5이제 스토리북을 설치하자, 설치 도중 무슨 프레임워크를 사용할 것인가 나올 것이다.
나는 react를 선택할 것이다. 그러면 vite, webpack5 중 선택 옵션이 나올 건데 나는 webpack5를 선택했다.
설치했다면 자동으로 스토리북이 실행이 될텐데 에러가 나면 @babel/core가 설치되지 않아 에러가 났을 수 있다.
그럼 yarn add @babel/core를 터미널에 입력해 설치해주면 에러가 나지 않을 것이다.
근데 코드를 보면 모듈을 찾지못해 경로에 에러가 났을 수 있다. 그 이유는 yarn PnP + 타입스크립트 환경이면 sdk를 설치하여 TypeScript가 실행되도록 해줘야 한다. 아래 yarn 명령어로 설치하자.
그러면 아래 사진처럼 vsc에서 아래 오른쪽 하단에 toast가 뜬다. 허용을 눌러주면 된다.
그러면 아래 하단에 {} typescript를 눌러서 보면 sdk가 해당 타입스크립트 버전에 맞는 sdk를 설치하여
모듈을 잘불러오는 것을 확인할 수 있다.
실행되면 아래 사진처럼 켜져있는 것을 볼 수가 있다.
구조 파헤쳐 보기
세팅이 되어있다면 위 사진처럼 구성되어 있을 것이다. 근데 낯선 폴더가 있다..
바로 .storybook과 stories 폴더이다.
.storybook 폴더를 보면 main.ts와 preview.ts가 있다
- main.ts stories를 위한 config 설정이 모여있다.
- preview.ts 모든 story들에 전역적으로 적용될 포맷 세팅이다.
stories 폴더를 보면 우리가 친숙히 잘 아는 여러 컴포넌트들과 css들이 보일 것이다.
근데 못보던 stories.tsx가 있을 것이다. 이것만 알면 디자인 시스템 개발의 90%는 완성이다.
-
Button.stories.tsx를 예시로 봐보자.
meta 객체부터 보면 title, components, paramters, tags가 있다.
-
title : 위 코드에서 Example/Button으로 되어있는데 http://localhost:6006/에 들어가면 아래사진처럼 Example이라는 폴더가 만들어져 있고 그 아래 Button 폴더로 구성되게 해준다.
-
components : 아래 사진처럼 우리가 만든 컴포넌트를 보여주게 해준다.
-
paramters : 컴포넌트가 스토리북에서 어디에 위치할 지 설정해준다.
-
tags : 옵셔널이긴 한데
[”autodocs”]가 보일 것이다. 이건 아래 사진처럼 해당 디자인시스템 컴포넌트에 대한 설명을 docs형태로 자동으로 만들어준다.
아래 코드는 뭘까 싶을 것이다.
사이트에 들어가보면 Button폴더에 Primary, Secondary, Large, Small이 있다. 위 코드처럼
똑같은 객체 네이밍으로 보여지는 것을 알 수가 있다. 특정 하나의 컴포넌트에 각각의 다른 스타일링, 값들을 넣었을때 보여지는 형태가 다르기에 위 코드처럼 작성한다면 자신이 원하는 형태로 보여지게 된다.그럼
Button.tsx를 봐보자. 아래 코드처럼 되어있을 것이다.
ButtonProps를 봐보면 위위 코드처럼 작성했던 args의 객체 값들이 ButtonProps랑 같다는 것을 알 수있다. 그렇다면 ButtonProps를 Button 컴포넌트에 설정되어 사용된다는 것을 알 수 있다.
이런형태로 디자인시스템을 만들면 된다.마무리
이렇게 Storybook을 이용한 디자인 시스템을 만들어 보았는데 도움이 되면 좋겠다.
빨리 디자인시스템을 만들어보고 npm에 배포까지 해보길 추천한다!!
-
