SYSTEM BLUEPRINT

고르고 착용하고
사진으로 남기다

3D 가발의 자연스러운 착용을 첫 실행부터 촬영 결과까지 연결한 화면 설계입니다.

스토리보드란?

스토리보드는 실제 앱의 핵심 화면과 행동을 미리 확인하는 문서입니다. 사용자의 카메라 권한부터 가발 선택, 측면 확인, 촬영·저장까지의 흐름을 보여줍니다.

  1. 시작 화면에서 카메라 사용 이유를 이해하고 권한을 허용합니다.
  2. 남성·여성 가발 10종을 고르고 실시간 착용과 측면 상태를 확인합니다.
  3. 사진을 촬영·앨범에 저장하고 설정 정보를 확인합니다.

마지막까지 보시면 가발 선택부터 자연스러운 착용, 촬영까지의 경험이 어떻게 이어지는지 확인하실 수 있습니다.

체험 사용자 시나리오

내 얼굴에 맞는 가발을 고르는 여정

권한 안내 → 실시간 착용 → 각도 확인 → 촬영 → 저장으로 이어집니다.

카메라 안내

권한 이유 확인

가발 선택

남·여 10종 전환

착용 확인

정면·측면 점검

사진 촬영

결과 확인

앨범 저장

다시 찍기 가능

체험 사용자 | 화면 01

시작·카메라 동의

app://wig/start
헤어 체험
내 얼굴에 어울리는
3D 가발을 만나보세요

남성 5종 · 여성 5종을 카메라에서 바로 바꿔 볼 수 있습니다.

3D 가발 착용 미리보기
카메라 권한허용 대기

얼굴 방향을 읽고 가발을 실시간으로 보여주기 위해 사용합니다.

가발 10종좌우 약 60°기기 앨범 저장
동의 후 카메라 시작개인정보 안내
카메라 허용하고 체험 시작
이용약관 · 개인정보처리방침
실시간 전환 사진 저장 측면 확인
v1.0.0AndroidiOS
홈 체험 사진 설정

[화면 개요 및 목적]

카메라 사용 이유와 권한 상태를 먼저 제시합니다. 체험 전에 사용자가 정보를 이해하고 동의하는 시작 화면입니다.

[핵심 기능 로직]

Flutter 공통 화면에서 카메라 권한을 요청하고 거부 시 재안내합니다. 권한이 없으면 카메라 프리뷰를 시작하지 않습니다.

  • 권한 흐름 명확화
    Flutter · 카메라 권한 API
체험 사용자 | 화면 02

실시간 가발 착용

app://wig/try-on
실시간 가발 체험
가발 착용 미리보기
얼굴 추적 중
측면 58°
이마·귀 경계 확인
정면 확인측면 60° 점검실시간 렌더링
선택: 여성 긴 웨이브03 / 10
여성 5종남성 5종

긴 웨이브

레이어 컷

단발 C컬
가발 10종 · 남 5 / 여 5경계·볼륨 점검
이마귀옆머리윤기
이마·귀 경계: 정면 확인
좌우 60°: 실기기 점검
전환·프레임: 안정화 대상
홈 체험 사진 설정

[화면 개요 및 목적]

제안서의 대표 2종 실기기 검증 전략을 보여주는 핵심 화면입니다. 여성·남성 가발을 바꾸며 정면과 좌우 약 60°의 정합·경계를 확인합니다.

[핵심 기능 로직]

SDK별 얼굴 포즈·헤어 마스크·오클루전 결과를 같은 기기에서 비교합니다. 10종 원본을 변환·최적화하고 촬영 전 프레임 안정성을 검수합니다.

  • 측면·경계 품질 검증
    상용 AR SDK · 3D 메시 · 헤어 분할
체험 사용자 | 화면 03

촬영 결과·설정

app://wig/result
촬영 결과
마음에 드는 스타일을
사진으로 남겨보세요
가발 착용 촬영 결과
여성 · 긴 웨이브2026.10.09 · 09:52
다시 찍기앨범에 저장
설정 · 앱 정보
이용약관
개인정보처리방침
앱 버전v1.0.0
AndroidiOS App Store카메라 권한
앨범 저장 다시 찍기 권한 확인
홈 체험 사진 설정

[화면 개요 및 목적]

촬영 사진 확인, 기기 앨범 저장, 다시 찍기의 결과 화면입니다. 하단 설정 시트로 약관·개인정보·앱 버전도 확인합니다.

[핵심 기능 로직]

촬영 결과를 저장하기 전에 앨범 권한을 확인합니다. 앱 설정에는 법적 문서와 버전을 노출하고, 양대 스토어 심사 항목에 맞춰 제공합니다.

  • 촬영부터 저장까지
    Flutter 사진 저장 · 스토어 심사
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]

        시나리오

        | 화면 01

        [화면 개요 및 목적]

        [핵심 기능 로직]

          | 화면 02

          [화면 개요 및 목적]

          [핵심 기능 로직]

            | 화면 03

            [화면 개요 및 목적]

            [핵심 기능 로직]