Storybook 도입할 수 있을까?

storybook.js

 스토리북 사용 관련해서 많은 글을 찾아볼 수 있었지만 "내 환경과 회사에 Storybook을 도입하면 어떤 장단점이 있을까?" 에 대한 고민을 해결해주지는 못하였습니다. 그래서 고민하고 찾아봤던 내용들 위주로 공유하고 기록하고자 합니다.

---

🤔 왜 Storybook을 사용하려고 하는가?

 

 저 같은 경우에는 회사에서 UI 기능 구현 요청이 들어오면 제일 먼저 하는 일이 비슷한 UI 찾기입니다. 그리고 실제로 어디에 있는지 알 방법이 없어서 일일이 페이지마다 직접 들어가서 찾아가는 수고스러움을 동반합니다.

 

 제 방법이 맞는지 이런 경우 어떤 식으로 문제 해결하는지 다른분들에게 한번 여쭤보았습니다. 지인 프론트 개발자인 두 분에게 물어봤는데 두 분 다 같은 대답을 하였습니다.

 

"아에 새로 만들어 버리면 되지 않을까?"

 

 새로 컴포넌트를 만든다고 하면 확실히 찾는 시간을 단축할 수는 있을 것 같습니다. 하지만 이미 만들어져 있는 걸 새로 만들고 있을 수 있는 찝찝함이 남아있습니다. 그렇다고 다른 팀원들한테 이 UI 비슷한 거 본 적 있지 않냐고 물어볼 수도 없는 노릇입니다. 이 또한 커뮤니케이션 낭비이기 때문입니다. 뭔가 더 좋은 방법이 없을까 고민하던 찰나에 storybook.js가 이러한 고민을 해결해주지 않을까 하는 생각에 Storybook.js를 분석해보기로 하였습니다.

 

 

What is storybook??

UI를 페이지 단위가 아닌 컴포넌트 단위로 렌더링하여 볼 수 있는 디자인 시스템

Storybook UI

 

Storybook UI는 위의 그림과 같이 왼쪽에서 컴포넌트 인덱스를 구성하고 오른쪽에서 해당 컴포넌트가 어떻게 생겼는지 또, 어떤 props를 전달받을 수 있는지 등을 확인해볼 수 있습니다. 확실히 Storybook으로 협업한다면 후에 인력이 충원되더라도 커뮤니케이션 낭비를 줄일 수 있고 DRY 원칙도 지킬 수 있을것 같아 보입니다.

 

---

 

🎨 Storybook을 적용하려면 아토믹 디자인 패턴이 필수?

 혹시 아토믹 디자인 패턴이라고 들어보셨나요? 스토리북을 적용하시는 많은 분이 아토믹 디자인 패턴을 사용한다는 것을 알게 되었습니다. 

아토믹 디자인 패턴

 아토믹 디자인 패턴은 Brad Frost라는 웹 디자이너가 고안한 패턴으로 컴포넌트를 위와 같이 atoms, molecules, organisms, templates, pages 다섯 단계로 나누고 있습니다. 한국말로 직역하면 원자, 분자, 유기체, 템플릿, 페이지가 됩니다.

 

 이미지의 예시와 같이 atoms에는 버튼, 텍스트, input 등의 엘리먼트가 해당하게 되고 molecules는 2개 이상의 atoms로 구성된 경우로 왼쪽에서 오른쪽으로 갈 수록 점차 조합이 커지는 개념입니다. 그래서 아토믹 디자인 패턴을 고려하면 다음과 같은 패키지 구성으로 나타나게 됩니다.

 

 

CRA 보일러플레이트에 아토믹 디자인패턴 적용(왼:vscode 패키지구조, 오:storybook 패키지구조)

 

  아토믹 디자인 패턴을 적용하고 components 폴더를 다섯 단계로 구분하고 나서 가장 좋았던 점은 atoms부터 패키지구조가 알파벳 순서로 떨어진다는 점이었습니다. 아쉬운 점은 templates와 pages 두 폴더만이 순서가 바뀌었는데 다른 사람들이 적용한 것을 보면 pages 폴더를 과감히 버리거나 UI 폴더를 따로 만들어 atoms, molecules, organisms를 묶고 pages, templates, UI로 알파벳 역순으로 패키지 구조를 조정한 사례도 보았습니다.

 

 카카오 FE 기술 블로그에서도 아토믹 디자인 패턴 도입에 대한 글을 찾아볼 수 있었습니다. 제일 흥미로웠던 부분은 아토믹 디자인 패턴을 도입하면서 molecules와 organisms에 대한 구분에서 이미 많은 시행착오를 겪고 그들 나름대로 규칙을 정했는데 컨텍스트가 없는 경우는 molecules, 컨텍스트가 있는 경우에는 organisms로 사용하는 것으로 하고 판단하기 모호한 경우에는 organisms로 작성 후 코드 리뷰를 통해 변경하는 것으로 정하였습니다.

 

 라인 엔트리에서 적용한 방법도 찾아볼 수 있었습니다. 라인 엔트리에서는 molecules, organisms 이 2단계를 과감히 생략하고 modules라는 폴더로 묶어서 atoms, modules, templates 3개의 폴더로만 패키지 구조를 관리하는 모습을 선보였습니다.

 

---

 

🗳️ Storybook 사용할 것인가? 말 것인가?

 

  여기까지 살펴보고 나서 저는 사실 멘붕이 왔습니다. 사실상 저희 팀에서 아토믹 디자인 패턴을 적용하기는 어렵겠다는 생각이 들었습니다. 저희 팀은 프론트엔드팀이 따로 없고 프론트, 백엔드 구분 없이 다 같이 개발하기 때문에 프론트만 가지고 회의를 진행하기에는 비용 낭비가 너무 커 보였습니다. 그리고 이제 와서 패키지 구조를 다시 잡기에는 시간 낭비가 너무 크겠다는 생각이 들었습니다. 그렇다고 스토리북을 사용하지 못한다고 생각하면 조금 아쉬웠습니다.

 

스토리북을 정말 사용할 수 없는걸까?? 😭

 

당장에 패키지 구조를 전체적으로 다 뜯어서 아토믹하게 만드는 것은 어렵겠지만, 마침 공통 컴포넌트를 모아놓은 폴더가 있어서 그곳에서부터 하나씩 점진적으로 도입할 수는 있을 것 같다고 생각하였습니다. 대신 현재 진행하고 있는 사이드 프로젝트에서는 팀원들에게 소개 후 다들 좋은 반응을 보여 실제로 적용해서 사용 중입니다. 아래 프로젝트는 라인 엔트리의 방식을 채택해서 개발하였습니다.

 

GitHub - jejuEdu/jenfra-web: 젠프라 웹사이트

 스토리북이 매력적이라고 느껴지는 게 저같이 신중한 사람들에게는 잘 정돈된 UI 인덱스가 있으면 좀 더 편리하고 새로 들어오는 분들에게도 개발시간, 협업 시간, 생산성 관련해서 확실히 도움이 될 것 같다는 느낌이 들어서 규모가 큰 회사라면 도입해서 사용해봐도 굉장히 매력적일것 같다는 생각이 듭니다.

 

---

📖 참고자료

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/