Storybook
점점 늘어나는 컴포넌트들을 한눈에 정리하기 힘들때,
스토리북은 이런 컴포넌트들을 시각적으로 정리 + 구현 코드를 문서화
디자이너와 협업할때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며,
다른 개발자와 협업할 때는 컴포넌트를 어떻게 구현했는지 + 사용방법을 스토리북을 통해 보여줄 수 있다.
저희는 프론트엔드 개발자 5명으로 구성된 팀으로, UI 중심의 작업이 주를 이루는 프로젝트였습니다.
이를 효율적으로 테스트하고 문서화하기 위해 Storybook을 선택했습니다.
- UI 테스트 최적화: Jest와 같은 기능 테스트 대신, Storybook을 사용하여 컴포넌트 단위의 시각적 테스트를 진행했습니다. 이를 통해 컴포넌트 간의 UI 상태를 직관적으로 확인하고 빠르게 피드백을 반영할 수 있었습니다.
- 구조의 일관성: FSD구조를 Storybook에도 동일하게 적용하여, 개발자 간 협업과 유지보수가 용이하도록 설계했습니다.
- 배포와 공유: GitHub Pages를 활용해 Storybook을 정적 웹사이트로 배포하여 팀원과 이해관계자가 언제든 UI를 확인할 수 있도록 접근성을 높였습니다.
