1.무엇을 만들었나
카드 45장이 지구본처럼 구를 이루고 천천히 돈다. 그러다 카드 하나를 향해 화면이 쑥 들어가 1초쯤 머물고, 다시 물러나 전체 구를 보여준다. 마우스로 드래그하면 손으로 굴릴 수 있고, 카드를 클릭하면 확대, 한 번 더 클릭하면 원래 크기로 돌아온다.
말로 쓰면 복잡한데 구성은 이게 전부다.
- orbit.html — 962줄. HTML·CSS·JS·셰이더가 전부 여기 있다
- images/ — card-01.jpg ~ card-20.jpg
빌드 도구 없음. npm install 없음. 파일을 브라우저로 열면 바로 돈다.
2.왜 이게 따라 할 만한 작업인가
인터랙티브 웹사이트라고 하면 보통 웹팩 설정, React, 상태관리, 셰이더 공부 6개월을 떠올린다. 실제로는 막히는 지점이 딱 3개였고 나머지는 AI에게 시키면 됐다. 바이브코딩이 실패하는 경우는 대부분 이 3개를 모르는 채로 "멋있게 만들어줘"라고 하기 때문이다.
- 카드를 구 표면에 어떻게 배치하지?
- 선택한 카드가 정면에 오게 하려면 몇 도를 돌려야 하지?
- 확대했을 때 왜 화면이 뿌옇게 뭉개지지?
이 3개만 이해하면 나머지는 "이렇게 해줘"로 끝난다. 하나씩 보자.
3.이미지부터 — 나노바나나는 프롬프트를 JSON으로 쓴다
먼저 이미지가 있어야 한다. 카드는 45장이지만 이미지는 20장이면 충분하다. 중요한 건 20장이 따로 노는 게 아니라 한 세트로 보이는 것이다. 그래서 프롬프트를 문장이 아니라 JSON으로 썼다.
{
"style": "editorial studio photograph, soft diffused light",
"background": "seamless warm grey #dedede, no gradient",
"subject": "a single ceramic vase, centered",
"framing": "subject fills 66% of frame height",
"aspect_ratio": "4:3",
"negative": "text, watermark, harsh shadow, busy background"
}style, background, framing, aspect_ratio는 20장 전부 고정하고 subject만 바꾼다. 이렇게 하면 매번 다른 톤으로 뽑히는 사고가 안 난다.
꼭 지킬 것 하나. aspect_ratio를 격자 칸 비율과 똑같이 맞춰라. 나는 1.27:1을 썼다. 이 기준이 틀리면 카드마다 이미지가 잘려 지저분해진다. 피사체가 프레임에서 차지하는 비율(66%)까지 고정한 이유도 같다. 어떤 건 크고 어떤 건 작으면 구가 울퉁불퉁해 보인다.
4.문제 1 — 카드를 구 표면에 배치하기
가장 많이 헤맨 부분이다. 원통, 바퀴, 나선까지 네 번을 다시 만들었다. 정답은 지구본의 위도·경도 격자였고, 핵심은 한 줄이다. 적도에서 멀어질수록 열 개수를 cos(위도)만큼 줄인다.
for (let r = 0; r < ROWS; r++) {
const lat = -Math.PI/2 + (Math.PI/ROWS) * (r + 0.5);
const cols = Math.max(MIN_COLS, Math.round(COLS_EQ * Math.cos(lat)));
// ↑ 이 cos 하나가 전부다
for (let c = 0; c < cols; c++) {
const lon = (Math.PI*2/cols) * c + (r % 2) * (Math.PI/cols); // 벽돌쌓기
const cl = Math.cos(lat), sl = Math.sin(lat);
cells.push({ dir: new THREE.Vector3(Math.cos(lon)*cl, sl, Math.sin(lon)*cl) });
}
}이걸 빼면 극지방에서 카드들이 서로를 뚫고 겹친다. cos을 넣는 순간 위로 갈수록 자연스럽게 줄어든다. 위도 띠 7줄, 적도 11열로 시작해 총 45장이 나왔다.
여기에 두 가지를 더했다.
- 빈칸 14% — 일부러 자리를 비운다. 그 틈으로 반대편 카드가 비쳐 보이면서 "속이 빈 껍질"이라는 게 드러난다. 꽉 채우면 그냥 공이다.
- 홀수 줄 반 칸 밀기 — 벽돌 쌓듯 어긋나게 해서 세로줄이 눈에 띄지 않게 한다.
이미지 20장으로 45장을 채우는 방법도 여기서 나온다. i % 20을 쓰면 같은 세로줄에 같은 이미지가 반복돼 티가 확 난다. 황금비를 쓰면 흩어진다.
const IMG_IDX = i => Math.floor(((i * 0.6180339887498949) % 1) * 20);
// ↑ 황금비. 규칙적으로 보이지 않게 퍼뜨린다5.문제 2 — 선택한 카드를 정면으로 가져오기
카드 위치 벡터만 알면 삼각함수 두 줄이다.
const d = card.position.clone().normalize();
const spinY = Math.atan2(-d.x, d.z); // 좌우로 몇 도
const tiltX = Math.atan2(d.y, Math.hypot(d.x, d.z)); // 위아래로 몇 도여기서 한 번 크게 깨졌다. 회전과 기울기를 같은 오브젝트에 넣었더니 카드가 엉뚱한 데로 갔다. 3D 회전은 순서가 바뀌면 결과가 달라지기 때문이다(오일러 각). 그룹을 세 겹으로 쪼개니 해결됐다.
roll(Z축) > tilt(X축) > ring(Y축) > 카드들각 그룹이 축 하나씩만 담당하면 순서가 꼬일 일이 없다. 이런 건 AI에게 "회전이 이상해"라고만 하면 못 고친다. "오일러 순서 때문인 것 같으니 그룹을 축별로 분리해줘"라고 해야 한 번에 된다. 바이브코딩이 잘 먹히는 조건이 이것이다 — 증상이 아니라 원인을 말할 것.
그리고 카메라가 카드까지 날아가는 대신 카드를 앞으로 끌어내고 1.12배 키웠다. 카메라만 들이대면 화면이 카드로 꽉 차서(94%) 답답하다. 원본 영상은 63%였고, 카드를 끌어내는 방식이 이 여백을 살린다.
6.문제 3 — 확대하면 왜 뿌옇게 뭉개지나
거리에 따라 흐리게 만드는 코드를 넣었더니 카메라가 구 안쪽으로 들어갔을 때 전부 뭉개졌다. 안쪽에서는 카드가 가까운데도 "멀다"고 계산된 것이다. 한 줄로 끝났다.
t *= (1 - inside01 * 0.88); // 구 안에 있으면 흐리게 할 이유가 없다블러 자체도 후처리 없이 간다. 밉맵 레벨만 낮춰서 읽으면 공짜다.
vec4 c = texture2D(uMap, uv, dim * uBlur); // 세 번째 인자가 밉 바이어스포스트프로세싱을 붙였으면 코드가 세 배로 늘고 모바일에서 버벅였을 것이다.
7.남은 잔버그 3개 — 여러분도 똑같이 만난다
완성 후에도 잔버그 3개가 남는다 — 모바일 터치 관성, 다크모드 전환 시 잔상, 첫 로딩 흰 화면. 셋 다 원인이 같고(상태 초기화 누락) 아래 코드로 해결된다.
- 뒷면 이미지가 좌우 반전 → 셰이더에서
gl_FrontFacing으로 UV를 뒤집는다 - 60fps에선 0.6초, 15fps에선 2.4초 → 매 프레임 일정 비율로 보간(lerp)하면 이렇게 된다.
performance.now()기준 실제 경과 시간으로 바꿔야 한다 - 각도가 계속 커져서 이상해짐 → 삼각함수에 넣기 전에
((v % m) + m) % m으로 감싼다
8.타이밍은 감이 아니라 숫자로 맞췄다
"영상처럼 자연스럽게"는 AI에게 시켜도 안 된다. 원본 영상을 ffmpeg으로 프레임 단위로 뜯어 재봤다.
| 구간 | 원본 영상 | 내 결과 |
|---|---|---|
| 한 바퀴 주기 | 3.42~3.72초 | 3.64초 |
| 확대 상태 유지 | 1.88초 | 1.83초 |
| 축소 상태 유지 | 1.40초 | 1.64초 |
| 전환 | 0.35초 | 0.42초 |
이 숫자를 그대로 상수로 박았다.
const TOUR = { OUT_HOLD: 1820, IN_HOLD: 880, FLY_IN: 420, FLY_OUT: 420, FLY_BACK: 540 };이 방법을 추천한다. 참고 영상이 있다면 ffmpeg -i ref.mp4 -vf fps=10 f%03d.png으로 프레임을 뽑고, 어느 프레임에서 멈추고 어느 프레임에서 움직이는지 세보라. 30분이면 된다. "느낌"으로 열 번 고치는 것보다 빠르다.
9.정리 — 순서대로만 하면 된다
순서만 지키면 된다 — 이미지(JSON 프롬프트) → 뼈대(three.js 6단계) → 인터랙션 → 잔버그 수리. 코딩 지식보다 "무엇을 요청할지"가 결과를 가른다.
- 나노바나나로 이미지 20장. 스타일·배경·비율은 JSON으로 고정,
subject만 교체 - 격자 좌표 만들기.
cos(위도)로 열 줄이기 + 빈칸 14% - 카드 배치.
mesh.lookAt(pos.clone().multiplyScalar(2))— PlaneGeometry는 +Z가 정면이라 이 한 줄로 끝난다 - 클릭 시 정면 정렬.
atan2두 줄 + 그룹 3단 분리 - 타이밍 상수 박기. 참고 영상에서 실측
- 잔버그 3종 처리. 뒷면 UV / 실시간 트윈 / 각도 래핑
총 962줄, 파일 하나다. 나는 구조를 네 번 갈아엎었는데 위 순서대로 가면 그럴 일이 없다.
바이브코딩으로 인터랙티브 웹을 만들 때 진짜 실력은 코드를 쓰는 게 아니라 어디서 막힐지 미리 아는 것이다. 이 글의 4~7번이 그 목록이다. 그대로 들고 시작하면 된다.
§자주 묻는 질문
- Q. three.js를 몰라도 되나요?
Scene,Camera,Mesh세 단어의 뜻만 알면 됩니다. 나머지는 위 6단계를 그대로 요청하면 나옵니다. 정확히 말하면 three.js를 배우는 게 아니라 무엇을 요청해야 하는지를 배우는 겁니다. 바이브코딩의 실제 학습 곡선은 여기에 있습니다.- Q. 이미지가 20장보다 적으면요?
- 됩니다.
IMG_COUNT만 바꾸면 됩니다. 다만 10장 밑으로 내려가면 황금비로 흩어도 반복이 눈에 띕니다. - Q. 모바일에서 돌아가나요?
- 돕니다. 포스트프로세싱을 안 썼기 때문입니다. 대신 카드 45장 × 텍스처 20장이라 이미지는 가로 1100px 정도로 줄여서 넣으세요.
- Q. 라이선스는요?
- three.js는 MIT입니다. 이미지는 나노바나나로 직접 생성한 것이니 문제없습니다.
