3D Mockup Preview

항목	내용
만든 사람	smyno73642
사용 도구	Claude Code + Vanilla JS + Three.js
GitHub	smyno7364/wallmock (비공개)
Live Demo	wallmock.vercel.app

---

프로젝트 소개

전시회·팝업스토어·기업 행사에서 사용하는 대형 벽체 인쇄물(전시월·포토월·백월)의 시안을 실제 적용 모습으로 미리 확인할 수 있는 웹 서비스입니다. 고객이 이미지나 PDF를 업로드하면, 실제 벽 크기 비율에 맞춘 2D 평면 목업과 Three.js 기반 3D 인터랙티브 미리보기를 즉시 생성합니다.

D-ONWORKS의 실제 사업 현장에서 쓰기 위해 만들었습니다. 전시월 제작을 의뢰한 고객에게 "완성되면 이렇게 보입니다"를 납품 전에 보여줄 수 있게 되었습니다.

주요 기능

• 파일 업로드 — JPG, PNG, PDF(첫 페이지 자동 변환) 지원, 드래그 앤 드롭
• 벽체 설정 — 너비 1~10m(1m 단위), 높이 2,400mm 고정, I형/L형/U형/부스(4면) 형태 선택
• 2D 평면 목업 — Canvas API로 실제 비율 렌더링, 치수 표시(mm), 인체 비례 실루엣(1,700mm)
• 3D 인터랙티브 미리보기 — Three.js WebGL 실시간 렌더링, 마우스 회전/줌, 조명 옵션
• 이미지 드래그 배치 — 3D 뷰에서 이미지 위치를 드래그로 직접 조정
• 다운로드 — 2D 목업 PNG + 3D 스크린샷 PNG 저장

---

어떻게 만들었나요?

코딩 경험 없이 Claude Code와 대화하면서 처음부터 끝까지 만든 과정입니다.

1. PRD 작성 — "고객에게 전시월 완성 모습을 미리 보여주고 싶다"는 니즈에서 출발. 벽체 규격(폭·높이·형태)과 필요 기능을 문서로 정리
2. 2D 목업 구현 — HTML5 Canvas로 벽체 비율을 유지하면서 이미지를 full-fit 렌더링
3. 3D 미리보기 추가 — Three.js로 I형 벽체 3D 모델을 만들고, 업로드한 이미지를 텍스처로 입힘
4. 형태 확장 — L형·U형·부스(4면) 벽체를 추가하고, 코너기둥·조명 옵션 구현
5. 이미지 드래그 — 레이캐스팅으로 3D 벽면에서 이미지 위치를 드래그로 조정하는 기능 추가
6. PDF 지원 — PDF.js로 PDF 첫 페이지를 PNG로 변환해서 동일 흐름 적용
7. 배포 — Vercel에 올려서 고객에게 바로 링크 공유

---

기술 스택

영역	기술
UI	Vanilla JS (ES Modules) — 프레임워크 없이 순수 JS
2D 렌더링	HTML5 Canvas API
3D 렌더링	Three.js r160 (WebGL)
PDF 변환	PDF.js 3.x
서버리스 API	Vercel Serverless Functions (FTP 업로드, 이미지 프록시)
데이터베이스	Supabase (디자인 저장/불러오기)
배포	Vercel

---

배운 점

• Three.js를 직접 코딩한 게 아니라 Claude에게 "벽체를 3D로 보여줘"라고 말했을 뿐인데, 조명·그림자·카메라 회전까지 전부 만들어졌다
• 프레임워크(React, Next.js) 없이 순수 HTML+JS만으로도 실용적인 서비스를 만들 수 있다는 걸 체감했다
• 실제 사업에서 바로 쓸 수 있는 도구를 하루 만에 프로토타입할 수 있다는 게 바이브 코딩의 진짜 힘이다