Claude Code를 활용해 1.5일 만에 서울 아파트 3D 지도를 만든 후기

r/vibecoding 여러분 안녕하세요,

지난 1.5일 동안 몇 달 전부터 만들고 싶었던 프로젝트를 '바이브 코딩'으로 완성했습니다:
높이 = 평당 가격, 색상 = 비용 강도로 표시한 서울의 모든 아파트 3D 지도입니다.

🔗 https://urbancost.xyz

기술 스택:

• Next.js + TypeScript
• Three.js (처음 사용해 봄)
• Mapbox 베이스 레이어
• Supabase (데이터용)
• Vercel (배포용)

저는 프론트엔드 개발자지만 WebGL이나 3D는 한 번도 다뤄본 적이 없습니다. Claude Code가 실제 렌더링 코드의 약 90%를 작성했습니다. 제가 한 일은 주로 다음과 같습니다:

• 원하는 기능 설명 ("도시가 빛나게 해줘", "타임 슬라이더 추가", "레이어를 전환할 때 건물이 모양을 바꾸게 해줘")
• 카메라 각도와 색상 스케일 조정
• Claude가 환각(hallucination)을 일으킨 API 부분 수정
• 데이터 정리 (한국 정부 API는 엉망입니다)

놀라웠던 점:

1. Three.js 보일러플레이트가 한 번에 해결되었습니다. 혼자 했으면 일주일은 걸렸을 작업이 20분 만에 끝났습니다.
2. Claude가 deck.gl 통합에는 고전했습니다. 계속 버전을 혼동하더군요. 결국 deck.gl을 버리고 순수 Three.js로 갔는데, Claude가 훨씬 잘 다루더군요.
3. 시각적 개념을 설명하는 '바이브'가 놀라울 정도로 잘 작동했습니다. "블룸버그와 심시티가 밤에 만난 것처럼 보이게 해줘"라고 했더니 실제로 일관된 디자인 결과물이 나왔습니다.

아무도 요청하지 않았지만 추가한 기능:

• 도시 위를 날아다니는 작은 비행기와 비행선 (비행선에 제 @ 계정을 넣었습니다 하하)
• 2020년부터 2026년까지의 타임 슬라이더 (강남이 빨갛게 변하는 걸 볼 수 있습니다)
• 모바일 WebGL은 악몽이라서 데스크톱 최적화 안내 문구를 넣었습니다

솔직한 한계:

• 모바일에서는 사실상 사용이 불가능해서 안내 문구로 대체했습니다
• 두 한국 정부 API 간의 데이터 매칭 정확도는 100%가 아니라 약 85% 정도입니다
• 실시간 멀티플레이어 기능은 아직 없습니다 (계획 중)

워크플로우나 제가 사용한 특정 프롬프트에 대해 궁금한 점이 있다면 언제든 답변해 드리겠습니다.