코딩을 할 수 없는데 Claude를 이용해 30,000개 필지 규모의 3D 도시를 7주 만에 만들었습니다. 문제가 된 부분들.

개발자가 아닌 내가 Claude와 함께 만든 30,000개 부지 3D 도시 지도 구축기

나는 개발자가 아니다. 직접 함수를 작성해 본 적도 없다. 약 7주에 걸쳐 pixelrealestate.homes을 만들었다: 누군가 소유권을 주장하는 모든 부지가 내가 날아다닐 수 있는 three.js 도시 속 건물로 변하는, 30,000개 부지의 공유 지도이다. 소유자의 사진은 지붕 위의 빌보드에 걸린다.

모든 코드는 Claude가 작성했다. 나의 역할은 원하는 것을 설명하고, 결과물을 클릭하며, "아니, 이건 틀렸어"라고 말하는 것이었다. 이 글은 솔직한 버전이다: 이것이 무엇인지, 무엇이 잘못되었는지, 그리고 코드를 읽을 수 없을 때 AI를 이용해 구축하면서 내가 무엇을 배웠는지에 대한 이야기다.

Slow fly-over of a dense 3D city at sunset, labelled: Preview, the city once all plots are taken
미리보기 렌더링: 30,000개 부지가 모두 채워진 도시의 모습. 현재는 집 8채가 있다.

이것이 무엇인가

• 202×202 격자 구조이다. 도로, 공원 및 공공 건물을 제외하면 정확히 30,000개의 부지가 남는다.
• 바깥 고리(Outer Ring)부터 중심 지구(Core District)까지 5개 구역으로 나뉘어 있다. 외곽 부지의 가격은 $50에서 시작하며, 중심부로 갈수록 수천 달러까지 올라간다.
• 가격은 손으로 설정되지 않는다. 하나의 공식이 적용된다: 중심으로부터의 거리와 해당 지구에 이미 얼마나 많은 부지가 채워졌는지에 따른 계산이다.
• 부지를 소유권 주장하면 건물, 이름/링크/설명이 담긴 카드, 영구 URL의 QR 코드가 있는 증명서, 공유 이미지, 그리고 조회수/클릭 카운터가 제공된다. 수정은 무료다.
• 먼저 지붕에 자신의 사진을 무료로 시험해 볼 수 있다. 아무것도 업로드되지 않으며, 가입할 필요도 없다.

A billboard that says YOUR PICTURE on the roof of a small lit house next to a Market Hall, at dusk
사진 시험하기: 카메라가 무료 부지로 날아가 사진을 지붕에 배치한다. 오직 사용자만 볼 수 있다.

스택(Stack): three.js, Netlify functions, Supabase (Postgres + auth), 이메일 전송용 Resend, 결제 처리를 위한 Dodo Payments.

3D 부분

도시는 전체 30,000개 필지를 위한 one three.js 장면 크기입니다. 건물들은 인스턴싱(InstancedMesh는 재질과 모양별로 하나씩)되어 있어, 완전히 구축된 미리 보기조차 수십 개의 드로우 콜(draw calls)에 불과합니다. 각 지구에는 높이 밴드(height band)가 있으며, 무작위 분포가 낮게 치우쳐 있어 대부분의 건물은 밴드의 하단 근처에 위치하고 소수만 상단까지 도달합니다. 이것이 평평한 카펫 대신 스카이라인을 만드는 이유입니다. 건물 모양은 10가지(안뜰형, 십자형, L자형, 후퇴형 등)가 있으며, 빈 필지는 노이즈로 선택된 8가지 지면 유형 중 하나를 받습니다.

진행 과정에서 문제가 되었던 부분들:

그림자(Shadows). 도시 전체를 커버하는 방향성 라이트와 그림자 카메라를 사용했습니다. 확대해서 보면 괜찮아 보였습니다. 하지만 가까이서 보니 모든 그림자 경계가 계단처럼 보이는데, 이는 하나의 그림자 텍셀(texel)이 약 3개의 화면 픽셀을 커버했기 때문입니다. 해결책: 그림자 박스가 몇 가지 고정된 크기로 카메라를 따라가며 텍셀에 맞춰 스냅되도록 하여 움직일 때 경계가 흐물거리지 않게 했습니다. 휴대폰에서는 실시간 그림자가 전혀 구현되지 않았습니다.

첫 프레임 프리징(The first-frame freeze). 3D 뷰를 열자 페이지가 몇 초 동안 멈추는 현상이 발생했습니다. 원인은 셰이더 컴파일(~4초)과 첫 번째 프레임에 적용되는 블룸 후처리 패스(bloom post-processing pass) 때문이었습니다. 게다가, 도시가 히어로 비디오(hero video) 아래에서 60 fps로 렌더링되고 있었기 때문에 영상도 끊겼습니다. 메인 스레드 시간은 도시가 실제로 보일 때만 렌더링하고 유휴 시간에 준비되도록 최적화한 후 약 20초에서 7초로 줄었습니다.

창문(Windows). 한때 모든 건물이 높이에 관계없이 정확히 32개의 창문 행을 가지고 있다는 것을 발견했습니다. 가장자리에 있는 2층짜리 집이 꼭대기에 작은 모자를 쓴 10층 타워처럼 보였습니다. 창문 텍스처가 건물의 높이를 제대로 인식하지 못했던 것입니다.

Sunset-lit towers with rows of lit windows, labelled as a preview
이제 창문이 각 건물의 높이를 따라갑니다.

실제로 비용이 많이 들었던 버그들

3D 관련 버그들은 눈에 보였습니다. 하지만 비싼(expensive) 버그들은 그렇지 않았습니다.

접근할 수 없었던 대기 목록(waitlist). 결제가 시작되기 전, 저는 대기 목록을 운영했습니다. 755명의 방문자 중 1명이 가입했습니다. 아무도 관심을 갖지 않는다고 생각했죠. 그러다 저희는 진짜 이유를 발견했습니다. '구매하기' 버튼을 클릭한 방문자가 로그인 양식(login form) 페이지로 이동하는 것이었습니다. 대기 목록 패널은 오직 로그인한 사용자만이 통과할 수 있는 검사 게이트 뒤에 숨겨져 있었습니다. 서버 측 코드는 처음부터 끝까지 문제가 없었습니다. 단지 그 버튼이 결코 그곳으로 연결되지 않았을 뿐입니다.

드래그 앤 드롭 배포(Drag-and-drop deploys). Windows에서 Chrome에 파일을 끌어다 놓아 GitHub에 업로드하는 과정에서 파일 이름과 내용이 뒤섞이는 일이 있었습니다. city3d.js의 URL이 실제로는 admin.html의 내용을 제공하고 있었던 겁니다. 저는 모든 파일의 체크섬(checksums)을 비교해 보면서 그것을 발견했습니다.

이미지(Images). 소유자들의 사진은 원본 크기로 로딩되어 방문자 한 명당 약 1.75MB를 사용했고, 이는 월간 트래픽 5GB의 무료 데이터베이스 플랜으로는 감당하기 어려웠습니다. Netlify의 이미지 CDN을 통해 크기를 조정한 썸네일(thumbnails)을 제공함으로써 이 용량을 약 0.23MB로 줄였습니다.

AI를 활용하여 구축하며 배운 것들

1. 모델은 코드를 읽어봐도 놓칠 수 있는 방식으로 자신감 있게 틀릴 수 있다. 저는 코드를 읽는 데 능숙하지 않습니다. 그래서 결과물을 확인하는 방법을 배우게 되었습니다. 즉, 실제 페이지를 열고 휴대폰으로 클릭해 보거나, 요약본이 아닌 실제 서버 응답을 요청하는 식입니다.
2. 확인 과정조차도 거짓말할 수 있다. Claude가 이미지 CDN에 문제가 있다고 말했을 때였습니다. 알고 보니 그 자체의 fetch 도구만 400 에러를 받았을 뿐이었습니다. 실제 브라우저로는 아무 문제도 없었습니다. 이제 모든 실시간 확인은 실제 브라우저에서 진행합니다.
3. 오래된 복사본(Stale copies)은 위험하다. 한때는 파일의 오래된 사본을 기반으로 전체 코드 검토를 했고, 이미 수정된 버그에 대한 보고서를 받기도 했습니다. 이제 모든 변경 사항은 실제로 배포된 내용과 비교하는 것부터 시작합니다.
4. 매번 두 번째 눈(A second pair of eyes). 각 배포 전에 컨텍스트가 없는 별도의 AI 에이전트가 변경 사항을 검토합니다. 이 과정이 거의 매번 무언가를 잡아냅니다.
5. **구축하기 전에

솔직히 말해서: 지도에 집이 8채 있는데, 모두 사람들이 전체 흐름을 테스트할 수 있도록 제가 준 필지입니다. 아는 사람 중 아무도 아직 구매하지 않았습니다. 개인 프로젝트를 승인해 줄 결제 제공업체를 찾는 데 몇 주가 걸렸고, 첫 번째 곳에서는 거절당했습니다.

그래서 솔직한 피드백을 받고 싶습니다. 3D가 여러분의 기기에서 잘 실행되나요? '구매는 평면 지도로, 감상은 3D 도시로'라는 개념이 명확한가요? 어떤 점이 여러분으로 하여금 필지를 구매하고 싶게 만들까요, 그리고 어떤 점이 망설이게 하나요?

[pixelrealestate.homes/#fly-69-113]와 같은 링크를 사용하면 집으로 바로 날아갈 수 있습니다.

공개 고지: Claude가 저희 작업 기록을 바탕으로 이 게시물을 초안 작성했으며, 저는 게시 전에 승인했습니다.