크록스코리아 24 윈터 — Three.js로 만든 3D 웹 스택 게임 이야기

한 문장 요약

크록스코리아 2024 겨울 프로모션을 위해 신제품이 들어간 박스를 쌓는 3D 웹 게임을 만들었습니다. 광고가 게임을 방해하지 않고, 게임이 끝나면 자연스럽게 쇼핑몰로 이어지도록 — 그게 이 프로젝트의 전부였습니다.

기술적으로는 Three.js + React 19 위에 가벼운 스택 게임을 얹은 거라 어렵진 않았는데, 무엇을 빼느냐를 두고는 한참 고민했습니다. 이 글은 그 결정들에 대한 기록입니다.

시작은 클라이언트의 한 줄에서

“겨울 신제품을 출시하는데, 광고 페이지가 아니라 사람들이 머무는 곳을 만들고 싶어요.”

이런 브리프가 가장 어렵습니다. 영상 한 편 더 넣는다고 체류가 늘어나지 않습니다. 결국 사용자가 무언가를 직접 한다는 감각이 있어야 했습니다.

플로우는 이렇게 잡았습니다.

1. 랜딩 — 신제품 분위기, 카피 5초
2. 3D 스택 게임 — 박스를 쌓을수록 안에 든 신제품이 슬쩍슬쩍 보임
3. 게임 오버 → 점수와 쿠폰 코드
4. 쿠폰을 들고 쇼핑몰로

여기서 우리가 정한 한 가지 원칙. 3D 모델을 페이지에 “띄워두는” 게 아니라 게임 메커닉의 일부로 녹인다.

왜 Three.js + React만으로 충분했나

처음 프로토타입에서는 cannon-es 같은 풀 물리 엔진을 같이 검토했습니다. 박스가 서로 부딪히고 무너지는 게임이니 당연한 선택처럼 보였거든요. 그런데 두 번째 프로토타입에서 빼버렸습니다. 느낌이 더 나빠졌습니다.

스택 게임은 정확한 물리보다 ‘떨어진다 vs 안 떨어진다’의 임계값과 흔들림의 감각이 훨씬 중요한 종류였습니다. 직접 튜닝한 sway 함수와 단순한 임계값 검사가 풀 솔버보다 “게임답게” 동작했습니다.

스택은 단순합니다.

• 렌더링: Three.js (r182)
• UI / 상태: React 19
• 호스팅: AWS S3 + CloudFront
• 포맷: GLB, Draco + KTX2 압축, 박스 하나당 600~900KB

신제품 박스 다섯 개가 동시에 화면에 떠도 모바일에서 60fps이 유지됐고, 첫 인터랙션까지는 평균 2초 이내에 들어갔습니다.

가장 많이 시간을 쓴 건 “무엇을 뺄까”

1. 자동 회전을 껐습니다

처음에는 박스가 천천히 도는 게 멋있을 거라 생각했는데, 화면에 띄워보니 그건 그냥 광고처럼 보이는 순간이었습니다. 자동 회전이 들어가면 사용자는 “지금 시작하면 되나?” 하고 머뭇거립니다. 결국 박스는 정지 상태에서 시작하게 했습니다.

2. 포스트프로세싱 전부 제거

블룸, 아웃라인, DOF 다 빼고 — 대신 그림자와 화이트밸런스에 시간을 썼습니다. 화려한 효과는 신제품의 색감을 왜곡합니다. 색이 진짜 같아 보이는 게 훨씬 중요했습니다.

3. 옵션 변경 시에도 카메라는 가만히

이건 컨피규레이터에서 자주 하는 실수입니다. 옵션을 바꾸면 카메라가 “자, 보세요” 하면서 정해진 각도로 옮겨가는 인터랙션 — 사용자가 보고 있던 각도를 빼앗는 행동입니다. 그러지 않기로 했습니다.

박스 안의 신제품은 어떻게 보여줄까

이 부분이 디자인적으로 가장 재미있었습니다.

박스를 들어 올리는 동안만, 측면이 잠깐 반투명으로 처리되면서 안에 든 신제품이 살짝 비칩니다. 0.3초. 더 길면 광고처럼 느껴지고, 더 짧으면 보이지 않습니다.

“이 게임을 하면 신제품을 본다”가 아니라 “게임 중에 어쩌다 보니 신제품을 봤다” — 그 차이가 모든 걸 결정합니다.

흔들림이 사실은 게임 전부였다

박스를 쌓을수록 스택이 좌우로 천천히 흔들립니다. 코드는 부끄러울 정도로 단순합니다.

const sway = baseSway + stackHeight * 0.07 + Math.random() * 0.02;

물리적으로는 거짓말이에요. 진짜 물리라면 이렇게 흔들리지 않습니다. 그런데 이 거짓말이 게임의 모든 순간에 “다음 박스에서 끝날 수도 있어” 라는 긴장감을 만들어줬습니다. 평균 플레이 시간이 50% 가까이 늘었던 게 이 한 줄짜리 함수 덕분이었습니다.

게임 오버 = 광고 진입점

여기가 가장 신경 쓴 부분입니다.

박스가 무너지는 순간 카메라가 살짝 줌아웃하면서 슬로우 모션으로 잡습니다. 점수가 올라가고, 곧바로 “쿠폰 코드 받기” 버튼이 떠오릅니다.

광고를 게임의 상으로 만들었습니다. 패배가 아니라 “이제 진짜 쇼핑하러 갈 시간”이 되는 순간이에요. 이 순간 설계를 잘못하면 사용자는 그냥 페이지를 닫습니다.

배포는 단순하게

• AWS S3 + CloudFront 정적 배포
• 캠페인 시작 30분 전 ‘블루-그린’ 식으로 새 빌드 교체
• 모바일 비중 70% 가정. 아이폰 SE2 / 갤럭시 A 시리즈에서 30fps 이상 유지를 합격선으로
• 캠페인 기간 무중단 (Sentry 기준)

복잡한 인프라는 없었습니다. 정적 파일 + CDN으로 충분했고, 그게 캠페인 게임에 맞는 인프라였습니다.

끝나고 보니 배운 것

광고 게임은 “짧고 다시 하고 싶게”

평균 플레이 1분 미만. 한 판이 끝나면 자연스럽게 “한 번만 더”가 나오게 만들어야 합니다. 보상 없이도 다시 하게 만드는 흔들림과 점수의 박자 — 광고 효과의 80%는 거기서 옵니다.

모델러와 개발자가 같은 회의실에 있어야 한다

신제품 색이 박스 안에서 어떻게 보이는지를 모델러랑 개발자가 같이 결정했습니다. 분리된 팀에서 진행했다면 “광고용 3D”와 “게임용 3D”가 어색하게 충돌했을 겁니다.

첫 2초가 모든 걸 결정한다

광고 게임은 사용자가 “해 봐야 하나” 망설이는 시간을 주면 안 됩니다. 페이지에 들어오는 순간 박스가 이미 한 칸 쌓여 있어서, 사용자는 0.5초 만에 “아, 이렇게 하는 거구나” 합니다. 튜토리얼 페이지는 만들지 않았습니다. 첫 화면이 곧 튜토리얼이 되도록 했습니다.

자주 받는 질문

비슷한 캠페인 게임을 만드는 데 얼마나 걸리나요? 브랜드 자산(모델, 카피, 컬러)이 정리돼 있으면 46주, 모델링부터 같이 해야 하면 68주 정도가 일반적입니다.

게임 결과를 CRM에 연동할 수 있나요? 네. 쿠폰 발급 시점에 이메일·전화번호·플레이 점수를 CRM(메이크샵, 카페24, 자체 백엔드 등)에 자동으로 적재합니다. 점수 분포는 다음 캠페인의 난이도 튜닝에 그대로 쓰입니다.

모바일 데이터로도 잘 돌아가나요? 첫 로드 2.5MB 미만으로 묶었습니다. 4G에서 3초, 5G에서 1초 미만에 첫 인터랙션이 가능합니다.

게임 후 이탈 없이 쇼핑몰로 보내는 방법은? 쿠폰 코드를 자동 복사하고, 쇼핑몰 URL에 ?coupon=... 쿼리로 미리 적용해 둡니다. 사용자는 코드를 다시 입력하지 않아도 됩니다.

---

광고 페이지보다 사람들이 머무는 작은 게임이 필요한 캠페인이라면, 프로젝트 문의 에서 캠페인 일정과 신제품 정보를 알려주세요. 첫 통화에서 보통 “게임화가 맞는 캠페인인가”를 같이 판단해드립니다.

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