이 시안은
로피 앱 Feedback 탭에 AI 피드백 받기 흐름을 더한 클릭 시안입니다. 기존 전문가 피드백(¥5,000) 흐름은 그대로 두고, 같은 화면 틀과 컴포넌트로 AI 흐름을 옆에 붙였습니다. 왼쪽 목록에서 화면을 고르거나, 폰 안 버튼을 눌러 넘어가세요. 숫자·영상·이름은 모두 예시입니다.
조건 바꿔 보기(동의 화면의 "AI 분석 시작하기"를 눌렀을 때 갈래):
흐름
들어오기 (3곳)
· Feedback 탭 "AI로 먼저 점검하기" 카드
· 연습 기록 상세 "이 영상으로 AI 피드백 받기" (Task 49)
· 내 오디션 상세 피드백 시트 "AI로 먼저 무료 점검해 보기"
→ 영상 고르기: 연습 기록 / 내 오디션 영상 / 새로 올리기 (3분·500MB)
→ 여러 명이 보이면: 영상 속 나 고르기
→ 분야(댄스·보컬 중 하나) + 받고 싶은 피드백(복수) + 이용 내용 + 동의
├ 만 14세 미만 → 보호자 동의 요청 시트
└ 무료 횟수 0 → 다음 달 안내 + 전문가 피드백 시트
→ 분석 중 (1~3분, 앱 닫아도 알림)
├ 영상 품질 문제 → 분석 불가 (횟수 차감 안 함)
└ 일시 오류 → 다시 분석하기 (횟수 차감 안 함)
→ 결과: 점수 6칸 · 요약 · 구간 코멘트(누르면 영상이 그 시각으로) · 다음 연습 2개
→ 전문가에게 이 영상 보내기(기존 결제 흐름, 메모 자동 채움) / 연습 기록·Feedback 탭에 보관
Figma에서 가져온 컴포넌트
파일 yByFgGSfGAenfbmhjIDjJ2, 페이지 "📌 2차 업데이트 최종". 시작 노드 8880:3479와 같은 피드백 섹션 프레임에서 값(색·글자·간격·radius)과 아이콘·이미지를 그대로 가져왔습니다. 새로 만든 모양은 "영상 속 나" 상자 하나(브랜드 색 선)뿐입니다.
| 노드 이름 (ID) | 이 시안에서 쓴 곳 |
|---|---|
| Status_Bar/dark (8880:3480) | 모든 화면 위 |
| Top nav (8880:3481) | Feedback 탭 제목·알림 |
| Top Bar (8880:5013) | 뒤로 + 화면 제목 |
| megaphone 1 (8880:3555) · 제목 묶음 (8880:3527) | Feedback 탭 머리 |
| Primary Button (8880:3482) · CTA (활성) (8880:5079) · 07 다음 버튼 (8880:5516) | 모든 주 버튼, 비활성은 CTA 비활성(8880:5444) |
| 방식1 · 저장된 오디션 영상에서 고르기 (8880:5016) · 방식2 · 새 영상 올리기 (8880:5023) | AI 입구 카드, 영상 고르는 방법 3개 |
| video-camera 1 (9042:3360) · plus (9009:9557) · chevron-right (8880:5022) | 방식 카드 아이콘 |
| 선택됨 · 댄스 연습 0806.mp4 (8880:5034) · thumb · duration · outline / check-circle | 연습 기록·오디션 영상 목록 |
| 하단 결제 바 (활성) (8880:5074) | 선택한 영상 + 무료·남은 횟수 |
| FB신청 C — 새 영상 올리기 (8880:5444) 업로드 칸·진행 막대 | 새 영상 올리기, 길이 초과 |
| image (8880:5477) · 변경 버튼 (8880:5478) | 분석할 영상 |
| Background+Border (8880:5485 / 8880:5487) | 분야·받고 싶은 피드백·도움 여부 칩 |
| 안내 · 본인 표시 요청 (9184:960) · icon/info | 모든 안내·오류 상자 |
| 결제 내용 확인 (8880:5505 / 8880:5508) · Vector 7679 | 이용 내용 확인 |
| 약관 동의 (8880:5489) · Checkbox Default/Filled | AI 분석·국외 이전 동의 |
| Frame 2147239193 점수 카드 (8880:3531) · Vector 6 | 결과 점수 6칸(3칸 줄 2개), 예시 |
| 피드백 요약 (8880:3544 / 8880:3766) · bi:person-fill | 결과 요약, AI 표시 |
| Paragraph+Background+Border (8880:3741) | 구간 코멘트, 다음 연습 제안 |
| 피드백 완료 딱지 (8880:3780) · 대기중 딱지 (9009:9541) | AI 분석 중 / 완료 / 불가 |
| Frame 2147240730 탭 (8880:3669) | 전체 / AI / 전문가 |
| Frame 2147241222 목록 카드 (9009:9539) | Feedback 탭 목록 |
| JUDGE FEEDBACK 카드 (9085:4143) · 블러 (9085:4181) · zoom 2·3·4 | 분석 동의 자세히, 보호자 동의, 횟수 소진, 오디션 상세 시트 |
| Bottom Nav (8880:3570) | 탭 화면 아래 |
| Frame 2147241224 트레이너 줄 (8880:3520) | Feedback 탭 처음 화면 |
글꼴: 시안의 Pretendard·Outfit. 시안 일부의 Inter·Noto Sans는 웹에서 Pretendard로 맞췄습니다.
기존 코칭 흐름과의 관계
- 지금 앱(lopi-app 코드 확인): Feedback 탭 = 유료 코치 피드백 하나.
screens/feedback-screen.tsx→CoachingApplyScreen(오디션 영상/새로 올리기) →CoachingRequestScreen(동의·인앱 결제) → 상태 대기중·작성중·완료(src/feedback/coaching-status.ts) →screens/coaching-detail-screen.tsx(재생 막대 위 코멘트, 점수 정확도·표현력·체력, 요약). AI 관련 코드는 없습니다. - 같은 틀을 씁니다: 영상 고르기·결과 화면은 코칭 화면 구조(
CoachingScoreDto등급,CoachingCommentDtostartTime·body, 요약)를 그대로 따릅니다. 앱에서는 결과 화면을 새로 만들기보다 코칭 상세 컴포넌트를 재사용하는 쪽이 짧습니다. - 다른 점: 결제 대신 무료 횟수, 코치 배정 대신 "AI 자동 분석 · 코치 확인 전" 표시, 표현력은 AI 점수에서 뺌, 연습 기록 영상도 고를 수 있음, 여러 명일 때 메모 대신 "영상 속 나 고르기".
- 이어지는 곳: 결과 → "전문가에게 이 영상 보내기"는 기존 신청 화면(8880:5467)으로 가고 영상·요청 메모(AI가 짚은 구간)를 미리 채웁니다. 무료 횟수 소진·분석 불가에서도 같은 길을 엽니다.
- 연습 기록(Task 49): 기록 한 건 아래 "AI 피드백" 칸. 받기 전에는 입구, 받은 뒤에는 점수 3칸 + 전체 보기. Task 49 데이터 모양의
PracticeLog한 건에 AI 결과가 붙는 구조입니다. - 대표 시안(Task 16, #0-friday-lopi-plan): 총점·6항목 육각형·박자 화면은 그 스레드에서 따로 진행 중입니다. 이 시안은 Figma 컴포넌트만 쓰라는 요청이라 육각형 대신 점수 카드 6칸으로 같은 6항목(박자·정확도·파워·동선·안정감·체력)을 담았습니다.
- 이름: 코드에서 "feedback"은 코치 흐름과 옛 심사 코멘트(
locales/*/feedback.json) 두 뜻으로 이미 쓰입니다. 개발 때는AiFeedback처럼 따로 이름을 붙이는 것이 좋습니다.
데이터 모양 제안
AiFeedbackRequest: id, userId, source (PRACTICE_LOG | AUDITION_VIDEO | UPLOAD), sourceId, field (DANCE | VOCAL), focus[], subjectBox(여러 명일 때 고른 사람), status (QUEUED | ANALYZING | COMPLETED | UNANALYZABLE | FAILED), failReason, consentVersion, createdAtAiFeedbackResult: scores[{key,label,value}] (코칭과 같은 모양), summary, comments[{startTime,body}], drills[], modelVersion, completedAt- 무료 횟수: COMPLETED만 차감. UNANALYZABLE·FAILED는 차감하지 않음. 상한은 서버가 막음.
정할 것
- 무료 횟수와 유료 여부: 시안은 "한 달 3회 무료"(예시). 다 쓴 뒤 추가 구매를 팔지, 전문가 피드백으로만 보낼지.
- 분석 업체·나라: 영상이 국외로 가는지, 가면 어느 나라·업체인지. 동의 문구와 처리방침이 여기에 달려 있습니다.
- AI 점수 항목: 댄스 6개(박자·정확도·파워·동선·안정감·체력), 보컬 6개(음정·박자·호흡·발음·성량·안정감)로 둘지. 등급(A~C)으로 둘지 100점으로 둘지(대표 Task 16은 100점).
- 영상 길이 상한: 시안은 AI 3분(코칭은 코드상 10분·500MB).
- 입구 우선순위: Feedback 탭 카드·연습 기록·오디션 상세 시트 세 곳을 모두 열지.
검토 메모 (법률 자문 아님)
vibe-lawyer R1·R2·R5·R6 기준으로 시안에 넣은 것과 남은 것입니다.
- 동의(R1): AI 영상 분석 동의를 결제·약관 동의와 따로, 기본 해제로 둠. 거부해도 전문가 피드백·오디션 지원은 그대로(이 흐름만 못 씀).
- 얼굴·목소리: 몸 동작·음정만 보고 얼굴로 사람을 알아내지 않는다고 적음. 얼굴·목소리로 특정 개인을 알아보는 처리를 하면 민감정보(생체인식정보) 별도 동의 대상이 될 수 있음 → 처리 방식 확정 뒤 확인 필요.
- 국외 이전(R6): 분석 서버가 해외면 받는 나라·업체·항목·기간을 동의 화면과 처리방침에 적고 별도 동의. 업체가 정해지지 않아 "[정할 것]"으로 둠. 수탁사 계약(목적 외 처리·학습 금지 포함)도 필요.
- 학습 사용 안 함: 동의 화면과 자세히 시트에 "AI 학습에 쓰지 않아요" 고지. 업체 약관에서 학습 제외 옵션을 켰는지 확인 필요.
- 미성년: 만 14세 미만은 보호자 동의 전까지 시작 불가. 가입 때 등록한 보호자 이메일(Task 49에서 확인한 기존 흐름)로 요청.
- 보관·파기(R5): 분석용 사본은 결과 직후 삭제, 결과는 사용자가 지울 때까지. 탈퇴 시 결과 삭제를 파기 표에 추가해야 함.
- 기록(R2): 동의 문구 버전·시각을 append-only로 남김(
consentVersion). - 일본 사용자: 화면 가격이 ¥라 일본 개인정보보호법(APPI)의 국외 제공 고지도 같이 봐야 할 수 있음 → 확인 필요.
레퍼런스 (Mobbin)
| 화면 | 가져온 점 |
|---|---|
| Runna · Workout Insights | AI 표시 + "도움이 됐나요" 평가를 결과 아래에 둠 |
| Google Health · Sleep | 요약 문장 먼저, 점수 카드 다음, 코치에게 묻기로 이어짐 |
| GoPro Quik · Analyzing | 분석 중에도 내 영상을 보여 줌 |
| Riveo · Preparing | 피할 점: "앱을 열어 두세요" 대신 "닫아도 알림" |
| Canva · Magic Media | 남은 횟수와 다시 생기는 날을 버튼 아래 한 줄로 |
검색어: "AI video analysis result screen with score and timestamped feedback comments", "AI analyzing uploaded video progress screen" (iOS).