브라우저에서 구현한 시네마틱 DOSCAR 색보정 워크플로우

DOSCAR Awards 후보를 만들어내는 브라우저 파이프라인

이미지 후보를 업로드하고, 시네마틱 색보정을 적용한 뒤, 결과물을 즉석에서 확인하는 전체 흐름을 하나의 React 컴포넌트로 묶었어요. 기존 @doro-web 프로젝트에서 사용하던 WASM 파이프라인을 그대로 가져오면서도, 갤러리 스타일에 맞는 인터랙션과 UI를 적용했어요.

통합 과정에서 고민한 포인트

• WASM 파이프라인 그대로 이동: Rust로 작성된 이미지 변환 로직을 doro_core_bg.wasm과 Worker로 묶어, 브라우저에서도 성능 저하 없이 실행되도록 구성했어요. public 디렉터리로 옮긴 후 Worker 초기화 경로를 절대 경로(/doscar-awards/doro_core_bg.wasm)로 고정해서, CSR 환경에서도 안정적으로 로드해요.
• fumadocs UI와의 조화: shadcn 컴포넌트를 사용하는 대신 buttonVariants, cn 헬퍼로 기존 갤러리 카드와 일관된 타이포그래피/컬러 시스템을 유지했어요.
• 미리보기 & 결과물 분리 UI: 업로드된 이미지는 즉시 썸네일로 확인하고, 변환 결과는 별도의 캔버스에서 렌더링해요. 처리 중에는 진행률을 시각적으로 보여주고, 완료되면 최종 결과만 남겨 비교하기 쉬운 레이아웃을 적용했어요.

무대 뒤에서 돌아가는 기술들

• WorkerManager 래퍼: 메시지 기반으로 진행 상황, 프리뷰(Preview) 업데이트, 최종 PNG 결과를 스트리밍해요.
• Preview 캔버스 스트리밍: Doro 파이프라인이 주기적으로 보내는 base64 RGB 데이터를 usePreviewCanvas 훅(Hook)에서 받아, 캔버스에 바로 그려요.
• 에러 처리와 롤백: 업로드 실패나 Worker 오류가 발생하면 프리뷰와 진행률을 초기화하고, 개발자 콘솔에서 명확한 로그를 확인할 수 있도록 구성했어요.

DOSCAR Awards 후보 이미지를 생성하는 전체 체인을 브라우저에서 바로 체험해 보세요. 업로드 후 Process 버튼을 누르면, 워커가 만들어 내는 색보정 결과를 캔버스에서 확인할 수 있어요.