Appearance
3. 추진내용
※ 유저시나리오, 개발 대표 이미지, 활용 기술 내용은 필수
가. 유저 시나리오
시나리오 1: 회원 고객 — 안경점 스마트미러 체험 (오프라인)
시나리오 2: 비회원 고객 — 안경점 스마트미러 체험 (오프라인)
시나리오 3: 온라인 쇼핑 고객 — 모바일 앱 연결 경험
1. 클라렌 앱 마이페이지에서 매장 체험 기록 확인
→ 체험 순위, 구매 이력, 추천 렌즈 목록
2. 체험 사진이 제품 상세에 적용
→ 화보처럼 자연스러운 렌즈 착용 모습 확인
3. 집에서 AR 렌즈 시뮬레이션
→ 체험했던 렌즈 + 새로운 렌즈 자유롭게 비교
4. 체험 기반 유사 렌즈 추천
→ 색상·패턴이 유사한 렌즈 자동 추천
5. 구매한 제품 기반 신제품 안내
→ "지난번 구매한 브라운 계열 신제품이 나왔어요!"
6. 장바구니 담기 → 결제 또는 매장 픽업 예약시나리오 4: 팝업스토어 방문객 (체험)
1. 팝업스토어 입장 → 대형 스마트미러 체험존
2. 인터랙티브 가상착용 체험 (엔터테인먼트 요소)
3. AI 얼굴 분석 + 렌즈/헤어/뷰티 스타일 추천
4. 착용 이미지 포토부스 촬영
5. SNS 공유 → 브랜드 인지도 확대 (바이럴 마케팅)
6. QR코드 → 온라인 구매 유도 + 이벤트 혜택 안내나. 개발 대표 이미지 — 시안 프로토타이핑
스마트미러 / 모바일 웹앱 UX 프로토타이핑 시안
메인 화면 — 스마트미러 / 모바일 웹앱
- 프로모션 배너: 이벤트·할인 안내 (스크린세이버 전환)
- CTA: "어울리는 렌즈 착용해보기" → 가상피팅 진입
- 제품 캐러셀: 인기/신상 렌즈 카드 횡스크롤
- 다국어 지원: 한국어 / English / 日本語 / 中国人
정보 입력 단계
- 비회원: 출생연도, 성별, 착용 목적 입력 (간편 정보)
- 회원: QR 스캔으로 계정 연동 후 착용 목적 선택
- 착용 목적: 일상생활 / 데이트 / 여행 / 페스티벌 등 TPO 기반 (회원·비회원 공통 수집)
AI 얼굴 촬영 및 분석
- 얼굴 촬영: 타원형 가이드 프레임에 얼굴 위치 → 촬영
- AI 분석: 얼굴형, 눈 형태, 피부 톤, 홍채 색상, 퍼스널 컬러 자동 분석
- 분석 진행 상황 시각적 UI 안내
AI 렌즈 추천 결과
- AI 추천 메시지: "따뜻한 피부톤과 동그란 눈에 어울리는 렌즈에요!"
- 필터 탭: AI 추천 / 주기 / 컬러 / 직경 / 재질 / 착용 목적
- 추천 카드: 순위별 렌즈 상품 + 가격 + 스펙 (도수, 재질, 개수)
- 착용 미리보기: 렌즈 착용 눈 클로즈업 썸네일
결과 저장 및 O2O 연결
- QR 코드 스캔 → 체험 결과를 앱에 저장
- 할인 쿠폰 연동: "결과 저장하고 10% 할인받기"
- APP 다운로드 유도 → 온라인/매장 픽업 구매 연결
다. 시스템 아키텍처 도식화
전체 시스템 아키텍처
┌──────────────────────────────────────────────────────────────┐
│ 사용자 접점 (Frontend) │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ 스마트미러 │ │ 모바일 웹앱 │ │ 쇼핑몰 플러그인 │ │
│ │ (안경점) │ │ (소비자) │ │ (클라렌몰) │ │
│ └──────┬───────┘ └──────┬───────┘ └────────┬─────────┘ │
└─────────┼─────────────────┼───────────────────┼─────────────┘
│ │ │
└────────┬────────┘ │
│ │
┌──────────────────┴────────────────────────────┴──────────────┐
│ API Gateway (인증, 라우팅, 로깅) │
└──────────────────────────┬───────────────────────────────────┘
│
┌──────────────────────────┴───────────────────────────────────┐
│ AI 서비스 레이어 │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ 안구인식 모듈 │ │ 합성 엔진 │ │ 추천 엔진 │ │
│ │ │ │ │ │ │ │
│ │ • 얼굴 탐지 │ │ • CV 렌즈합성 │ │ • 안구 특성 분석 │ │
│ │ • 안구 세그멘 │ │ • 조명 보정 │ │ • 선호도 학습 │ │
│ │ 테이션 │ │ • 실시간 처리 │ │ • 개인화 추천 │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ AI 얼굴 분석 모듈 │ │
│ │ • 얼굴형 분석 • 눈 형태 분석 • 피부톤 분석 │ │
│ │ • 홍채 색상 분석 • 퍼스널 컬러 분석 │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
│
┌──────────────────────────┴───────────────────────────────────┐
│ 데이터·인프라 레이어 │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ 제품 DB │ │ 사용자 DB │ │ 학습 데이터 │ │
│ │ (렌즈 이미지 │ │ (체험 이력, │ │ (안구 이미지, │ │
│ │ 메타데이터) │ │ 선호도) │ │ 합성 쌍) │ │
│ └──────────────┘ └──────────────┘ └──────────────────┘ │
└──────────────────────────────────────────────────────────────┘O2O 연결 플로우 (Store → App → Purchase)
┌──────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ STORE │────▶│ APP │────▶│ PURCHASE │ │
│ │ │ │ │ │ │ │
│ │ 스마트미러│ │ 체험기록 │ │ 온라인 │ │
│ │ 체험 │ │ AR시뮬 │ │ 매장픽업 │ │
│ │ AI분석 │ │ 유사추천 │ │ 재구매 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ◀── QR 연동 ──▶ ◀── 데이터 동기화 ──▶ │
│ │
└──────────────────────────────────────────────────────────────┘라. 활용 기술
핵심 기술 스택
| 영역 | 기술 | 용도 |
|---|---|---|
| 얼굴/안구 인식 | MediaPipe Face Mesh, DLIB | 실시간 안구 영역 탐지 |
| 이미지 세그멘테이션 | U-Net, SAM (Segment Anything) | 안구·홍채 정밀 세그멘테이션 |
| 이미지 합성 | MediaPipe 홍채 추적 + 알파 블렌딩 + CV 특징검출 | 컬러렌즈 착용 이미지 합성 |
| 3D 얼굴 복원 | 3DMM, FLAME | 스마트미러 AR 렌더링 |
| AI 얼굴 분석 | 얼굴형·피부톤·홍채·퍼스널컬러 분석 모델 | 개인화 렌즈·뷰티 추천 |
| 추천 알고리즘 | Collaborative Filtering, Content-based | 개인화 렌즈 추천 |
| 백엔드 | Python (FastAPI), Node.js | API 서버 |
| 프론트엔드 | React, Next.js, Three.js | 웹앱·스마트미러 UI |
| 인프라 | AWS/GCP, GPU 서버, CDN | 클라우드 인프라 |
| 모바일 | PWA (Progressive Web App) | 모바일 웹앱 |