Claude Code로 '사진을 모자이크로 변환'하는 앱을 만들었습니다: 3D 스튜디오, 제작 영상, 3D 프린팅 키트, 1:1 세라믹 도안까지. 개발 과정 공유합니다.

이게 뭐냐면

Mosaiz는 사진을 실제로 조립 가능한 모자이크로 바꿔주는 툴임:

• 4가지 타일 스타일(격자, 벽돌 쌓기, 벌집, 유기적 로마 스타일)을 지원하는 3D 스튜디오.

• 모자이크가 스스로 조립되는 과정을 담은 시네마틱 영상.

• 모든 타일 뒷면에 번호가 각인되어 있고, 번호가 매겨진 베이스 플레이트가 포함된 3D 프린트 키트.

• 실제 세라믹 타일용 출력 가능 홈 키트: 1:1 배치도, 커팅 스티커, 쇼핑 리스트 제공.

• 근처 타일 가게를 찾아주는 우편번호 검색 기능.

가입이나 업로드 필요 없이 브라우저에서 바로 돌아감.

직접 해보기: https://winchxyz.github.io/mosaiz/

바이브 코딩은 어떻게 진행됐나

1. 시작은 거대한 프롬프트 하나로. 앱이 뭘 해야 하는지, 내가 원하는 모든 모드를 적고 "시니어 웹 개발자, 3D 디자이너, UX 디자이너, 마케터처럼 생각해"라고 주문을 넣었음. Claude Code(Opus)가 바로 코딩을 시작하진 않더라. 먼저 공유 데이터 계약을 작성하고, 6개의 병렬 Sonnet 에이전트(엔진, 3D/영상, 출력 파일, 매장 찾기, 스튜디오 UI, 랜딩 페이지)로 업무를 쪼갰음.

2. 하루 만에 첫 작동 버전 완성. 각 에이전트가 스크린샷 찍고, PDF 페이지 렌더링하고, 영상 프레임 뽑아보면서 지들끼리 테스트하고, 이상한 건 넘겨주기 전에 알아서 수정함.

3. 설명보다 레퍼런스가 깡패. 내가 원하는 시네마틱한 느낌을 말로 설명하기 힘들어서 그냥 맘에 드는 영상 하나 던져줬음. 그랬더니 프레임 단위로 뜯어보고 샷별로 분석해서(매크로 시작, 스케치 밑그림, 초점부터 퍼져나가는 연출, 줌아웃) 똑같이 구현해내더라.

4. 니 사진으로 테스트해 봐. 샘플은 잘 나왔는데, 내 사진 넣으니까 옷 색깔이 이상하게 초록색으로 뜨는 거임. 에이전트가 영역별로 색상 오차 측정하더니, 타일 색상 리스트에 차분한 톤이 빠진 걸 찾아내서 수치 조정으로 바로 고쳐버림.

5. 미리보기 요청하기. 런칭 영상 만들 때 전체 렌더링 전에 스틸 컷부터 보여달라고 했음. 덕분에 텍스트 겹치는 거랑 빈 프레임 나오는 거 미리 잡았지.