Appearance
3-4. 모바일 앱
개요
소비자가 별도 앱 설치 없이 웹 브라우저에서 즉시 접근할 수 있는 PWA(Progressive Web App) 기반 모바일 가상착용 서비스입니다. 앱 스토어 심사 없이 URL 접속만으로 서비스를 이용할 수 있으며, 스마트미러 체험 이력과 연동하여 매장-모바일 간 끊김 없는 O2O 경험을 제공합니다.
핵심 기능
1. 가상착용 체험
| 모드 | 설명 | 기술 |
|---|---|---|
| 실시간 모드 | 전면 카메라로 실시간 컬러렌즈 가상착용 | WebRTC + ONNX Runtime (브라우저 내) |
| 사진 모드 | 셀카 촬영 후 AI 가상착용 적용 | 서버 API (고품질 합성) |
| 비교 모드 | 2개 렌즈를 좌우 분할 비교 | 클라이언트 사이드 렌더링 |
| Before/After | 착용 전후 슬라이드 비교 | CSS Transform 애니메이션 |
- 실시간 모드: 브라우저 내 경량 모델(ONNX Runtime)로 ~200ms 추론, 네트워크 지연 없음
- 사진 모드: 서버 GPU 기반 고품질 합성, 1초 이내 응답
- 저사양 기기 대응: 실시간 모드 불가 시 자동으로 사진 모드 전환
2. 제품 탐색
- 클라렌 전 제품 카탈로그 (100+ SKU)
- AI 추천: "고객님의 눈에 어울리는 렌즈" (피부톤/안구 특성 기반)
- 착용 목적(TPO) 기반 추천: 일상생활/데이트/여행/페스티벌 등 상황별 맞춤 렌즈 추천
- 인기 제품: 매장 체험 데이터 기반 인기 순위
- 신제품/시즌 추천: 시기별 큐레이션
- 검색/필터: 색상, 직경, 용도, 가격대별 필터링
3. O2O 연동
| 기능 | 설명 |
|---|---|
| 가까운 매장 찾기 | GPS 기반 스마트미러 설치 안경점 지도 표시 |
| 매장 방문 예약 | 원하는 시간에 스마트미러 체험 예약 |
| 체험 이력 동기화 | 스마트미러에서 체험한 이력을 앱에서 확인 (QR 코드 연동) |
| 매장 → 앱 전환 | 스마트미러 QR 스캔 → 앱에서 동일 렌즈 재체험 |
| 앱 → 매장 전환 | 앱에서 찜한 제품을 매장 방문 시 바로 체험 |
4. 구매 연동
| 기능 | 설명 |
|---|---|
| 클라렌 쇼핑몰 연동 | 가상착용 후 바로 구매 페이지 이동 |
| 장바구니 동기화 | 앱에서 담은 제품 → 쇼핑몰 장바구니 반영 |
| 구매 이력 관리 | 과거 구매 렌즈 기반 재구매/유사 추천 |
| 쿠폰/프로모션 | 매장 체험 후 모바일 전용 할인 쿠폰 |
5. 마이페이지
- 체험 기록: 가상착용한 렌즈 목록, 날짜별 이력
- 찜한 렌즈: 관심 제품 저장
- 구매 이력: 과거 구매 내역 (쇼핑몰 연동)
- 내 눈 프로필: AI 분석 결과 (피부톤, 추천 색상 계열, 착용 목적(TPO))
- 착용 목적 설정: 착용 목적(일상생활/데이트/여행/페스티벌)을 앱에서 설정·변경하여 맞춤 추천에 반영
- 설정: 알림, 개인정보, 동의 관리
주요 화면 구성
| # | 화면 | 주요 요소 | 비고 |
|---|---|---|---|
| 1 | 홈 | 추천 렌즈, 인기 제품, 빠른 가상착용 CTA | 랜딩 페이지 |
| 2 | 카탈로그 | 전 제품 목록, 필터/검색, 제품 카드 | 그리드 뷰 |
| 3 | 가상착용 | 카메라 뷰, 렌즈 선택, 비교 모드, 저장 | 풀스크린 |
| 4 | 제품 상세 | 제품 정보, 가상착용 CTA, 구매 버튼 | 쇼핑 연동 |
| 5 | 매장 찾기 | 지도, 매장 목록, 예약 | O2O |
| 6 | 마이페이지 | 체험 기록, 찜, 구매 이력, 설정 | 개인화 |
| 7 | 장바구니 | 선택 제품, 수량, 결제 연결 | 커머스 |
기술 스택
| 영역 | 기술 | 선정 이유 |
|---|---|---|
| 프레임워크 | Next.js (PWA) | SSR + CSR 하이브리드, SEO, 빠른 초기 로딩 |
| UI 라이브러리 | React + TailwindCSS | 컴포넌트 기반, 반응형 디자인 |
| 상태 관리 | TanStack Query + Zustand | 서버 상태/클라이언트 상태 분리 |
| 카메라 연동 | WebRTC, MediaStream API | 브라우저 내장 카메라 접근 |
| AI 추론 (온디바이스) | ONNX Runtime Web | 브라우저 내 경량 AI 추론 |
| AI 추론 (서버) | REST API (GPU 서버) | 고품질 합성 |
| 푸시 알림 | Web Push API + Service Worker | 앱 설치 없이 푸시 알림 |
| 오프라인 | Service Worker + Cache API | 카탈로그 오프라인 조회 |
| 지도 | Kakao Maps API | 매장 위치, 길찾기 |
| 분석 | Google Analytics 4 | 사용자 행동 분석 |
PWA 특성
| 특성 | 설명 |
|---|---|
| 설치 불필요 | URL 접속만으로 즉시 이용, 앱 스토어 불필요 |
| 홈 화면 추가 | "홈 화면에 추가" 배너로 앱처럼 설치 |
| 푸시 알림 | Service Worker 기반 푸시 (신제품, 프로모션) |
| 오프라인 지원 | 카탈로그, 체험 기록은 오프라인에서도 조회 |
| 자동 업데이트 | 새 버전 배포 시 자동 반영 (앱 업데이트 없음) |
| 크로스 플랫폼 | iOS Safari, Android Chrome 모두 지원 |
| 빠른 로딩 | SSG(Static Site Generation) + CDN으로 1초 이내 LCP |
AR 기능 상세
실시간 AR 파이프라인
카메라 프레임 캡처 (30fps)
→ 얼굴/안구 검출 (MediaPipe Face Mesh)
→ 안구 영역 추출 (홍채 경계 계산)
→ 컬러렌즈 합성 (ONNX Runtime, ~200ms)
→ 프레임 렌더링 (Canvas API)AR 기술 사양
| 항목 | 사양 |
|---|---|
| 프레임 속도 | 15~30 FPS (기기 성능에 따라 자동 조절) |
| 추론 시간 | ~200ms (온디바이스) / ~500ms (서버) |
| 지원 해상도 | 720p~1080p (카메라 해상도에 따라) |
| 지원 브라우저 | Chrome 90+, Safari 15+, Samsung Internet 15+ |
| 최소 기기 사양 | RAM 3GB+, 프로세서 Snapdragon 660급 이상 |
개발 일정
| 단계 | 기간 | 산출물 |
|---|---|---|
| UX 리서치 + 설계 | 2차년도 Q1 (4주) | 와이어프레임, 프로토타입 |
| UI 디자인 | 2차년도 Q1 (4주) | 디자인 시스템, 화면 디자인 |
| MVP 개발 | 2차년도 Q1~Q2 (8주) | 핵심 기능 MVP (가상착용, 카탈로그) |
| 사용자 테스트 | 2차년도 Q2 (2주) | 사용성 테스트 보고서 |
| 정식 개발 | 2차년도 Q2~Q3 (8주) | 전체 기능 구현 |
| 런칭 | 2차년도 Q3 | 정식 서비스 오픈 |
| 고도화 | 2차년도 Q3~Q4 | 피드백 반영 개선 |