Snapchat Web Lenses를 이용하면 평범한 HTML5 게임 빌드를 zip으로 묶어 스냅챗 안에서 렌즈(Lens)로 출시할 수 있습니다. 첫 번째 활용 분야는 게임이며 기능은 아직 베타입니다. 어떤 웹 프레임워크든 쓸 수 있지만 Snap은 PlayCanvas를 권장하고, 문서 전반에서도 PlayCanvas를 사용합니다. Lens Studio를 열 필요는 전혀 없습니다.
PlayCanvas는 2026년 10월 23일 이 지원 소식을 발표했고, 그와 함께 첫 게임 4종이 이미 서비스되고 있습니다. 이 가이드에서는 Web Lens가 무엇인지, 빌드가 반드시 지켜야 할 제한, Web Lens API로 할 수 있는 일, 그리고 웹 빌드를 플레이어가 이름이나 Snapcode로 찾을 수 있는 게임으로 만드는 실전 5단계를 설명합니다.
Snapchat Web Lenses 한눈에 보기
| 개요 | zip으로 패키징해 스냅챗 렌즈로 출시하는 웹 앱 |
| 플랫폼 | iOS 및 Android용 스냅챗 |
| 화면 | 전체 화면 세로, 9:16 (가로 모드 미지원) |
| 엔진 | 모든 웹 프레임워크 가능, Snap은 PlayCanvas 권장 |
| 패키지 크기 | zip 최대 8 MB, zip 루트의 index.html 최대 1 MB |
| 런타임 | WebAssembly(멀티스레드 포함), Web Workers, eval() 지원 |
| 샌드박스 | 네트워크, 카메라, 마이크, 모션 센서 사용 불가 |
| 스냅챗 기능 | Web Lens API를 통한 리더보드, Bitmoji, Storage |
| 상태 | 베타, 세부 사항은 바뀔 수 있음 |
웹 게임 개발자가 주목해야 하는 이유
Snap의 2026년 2분기 실적에 따르면 스냅챗은 매달 9억 7,100만 명이 사용하며, Snap은 자사 Game Lenses를 매달 1억 7,500만 명 이상이 즐긴다고 밝혔습니다. Web Lenses를 이용하면 웹 개발자도 앱 스토어 등록이나 설치 없이 이 거대한 사용자층에 다가갈 수 있습니다. 플레이어는 다른 렌즈를 써 보듯 게임을 실행하면 됩니다.
첫 개발사들이 공개한 초기 수치를 보면 어느 정도의 가능성이 있는지 감이 옵니다.
| 게임 | 스튜디오 | 장르 | 개발사가 밝힌 성과 |
|---|---|---|---|
| Bloom | NOWWA | 힐링 정원 퍼즐 | 세션당 평균 약 260초, 다음 날 재방문 약 30% |
| Ball Smasher | MetaM | 길거리 농구 슈팅 | 몇 시간 만에 프로토타입 완성, 며칠 만에 수백만 플레이 |
| Snake Showdown | Elanra Studios | 스네이크 대전 | 첫 4주 동안 플레이어 180만 명이 700만 회 플레이 |
| Bitmoji Ski | Snap | 스키 아케이드 | 하루 만에 제작, 하루 600만 노출 |
수익화 측면에서는 Snap의 Lens+ Payouts 프로그램을 통해 자격을 갖춘 크리에이터(만 18세 이상, 대상 국가 거주)가 렌즈를 Lens+ 및 Platinum 구독자 전용으로 지정하고 참여도에 따라 수익을 배분받을 수 있습니다. 또한 Snap은 오리지널 Web Lens 게임 기획안을 받아 개발 자금을 지원하고 있으며, 리더보드 같은 소셜 루프를 중심으로 한 게임을 우선합니다.
빌드가 지켜야 할 규칙
업로드가 거절되는 경우 대부분은 몇 가지 패키징 실수 때문입니다. 게임 코드를 쓰기 전에 먼저 익혀 두세요.
- 세로 화면 전용. 렌즈는 9:16 전체 화면으로 실행됩니다. 카메라, HUD, 버튼을 처음부터 한 손 조작에 맞춰 설계하세요.
- zip은 8 MB 이하. 이 제한은 압축된 업로드 파일에 적용됩니다. 목표가 아니라 상한선으로 생각하세요. zip이 작을수록 로딩이 빠르고, 첫 플레이까지 걸리는 시간이 가장 중요합니다.
index.html은 루트에, 1 MB 이하로. 빌드 폴더 자체가 아니라 폴더 안의 내용물을 압축하세요.index.html은 가벼운 진입점으로 두고, 번들 전체나 큰data:URL을 인라인으로 넣지 마세요.- 모든 경로는 상대 경로로. HTML에서도, 런타임
fetch()호출에서도/a/game.js가 아니라./a/game.js를 쓰세요. Vite를 쓴다면base: './'로 설정합니다. - zip 안의 경로는 슬래시로. Windows PowerShell의
Compress-Archive는 역슬래시로 기록해 경로가 깨집니다. 탐색기의 「압축(ZIP) 폴더로 보내기」,zip -r, 또는archiver패키지를 쓴 Node 스크립트로 압축한 뒤unzip -l로 확인하세요.
샌드박스: Web Lens가 할 수 없는 일
Web Lens는 독립적으로 동작합니다. 네트워크에 접근할 수 없고, 카메라나 마이크를 쓸 수 없으며, 모션 센서도 읽을 수 없습니다. 또 localStorage와 IndexedDB는 실행할 때마다 빈 상태로 시작합니다. 실제로는 다음과 같은 뜻입니다.
- 모든 스크립트, 모델, 텍스처, 폰트, 사운드를 zip 안에 포함해야 합니다.
- 애널리틱스 호출, 원격 설정, 온라인 멀티플레이 백엔드는 쓸 수 없습니다.
- 진행 상황은 Web Lens API의 Storage 기능으로 저장해야 합니다.
Web Lens API: 리더보드, Bitmoji, 스토리지
Snap의 API(npm 패키지 @snap/web-lens-api)가 게임과 스냅챗을 연결합니다. 시작할 때 init()을 한 번 호출하고, 각 기능을 쓰기 전에 isSupported()로 확인합니다. 스냅챗 밖, 즉 PC나 로컬 개발 서버에서는 내장 스텁이 샘플 데이터로 응답하므로 휴대폰 없이도 개발할 수 있습니다. 다만 어떤 기능이 없더라도 게임은 계속 플레이할 수 있게 만들어 두세요.
| 기능 | 하는 일 | 알아 둘 점 |
|---|---|---|
| 리더보드 | 점수를 제출하고 스냅챗 자체 리더보드 패널을 엶 | 점수는 정수만 가능, 타임어택은 오름차순 사용, 내 점수가 추월당하면 친구에게 알림이 갈 수 있음 |
| Bitmoji | 플레이어의 Bitmoji를 리깅된 3D GLB 또는 2D 상반신 이미지로 불러옴 | URL은 약 5분 후 만료, Bitmoji에는 애니메이션이 없음, 기본 캐릭터를 반드시 포함 |
| Storage | 플레이어 계정에 연결된 작은 키-값 저장소 | 값 하나당 최대 32 KiB JSON, 렌즈당 플레이어별 총 100 KiB, 진행 상황이 바뀔 때와 페이지가 숨겨질 때 저장 |
좋은 리더보드는 정확도, 속도, 생존 시간처럼 플레이어가 더 잘하고 싶어 하는 것을 보상하고, 재도전을 탭 한 번으로 할 수 있게 해 줍니다. 진행 상황 저장도 똑같이 고민해 볼 가치가 있습니다. 세션이 끝나도 남아야 할 것(최고 점수, 해금한 스테이지)과 초기화돼도 괜찮은 것을 정해 두세요.
웹 빌드에서 렌즈 출시까지 5단계
- 작업 방식을 고릅니다. PlayCanvas Engine으로 일반 JavaScript 프로젝트를 만들거나(AI 코딩 어시스턴트와 함께 쓰기에 이상적)
npm create playcanvas@latest my-lens -- --starter web-lens로 뼈대를 만들 수 있고, 또는 브라우저 기반 PlayCanvas Editor를 쓸 수 있습니다. Editor는 Editor MCP Server를 통해 AI 어시스턴트와 연결됩니다. 스타터에는 세로 레이아웃, 세이프 에어리어, 상대 경로, 패키징, Web Lens API가 이미 연결되어 있습니다. - PlayCanvas Skills를 추가합니다(선택).
npx skills add playcanvas/skills를 실행하면 호환되는 AI 코딩 에이전트가 PlayCanvas에서 씬, 애니메이션, HUD, 이펙트를 구성하는 법을 익힙니다. - 휴대폰에 맞게 빌드합니다. 스냅챗이 상단 근처에 자체 닫기 버튼을 그리므로 HUD는
env(safe-area-inset-*)안쪽에 두세요. 움직임은 경과 시간에 맞춰 조정하고(많은 휴대폰이 120 Hz로 동작합니다), 오디오는 사용자 동작으로 시작하며, 렌즈가 숨겨지면 일시 정지합니다. 엔진 클래스는 이름으로 import해서 번들러가 쓰지 않는 코드를 제거할 수 있게 하고, 텍스처는 압축하며 소스 맵은 빼세요. - API를 연동합니다. 게임 오버 때 점수를 제출하고, 원한다면 Bitmoji를 불러오고, Storage로 진행 상황을 저장합니다.
- 패키징, 업로드, 제출. 스타터 프로젝트에서는
npm run package가 빌드하고 zip이 Snap의 규칙에 맞는지 검사합니다. 그다음 My Lenses에 로그인해 Web Lens를 만들고 zip을 업로드한 뒤, 이름, 512 × 512 PNG 아이콘, 5초 분량의 720 × 1280 미리보기 영상을 추가합니다. 심사를 통과하면 플레이어가 이름이나 Snapcode로 게임을 찾을 수 있습니다.
코딩을 아예 하고 싶지 않다면? Snap의 AI 렌즈 제작 도구 Easy Lens가 이제 텍스트 프롬프트만으로 PlayCanvas 기반 Web Lens 게임을 만들어 줍니다. Easy Lens 웹 버전에서 Lens+ 구독자가 이용할 수 있습니다.
Web Lens에 잘 맞는 게임은?
| 잘 맞는 게임 | 잘 맞지 않는 게임 |
|---|---|
| 한 손으로 하는 아케이드, 퍼즐, 점수 경쟁 게임 | 가로 화면 또는 키보드·마우스 기반 게임 |
| 짧은 세션과 즉시 재시작 | 서버에 의존하는 긴 세션 |
| 작고 압축된 에셋 | 실행 중 대용량 에셋 다운로드 |
| 리더보드 중심의 경쟁 | 실시간 온라인 멀티플레이 |
실행부터 플레이까지 경로가 짧은 작은 프로젝트로 시작하세요. 터치 조작, 화면 가장자리, 오디오, 일시 정지, 재시작은 실제 휴대폰에서 테스트하고(npx vite preview --host를 쓰면 휴대폰 브라우저에서 빌드를 열 수 있습니다), 플랫폼별로 바꾼 내용은 모두 기록해 두어 나중에 업데이트할 때 되돌리지 않도록 하세요.
공식 정보는 Snap의 Web Lenses 문서, 플랫폼 요구 사항, PlayCanvas 발표 글에서 확인하세요.
자주 묻는 질문
Snapchat Web Lens란 무엇인가요?
Web Lens는 스냅챗 안에서 렌즈로 실행되는 웹 앱입니다. 웹 기술로 만들고 빌드를 zip으로 묶어 My Lenses로 업로드하며, Lens Studio는 필요 없습니다.
꼭 PlayCanvas를 써야 하나요?
아니요. 어떤 웹 프레임워크든 쓸 수 있지만 Snap은 PlayCanvas를 권장하며, 문서에서는 PlayCanvas와 Vite를 함께 사용합니다.
Web Lens 게임은 얼마나 클 수 있나요?
압축된 zip은 최대 8 MB, 루트에 있는 index.html은 최대 1 MB입니다. 베타 기준 제한이므로 업로드 전에 최신 요구 사항을 확인하세요.
Web Lens에서 인터넷이나 멀티플레이 서버를 쓸 수 있나요?
아니요. Web Lens는 네트워크에 접근할 수 없으므로 모든 에셋을 포함해야 하고, 온라인 멀티플레이 백엔드는 쓸 수 없습니다. 대신 리더보드는 Web Lens API를 통해 제공됩니다.
플레이어 진행 상황은 어떻게 저장하나요?
Web Lens API의 Storage 기능을 쓰세요. 일반 브라우저 저장소는 렌즈를 열 때마다 빈 상태로 시작합니다.
Web Lens 게임으로 수익을 낼 수 있나요?
자격을 갖춘 크리에이터는 Lens+ Payouts에 참여해 Lens+ 및 Platinum 구독자 전용으로 지정한 렌즈의 수익을 배분받을 수 있으며, Snap은 자금 지원 게임 기획안도 받고 있습니다.
