스크롤 기반 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 state 대신 ref

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

아바타에 생기를 주는 시선 처리

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

시연 역할을 하는 페이지

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

자주 받는 질문

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

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

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

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

---

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

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