Chromatic에서 Cloudflare로 스토리북 배포 환경 전환하기

들어가기 전에

Chromatic을 사용하면서 겪었던 불편함과, 그 문제를 해결하기 위해 Cloudflare로 스토리북 배포 방식을 전환하게 된 과정을 간단히 정리해보았습니다.

왜 스토리북을 도입하게 되었는지?

도입 이유는 대부분의 팀이 비슷할 것 같습니다.

• 디자인팀과 개발팀이 동일한 시각적 기준을 공유할 수 있도록
• 새로운 팀원이 컴포넌트를 빠르게 이해하고 온보딩할 수 있도록
• 컴포넌트가 늘어날수록 복잡해지는 재사용 여부·구성·Props 정보를 체계적으로 관리하기 위해

스노로즈는 2024년 10월에 리뉴얼을 진행했고, 2025년에는 프론트팀 인원이 4명에서 6명으로 늘어났어요. 또 2025년에는 알림, 이벤트 게시판 등 신규 기능 개발도 예정돼 있었기 때문에, 초반부터 컴포넌트 기반 협업 환경을 제대로 갖추는 것이 필요하다고 생각했어요. 마침 새로 합류한 팀원이 스토리북 배포 경험이 있어서, 팀원의 리딩 하에 자연스럽게 스토리북을 도입하게 되었습니다.

그리고 제가 인턴으로 근무했던 (주)구름에서도 스토리북의 장점을 더 깊게 느꼈어요. (주)구름은 IDE, EDU 등 다양한 프로덕트를 운영하고 있는데, 이를 위해 컴포넌트 문서화가 체계적으로 잘 정리되어 있고, 내부 패키지로도 묶여 있어 필요한 순간마다 스토리북에서 컴포넌트를 찾아 바로 import해 쓸 수 있었어요. 이런 경험이 이번 스토리북 도입을 결정할 때 큰 영향을 줬어요.

이후 코드잇 단기심화 부트캠프에서도 스토리북 관련 이론을 배우게 되었고, 배운 내용을 실제 프로젝트에 녹여보고 싶다는 생각이 들어 스토리북 작업을 제가 주도해서 진행하게 되었어요.

Chromatic으로 스토리북을 배포하게 된 계기

처음 스토리북을 배포할 때는 자연스럽게 Chromatic을 선택했어요. 스토리북과의 연동이 잘 되어 있고, 배포 과정도 다른 서비스보다 간단하고 친화적이라고 느꼈습니다.

GitHub만 연동해두면 빌드–배포가 자동으로 진행되고, PR에서도 변경된 스토리북을 바로 확인할 수 있어서 초기에 사용하기에 부담이 없었어요. 그래서 “스토리북을 배포한다면 일단 Chromatic부터 써보자”라는 판단이 자연스럽게 이어졌습니다.

왜 Chromatic → Cloudflare로 배포 툴을 변경했는가

스노로즈와 부트캠프 프로젝트에서 Chromatic 기반 스토리북 환경을 두 번 구축해보니, 가장 크게 느낀 불편함은 고정 URL을 제공하지 않는다는 점이었어요.

이 문제를 해결해보려고 부트캠프 프로젝트에서는 PR이 생성될 때마다 Storybook을 Chromatic에 자동으로 배포하는 CI/CD 파이프라인(.yml)을 구성해보기도 했습니다.

PR에서 변경된 스토리북을 바로 확인할 수 있다는 점은 분명 장점이었지만, 배포 URL이 계속 변경되는 구조 자체는 그대로였기 때문에 근본적인 해결책이 되지는 않았어요.

그래서 스토리북을 항상 같은 주소에서 확인할 수 있는 환경이 필요하다고 판단했고, Cloudflare로 배포 방식을 전환하게 되었습니다.

이제는 매번 새로운 URL을 공유하거나 최신 버전을 보고 있는지 확인할 필요가 없어졌고, 내부 문서를 수정하는 번거로움도 사라져 누구나 동일한 URL에서 최신 스토리북을 편하게 확인할 수 있게 되었어요.

앞으로 개선하고 싶은 점

스토리북의 장점은 충분히 느끼고 있어요. 다만 경험이 아직 많지 않다 보니, 더 효율적인 구조로 운영할 방법을 계속 고민 중입니다.

특히 아래 두 가지를 개선하고 싶어요.

• 컴포넌트 구조화: 스토리북 안에서 원하는 컴포넌트를 빠르게 찾을 수 있는 구조
• 문서화: 새로운 팀원도 동일한 기준으로 작업할 수 있도록 정해진 규칙을 문서로 정리

앞으로는 MUI 같은 UI 라이브러리의 컴포넌트 분류 방식을 참고해, 더 체계적인 구조를 만들어보고 싶습니다.

한 번 정리를 시작하면 또 다른 개선 포인트도 자연스럽게 보일 것 같아요 😊

---

마치며

스토리북 배포 방식을 Cloudflare로 전환한 뒤, 팀 내부에서 스토리북을 공유하는 흐름이 훨씬 안정적이고 편해졌어요. 개발 환경이 조금씩 개선될 때마다 협업도 함께 좋아지는 것 같아요.

앞으로도 구성과 사용성을 더 다듬어가면서 스토리북을 꾸준히 발전시켜보려고 합니다.