Claude가 애니메이션 스타일을 구현하는 영상에서 영감을 받아, 사진을 실제 모자이크로 변환해 주는 앱을 만들었습니다

핵심 요약

Claude Code를 활용해 사진을 3D 모자이크 도안이나 실제 제작 키트로 변환해 주는 웹 앱 'Mosaiz'를 개발했습니다.

Mosaiz 기능 — 사진을 3D 모자이크로 변환하고 3D 프린팅용 STL 파일이나 실제 제작용 가이드를 생성함

Claude Code 활용 — Opus가 오케스트레이터 역할을 하고 6개의 Sonnet 에이전트가 병렬로 개발을 수행함

시각적 검증 — 에이전트들이 스크린샷과 영상 프레임을 직접 확인하며 결과물을 반복적으로 개선함

기술적 구현 — 2만 4천 줄의 TypeScript와 Three.js, WebCodecs 등을 사용하여 브라우저에서 즉시 실행됨

Claude가 여러 가지 스타일로 애니메이션 만드는 영상을 봤는데, 그중에 모자이크가 있더라고. 근데 문득 이런 생각이 드는 거야. 그냥 애니메이션으로 끝낼 게 아니라, 사진을 실제로 손으로 만들 수 있는 모자이크로 바꾸면 어떨까?

그래서 Claude Code한테 이 아이디어를 던져줬더니, 하루 만에 Mosaiz가 뚝딱 나왔어.

기능 소개

사진만 넣으면 3D 모자이크로 변신함. 타일 스타일은 4가지: 클래식 그리드, 러닝 본드, 허니콤, 그리고 사진 결을 따라가는 "유기적" 로마 스타일.
영화 같은 제작 영상 렌더링: 카메라가 뒤로 빠지면서 타일이 하나씩 채워지는 영상이 만들어짐 (위에 있는 영상이 앱으로 직접 만든 거임).
3D 프린트 키트: 색상별 STL 파일 제공. 타일 뒷면에는 번호가 새겨져 있고, 타일 하나하나 들어갈 자리가 파인 번호판까지 다 나옴.
진짜 타일 제작: 1:1 도안, 빈 타일에 붙여서 선 따라 자를 수 있는 "스티커", 색상별 쇼핑 리스트, 그림으로 된 설명서까지 포함된 홈 빌드 키트 출력 가능.
주변 타일 가게 찾기: 우편번호만 입력하면 근처 타일/공예 샵을 지도에 띄워주고, 정확히 어떤 색 타일을 사야 하는지까지 알려줌.
브라우저에서 바로 돌아감. 사진 업로드할 필요도 없고, 회원가입 같은 귀찮은 것도 없음.

Claude가 만든 방식

Claude Code를 썼어. Opus가 전체 지휘를 맡았는데, 먼저 공통 데이터 규격부터 짜고, Sonnet 에이전트 6개를 동시에 돌려서 모자이크 엔진, 3D 뷰어/영상, 제작용 파일 추출, 매장 찾기, 스튜디오 UI, 랜딩 페이지를 각각 맡겼지.
각 에이전트가 스크린샷 찍고, PDF 렌더링하고, 영상 프레임 추출하면서 스스로 결과물을 확인하고 제대로 나올 때까지 계속 수정했어. 마지막에 Opus가 싹 검토하고 합쳤고.
내가 원하는 영화 같은 느낌의 레퍼런스 영상을 던져주니까, 프레임 단위로 분석해서 샷을 쪼개더라고 (매크로 시작, 밑그림, 중심부부터 채워지는 연출, 카메라 줌아웃, 반짝이는 효과까지). 그걸 그대로 영상에 녹여냈어.
내 사진에서 이상한 녹색 빛이 돌길래 보니까, 에이전트가 영역별로 색상 오차를 계산해서 타일 색상 카탈로그에 차분한 톤이 빠진 걸 찾아내서 고치더라.
결과물: TypeScript 약 24,000줄에 테스트 코드 230개 이상 (React, Three.js, ΔE2000 색상 매칭, 3D 프린팅용 manifold-3d WASM, MP4용 WebCodecs 사용).

핵심 요약

Claude Code를 활용해 사진을 3D 모자이크 도안이나 실제 제작 키트로 변환해 주는 웹 앱 'Mosaiz'를 개발했습니다.

Mosaiz 기능 — 사진을 3D 모자이크로 변환하고 3D 프린팅용 STL 파일이나 실제 제작용 가이드를 생성함

Claude Code 활용 — Opus가 오케스트레이터 역할을 하고 6개의 Sonnet 에이전트가 병렬로 개발을 수행함

시각적 검증 — 에이전트들이 스크린샷과 영상 프레임을 직접 확인하며 결과물을 반복적으로 개선함

기술적 구현 — 2만 4천 줄의 TypeScript와 Three.js, WebCodecs 등을 사용하여 브라우저에서 즉시 실행됨

그래서 Claude Code한테 이 아이디어를 던져줬더니, 하루 만에 Mosaiz가 뚝딱 나왔어.

기능 소개

사진만 넣으면 3D 모자이크로 변신함. 타일 스타일은 4가지: 클래식 그리드, 러닝 본드, 허니콤, 그리고 사진 결을 따라가는 "유기적" 로마 스타일.
영화 같은 제작 영상 렌더링: 카메라가 뒤로 빠지면서 타일이 하나씩 채워지는 영상이 만들어짐 (위에 있는 영상이 앱으로 직접 만든 거임).
3D 프린트 키트: 색상별 STL 파일 제공. 타일 뒷면에는 번호가 새겨져 있고, 타일 하나하나 들어갈 자리가 파인 번호판까지 다 나옴.
진짜 타일 제작: 1:1 도안, 빈 타일에 붙여서 선 따라 자를 수 있는 "스티커", 색상별 쇼핑 리스트, 그림으로 된 설명서까지 포함된 홈 빌드 키트 출력 가능.
주변 타일 가게 찾기: 우편번호만 입력하면 근처 타일/공예 샵을 지도에 띄워주고, 정확히 어떤 색 타일을 사야 하는지까지 알려줌.
브라우저에서 바로 돌아감. 사진 업로드할 필요도 없고, 회원가입 같은 귀찮은 것도 없음.

Claude가 만든 방식

Claude Code를 썼어. Opus가 전체 지휘를 맡았는데, 먼저 공통 데이터 규격부터 짜고, Sonnet 에이전트 6개를 동시에 돌려서 모자이크 엔진, 3D 뷰어/영상, 제작용 파일 추출, 매장 찾기, 스튜디오 UI, 랜딩 페이지를 각각 맡겼지.
각 에이전트가 스크린샷 찍고, PDF 렌더링하고, 영상 프레임 추출하면서 스스로 결과물을 확인하고 제대로 나올 때까지 계속 수정했어. 마지막에 Opus가 싹 검토하고 합쳤고.
내가 원하는 영화 같은 느낌의 레퍼런스 영상을 던져주니까, 프레임 단위로 분석해서 샷을 쪼개더라고 (매크로 시작, 밑그림, 중심부부터 채워지는 연출, 카메라 줌아웃, 반짝이는 효과까지). 그걸 그대로 영상에 녹여냈어.
내 사진에서 이상한 녹색 빛이 돌길래 보니까, 에이전트가 영역별로 색상 오차를 계산해서 타일 색상 카탈로그에 차분한 톤이 빠진 걸 찾아내서 고치더라.
결과물: TypeScript 약 24,000줄에 테스트 코드 230개 이상 (React, Three.js, ΔE2000 색상 매칭, 3D 프린팅용 manifold-3d WASM, MP4용 WebCodecs 사용).

핵심 요약