SYSTEM BLUEPRINT

AI 가상 안경 피팅
사용자와 운영 화면 설계

실시간 피팅과 제품 데이터 연동이 실제 화면에서 이어지는 모습을 정의한 스토리보드입니다.

스토리보드란?

스토리보드는 서비스의 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 사용자와 운영자가 필요한 정보를 어떤 순서로 확인하는지 담았습니다.

  1. 사용자가 카메라 권한부터 프레임 착용 결과까지 확인하는 흐름
  2. 참고값의 신뢰 상태를 이해하고 다시 측정하는 흐름
  3. 운영자가 제품 마스터와 연동 규격을 검증하는 흐름

마지막까지 보시면 생각하고 계신 시스템의 모습이 머릿속에 그려지실 것입니다.

가상 피팅 사용자 시나리오

카메라에서 자연스러운 착용 결과까지

사용자가 설치 또는 브라우저 접속 뒤 카메라로 안경을 착용하고 참고값까지 확인하는 흐름입니다.

1. 권한 확인

카메라 사용 목적과
현재 준비 상태를 안내

2. 얼굴 인식

랜드마크를 읽고
정합 준비를 완료

3. 프레임 정렬

선택 프레임을 얼굴에
자동으로 맞춤

4. 참고값 확인

피팅 보조값과
신뢰 상태를 함께 확인

5. 재측정

조건이 달라지면
즉시 다시 측정

가상 피팅 사용자 | 화면 01

가상 피팅 시작

app://fitting/start
실시간 카메라

안경 가상 피팅을 시작할까요?

카메라 사용 권한이 필요합니다

얼굴 인식 준비 완료
안드로이드 · 웹 공용 정합 기준 적용

Galaxy S24 · 전면 카메라

밝기 상태: 적정

안경을 벗고 정면을 바라봐 주세요

[화면 개요 및 목적]

권한 요청과 얼굴 인식 준비를 한 화면에서 연결해 이탈을 줄입니다. 공용 정합 코어가 시작되는 지점입니다.

[핵심 기능 로직]

카메라 권한, 기기 입력, 밝기 상태를 동시에 확인하고 기준을 충족하면 피팅을 시작합니다.

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
가상 피팅 사용자 | 화면 02

프레임 자동 정합

app://fitting/live

프레임 자동 정합

랜드마크 468개 추적 중

회전 각도 2.3도

얼굴 폭 142.8mm

M-204 클래식 블랙

3차원 프레임 정합 완료

가로 폭 138.0mm · 브리지 18.0mm

조명 변화 감시 중

[화면 개요 및 목적]

얼굴 랜드마크와 프레임 크기, 회전 보정이 같은 화면에서 보이는 핵심 피팅 화면입니다.

[핵심 기능 로직]

플랫폼별 카메라와 렌더링은 다르지만 좌표 변환과 보정 규칙은 공용 코어를 사용합니다.

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
가상 피팅 사용자 | 화면 03

참고값과 신뢰 상태

app://fitting/pd

피팅 보조 참고값

64.0 mm

참고 가능 · 기준 물체 확인됨

좌측 32.1mm

우측 31.9mm

카메라 흔들림 보정 적용
정밀 검안값이 아닌 피팅 보조 참고값입니다

[화면 개요 및 목적]

동공 거리 참고값과 함께 결과가 어떤 조건에서 계산됐는지 보여 주는 화면입니다.

[핵심 기능 로직]

정밀 계측이 아닌 피팅 보조값이라는 안내와 기준 물체 상태를 함께 노출합니다.

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
제품 연동 운영자 시나리오

제품 데이터에서 피팅까지

운영자가 프레임 모델과 치수를 검증하고 연동 규격을 확인하는 흐름입니다.

1. 제품 선택

제품 마스터에서
프레임을 선택

2. 규격 확인

모델 주소와
치수를 확인

3. 검증 완료

필수 필드와
오류 상태 점검

4. 문서 확인

연동 담당자가
규격 문서 확인

5. 전달

검증 결과를
다음 작업에 전달

제품 연동 운영자 | 화면 01

제품 마스터 연동 규격

web://products/spec

제품 마스터 연동 규격

프레임 목록

M-204 클래식 블랙

M-205 투명 브라운

M-206 메탈 실버

M-204

modelUrl: /frames/M-204.glb

frameWidth: 138.0mm

bridgeWidth: 18.0mm

templeLength: 145.0mm

필수 필드 검증 완료

[화면 개요 및 목적]

프레임 모델과 치수를 검증하고 연동 담당자가 필요한 규격을 확인하는 운영 화면입니다.

[핵심 기능 로직]

필수 필드가 모두 갖춰졌는지 상태로 표시하고, 오류 처리를 문서로 이어 줍니다.

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
제품 연동 운영자 | 화면 02

AI 가상 안경 피팅

[화면 개요 및 목적]

[핵심 기능 로직]

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
제품 연동 운영자 | 화면 03

AI 가상 안경 피팅

[화면 개요 및 목적]

[핵심 기능 로직]

  • 실시간 인식 안정화
    MediaPipe
  • 자연스러운 착용 위치
    Three.js
시나리오

AI 가상 안경 피팅

AI 가상 안경 피팅

AI 가상 안경 피팅

실시간 가상 피팅을 안정적으로 제공하는 핵심 기능입니다.

AI 가상 안경 피팅

실시간 가상 피팅을 안정적으로 제공하는 핵심 기능입니다.

AI 가상 안경 피팅

실시간 가상 피팅을 안정적으로 제공하는 핵심 기능입니다.

AI 가상 안경 피팅

실시간 가상 피팅을 안정적으로 제공하는 핵심 기능입니다.

AI 가상 안경 피팅

실시간 가상 피팅을 안정적으로 제공하는 핵심 기능입니다.

| 화면 01

AI 가상 안경 피팅

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    AI 가상 안경 피팅

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      AI 가상 안경 피팅

      [화면 개요 및 목적]

      [핵심 기능 로직]