Storybook이란?

규갓 God Gyu·2025년 4월 22일

면접질문

목록 보기
122/142

UI 컴포넌트 개발하고 문서화하는 데 사용되는 개발 도구
컴포넌트의 상태와 동작을 독립적으로 테스트할 수 있도록 도와줌

Storybook에서 Story는 특정 컴포넌트가 특정 상태에서 어떻게 렌더링되는지를 정의
ex - 버튼 컴포넌트가 기본 상태에서 렌더링되는 모습과 비활성화된 상태에서 렌더링되는 모습을 각각 별도의 스토리로 정의할 수 있음
이를 통해 UI 컴포넌트의 다양한 활용 사례들을 쉽게 테스트하고 관리할 수 있음

Storybook 활용 시, 전체 애플리케이션 실행 안하고도 개별 컴포넌트를 분리하여 개발하고 테스트할 수 있어 개발 생산성 향상됨

또한 개발자뿐만 아니라 디자이너, QA, PM과 같은 다양한 직군과의 협업을 원활하게 해줌
팀원들이 직접 컴포넌트를 시각적으로 확인하고 피드백 줄 수 있어, 개발 프로세스에서 커뮤니케이션 비용 줄이는 데 도움 됨
특히, 디자인 시스템 구축하는 경우 Storybook활용 시 컴포넌트 라이브러리를 보다 쉽게 문서화하고 공유할 수 있음

단점?

관련 설정과 유지보수를 위한 추가적인 업무 발생하게 됨
대규모 플젝에선 수많은 스토리 파일 관리하는 게 큰 부담일 수 있음
특정 라이브러리와의 호환성 문제 발생 가능성도 있음
또한, 서버와 연동된 컴포넌트 경우 Mock 데이터 따로 설정해야 하는 부담 생김

신중한 도입 결정 필요함

profile
웹 개발자 되고 시포용

0개의 댓글