Skip to content

Project

Digital Aquagarden — 3D 디지털 수족관

브라우저에서 실행되는 3D 디지털 수족관입니다. 이미지 없이 HTML 파일 하나에 모든 코드가 담겨 있으며, 커스텀 셰이더로 수면 코스틱과 식생 흔들림을, boids 알고리즘으로 물고기 군집 유영을 표현했습니다.

2025.08 -기획 / 프론트엔드 개발 / 시각 연출
HTMLJavaScriptThree.jsGLSL Shader
Digital Aquagarden — 3D 디지털 수족관

Related links

GPT-5 출시 시점에 성능 테스트를 겸해 만든 프로젝트입니다. 처음에는 SVG 기반 2D 연못(Digital Carps Pond)으로 시작했는데, 3D로 전환하면서 별도 프로젝트가 되었습니다. 이미지 파일 하나 없이 HTML 파일 하나 안에 모든 코드가 들어 있는 구조입니다.

구현 내용

Three.js와 커스텀 GLSL 셰이더로 수면 코스틱(빛 반사 무늬)과 수초 흔들림을 구현했습니다. 물고기는 boids 알고리즘으로 군집 유영하며, 몸통의 S자 undulation과 꼬리 파동까지 표현했습니다. 물리적으로 정확한 시뮬레이션보다는 자연스러운 움직임 재현에 초점을 맞췄습니다.

줌인/줌아웃과 카메라 앵글 조작이 가능하고, 오브젝트를 클릭하면 명언이 HUD로 표시됩니다.

AI 도구별 비교 테스트

이후 같은 프롬프트와 레퍼런스 이미지를 사용해 AI 모델 및 도구별 성능을 비교하는 테스트에도 이 컨셉을 활용했습니다.

  • Claude Code (Opus 4.6): 시간은 가장 오래 걸렸지만 완성도가 높았습니다.
  • Codex (5.3): 오브젝트 표현은 부족했지만 화면 전환 기능까지 구현했습니다.
  • Antigravity (Gemini 3.1 Pro): 원 프롬프트로 약 10분 만에 완성했습니다.

이전 버전(Gemini 3 기준)에서는 최소 3시간이 걸리던 작업이었습니다. 같은 주제를 반복하면서 AI 모델의 코딩 성능 변화를 체감할 수 있었고, 프롬프트를 명확하게 주는 것과 계획을 먼저 세우게 하는 것이 결과에 큰 영향을 준다는 점도 확인했습니다.