스토리북 개요
🎯 이 문서를 읽고 난 후의 상태
- Zen이 스토리북을 왜 탐구하려는 지 이해한다.
- 스토리북 설치 및 설정 방법을 이해한다.
- 본 시리즈의 방향성을 이해한다.
🤔 Storybook 이란 무엇일까?
Storybook is a frontend workshop for building UI components and pages in isolation.
스토리북 공식 사이트에 소개되어있는 내용이다.
번역하면, 스토리북은 UI 컴포넌트와 페이지를 독립적으로 구축하기 위한 프론트엔드 워크샵이라는 의미이다.
여기서 말하는 프론트앤드 워크샵 이란, UI 컴포넌트와 페이지를 독립된 환경에서 개발하고 테스트할 수 있도록 하는 개발 도구 또는 공간을 의미한다.
쉽게 말하면 컴포넌트를 따로 모아 문서화 시킬 수 있는 도구라고도 봐도 된다.
조금 더 상세하게 설명하면 다음과 같다.
| 의미 | 상세 |
|---|---|
| 독립적인 컴포넌트 개발 환경 | 워크샵에서는 애플리케이션의 나머지 코드와는 무관하게 컴포넌트를 개발하고 테스트할 수 있다. 이는 컴포넌트가 애플리케이션 전체를 실행하지 않고도 개별적으로 확인되고 개선될 수 있음을 뜻한다. |
| 시각적 피드백 제공 | 컴포넌트를 실시간으로 렌더링하고, 다양한 상태와 props를 통해 동작을 확인할 수 있다. 개발자는 코드 작성 중에 즉각적인 시각적 피드백을 받을 수 있다. |
| 컴포넌트 문서화 및 관리 | 워크샵은 각 컴포넌트의 상태와 사용법을 문서화하는 데 도움이 되며, 이를 통해 디자인 시스템을 구축하거나 팀원 간의 협업을 개선할 수 있다. |
Swagger를 사용해본 사람이 있다면, 이를 떠올리면 얼추 비슷하게 통할 것이다.
🤔 난 왜 스토리북을 공부하게 되었는가?
네이버 부스트캠프의 그룹 프로젝트를 진행하면서 문서화를 핵심 가치로 잡게 되었다.
이에 따라서, JSDoc, TSDoc을 도입을 했고, 백앤드에서는 Swagger를 도입을 했다.
Swagger를 도입하게 되면서 프론트앤드에도 적절한 도구가 있지 않을까 하는 생각이 들었다.
멘토님께 여쭤보니 Storybook이라는 도구가 있음을 알게 되었고, 마침 쓰려는 TSDoc과 연동이 잘 된다는 이유도 있어서, 굉장히 큰 유용성을 느껴 도입하게 되었다.
🤔 비슷한 다른 도구는 없는가?
관련해서 몇 가지 도구들을 빠르게 찾아보았다.
아무래도 그냥 도입하기 보다는 좀 더 좋은 도구가 있지 않을까 했기 떄문이다.
몇 가지 비슷한 도구가 있긴 했다. GPT에게 정리를 시켜보니 다음과 같은 표를 얻을 수 있었다.
| 도구 이름 | 장점 | 단점 | 공통점 | 차이점 |
|---|---|---|---|---|
| Storybook | 다양한 프레임워크 지원, 풍부한 애드온 생태계, 강력한 문서화 및 테스트 기능 | 초기 설정 복잡할 수 있음, 프로젝트 규모 커질수록 속도 저하 가능 | 독립적인 컴포넌트 개발 환경 제공, 문서화 기능 | 가장 널리 사용됨, 기능과 확장성 면에서 가장 풍부 |
| Styleguidist | 간단한 설정, React 전용이라 React에 최적화됨 | 기능이 Storybook보다 제한적, 애드온 생태계가 부족함 | React 컴포넌트 문서화 및 테스트 | React 전용으로 다른 프레임워크 지원 안 함 |
| Docz | 쉬운 설정 및 빠른 시작, MDX 지원으로 문서 작성 용이 | 유지보수가 활발하지 않을 수 있음, 커스터마이징 제한 | 문서화 및 개발 환경 제공 | 문서화에 특화되어 있음, Storybook보다 간단함 |
| Ladle | 가볍고 빠른 속도, 최신 기능 지원 | 애드온이 부족할 수 있음, 커뮤니티 규모가 작음 | 컴포넌트 스토리 개발 환경 제공 | 성능과 최신 기능에 집중, 단순함 |
| Pattern Lab | Atomic Design 방식 지원, 강력한 디자인 시스템 구축 | React나 Vue와의 통합이 제한적일 수 있음 | 디자인 시스템 구축 및 문서화 가능 | 디자인 시스템 구축에 초점, Atomic Design 기반 |
팀에는 나를 비롯해 프론트앤드 개발이 익숙치 않은 사람들이 있었다.
또한, 더 중요하게 구현해야할 것들이 많았고, 어디까지나 스토리북은 부차적인 요소였다.
이에 따라서 다음과 같은 기준으로 도구를 선택하게 되었다.
- 학습이 쉬워야 한다. : 다른 공부할게 많았기 때문이다.
- 관련 레퍼런스가 많아야 한다. : 에러가 발생시 대응이 쉬워야 했기 떄문이다.
- 추후 테스트까지 고려할 수 있으면 좋다. : e2e 테스트를 할 지는 의문이지만, 지원해서 나쁠게 없다고 생각했다.
이런 관점에서 놓고 보니, 결국은 스토리북이 적합하다는 생각이 들었다.
참고 레퍼런스도 많았고, 강의 및 가이드도 확실했기 때문이다.
실제로 나도 위의 두 자료를 참고해서, 내 경험을 담아 본 문서들을 작성하고자 하고 있다.
비단 내 글이 아니더라도, 참고자료가 많으니 이를 사용해서 나쁠 것이 없다는 생각에 도입하게 되었다.
🤔 본격적인 들어가기에 앞서서...
스토리북 설치에 앞서서 어떤 환경을 설정할때는 항상 git으로 커밋을 하면서 백업을 해두는 것을 추천한다.
그래야 중간에 뻑이나도.. 되던 구간까지 롤백할 수 있기 때문이다.
스토리북 튜토리얼 를 따라서 정리하고 있다. 단순 이대로 하기 보다는, 몇 가지 내 경험을 녹여서 정리하고자 한다.
좀 더 단순하면서 명료한 글을 보고 싶다면 위의 글을 참고하면 된다.
🤔 스토리북 테스트 템플릿 설치하기
이 내용은 어디까지나 템플릿을 설치하는 방식이다.
프로젝트에 템플릿이 필요없을 수 있다. 이 경우는 🤔 템플릿 없이 스토리북 자체만 설치하기를 참고하도록 한다.
우리는 yarn을 이용해서 설치할 것이다.
yarn이 무엇인지는 다루지 않을 생각이다. 스토리북에 대해서 볼 정도라면 해당 패키지매니저 정도는 알리라고 믿 고 스토리북 설명에만 집중하고자 한다.
튜토리얼에서는 degit을 이용해서 설치를 권장하고 있다. 이번에 처음 접하게 되어서 찾아보니 다음과 같았다.
degit은 GitHub, GitLab 등 원격 저장소에서 특정 레포지토리의 최신 상태를 커밋 이력 없이 로컬로 복제할 수 있는 명령줄 도구입니다. 이를 통해 프로젝트의 템플릿이나 초기 설정을 빠르게 가져올 수 있으며, 불필요한 Git 이력을 포함하지 않으므로 클론 속도가 향상됩니다.
쉽게 말하면, 잡다한 요소를 제외한 채 빠르게 clone할 수 있는 도구인 듯 하다.
이를 통해서 스토리북 측에서 튜토리얼 할 수 있도록 제공해준 템플릿을 다운로드 한다.
# 템플릿을 클론한다.
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# 의존성요소들(dependencies)을 설치한다.
yarn
그리고 이게 올바르게 작동하는 지 아래 명령어를 통해 살펴볼 수 있다.
# 스토리북 자체 실행 (포트번호 : 6006)
yarn storybook
# 프로젝트 자체를 실행 : vite + react로 구성 (포트번호 : 5173)
yarn dev
하나는 스토리북 자체를 실행하는 명령어이다. 그리고 나머지 하나는 우리가 개발하는 프로젝트를 vite로 실행하는 명령어이다.
이를 실행시키면 다음과 같은 화면이 나온다.
이렇게 하면 설치가 끝났다.
🤔 템플릿 없이 스토리북 자체만 설치하기
하지만 뭔가 찝찝하지 않은가? 프로젝트에서 템플릿을 매번 설치할 수는 없지 않은가?
그래서 다음과 같은 가이드를 다시금 첨부한다.
pnpm dlx storybook@latest init
pnpm 사용시 위와 같이 설치하면 된다.
yarn dlx storybook@latest init
yarn 사용시에는 위 코드를 참고하도록 한다.
이러면 이제 진짜로 설치가 끝났다.
🤔 이후에는 어떻게 전개할 생각인가?
가이드나, 여러 참고자료가 많기 때문에 나는 내가 학습한 방법 그대로를 올리고자 한다.
이를 좀 더 참고하기 쉽도록 올린다고 생각하면 될 듯 하다.
그리고, 이를 통해서 학습한 내용, 실습한 내용, 활용한 내용 등을 담으면서 기술 그 자체의 가이드문서를 적기 보다는, 내가 실제로 어떻게 탐구했는지를 기록하고자 한다.