와이어프레임 / 35-화면설계 / wireframes / 화면-02 메인

화면 02 · 메인 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page 3:44(02. 메인) · 허브 노트: 화면-02-메인.md · FE: MainView.vue(/main)
4개 섹션 · 8개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

02_01 · 메인 (홈)

로그인 직후의 출발점. 사용자가 만든 페르소나(AI 캐릭터) 목록을 보여준다. 맨 위 카드로 새 캐릭터를 만든다. 무료(FREE) 등급이 더 만들려 하면 멤버십 안내 팝업이 겹친다.

메인 · default (빈 목록)
☰2

Start by creating your ideal character 3

＋
Create new character 4
5
  • 주석 · 메인 기본(빈 목록)
  • 1요소오루리 로고(logo). 라우트 /main. 로그인 토큰이 있으면 시작 경로가 /main으로 정해진다(근거: router/index.ts 19행).
  • 2이동우측 상단 햄버거(layout / header) → 전체 메뉴 열림.
  • 3요소빈 목록 안내 제목. 아직 캐릭터를 만들지 않은 신규 사용자 화면.
  • 4이동새 캐릭터 만들기 카드(box+icon-plus-24 = FE CardCreatePersona). 등급 확인 후 분기 — 유료(멤버십)면 캐릭터 설정(03, 이 화면군 밖), 무료(FREE)면 멤버십 가입 안내 팝업.
  • 5요소하단 탭 메뉴(layout / bottom_menu).
  • ·규칙FREE 등급이 캐릭터를 더 만들려 하면 멤버십 팝업으로 권유한다(근거: MainView.vue). 페르소나 개수 제한 기준이 화면·FE·백엔드 사이에서 어긋날 수 있다: [[리스크-persona-개수제한-불일치]] #needs-verification.
메인 · 캐릭터 있을 때
☰

Start by creating
your ideal character

＋Create new character
⋮3
Character's name 1
  • 주석 · 캐릭터 목록
  • 1이동캐릭터 카드(character-card = FE CardCharacter: 이미지·이름·더보기). 카드 본체를 누르면 채팅 화면(04, 이 화면군 밖).
  • 3이동더보기 점 세 개(icon-more-24) → 캐릭터 정보 모달.
  • ·상태사용자가 만든 캐릭터 카드가 목록으로 쌓인다. 맨 위에는 새 캐릭터 만들기 카드가 그대로 남는다.
메인 · 멤버십 가입 안내 팝업 (FREE)
☰

Start by creating
your ideal character

＋Create new character

멤버십에 가입하세요 1

멤버십에 가입하면 캐릭터 추가·사진 생성·영상 생성을 할 수 있어요.

Close 2
Get membership 3
  • 주석 · 멤버십 권유 팝업
  • 1규칙무료(FREE) 등급이 새 캐릭터를 만들려 할 때 뜨는 권유 팝업(popup = FE PopupBasic). 근거: [[멤버십]].
  • 2이동Close → 팝업 닫고 메인 목록으로.
  • 3이동Get membership → 멤버십·크레딧 화면(06, 이 화면군 밖).

02_02 · 캐릭터 정보

카드의 더보기를 누르면 바닥에서 솟는 정보 모달(bottom sheet)이 뜬다. 이름·나이·인상을 보여주고, 삭제는 확인 팝업으로 되묻는다.

캐릭터 정보 · 모달 (bottom sheet)
☰

캐릭터 정보 1

이름 · Character's name 2
나이 3
지금 나를 어떻게 생각하는지(인상) 4
Delete 5
Close 6
  • 주석 · 캐릭터 정보 모달
  • 1요소정보 모달(modal). 카드의 더보기로 진입해 화면 아래에서 솟는 시트(bottom sheet).
  • 2요소캐릭터 이름.
  • 3요소캐릭터 나이.
  • 4요소"지금 나를 어떻게 생각하는지"(인상).
  • 5이동Delete(button / CTA) → 삭제 확인 팝업.
  • 6이동Close → 모달 닫고 메인 목록으로.
캐릭터 정보 · 삭제 확인 팝업
☰

캐릭터 삭제 1

정말 이 캐릭터를 삭제하시겠어요?

Close 2
Ok 3
  • 1규칙삭제 전 재확인 팝업(popup = FE PopupBasic). 정보 모달에서 Delete를 누르면 겹쳐 뜬다.
  • 2이동Close → 정보 모달로 되돌아감.
  • 3동작Ok → 삭제 실행 후 메인 목록으로.

02_03 · 메뉴

우측 상단 햄버거로 여는 전체 메뉴. 간편 로그인(PIN) 설정 여부에 따라 상단에 "Set PIN" 버튼과 안내 말풍선이 달라진다.

메뉴 · 간편 로그인 설정됨
✕2
마이페이지 3
💖 My characters
대화
멤버십
크레딧
공지
자주 묻는 질문(FAQ)
문의
이용약관
로그아웃 4
  • 주석 · 메뉴(PIN 설정됨)
  • 1요소메뉴 상단 로고(logo).
  • 2이동닫기(icon-close-24) → 메뉴 닫고 메인으로.
  • 3이동메뉴 항목: 마이페이지·내 캐릭터·대화·멤버십·크레딧·공지·FAQ·문의·이용약관. 각 항목은 해당 화면군(마이페이지·설정 05, 멤버십·크레딧 06, 채팅 04 등)으로 이동 — 모두 이 화면군 밖.
  • 4이동로그아웃(button / btn-text) → 로그인 화면(01, 이 화면군 밖).
  • ·규칙간편 로그인(PIN)을 이미 켠 사용자가 보는 메뉴. 상단에 Set PIN 버튼이 없다.
메뉴 · 간편 로그인 미설정
🔒 Set PIN1 ✕
Enable quick sign-in for easier access. 2 ✕
마이페이지
💖 My characters
대화
멤버십
크레딧
공지 · FAQ · 문의 · 이용약관
로그아웃
  • 1요소Set PIN 버튼(icon-lock-24) — 간편 로그인을 아직 켜지 않은 사용자에게만 노출. 개인식별번호(PIN) 4자리 설정을 권유한다. 규칙이동 목적지(PIN 설정 화면)는 KB 노트에 명시가 없다 #needs-verification.
  • 2요소안내 말풍선(tooltip): "Enable quick sign-in for easier access." 우측 닫기(icon-close-14)로 말풍선만 닫는다.
  • ·상태메뉴 항목 구성은 PIN 설정 유저와 같다. 상단 Set PIN 버튼과 말풍선만 추가된다.

02_01_01 · 웹

같은 메인 화면을 넓은 웹 폭으로 펼친 시안. 휴대폰과 달리 하단 메뉴에 "Membership" 탭이 하나 더 들어가고, 웹 하단 정보 영역(footer)이 붙는다.

메인 · web (웹 레이아웃)
☰

Start by creating your ideal character

＋Create new character
⋮
Character's name
Membership 2
3
  • 주석 · 웹 레이아웃
  • 1요소웹 폭 상단 바(layout / header). 중앙에 좁은 컬럼으로 제목·새 캐릭터 카드·캐릭터 카드를 그대로 배치한다.
  • 2이동하단 메뉴에 모바일엔 없는 "Membership" 탭이 추가된다 → 멤버십·크레딧 화면(06, 이 화면군 밖).
  • 3요소웹 하단 정보 영역(layout / footer). 모바일 화면에는 없다.
  • ·상태레이아웃 시안. 상단 햄버거·새 캐릭터·더보기 이동은 모바일과 동일하게 동작한다.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·컴포넌트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-02-메인.md의 wireframe: 필드가 이 파일을 가리킨다.