스크롤이 모션을 움직인다 — 3D 아바타 인터랙션 웹 개발기

한 문장 요약

스크롤 한 번에 3D 아바타가 자세를 바꾸고, 마우스를 움직이면 시선을 따라오고, 페이지를 내릴수록 조명과 배경이 변하는 — 3D 인터랙션 웹을 개발했습니다. AI 모션 생성 서비스를 위한 랜딩 페이지였고, 이 페이지 자체가 “우리는 3D 모션을 다룰 수 있다”의 증명이어야 했습니다.

라이브 — ailive-web.vercel.app

시작은 이런 질문이었어요

“우리 서비스가 AI 모션 생성인데, 랜딩 페이지가 평범한 사진 + 텍스트면 너무 모순적이지 않아요?”

맞는 말이었습니다. 랜딩 페이지는 단순한 마케팅 매체가 아니라, 그 회사가 무엇을 잘하는지 보여주는 첫 시연이어야 합니다. AI로 모션을 만든다고 말하면서, 정작 페이지는 정적이라면 — 그건 어색합니다.

그래서 만들기로 한 건 “스크롤이 곧 모션의 타임라인이 되는 페이지” 였습니다.

핵심 인터랙션 네 가지

1. 스크롤 기반 모션 블렌딩

페이지를 내릴수록 아바타가 다음 모션으로 부드럽게 넘어갑니다. 단순히 “섹션 A에서는 모션 A, 섹션 B에서는 모션 B” 가 아니라, 두 모션을 비율로 섞어가며 보여주는 블렌딩 입니다.

Three.js의 AnimationMixer는 weight를 동적으로 줄 수 있어서, 스크롤 진행도(0~1)를 그 weight로 바로 넘기면 됩니다.

const t = scrollProgress; // 0..1
mixer.clipAction(motionA).setEffectiveWeight(1 - t);
mixer.clipAction(motionB).setEffectiveWeight(t);

코드는 짧지만 이게 시각적으로 가장 효과가 컸어요. 사용자가 “이 페이지가 내 손에 반응한다” 라고 느끼는 이유의 80%는 이 블렌딩이었습니다.

2. 마우스를 따라오는 시선

마우스 위치를 화면 정중앙 기준으로 정규화해서, 아바타 머리·눈의 회전 quaternion에 약한 가중치로 더했습니다. 너무 정확히 따라오면 무서워지므로 — 느슨하게, 약 0.3 강도로. 이 한 줄이 아바타에 “생기”를 만들어줍니다.

3. 환경 조명과 HDR 배경

스크롤 위치에 따라 HDR 환경 맵의 노출과 회전을 보간합니다. 위쪽은 차분한 스튜디오 라이팅, 아래쪽은 따뜻한 무드 — 같은 캐릭터인데 분위기가 완전히 달라 보입니다. 모션 콘텐츠를 다루는 회사임을 “보여주는” 디테일이었어요.

4. 파티클·발광·포인트 라이트

특정 모션이 트리거되면 아바타 주변에 파티클이 흐르고, 키 라이트의 강도가 잠깐 올라갑니다. 화려해 보이지만 GPU 부하는 적게 — depthTest=false 로 정렬을 우회한 트릭이 핵심이었습니다.

가장 어려웠던 건 “언제 무엇을 렌더링할까”

3D 인터랙션 웹의 진짜 적은 그래픽이 아니라 불필요한 리렌더링입니다.

처음 빌드해서 모바일에 올렸더니 fps가 30 미만에서 흔들렸습니다. 문제는 그래픽이 아니라 React 측이었어요. 스크롤 이벤트가 매 프레임 컴포넌트를 리렌더링하고 있었습니다.

해결한 방식은 단순합니다.

• 스크롤 진행도는 React state가 아니라 ref + requestAnimationFrame으로만 관리
• Three.js 객체는 마운트 후 한 번만 생성, props 변경에도 재생성 금지 (useMemo, useRef 적극 사용)
• 콜백은 useCallback 으로 고정, mixer/카메라는 부모에서 한 번 만들고 자식에 ref로 내려줌
• 파티클·그림자에 depthTest=false 적용해 정렬 비용 제거
• UI 요소는 로딩 완료 시에만 렌더(조건부 렌더링) — 첫 페인트 단축

이 다섯 개를 적용하고 나서 모바일 fps가 30대 → 60 안정으로 올라왔습니다.

디자인 룰 — “인터랙션이 화면을 빼앗지 않게”

3D 인터랙션 웹은 욕심을 부리면 곧장 무너집니다. 우리는 처음부터 세 가지 룰을 잡았어요.

• 모든 인터랙션은 0.3초 안에 시각적 반응
• 사용자가 의도하지 않은 카메라 이동은 절대 없음
• 모션 변화는 ‘과시’가 아니라 ‘서사’의 일부로

세 번째가 가장 중요했습니다. 멋있어 보이는 모션을 마구 넣으면 페이지 전체가 “보여달라고 떼쓰는 페이지”가 됩니다. 우리는 모션을 콘텐츠의 흐름에 맞춰 배치했고, 그게 결과적으로 가장 유려해 보였어요.

우리가 배운 것

인터랙션 웹의 적은 React, 친구는 ref

3D + 스크롤은 React state로 다루면 거의 항상 진다. 프레임 단위 변화는 ref와 requestAnimationFrame의 영역입니다.

아바타에 “생기”를 주는 건 시선이다

복잡한 IK도, 정교한 표정 본도 아니고 — 느슨하게 마우스를 따라오는 시선 하나가 가장 큰 효과를 냅니다. 코드는 다섯 줄.

페이지 자체가 회사의 시연이다

“우리는 X를 잘 만든다”라고 글로 말하는 것보다, 페이지가 X로 만들어져 있는 것이 훨씬 강한 증거입니다. 특히 콘텐츠 제작·AI·3D 업계라면 더욱 그래요.

자주 받는 질문

비슷한 페이지를 만드는 데 얼마나 걸리나요? 3D 자산(아바타, 모션 클립, HDR)이 정리돼 있으면 46주, 모션 작업까지 함께 하면 610주 정도가 일반적입니다.

모바일 성능이 걱정인데 괜찮을까요? 괜찮습니다. 단 “데스크톱처럼 보이게 하려고 하지 않는다” 는 결정이 필요합니다. 모바일은 조명과 파티클을 자동으로 단순화하는 LOD 정책을 적용하면 60fps이 충분히 나옵니다.

스크롤 인터랙션을 더 정밀하게 컨트롤할 수 있나요? 네. ScrollTrigger·Lenis 같은 라이브러리를 쓰면 “섹션별 타임라인” 식의 정밀 컨트롤이 가능합니다. 다만 라이브러리에 종속되니, 신중히 선택해야 합니다.

SEO에 마이너스 아닌가요? 3D는 검색엔진에 안 보이지만, 본문 텍스트 + JSON-LD + 메타 태그가 충분히 잘 잡혀 있으면 문제없습니다. 우리는 인터랙션이 끝난 시점의 정적 텍스트 콘텐츠도 항상 함께 설계합니다.

---

“페이지 자체가 회사의 시연이 되어야 한다” 는 고민이 있으시면 프로젝트 문의 로 어떤 메시지를 전해야 하는지 알려주세요. 보통 첫 통화에서 “3D가 메시지에 진짜 도움이 되는가” 부터 같이 검토합니다.

Hammergrid Lab은 Three.js·WebGPU 기반 인터랙티브 웹과 3D 콘텐츠를 만드는 크리에이티브 개발 스튜디오입니다.