와이어프레임 / 35-화면설계 / wireframes / 화면-04-04 채팅룸 앨범

화면 04-04 · 채팅룸 앨범 (인라인 미디어 갤러리) — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · 클릭 가능(prototype)
출처: arwen_docs#413(기획 확정) · #431(디자인) · 허브 노트: 인라인-미디어-생성.md · 명세: 화면설계-04-04-앨범.md
범위: 인라인 미디어(#368) 생성물의 갤러리·열람·관리. 표시는 저해상 미리보기, 과금 포인트는 "크게보기(원본)".
기기: 모바일 375×812 · 확장웹 1077px 2단(좌 420 + 우 596, 1025px 이상). 확장웹 골격 정본 = 결정-확장웹-레이아웃-골격(D37).

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

0404_01 · 진입 · 앨범 목록

진입 2경로: ① 채팅 입력창 왼쪽 앨범 아이콘 ② 인라인 크게보기(화면-04-03 S4)의 앨범 이동 버튼. 목록은 이미지/영상 탭 + 등록순(최신 상단) 그리드.

A0 · 진입 (채팅 입력창 아이콘)
‹Character

자, 봐봐 :)

1
텍스트 입력
  • 주석 · 진입
  • 1요소채팅 입력창 왼쪽 앨범 아이콘(아이콘만, 텍스트 없음). 이동탭→앨범 메인(A1).
  • ·이동두 번째 진입 경로 = 인라인 크게보기(화면-04-03 S4)의 앨범 이동 버튼.
A1 · 앨범 메인 (탭·그리드)
‹앨범
1 이미지 영상
2
3◆12
4▶
◆12
  • 주석 · 앨범 메인
  • 1요소미디어 종류 탭: 이미지 · 영상 2탭. 규칙기본 진입 탭 = 이미지. [전체] 탭은 두지 않는다(#1020) — ①3탭이던 때 [전체]에서 영상이 보이지 않았고 ②두 목록을 합쳐 주는 서버 경로가 없으며(/albums/media ↔ /albums/media/videos, 식별자·테이블이 다르다) ③탭 안에서만 넘기면 크게보기 이동(A3)이 단순해진다. 근본 원인은 #957 계열이 다룬다.
  • 2규칙그리드 정렬=등록순, 최신 상단. 동작썸네일 탭→소유분은 크게보기(A3) 바로 / 미차감분은 차감 확인(A2).
  • 3요소미차감 미리보기=저해상 + 크레딧 오버레이(◆N). 아직 원본 미열람 표시.
  • 4요소영상 항목=재생 배지(▶). 규칙즐겨찾기 없음(베타 제외).
  • ·규칙재진입 채팅 히스토리와 같은 규칙으로 표시한다 — OWNED=원본·배지 없음 / PREVIEW=블러+비용 배지(◆N). 히스토리 버블은 화면-04-03-인라인미디어.html S9a·S9b. 근거: D36(#519) · #435(배지 시각 패턴 통일).
  • ·데이터상태 정본=PersonaAlbum.view_status. 차감은 미디어당 1회이고, 앨범·히스토리 어느 쪽에서 결제해도 양쪽이 함께 OWNED로 바뀐다(같은 personaAlbumIdx).
A1e · 빈 앨범
‹앨범

1아직 받은 미디어가 없어요

  • 주석 · 빈 상태
  • 1상태생성물이 하나도 없을 때. 대화에서 미디어를 받으면 채워진다.

0404_02 · 열람 · 과금

미차감 미리보기는 차감 확인 후 원본 열람. 소유분(무료 소비분·결제분)은 팝업 없이 바로. 크게보기에서만 다운로드 노출.

A2 · 미리보기 차감 확인
‹앨범

1원본으로 크게 볼까요?

2이 이미지는 유료 원본이에요.

N 크레딧이 차감됩니다.

3보유 크레딧 N
취소보기
  • 주석 · 차감 확인
  • 1규칙미차감 미리보기(◆N) 탭 시 차감 확인 팝업. 확인 시 원본 조회(A3). 소유분은 팝업 없이 바로.
  • 2요소유료 사유 한 줄 — "이 이미지는 생성 시점에 유료로 정해졌다"는 사실을 알린다. 날짜와 무관하게 언제나 참이라 어긋나지 않는다. 실제 문안은 담당자·디자인이 확정한다.
  • 3요소강조 영역(어두운 회색 박스) — 팝업 맨 아래 한 줄. 이 자리에 보유 크레딧을 올린다. 규칙강조 영역은 설명 문구가 담지 않은 값을 담는다. 이 팝업은 설명이 차감 크레딧을 말하므로 강조가 보유 크레딧을 맡는다. 같은 숫자를 팝업 안에서 두 번 보여주지 않는다. 정본은 [[화면설계-04-03-인라인미디어]] 「차감 확인 팝업의 강조 영역 표기 규칙」(#967) — 호출 지점 5곳 대조표와 Figma 노드 대조표가 그 절에 있다. 확정 디자인은 영상 갈래 4650-2885 · 이미지 갈래 4650-2979이며 둘 다 「N credits available」로 그린다. 데이터차감=PAY 연계([[크레딧]]). 단가는 이미지 언락 1 크레딧이다([[결정-크레딧-차감단가표]] D43).
  • ·규칙이 강조 박스는 #967로 새로 그려 넣은 요소다. 그 전까지 이 프레임은 팝업 안 문구를 줄로만 그려 어느 값이 강조로 올라가는지 드러나지 않았다. 대화 화면의 같은 팝업(화면-04-03-인라인미디어.html S5)은 반대로 차감(필요) 크레딧을 강조에 둔다 — 어긋난 것이 아니라 같은 규칙을 각자의 설명 문구에 맞춰 적용한 결과다.
  • ·규칙설명 문구는 #976이, 강조 영역은 #967이 정한다. #976이 설명에 유료 사유 한 줄을 확정했으나 그 설명이 담는 값은 여전히 차감 크레딧이라 강조 영역의 짝은 그대로다.
  • ·규칙오늘 무료 열람 소진 현황(M/M)은 넣지 않는다(#920) — 대화 화면의 차감 팝업(화면-04-03-인라인미디어.html S5)과 일부러 다르게 둔 자리다. 앨범은 날짜가 섞인 누적 목록이라 조회 시점의 오늘 숫자가 그 이미지의 유·무료와 어긋난다. 게다가 그 숫자는 열람 횟수가 아니라 오늘 만들기 시작한 건수다(만드는 중인 것도 센다, #918 확정). 자세한 근거는 화면설계-04-04-앨범.md 「차감 확인 팝업(A2)에 무료 열람 잔여를 넣지 않는다」.
A3 · 크게보기 (원본·다운로드)
‹원본 보기
1
3‹ 2다운로드 ›
  • 주석 · 크게보기
  • 1요소원본(고해상). 이미지=정지, 영상=재생 컨트롤. 인라인 크게보기(화면-04-03 S4)와 보여 주는 내용이 같다 — 다만 아래 이전·다음 이동은 이 화면에만 있다(그쪽은 대화 흐름 안이라 넘길 목록이 없다).
  • 2요소하단 다운로드 — 개별 크게보기에서만 노출(목록 일괄 다운로드 없음). 규칙넘긴 뒤 내려받으면 지금 보고 있는 항목을 받는다. 이동‹ 뒤로→앨범 목록(A1).
  • 3요소이전(‹) · 다음(›) 이동(#1020) — 뷰어를 닫지 않고 넘겨본다. 규칙이동 범위는 현재 탭의 목록 순서이고 탭을 건너뛰지 않는다. 정렬은 목록과 같다(등록순·최신 상단). 규칙[영상] 탭에서는 차감이 끼어들지 않는다 — 영상은 선불이라 전 항목이 OWNED다(D45). 규칙[이미지] 탭에서 넘어간 항목이 PREVIEW면 차감 없이 원본이 열리지 않는다 — 서버가 미차감 항목에 원본 주소를 내리지 않는다(SqsImageResultListener.kt:358~361 「과금 우회 금지」, 2026-08-07 origin/dev 실측).
  • ·상태여기 그린 자리·모양은 확정이 아니다 #needs-verification — 좌우 화살표를 하단 바에 둘지 미디어 위에 겹칠지, 스와이프(손가락으로 밀기)까지 받을지는 ④디자인에서 굳는다. 이 뼈대는 이동이 있다는 것과 그 범위만 보인다.
  • ·상태목록 처음·끝에서 멈출지 순환할지는 아직 정하지 않았다 #needs-verification — 선례가 KB·디자인 시스템·와이어프레임 어디에도 없다(2026-08-07 전수 검색). 발제자 확인 뒤 후속 이슈가 정한다. 자세한 것은 화면설계-04-04-앨범.md 「이 명세가 정하지 않는 것」.
  • ·상태넘어간 항목이 미차감일 때의 화면 모양도 미정 #needs-verification — 뷰어 위에 팝업을 띄울지, 뷰어를 닫고 A2로 돌아갈지다. 차감을 반드시 거친다는 것까지만 정했다.

0404_03 · 확장웹(넓은 화면) 레이아웃

1025px 이상에서 확장웹이 켜진다. 앨범은 좌측 420px 컬럼 안에 3열 그대로 들어가고, 우측 596px 캐릭터 패널이 유지된다. 전폭으로 넓히지 않는다. 근거: 결정-확장웹-레이아웃-골격(D37, A-1·B-1·C·F-1) · #540.

E1 · 확장웹 앨범 그리드 (A1) — 좌측 컬럼 3열
‹앨범1
2 이미지 영상
3
◆1
◆1
4
캐릭터 패널 · 하단 dim
  • 주석 · 확장웹 앨범 그리드 (D37 B-1·C)
  • 1요소헤더 1077×56 — 좌우 컬럼 위를 가로지른다.
  • 2요소이미지 · 영상 2탭이 좌측 컬럼 폭 안에서 둘로 균등 분할한다. 모바일과 같다. 기본 진입 탭도 이미지로 같다(#1020).
  • 3규칙그리드 3열 유지 — 컬럼 폭이 420px로 모바일과 같아 열 수를 바꿀 근거가 없다. 데이터ChatAlbumGrid.vue:84에 화면폭 분기(@media)가 없다. 썸네일 한 변 124px.
  • 4규칙앨범을 보는 동안에도 우측 캐릭터가 계속 보인다. 앨범 진입 시 캐릭터가 사라지면 화면이 크게 흔들려 몰입이 끊기기 때문이다(B-2·B-3 기각 사유).
  • ·규칙"확장웹 앨범 2열 선례"는 없다 — Figma 확장웹 4프레임의 우측은 넷 다 캐릭터 단일 이미지이고 그리드가 아니다. 3열은 모바일 현행을 승계한 결과다.
  • ·규칙확인 필요 — ChatAlbumView.vue:373에 폭 상한이 없다(채팅 화면의 width:min(100%,420px)에 해당하는 규칙이 없다). 앨범이 420px 상한을 실제로 따르는지는 브라우저 실측이 필요하다.
E2 · 확장웹 크게보기 (A3) — 풀페이지 유지
‹원본 보기
1
‹ 2다운로드 ›
3
캐릭터 패널 · 하단 dim
  • 주석 · 확장웹 크게보기 (D37 F-1)
  • 1규칙앨범 크게보기는 인라인 풀페이지를 유지한다 — 바텀시트로 바꾸지 않는다. 데이터ChatAlbumView.vue:3 주석 "A3: 크게보기 (풀페이지 인라인 뷰어)".
  • 2요소다운로드와 이전(‹) · 다음(›) 이동이 하단 바에 함께 놓인다. 모바일과 같다. 규칙이동 컨트롤도 좌측 컬럼 안에서만 그려진다 — 우측 캐릭터를 침범하지 않는다(#1020).
  • 3규칙풀페이지 전환은 좌측 컬럼 안에서만 일어난다. 우측 캐릭터는 그대로다.
  • ·규칙인라인 미디어 크게보기는 바텀시트로 남는다(화면-04-03 E2). 두 화면의 패턴 차이를 유지한다(F-2·F-3 기각) — 진입 맥락이 달라서다. 앨범은 이미 목록 화면이라 풀페이지 전환이 자연스럽다.
  • ·규칙차감 확인 팝업(A2)도 좌측 카드 영역 안에 뜬다 — ChatAlbumView.vue:79가 layout-type="expand"를 넘긴다(PopupBasic.vue:177-187).

전체 3섹션 5상태 + 확장웹 골격 2프레임. 5상태: A0 진입 · A1 앨범 메인(이미지 · 영상 2탭) · A1e 빈 상태 · A2 차감 확인 · A3 크게보기(이전 · 다음 이동 포함). 확장웹 2프레임(E1 앨범 그리드 · E2 크게보기 풀페이지)은 새 상태가 아니라 골격 배치다 — 좌측 컬럼이 420px로 모바일과 같아 5상태가 그대로 유효하다. #1020은 상태 개수를 바꾸지 않았다 — [전체] 탭을 없앤 것은 A1 안의 요소 변화이고, 이전·다음 이동은 A3 안에서 도는 전이라 둘 다 새 상태를 만들지 않는다. 인라인 생성 흐름·재진입 히스토리 복원(S9a·S9b)은 화면-04-03-인라인미디어.html. 열람 상태(OWNED/PREVIEW) 표시 규칙은 앨범과 히스토리가 동일하다. 근거: #413 기획 확정 · 인라인-미디어-생성.md · #519(D36) · #537(명세 반영) · #540(D37 확장웹 골격) · #1020(2탭 · 크게보기 이동).