2023년 전반기에 Poom이라는 서비스를 개발하면서 이것저것 프론트엔드 개발을 편리하게 해주는 기술들을 써 보았는데, 그중에 Storybook을 써본 경험담을 작성해 보려고 한다.
이번 경험을 통해 프론트 개발 전, 디자인 시스템을 구축하는 것이 효과적인 개발을 할 수 있게 해준다는 것을 깨달은 것 같다.
그렇다고는 해도 아직 프론트 업계에 물들지 않은 초심자가 간단하게 만져보고 쓰는 글이다.
우선 Storybook 이란?
컴포넌트 단위의 UI 개발환경을 지원하는 도구이다.
여러 컴포넌트 UI 들을 문서화하여 여러 정보들을 보기 편하게 만들어 준다.
다양한 프론트엔드 웹 프레임워크(React, Vue, Angular 등등)에서 지원한다.
Storybook 사용법
내가 작성해두는 것보다 여러 참고하기 좋은 사이트들이 있으니 참고하도록 하자.
특히 공식문서.
Storybook Tutorials
Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community.
storybook.js.org
Storybook 경험담
내가 진행했던 프로젝트는 React 환경으로 개발을 진행하였다.
그래서 Figma에서 디자인을 할 때부터 컴포넌트 단위로 촘촘하게 개발을 진행하였고 꽤나 디테일하게 디자인을 하였다.
(이 색상은 왜 좋고.. 이 디자인은 통일성이 어떻고.. 엄청 열심히 토의를 했었다.. 🥹)
디자인을 마친 후 이제 본격적인 개발을 하게 되었고 Figma에 디자인한 것들을 코드로 옮겨야 했는데 Tailwind CSS로 디자인을 옮기면서 여러 애로 사항이 있었다.
- 해당 컴포넌트를 구성하는 속성들을 Figma를 보고 일일히 Tailwind CSS로 옮기는게 너무나 번거롭다.
- 코드적으로는 문서화 되어있지 않으니 개발자 마다의 속성을 배치하는 순서나 코드 구조가 달랐다.
- 다른 파일에서 동일한 컴포넌트를 만들때 여러번 동일한 코드를 작성해야 하니 불편했다.
Storybook은 이런 문제들을 잘 해결해준다.
우리는 프로젝트를 진행하기에 앞서 이런식으로 Figma에서 Asset 하나하나를 컴포넌트화 해 두었다.
하지만 이것을 코드로 옮길때에는 어.. 색상 hex코드는 얼마지.. border 픽셀값은 얼마지.. margin 값은.. 이런 멍청한 짓을 하고 있으면 정말 시간이 아깝다. 물론 Figma에서 CSS 코드를 지원해준다고 하더라도 Tailwind CSS와 같이 Class를 어느정도 외우고 있어야 하는 경우엔 큰 도움이 되지 않는다.
그래서 Storybook을 통해 이러한 컴포넌트들을 코드로 문서화를 진행했다.
Storybook은 내가 사용하는 CSS 프레임워크의 코드를 저런식으로 문서화 하여 작성해두면 오른쪽 그림과 같이 웹 상에서 시각화 하여 볼 수 있으며 "Show code" 버튼을 통해 내가 원하는 컴포넌트의 CSS정보를 확인할 수 있다.
개발 시에도 저 코드를 붙여넣기 해서 그대로 사용하면 되니, 여러 사람이 개발하는 환경에서 코드를 일정하게 유지하고 빠르게 개발하는데 있어서 엄청 유용했다.
다만.. 저런 문서화 작업을 누군가는 맡아서 해야한다는게 조금 불편하고 귀찮을 수도 있다.
하지만 저런 사소한 차이 하나가 개발 전체에 있어서는 큰 퍼포먼스를 불러올 수 있다는 경험을 한 중요한 순간이였다.
나중에 디자인 시스템에 관해 자세히 배워보고 싶게 되었다..!
만약 어느샌가 내가 작성했던 컴포넌트를 이전에 개발해두었던 파일에 들어가서 일일히 찾아 복사 붙여넣기를 하고있다면! 꼭 추천하는 도구이다.
'활동 > Poom (ZeroWasteShop)' 카테고리의 다른 글
| 친환경을 위한 초록발자취 서비스 [ 품: POOM ] 개발기 (11) | 2023.08.15 |
|---|---|
| Github Action으로 한단계 성장..? (0) | 2023.08.04 |