01 / 03
화면을 나누는 기준
| 영역 | 표시 내용 | 설계 규칙 |
|---|
| 왼쪽과 가운데 2칸 | 홈·스타일·통번역·두피·고객·콘텐츠 | 상담 작업은 두 칸을 합쳐 사용. 콘텐츠는 원본 비율 유지. |
| 오른쪽 1칸 | 광고 소재·매장 편성·선택한 고객 조건 | 사용자 화면 전환 시 광고의 상태와 준비 처리를 보존. |
| 상단과 하단 | 핵심 이동·설정·계정·고객·상담 종료 | 중요 동작을 화면 밖으로 밀지 않는다. |
| 관리자 전용 전체 폭 | 현황·광고 운영·점주·기기·피드백 | console=1 관리자 화면에서만 광고 영역을 숨긴다. |
외부 브라우저 시뮬레이터 실화면. 357:103 비율 선택은 물리 크기의 모사이며 실제 패널 실측이 아니다.357÷103은 약 3.466:1이고 계획 해상도 2560÷720은 약 3.556:1이다. 두 값을 같은 비율로 가정하지 않는다. 1920×554 등 비율 테스트와 실제 Windows 활성 해상도를 함께 기록한다.
근거: F034 11~14쪽, web/src/App.tsx, MotionHome.tsx, motion.css, simulator.html·simulator.js.
02 / 03
주요 화면과 이동
| 화면 | 들어오는 경로 | 핵심 동작과 다음 화면 |
|---|
| 홈 | 로그인 완료·브랜드 버튼 | 스타일 추천·두피·통번역·콘텐츠·거울, 전체 기능 목록 |
| 스타일 스튜디오 | 홈 추천·상단 스타일 | 사진 → 모드·스타일 → 생성 → 원본 비교·저장 |
| 통번역 | 홈·상단 통번역 | A/B 언어·입력 → 원문·번역 → 대화 기록 → 상담 요약 |
| 콘텐츠 | 홈·상단 콘텐츠 | 서비스 선택. Windows 내부 보기와 웹 별도 창을 구분 |
| 두피와 피부 | 홈 두피·전체 기능 | 관찰 촬영·문진 메모·결과 저장, 결과·비교·지난 기록 |
| 고객과 기록 | 하단 고객·전체 기능 | 고객 선택 → 사진·스타일·상담 기록 연결 |
| 거울 | 홈·상단 거울 | 검정 화면 → 터치 메뉴 → 청소·콘텐츠·종료 |
| 기기와 계정 | 상단 설정·계정 | 출력 화면·입력 장치·기능 설정, 계정·로그아웃·관리자 |
스타일 스튜디오의 단순한 순서
사진 선택과 촬영을 첫 단계에 둔다. 스타일 컬렉션은 기본 표시하고 설정에서 숨길 수 있다. 헤어 편집·염색·부분 편집·얼굴 변경은 작업 목표를 구분한다. 얼굴 유지 헤어 작업에서는 얼굴 변경 모드를 함께 선택한 것처럼 보여 주지 않는다. 생성 중 진행 상태, 실패 원인과 재시도를 같은 작업 맥락에서 찾을 수 있어야 한다.
상태 전환의 디자인
빈 화면은 짧은 사용 안내와 가벼운 애니메이션으로 설명한다. 사진과 생성 결과의 자연색은 유지한다. 광고 준비·성공·실패를 구분하고 준비 오버레이가 이미 표시된 광고를 가리지 않도록 한다. 관리자에서 나오는 경로도 별도 상태 전환으로 검수한다.
근거: web/src/MotionHome.tsx, Studio.tsx, StudioGuide.tsx, Translate.tsx, Scalp.tsx, Mirror.tsx, MotionContent.tsx.
03 / 03
반응형 검수 기준
| 시험 화면 | 검수 항목 | 기록할 내용 |
|---|
| 357:103와 2560×720 | 광고 1/3, 주요 버튼·문구 잘림 | 창 크기, 패널 해상도, Windows 배율 |
| 16:9와 4:3 | 콘텐츠·스타일·관리자 재배치 | 스크린샷, 잘린 컨트롤, 실제 클릭 위치 |
| 9:16와 좁은 창 | 우측 광고와 서비스 사용성 | 의도한 지원 여부, 기기별 개선 필요 |
| 번역·관리자 내부 기록 | 기록 스크롤과 전체 화면 경계 | 과거 대화 접근, 표 헤더·행 가독성 |
| 오버레이·큰 글자 | 뒤틀림·회색 음영·초점 손실 | 배율, 글꼴, 팝업 종류, 전환 순서 |
디자인 원본과 구현의 대응
Figma 파일은 MIRRORMOTION 대표 화면·토큰·텍스트·벡터·인스턴스를 편집할 수 있다. 기존 5페이지 17개 대표 화면과 별도 광고 운영 7개 화면이 기록되어 있다. 원래의 Figma를 보존하며 새 상태를 추가한다. 모든 애니메이션·실시간 데이터·이번 대시보드가 같은 시점에 반영됐다고 간주하지 않는다.
Figma 대표 화면: https://www.figma.com/design/SEsW0FiEOLtojobLeXaav2?node-id=4-5
광고 운영 화면: https://www.figma.com/design/SEsW0FiEOLtojobLeXaav2?node-id=19-5
변경 전달 규칙
- 수정 화면·상태·해상도·컴포넌트명을 함께 적는다. 예쁜 정지 화면 하나로 오류·빈 상태를 대체하지 않는다.
- 본문 한 줄 유지가 불가능하면 명확한 축약·행 배치를 선택한다. 터치 대상을 줄여 맞추지 않는다.
- 실화면 캡처는 자르거나 보정해 오류가 없던 것처럼 만들지 않는다. 시안과 실측 화면을 구분한다.
근거: design/figma-delivery-receipt.json, 미러모션/06-Figma-편집인계.md, 07-광고운영-20261104.md. 현재 전체 폭 관리자 구현: web/src/MotionAdmin.tsx 및 motion-admin-dashboard.css.