핵심 요약
한국그린데이터가 Storybook과 Cypress를 React 프로젝트에 도입해 UI 컴포넌트의 다양한 init state를 한 화면에서 확인하고, 디자이너와 기획자와의 협업 및 QA를 용이하게 하는 도구 도입 사례를 소개합니다.
주요 특징
- Storybook으로 Init state를 여러 케이스로 분리해 한 번에 확인 가능
- 컴포넌트 트리 구조와 Args를 활용한 파라미터 조정으로 빠른 미리보기
- Cypress를 도입해 사용자 흐름 중심의 End-to-End 테스트 강화
- CRA + TypeScript + styled-components 기반 예시 프로젝트로 로컬 실행 및 학습 용이
적용 고려사항
- 디자인-개발 간 컴포넌트 단위 재구성 필요
- 초기 도입 시 개발 비용 증가 및 학습 커브 존재
- 팀 내 가이드라인 정립과 협업 프로세스 조정 필요
