나는 3D 오디오 비주얼라이저를 만들고 Lemon Squeezy로 일주일 만에 수익화했다
Source: Dev.to
개요
음악을 시각화하고 그 대가를 받고 싶었던 적이 있다면, 일주일 만에 바로 그 작업을 어떻게 만들고 배포했는지 알려드립니다.
일주일 전, 나는 로컬 머신에서 작동하는 Three.js 오디오 비주얼라이저를 가지고 있었지만 수익화 계획은 없었습니다. 오늘은 Netlify에 라이브로 배포되었고, Lemon Squeezy의 승인을 받아 $9/month에 유료 구독자를 받고 있습니다.
내가 만든 것
3D Audio Visualizer Pro는 브라우저 기반 앱으로 오디오 입력(마이크 또는 파일 업로드)을 받아 Three.js와 Web Audio API를 사용해 실시간 3D 시각화로 렌더링합니다. 또한 시각화를 비디오 파일(WebM/MP4)로 내보낼 수 있어—이것이 수익화의 핵심이 되었습니다.
포함된 세 가지 씬:
| 씬 | 설명 |
|---|---|
| Sphere | 볼륨에 따라 확장하고 회전합니다 |
| Bars | 32개의 무지개 색 주파수 바 |
| Particles | 비트에 맞춰 가속하는 500개의 파티클 |
피벗: Chrome 확장 프로그램 → 웹 앱 (첫 번째)
원래는 이것을 Chrome 확장 프로그램으로 만들었고— 현재도 그 버전을 병행해서 작업하고 있습니다. 진행 중에 실제 수익화 기회가 확장 프로그램 자체에 있는 것이 아니라 비디오 내보내기에 있다는 것을 깨달았습니다.
뮤지션과 콘텐츠 제작자는 YouTube, TikTok, Instagram용 비주얼라이저 비디오가 필요합니다. 이는 반복적인 수요이며, 곧 반복적인 수익을 의미합니다. 웹 앱은 이를 훨씬 쉽게 제공할 수 있어, 먼저 웹 앱을 출시하고 수익화 모델을 검증한 뒤 확장 프로그램 작업을 계속했습니다.
전환은 chrome.tabCapture를 getUserMedia()로 교체하는 것만 필요했습니다. 전체 Three.js 렌더링 코드는 그대로 유지되었습니다. 피벗은 하루도 안 걸렸습니다.
기술 스택
| Layer | Technology |
|---|---|
| Frontend | Vanilla JS + Three.js r128 (CDN) — 단일 index.html 파일, 빌드 단계 없음 |
| Audio | Web Audio API (getUserMedia는 마이크용, createObjectURL은 파일 입력용) |
| Video export | MediaRecorder API를 30 fps로 사용, WebM/MP4 출력 |
| Hosting | Netlify 무료 플랜(상업적 사용 가능 — Vercel Hobby는 불가) |
| Payments | Lemon Squeezy ($9/월, 7일 무료 체험, 라이선스 키 생성 포함) |
백엔드 없음. 데이터베이스 없음. Netlify에 배포된 단일 HTML 파일만 있습니다.
프리미엄 모델
| Feature | Free | Pro ($9/월) |
|---|---|---|
| Visual scenes | 3개 장면 (워터마크) | 모든 장면, 워터마크 없음 |
| Audio input | 마이크만 | 마이크 + 파일 업로드 |
| Video export | ❌ | ✅ MP4 내보내기 |
비디오 내보내기 게이트는 수익화 전략의 핵심입니다. 일반 사용자는 무료 시각화 도구를 사용해 볼 수 있습니다. 소셜에 깔끔하고 내보낼 수 있는 콘텐츠가 필요한 뮤지션은 업그레이드할 명확한 이유가 있습니다.
왜 레몬 스퀴지
여러 결제 옵션을 비교했습니다:
| 서비스 | 수수료 | 비고 |
|---|---|---|
| Lemon Squeezy | 5 % + $0.50 | 세금 처리 및 라이선스 키 포함 |
| Gumroad | 10 % + $0.50 | 일회성 디지털 제품에 적합 |
| Stripe direct | 2.9 % + $0.30 | 가장 저렴하지만 백엔드가 필요함 |
인프라가 전혀 없는 상태에서 SaaS MVP를 배포하는 1인 개발자에게는 Lemon Squeezy가 명확한 승자였습니다. 이 서비스는 지역별 VAT/세금 준수를 처리해 주어 법적 골칫거리를 없애 줍니다. 라이선스 키 생성 기능이 내장되어 있어 Pro 기능을 제한하는 데 사용하고 있습니다.
KYB/KYC 검토 과정은 최초 신청부터 승인이 날 때까지 약 10일이 걸렸습니다. 라이브 데모 URL, 제품 상세 정보, 소셜 미디어 링크 등을 요청했으며, 특별히 과도한 요구는 없었습니다.
$10 판매 시 순수익은 다음과 같습니다:
- Stripe direct → $9.41
- Lemon Squeezy → $9.00
- Gumroad → $8.50
월 $2 000을 초과하면 Stripe direct가 더 합리적으로 보이기 시작하지만, 그때까지는 Lemon Squeezy의 세금 처리와 라이선스 키 생성 기능이 수수료 차이를 충분히 상쇄합니다.
다음 단계
- Firefox AMO — 부가 채널로 확장 프로그램 포팅 (1–3 일, 무료)
- itch.io listing — 크리에이티브‑코딩 / VJ 커뮤니티에 도달
- YouTube / TikTok 데모 영상 — 음악에 반응하는 비주얼라이저는 본질적으로 공유 가능한 콘텐츠
- Product Hunt 런치 — 더 많은 관객을 확보한 뒤
수익 목표: 1–2 개월 내에 월 $100, 3–6 개월 내에 월 $1 000.
배운 교훈
- MVP를 먼저 출시하세요. 더 많은 씬을 추가하려다 거의 출시를 미룰 뻔했습니다. 하지 마세요.
- 내보내기 기능이 바로 제품입니다. 예쁜 시각화 도구에 돈을 내는 사람이 아니라, 콘텐츠 제작 시간을 절약해 주는 도구에 돈을 냅니다.
- Netlify 무료 플랜은 이 종류의 프로젝트에 정말 좋습니다. 콜드 스타트가 없고, 상업적 사용이 허용되며, Git에서 즉시 배포됩니다.
- Lemon Squeezy의 검토에는 시간이 걸립니다. 일찍 제출하고, 검토 중에는 데모 URL을 계속 살아 있게 유지하며, KYB 요청에 가능한 빨리 응답하세요.
- Claude Code는 솔로 개발자에게 게임 체인저였습니다. 엔지니어링 배경도, 빌드 툴링 전문 지식도 없습니다. 원하는 것을 설명하고 반복하기만 하면 됩니다. Three.js 구현은 이 없이는 몇 주가 걸렸을 겁니다.
비슷한 무언가를 만들고 있거나 Three.js / Web Audio API 구현에 대해 질문이 있으면 댓글을 남겨 주세요 — 자세한 내용을 기꺼이 공유하겠습니다.