얼굴 부위를 고르면 내 "동물상" 관상이 나오는, 재미로 보는 셀프 분석 미니앱
토스 앱 속에서 동작하는 WebView 미니앱이에요. 로그인·서버 없이 누구나 바로 즐겨요.
얼굴 부위 선택 → 동물상 결과 생성 → 더 깊은 해석을 광고로 하나씩 해금 → 도감 수집 → 매일 복귀
| 무엇을 | 얼굴형·눈·눈썹·코·입을 고르면 12가지 동물상 중 하나로 관상 결과가 나오는 분석 콘텐츠 |
| 어디서 | 토스 앱 내 미니앱 (수천만 토스 유저 노출) |
| 누구를 위해 | 20 |
| 누가 | 1인 기획·개발 (콘텐츠 설계 + 프론트엔드 + 광고 수익 모델 + 심사/운영 정책) |
| 홈 | 부위 선택 | 결과(해석 해금) | 동물상 도감 |
|---|---|---|---|
 |
 |
 |
 |
- 결정적 관상 분석 — 고른 5개 부위 조합이 확률 없이 하나의 동물상으로 매핑돼요(랜덤·뽑기 0).
- 궁금증 기반 광고 게이트 — 결과 화면의 "눈으로 보는 성격 · 코로 보는 재물운 · 직업운 · 올해의 행운" 등 6개 해석을 원하는 것만 골라 광고로 해금. 강제 광고벽 없이 한 세션에 자발적으로 여러 번 시청하게 설계.
- 동물상 도감 + 등급 — 12종 수집, 등급(입문→명인)·연속 기록으로 매일 재방문 유도.
- 공유 카드 — "내 관상은 OO상" 결과를 친구에게 공유해 자연 확산.
- 그레이스풀 디그레이데이션 — 광고 키가 없어도 브라우저에서 흐름이 끊기지 않아요.
| 영역 | 사용 기술 |
|---|---|
| 언어 | TypeScript 5.7 (strict) |
| 프론트엔드 | React 18, Vite 6, Emotion |
| 디자인 시스템 | TDS Mobile (토스 디자인 시스템) |
| 플랫폼 SDK | @apps-in-toss/web-framework (Granite 런타임 · WebView 브릿지 · 인앱광고) |
| 상태/저장 | 클라이언트 상태 머신 + localStorage (서버·로그인 없음) |
| 수익화 | 인앱 광고(보상형·전면·배너) — 콘텐츠 호기심 기반 자발적 노출 |
| 품질 | ESLint(flat config), Prettier, Playwright(E2E 스크린샷 회귀) |
| 배포 | ait build → .ait 아티팩트 → ait deploy |
서버가 없는 클라이언트 상태 머신이에요. 모든 진행/수집은 localStorage에 저장되고, 날짜 경계만 토스 서버 시각(KST)을 신뢰해요.
flowchart LR
Home[홈: 등급·연속·수집] --> Select[부위 선택 5단계]
Select -->|결정적 매핑| Result[동물상 결과]
Result -->|"광고 보고 해석 열기 ×6"| Unlock[부위·운세 해석 해금]
Result -->|수집| Dex[동물상 도감 12종]
Result -->|공유| Share[결과 카드]
Home -->|KST 자정 리셋| Home
설계 의도
- 결과는 선택 조합의 결정적 매핑 — 사행성(랜덤 가챠·확률 구매) 표면을 0으로.
- 광고는 선택형 게이트 — 사용자가 궁금한 해석을 위해 자발적으로 시청(강제 없음).
- 일일 리셋·연속 기록은 서버 시각(KST) 기준 — 클라 시계 신뢰 안 함.
- 로그인·개인정보·위치·사진 수집 0 — 부위는 텍스트로 선택, 얼굴 이미지를 다루지 않아요.
1. 현금 없이 광고를 보게 만드는 "궁금증 엔진"
캐시백을 줄 여력이 없는 초기에는 포인트 보상형 루프가 약해요. 그래서 광고를 보는 대가를 *포인트가 아니라 "사용자가 진짜 궁금한 해석 그 자체"*로 설계했어요. 결과 화면을 부위별 성격·재물운·직업운·행운 6개 섹션으로 쪼개 각각을 독립 광고 게이트로 만들어, 한 세션에 자발적 광고 시청을 6회 이상까지 끌어올렸어요.
2. 랜덤 없는 결정적 결과 (심사·사행성 안전)
12종 동물상을 얼굴형 클러스터(3종×4) 위에 올리고, 나머지 4부위 합으로 클러스터 내 변주를 정하는 순수 함수 매핑(
selectionToAnimalId). 확률·가챠·뽑기가 전혀 없어 사행성 심사 리스크를 제거하면서도 1,024가지 선택 조합이 12종에 골고루 도달해요.
3. 그레이스풀 디그레이데이션
광고 그룹 ID가 비어 있어도
isSupported()가드 + 빈 키 즉시 통과로 브라우저 둘러보기·로컬 개발에서 흐름이 끊기지 않아요. Playwright로 전 화면을 무광고 환경에서 캡처해 시각 회귀를 검증해요.
4. 토스 네이티브와의 메커니즘 차별
만보기·행운퀴즈·출석 앱테크와 겹치지 않게 코어 동사를 "관상 분석·수집"으로 잡고, "출석" 대신 "연속 기록" 프레이밍을 써 중복 반려 리스크를 회피했어요.
npm install
cp .env.example .env # 값은 비워둬도 '둘러보기'로 흐름 확인 가능
npm run devnpm run build # vite/ait 빌드 → .ait 아티팩트
npm run deploy # 앱인토스 콘솔로 배포스크린샷 회귀:
npx playwright install chromium
node scripts/screenshots.mjs # dev 서버가 떠 있어야 해요src/
├─ lib/ env · analytics · tossEnv · dateKey(KST 서버시각)
├─ hooks/ useAdGate · useInterstitialAd · useFaceState(도감·연속)
├─ components/ BannerAd
├─ data/ face(동물상·부위 콘텐츠·결정적 매핑) · share · notify
└─ screens/ Home · Select · Result · Dex
scripts/ Playwright 스크린샷
submission/ 심사 제출 자료(앱정보·아이콘·썸네일)
- 인앱 광고 그룹 ID 연결 → 수익화 활성화
- 데일리 리마인드 푸시(스마트 발송) 템플릿 연동
- 동물상·해석 콘텐츠 확장(부위·운세 추가)
- 지표 안정화 후 토스포인트 보상 도입(서버 중복지급 방지)
개인 포트폴리오 목적으로 공개한 저장소예요. 앱인토스 미니앱 · 콘텐츠 설계 · 광고 수익 모델 · 심사/운영 정책까지 1인 개발한 사례로 봐주세요. 🐯