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

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

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

02_01 · 메인 (홈)

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

📡 호출 엔드포인트
APIGET /member/persona — 내 캐릭터(캐릭터) 목록 조회
APIGET /member/info — 회원·멤버십 등급 조회(FREE면 새 캐릭터 → 가입 안내 팝업 분기)
API숨긴 캐릭터도 GET /member/persona 응답에 hidden: true 로 남는다(arwen_docs#1590)

메인 · default (빈 목록)

ORULI.ai 1 ☰2

Start by creating your ideal character 3

＋

Create new character 4

주석 · 메인 기본(빈 목록)
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.

메인 · 캐릭터 있을 때

ORULI.ai ☰

Start by creating
your ideal character

＋Create new character

⋮3

Character's name 1

주석 · 캐릭터 목록
1이동캐릭터 카드(character-card = FE CardCharacter: 이미지·이름·더보기). 카드 본체를 누르면 채팅 화면(04, 이 화면군 밖).
3이동더보기 점 세 개(icon-more-24) → 캐릭터 정보 모달.
·상태사용자가 만든 캐릭터 카드가 목록으로 쌓인다. 맨 위에는 새 캐릭터 만들기 카드가 그대로 남는다.

메인 · 숨긴 캐릭터 있을 때 (접힘)

ORULI.ai ☰

＋Create new character

⋮

Character's name A 1

Hidden characters (2) 2▾

주석 · 숨긴 캐릭터가 있는 목록(접힘)
1상태숨기지 않은 캐릭터 카드만 보인다. 숨긴 캐릭터는 평소에 보이지 않는다.
2이동목록 끝의 "Hidden characters (N)" 한 줄. 누르면 펼친다. 숨긴 캐릭터가 하나도 없으면 이 줄도 없다. 숨겨도 캐릭터 수 한도에서 빠지지 않아, 한도가 찬 이유를 알 자리와 해제할 자리를 이 줄로 남긴다.
·규칙보이는 캐릭터가 1개뿐이면 숨기기 자체가 막혀(D103) 보이는 캐릭터가 0개인 경우는 생기지 않는다. 서버는 숨긴 캐릭터도 hidden: true 로 내려주므로 FE 가 나눠 그린다.

메인 · 숨긴 캐릭터 구역 펼침

ORULI.ai ☰

＋Create new character

⋮

Character's name A 1

Hidden characters (2) 2▴

This character has been hidden! 3 ⋮4

Character's name B

This character has been hidden!

Character's name C

주석 · 숨긴 캐릭터 구역 펼침
2이동줄을 다시 누르면 접힌다. 접힘이 기본이다.
3요소이미지를 흐리게 하고 가운데에 "This character has been hidden!" 문구를 얹는다(글자 배지 대신 이 문구가 구분을 맡는다). 비활성화 카드(어두운 처리·자물쇠·멤버십 문구)와 헷갈리지 않도록 자물쇠와 멤버십 문구는 쓰지 않는다. 색·명도만으로 구분하지 않고 글자로 구분하므로 접근성 조건을 채운다([[운영규칙-접근성]]).
4이동더보기 ⋮ → 숨긴 캐릭터용 정보 모달(Unhide 포함). 카드 본체를 누르면 숨긴 캐릭터도 채팅으로 들어간다(서버가 입장을 막지 않는다).
·규칙비활성화(DEACTIVE)이면서 숨긴 캐릭터는 자물쇠 표시를 우선하고 숨김 표시를 작게 함께 보인다. 이 겹침 모습은 바로 아래 프레임(메인 · 숨긴 구역 · 비활성화와 겹칠 때)이 보여 준다.

메인 · 숨긴 구역 · 비활성화와 겹칠 때

ORULI.ai ☰

＋Create new character

⋮

Character's name A

Hidden characters (1)▴

Hidden1⋮

🔒
Subscribe to reactivate them! 2

Character's name B

주석 · 비활성화이면서 숨긴 카드 (arwen_docs#1649)
1요소숨김 표시는 더보기 ⋮ 왼쪽의 작은 "Hidden" 글자 표시 하나만 둔다. 큰 "This character has been hidden!" 문구는 쓰지 않는다. 색·명도만으로 구분하지 않고 글자로 구분한다([[운영규칙-접근성]]).
2요소자물쇠와 "Subscribe to reactivate them!" 를 우선해 가운데에 둔다. 이름은 비활성화 카드처럼 흐리게 한다.
·이동더보기 ⋮ 는 숨긴 캐릭터용 정보 모달로 이어진다. 줄을 누르면 접힌다.

메인 · 멤버십 가입 안내 팝업 (FREE)

ORULI.ai ☰

Start by creating
your ideal character

＋Create new character

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

02_02 · 캐릭터 정보

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

📡 호출 엔드포인트
APIDELETE /member/persona — 캐릭터 삭제(삭제 확인 팝업 Ok)
APIPATCH /member/persona/hidden {personaIdx, hidden:true} — 숨기기(숨김 확인 팝업 Ok 뒤 실행)
APIPATCH /member/persona/hidden {personaIdx, hidden:false} — 숨김 해제(확인 없이 즉시 실행, 뒤이어 해제 완료 안내). 같은 값을 여러 번 보내도 결과가 같다

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

ORULI.ai ☰

주석 · 캐릭터 정보 모달
1요소정보 모달(modal). 카드의 더보기로 진입해 화면 아래에서 솟는 시트(bottom sheet).
2요소캐릭터 이름.
3요소캐릭터 나이.
4요소"지금 나를 어떻게 생각하는지"(인상).
5이동Delete(button / CTA) → 삭제 확인 팝업.
6이동Close → 모달 닫고 메인 목록으로.
7이동1개뿐이면 → "Hide this character"(button / btn-text, 보이는 캐릭터에만) → 숨김 확인 팝업. 보이는 캐릭터가 1개뿐이면 확인 팝업 대신 차단 안내 팝업으로 막는다(D103). 숨긴 캐릭터의 모달에서는 이 자리에 "Unhide this character"가 나온다.

캐릭터 정보 · 삭제 확인 팝업

ORULI.ai ☰

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

캐릭터 정보 · 모달 (숨긴 캐릭터)

ORULI.ai ☰

주석 · 캐릭터 정보 모달(숨긴 캐릭터)
1요소숨긴 캐릭터의 정보 모달. 숨기지 않은 캐릭터의 모달과 같고, 아래 두 가지가 다르다.
2동작"Unhide this character"(텍스트 링크)는 숨긴 캐릭터에만 나타난다. 누르면 확인 없이 바로 해제하고 해제 완료 안내를 띄운다.
3이동Close → 모달 닫고 펼친 목록으로.

캐릭터 정보 · 숨김 확인 팝업

ORULI.ai ☰

1규칙숨기기 전 재확인 팝업(popup = FE PopupBasic). 정보 모달의 "Hide this character"를 누르면 뜬다.
2이동Close → 정보 모달로 되돌아감.
3동작Ok → PATCH /member/persona/hidden hidden:true 실행 → 숨김 완료 안내.

캐릭터 정보 · 숨김 완료 안내

ORULI.ai ☰

1규칙숨긴 캐릭터를 찾는 길을 알린다. 접힌 "Hidden characters (N)" 줄이 목록 맨 아래에 있다.
2이동Ok → 메인 목록으로. 숨긴 캐릭터는 보이는 목록에서 빠진다.

캐릭터 정보 · 마지막 캐릭터 차단 안내

ORULI.ai ☰

1규칙보이는 캐릭터가 1개뿐이면 확인 팝업 대신 이 안내로 막는다(D103). 토스트가 아니라 팝업이다.
2이동Ok → 정보 모달로 되돌아감. 숨기기는 실행되지 않는다.

캐릭터 정보 · 숨김 해제 완료 안내

ORULI.ai ☰

1규칙해제 전에 되묻지 않는다(되돌릴 수 있고 같은 값을 여러 번 보내도 결과가 같다). 정보 모달의 "Unhide this character"를 누르면 곧바로 해제하고 이 안내를 띄운다.
2동작Ok → 메인 목록으로. PATCH /member/persona/hidden hidden:false 실행 결과로 카드가 보이는 목록으로 옮겨 오고, 대화 목록에 다시 나타난다.

02_03 · 메뉴

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

📡 호출 엔드포인트
APIPOST /member/signOut — 로그아웃(→ 로그인 01)

메뉴 · 간편 로그인 설정됨

ORULI.ai 1 ✕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 버튼이 없다.

메뉴 · 간편 로그인 미설정

ORULI.ai 🔒 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)이 붙는다.

📡 호출 엔드포인트
APIGET /member/persona — 캐릭터 목록 조회(모바일과 동일)

메인 · web (웹 레이아웃)

ORULI.ai 1 ☰

Start by creating your ideal character

＋Create new character

⋮

Character's name

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

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