Comfy Org (ComfyUI) · 2025.08 – 2026.03
ComfyUI 디자인 시스템 구축 – Storybook 도입과 공통 모달 전면 마이그레이션
Storybook 도입과 공통 모달 프리미티브로 프로덕트 전체 모달을 이관, 템플릿 클릭 사용자 3배
개요
생성형 AI 오픈소스 플랫폼 ComfyUI의 프론트엔드 코어팀에서 디자인 시스템 영역 Code Owner로 활동하며, 문제 제기부터 팀 합의, 구축, 프로덕트 전체 도입까지 주도했습니다. 영어로 리뷰하는 오픈소스 환경에서 진행했고, 모든 작업 이력이 GitHub에 공개되어 있습니다.
배경
문제
- PrimeVue 기본 스타일과 커스텀 CSS가 뒤섞여 화면마다 UI가 달라짐
- 비슷한 컴포넌트가 여러 갈래로 파편화되어 기여자마다 다른 방식으로 구현
목표
- 오픈소스 기여자 누구나 공용 컴포넌트를 쉽게 파악하고 재사용할 수 있는 디자인 시스템 구축
- 프로덕트 전체 모달과 공용 컴포넌트를 새 시스템으로 이관
주요 작업
- Storybook 인프라를 먼저 PR로 올려 컴포넌트 파편화를 팀에 가시화하고 디자인 시스템 도입 합의를 이끌어냄
- Modal / BaseModalLayout 프리미티브를 설계하고 Node Manager, Model Browser, Workflow Template, Settings 등 프로덕트 전체 모달을 순차 이관 (단일 PR 기준 최대 54개 파일)
- 세 갈래로 나뉘어 있던 검색 컴포넌트를 SearchInput 하나로 통합하고, 하드코딩된 스타일 값을 Tailwind 디자인 토큰으로 전환
- PrimeVue AutoComplete·ProgressSpinner·Galleria를 자체 구현으로 교체하고 키보드 접근성(Escape 이벤트 전파 버그 포함) 개선
- 정적인 로딩 구간을 브랜드 경험으로 바꾸자고 제안해 로고 물결 채움 로딩 인디케이터와 스플래시 화면을 공용 컴포넌트로 설계·구현
성과
- 템플릿 클릭 사용자 3배 증가
Workflow Template 모달을 새 디자인 시스템으로 개편한 뒤 실제로 템플릿을 클릭한 사용자가 3배로 늘었습니다.
- 모달 즉시 이탈 50% 이상 감소
모달을 열자마자 닫는 사용자 비율이 개편 후 50% 이상 줄었습니다.
- 디자인 시스템 PR 60건 병합
Code Owner로서 디자인 시스템 영역 PR 60건(+12,599 / -7,803 라인)을 병합했습니다.
핵심 기능
- 01
Storybook 기반 컴포넌트 문서화
공용 컴포넌트를 Storybook으로 문서화해 디자인팀 비주얼 리뷰와 커뮤니티 기여자 온보딩을 쉽게 만들었습니다.
- 02
Modal / BaseModalLayout 프리미티브
프로덕트 전체 모달이 같은 레이아웃·간격·동작을 쓰도록 공용 프리미티브를 설계하고 순차 이관했습니다.
- 03
로고 물결 채움 로딩 인디케이터
정적인 대기 시간을 브랜드 경험으로 바꾸는 로딩 모션을 디자인 시스템 컴포넌트로 추가했습니다.
화면
※ 마지막 이미지는 Comfy Org 노상훈(Dr.Lt.Data) 님의 추천서입니다.
링크
