바이브코딩으로 심해 끝까지 내려가는 인터랙티브 3D 잠수 체험을 만들었습니다.
I vibecoded an interactive 3D dive to the deepest part of the ocean.
핵심 요약
AI 에이전트들을 활용해 브라우저에서 구동되는 심해 잠수 인터랙티브 3D 프로젝트를 개발한 사례입니다.
- 프로젝트 개요 — 브라우저에서 Three.js로 구현된 심해 잠수 인터랙티브 체험임.
- AI 개발 방식 — Claude Code를 활용해 아트 디렉션부터 에이전트 간 피드백 루프까지 자동화함.
- 기술적 상세 — 2만 번 이상의 모델 응답과 900만 개 이상의 토큰을 사용해 정교하게 다듬음.
- 사용자 반응 — 시각적 퀄리티와 몰입감에 대해 매우 긍정적인 평가를 받음.

파도 바로 아래에서 시작해서 10,935미터 아래에 있는 챌린저 해연까지 스크롤을 내려봐. 내려갈수록 햇빛은 사라지고, 깊이 들어갈수록 생물들은 점점 더 기괴해질 거야.
영상은 딱 315미터까지만 보여줘.
전체 잠수 과정은 여기 있어: https://descent.mattebso.com
이름은 Descent야. 전부 브라우저에서 Three.js로 렌더링하는 거라 스크롤 멈추고 생물들 움직이는 거 구경해도 돼. 그냥 페이지 뒤에서 영상 재생되는 게 아니라고.
첫 번째 Claude Code 프로토타입 만드는 데 7분 정도 걸렸어. 콘셉트는 마음에 들었는데, 해저 바닥이 무슨 픽셀 뭉개진 마인크래프트 텍스처 같더라고. 그거 해결하는 데만 5일 정도 꼬박 매달렸네.
훨씬 높은 시각적 퀄리티를 요구했고, 적대적 검토 루프(adversarial review loop)를 돌렸어. Claude가 세 가지 아트 방향성을 제시하길래 그걸 합쳐서 공통 브리핑을 만들고, 물, 생물, 지형, 렌더링 담당 에이전트들한테 일을 나눠줬지.
AI 비평가 6명으로 구성된 별도 그룹이 실제 렌더링된 스크린샷이랑 4K 크롭본을 검토했어. 비평가들은 눈에 보이는 문제를 하나하나 짚어냈고, 담당 에이전트한테 다시 보내서 수정하게 만들었지.
빌드 로그 결과는 이래:
- 211번의 워크플로우 에이전트 실행, 한꺼번에 다 한 게 아니라 프로젝트 전반에 걸쳐서 진행함.
- 21,000번 이상의 모델 응답.
- 약 495만 토큰의 생성된 출력물.
총 토큰 수는 92.3억을 찍었는데, 그중 98% 정도는 에이전트들이 작업하면서 계속 다시 읽어 들인 캐시된 컨텍스트야. 90억 토큰이 전부 새로운 코드는 아니라는 소리지.
수정 과정이 진짜 디테일했어. 예를 들어, 해파리(man o' war)가 물이랑 따로 노는 문제가 있었는데, 알고 보니 부유물이랑 물의 파동 계산 방식이 달랐던 거야. 그래서 파동 모델을 공유하게 만들어서 생물이 수면을 따라 자연스럽게 움직이게 고쳤지.
AI 비평가들은 8번의 메인 리뷰 라운드가 끝날 때까지도 만장일치로 승인을 안 해주더라고. 계속 고칠 거리를 찾아내는 거야. 나도 계속 테스트하면서 눈에 거슬리는 거 피드백 주고, 결국 이 정도면 됐다 싶어서 공개하기로 했어.

