보이스카드 AI 잉글리시
설계·구현 참고 자료 — 고객 납품 실적으로 구분된 항목이 아닙니다.
AI 음성 합성 기반 보이스카드와 QR 온보딩, 구독형 결제를 결합한 영어 학습 앱의 핵심 화면을 웹 데모로 구현합니다.
프로젝트 개요
AI 음성 합성 기반 보이스카드와 QR 온보딩, 구독형 결제를 결합한 영어 학습 앱의 핵심 화면을 웹 데모로 구현합니다. 학습자가 QR로 즉시 앱에 진입해 오늘의 학습을 확인하고, ElevenLabs API로 합성한 AI 음성이 담긴 보이스카드를 재생하며, 토스페이먼츠 기반 무료체험 후 구독 결제로 자연스럽게 이어지는 흐름을 React 기반 벤토 그리드 UI로 설계합니다.
작업 범위
- 오늘의 학습 홈: 학습자가 앱 진입 시 가장 먼저 보는 홈 화면으로, 오늘의 학습 진도와 연속 학습 스트릭, 최근 보이스카드, 구독 상태를 비대칭 타일 그리드로 한눈에 보여줍니다
- QR 온보딩: 오프라인 행사 현장에서 QR 코드를 스캔한 사용자를 앱 설치 여부에 따라 스토어 또는 웹 진입 화면으로 자동 분기합니다
- AI 보이스카드: 인물 사진과 AI 음성이 결합된 보이스카드를 재생하는 화면으로, 카드를 넘기며 학습자가 발음을 듣고 따라 말하도록 유도합니다
- 구독 결제: 1주 무료체험 후 유료 구독으로 이어지는 결제 플로우를 구현하며, 해외 사용자를 위한 대체 결제 수단 안내 화면을 포함합니다
주요 업무
- 오늘의 학습 홈 화면: React 기반 SPA에서 학습 진도·보이스카드·구독 상태 API를 병렬 호출해 타일별로 독립 렌더링하며, 타일 크기를 콘텐츠 중요도에 따라 2x2/1x1/2x1로 배치합니다
- QR 온보딩 화면: QR에 인코딩된 진입 토큰을 파싱해 앱 설치 여부를 판별하는 딥링크 라우팅 로직을 구현하고, 미설치 사용자는 웹 기반 프리뷰 페이지로 유도합니다
- AI 보이스카드 화면: ElevenLabs API로 합성한 음성 파일을 Supabase Storage에서 스트리밍하고, 카드 스와이프 제스처와 오디오 재생 상태를 동기화합니다
- 구독 결제 화면: 토스페이먼츠 정기결제(빌링)를 연동해 무료체험 종료 시점에 자동 결제를 시도하고, 국내 카드가 아닌 경우를 감지해 대체 결제 안내로 전환하는 로직을 구현합니다
프로젝트 핵심 과제
QR 진입 시점에 앱 미설치 사용자와 설치 사용자를 구분해 서로 다른 경로로 안내하는 라우팅 로직 설계
AI 음성 파일 스트리밍 지연이 발음 학습 흐름을 끊지 않
프리로딩과 캐싱 전략 설계 필요
토스페이먼츠가 지원하지 않는 해외 발급 카드 결제 실패를 사전에 감지하고 대체 경로로 안내하는 어댑터 구조 설계
무료체험 종료 시점의 자동 결제 실패가 재시도 폭주로 이어지지 않
재시도 정책과 백오프 설계 필요
App Store와 Google Play 양대 마켓 동시 출시 심사 대응
일본 등 해외 결제 호환성 확보라는 두 외부 정책 제약을 함께 만족하는 설계 필요
핵심 기능 상세
오늘의 학습 홈
학습자가 앱 진입 시 가장 먼저 보는 홈 화면으로, 오늘의 학습 진도와 연속 학습 스트릭, 최근 보이스카드, 구독 상태를 비대칭 타일 그리드로 한눈에 보여줍니다.
- CSS Grid의 grid-column/row span으로 비대칭 벤토 타일 레이아웃 구현
- React Query로 학습 진도·보이스카드·구독 상태 API를 병렬 캐싱하여 타일별 독립 갱신
- Skeleton UI와 Suspense로 타일별 로딩 상태를 분리 처리
비대칭 그리드 기반 홈 대시보드를 설계해 학습 진도·보이스카드·구독 정보를 하나의 화면에서 우선순위별로 배치합니다.
QR 온보딩
오프라인 행사 현장에서 QR 코드를 스캔한 사용자를 앱 설치 여부에 따라 스토어 또는 웹 진입 화면으로 자동 분기합니다.
- Universal Link/App Link 방식의 딥링크 라우팅 로직 설계
- QR 토큰에 이벤트·발급 시각을 인코딩해 베타 테스트 기간 유효성 검증 로직 구현
- 미설치 사용자 대상 웹 프리뷰 폴백 페이지 구현
QR 스캔 진입점 하나로 설치 여부·플랫폼(iOS/Android)·베타 기간을 판별해 최적 경로로 라우팅하는 구조를 설계합니다.
AI 보이스카드
인물 사진과 AI 음성이 결합된 보이스카드를 재생하는 화면으로, 카드를 넘기며 학습자가 발음을 듣고 따라 말하도록 유도합니다.
- ElevenLabs API 연동으로 텍스트를 자연스러운 음성으로 합성하는 파이프라인 구현
- Supabase Storage 서명 URL 기반 오디오·이미지 스트리밍 및 캐싱 처리
- 스와이프 제스처 라이브러리와 Web Audio API 재생 상태를 동기화하는 커스텀 훅 구현
ElevenLabs API로 합성한 음성과 인물 이미지를 카드 형태로 결합하고, 재생 실패 시 대체 텍스트 스크립트로 전환하는 안정적인 재생 구조를 설계합니다.
구독 결제
1주 무료체험 후 유료 구독으로 이어지는 결제 플로우를 구현하며, 해외 사용자를 위한 대체 결제 수단 안내 화면을 포함합니다.
- 토스페이먼츠 빌링키 발급 및 정기결제 API 연동으로 무료체험 종료 후 자동 결제 로직 구현
- 카드 발급국 코드 판별 로직으로 해외 카드 결제 실패를 사전 감지하는 어댑터 패턴 설계
- 결제 실패 시 재시도 큐와 사용자 알림을 연동하는 상태 머신 구현
국내 PG(토스페이먼츠) 결제를 기본으로 하되, 해외 사용자를 위한 대체 결제 수단 연동 인터페이스를 어댑터 패턴으로 설계해 확장 가능한 구조를 만듭니다.
프로젝트 진행 단계
소스코드 인수 및 Supabase 환경 세팅 · 2026.09
React Native/Expo 기존 코드 구조 분석, Supabase 프로젝트 이관, 로컬 빌드 검증 및 환경변수 정리
QR 온보딩 및 보이스카드 코어 구현 · 2026.09
QR 딥링크 라우팅, ElevenLabs 음성 연동, Supabase Storage 기반 보이스카드 재생 로직 구현
구독 결제 플로우 개발 · 2026.09
토스페이먼츠 빌링 연동, 무료체험-유료 결제 전환 로직, 해외 결제 대안 어댑터 설계
홈 대시보드 및 통합 테스트 · 2026.09
벤토 그리드 홈 화면 구현, 전체 플로우 통합 테스트 및 크로스 디바이스 검증
개발 결과
기술적 주안점
- 비대칭 그리드 기반 홈 대시보드를 설계해 학습 진도·보이스카드·구독 정보를 하나의 화면에서 우선순위별로 배치합니다
- QR 스캔 진입점 하나로 설치 여부·플랫폼(iOS/Android)·베타 기간을 판별해 최적 경로로 라우팅하는 구조를 설계합니다
- ElevenLabs API로 합성한 음성과 인물 이미지를 카드 형태로 결합하고, 재생 실패 시 대체 텍스트 스크립트로 전환하는 안정적인 재생 구조를 설계합니다
