Fable 5.2 / Opus 5.5: Claude에게 어항처럼 깊이감 있는 화면을 만들어달라고 했더니 HTML 파일 하나로 이걸 만들어냈네요.
Fable 5.2 / Opus 5.5: asked Claude to make my screen look as deep as a fish tank. It wrote this in one HTML file.
핵심 요약
Claude가 코딩한 186KB짜리 HTML 파일 하나로 구현된, 수학적 연산 기반의 실시간 3D 어항 시뮬레이션입니다.
- 기술적 구현 — 라이브러리나 엔진 없이 순수 WebGL과 수학적 연산으로만 제작됨
- 상호작용 기능 — 마우스 포인터에 반응하여 물고기 떼가 흩어지고 해초가 움직임
- 시각적 효과 — 착시 현상을 이용한 깊이감과 실시간 렌더링을 통한 사실적인 빛과 그림자 구현
- 커스터마이징 — 공개된 코드를 통해 사용자가 직접 Claude에게 수정 요청 가능
이건 HTML 파일 하나로 만든 65초짜리 영상이다. Claude가 코드 한 줄 한 줄 다 짰음.
이게 뭐냐면
- HTML 파일 딱 하나, 186 KB, 대략 3,000줄 정도 됨. 순수 WebGL로만 돌렸고 라이브러리, 이미지 파일, 3D 엔진 같은 거 일절 안 썼다.
- 눈에 보이는 모든 건 로딩할 때 수학 계산으로 다 때려 박아서 만든 거임. 물고기, 산호초, 고래상어, 해파리, 유리까지 전부 다.
- 안경 같은 거 필요 없음. 깊이감은 그냥 투영 기법으로 속임수 쓴 거다. 화면을 창문처럼 보이게 그리고, 액자 프레임으로 눈에 고정된 경계선을 만들어 둔 거지. 물고기가 그 프레임을 가로질러 지나가면 뇌가 알아서 화면 앞으로 튀어나온 것처럼 착각하게 만드는 원리임.
어떻게 만들었냐고?
- Claude Code한테 그냥 말로 대충 던져줬다. "내 화면을 어항처럼 깊이감 있게 만들어봐." 그러고 나서 계속 "더 빡세게 해봐"라고 갈궜지.
- Claude(Fable 5.2)가 엔진 짜고 영상 연출까지 다 했다. Opus 서브 에이전트 네 놈한테 각각 과제를 줬는데, 고래상어, 깨지는 유리, 산호초, 그리고 밤바다 조명까지 각자 맡아서 작업함.
- 난 코드 한 줄도 안 짰다. 그냥 브라우저로 실시간 프리뷰 보면서 "이거 좋다, 저거 별로다" 훈수만 둠.
렌더링은 어떻게 했냐
- 똑같은 페이지가 브라우저에서 실시간으로 돌아감. 영상 만들 때는 Mac mini (M5 Pro)에서 headless Chromium으로 프레임 하나하나 렌더링해서 ffmpeg으로 넘겼다.
- 프레임 하나당 렌더링 64번씩 돌려서 평균값 낸 거임. 렌즈 위치, 시간대, 조명 위치를 조금씩 다르게 해서 실제 같은 포커스 블러, 모션 블러, 부드러운 그림자 효과를 냈다.
- 1080p60 화질로 3,900프레임 뽑는 데 22분 걸림.
몇 가지 수치
- 떼 지어 다니는 물고기 960마리, 해파리 9마리, 깨진 유리 조각 335개.
- 그림자 만드는 조명 2개, 거울처럼 반사되는 수면, 그리고 실제 물처럼 거리에 따라 붉은색 빛이 사라지는 수중 효과까지 구현함.
