Comfy Org (ComfyUI) · 2025.10 – 2026.03
ComfyUI 미디어 에셋 사이드바 – 생성 이미지·영상·오디오 관리 기능
생성한 이미지·영상·오디오를 한 곳에서 관리하는 사이드바 탭을 처음부터 설계·개발
개요
ComfyUI 사용자가 생성한 이미지·비디오·오디오 결과물을 한 곳에서 관리할 수 있는 사이드바 탭을 처음부터 설계하고 개발했습니다.
배경
문제
Cloud 환경에서 사용자가 만든 입력·출력 결과물을 관리할 UI가 없어서, 생성한 결과물을 다시 찾거나 정리하기 어려웠습니다.
주요 작업
- 코어 탭 프레임워크 → 에셋 카드(MediaAssetCard) 프리미티브 → 히스토리 페이지네이션 → 멀티셀렉트 → 우클릭 컨텍스트 메뉴 → 워크플로 일괄 작업까지 계층적으로 구현
- 이미지·비디오·3D 파일 미리보기, 워크플로 JSON 다운로드·열기, 일괄 삭제·다운로드
- 여러 결과물 ZIP 다운로드를 클라이언트와 서버 중 어디서 처리할지 논의를 이끌어 결정 (대용량은 서버, 이미지 여러 장은 클라이언트)
- 카드 상태를 Storybook으로 문서화해 디자인 리뷰와 재사용을 쉽게 함
성과
- 사이드바 탭을 처음부터 설계·구축
탭 프레임워크부터 카드, 멀티셀렉트, 컨텍스트 메뉴까지 프레젠테이션 레이어 전체를 직접 만들었습니다.
핵심 기능
- 01
멀티셀렉트와 일괄 작업
여러 결과물을 선택해 한 번에 다운로드·삭제하고 워크플로를 불러올 수 있습니다.
- 02
우클릭 컨텍스트 메뉴
에셋 카드에서 바로 열기, 워크플로 불러오기, 다운로드 등 자주 쓰는 동작을 실행합니다.
화면
링크
