와이어프레임
본 문서는 4개 주요 화면의 와이어프레임을 정리한다. 모든 화면은 세로 9:16 고정.
RunMap
섹션 제목: “RunMap”┌─────────────────────────────────┐│ 상단 HUD (Gold · 진행도) │ ← 화면 상단├─────────────────────────────────┤│ ││ (B) 보스 │ ← 가운데 정렬│ / \ ││ (E) 엘리트 ││ / \ ││ (S) Stage ($) Shop ││ \ / ││ (S) Stage ││ | ││ ▲ 현재 위치 (Available)│ ← 아래에서 위로 스크롤│ │├─────────────────────────────────┤│ 하단 안내 영역 │└─────────────────────────────────┘- 분기 노드 (Cell) + 경로 (Route).
- 아래(현재 위치)에서 위(보스)로 진행.
- 현재 선택 가능한 Cell은 화면 하단부에 위치하도록 카메라가 따라옴.
Stage (전투)
섹션 제목: “Stage (전투)”┌─────────────────────────────────┐│ 목표 데미지 남은 턴 ││ ││ 👹 적 등장 공간 │ ← 위쪽 넓은 영역│ (캐릭터 + 배경) ││ ││ ▓▓▓▓▓▓▓▓░░░░░ Damage Bar │├─────────────────────────────────┤│ ⚗️ 연금술 작업대 ││ Element ×N | Compound ×N ││ [Inst1] [Inst2] [Inst3] │├─────────────────────────────────┤│ ┌───┬───┬───┬───┬───┬───┐ ││ │ 🟦 │ 🟥 │ 🟩 │ 🟨 │ 🟪 │ 🟧 │ ││ ├───┼───┼───┼───┼───┼───┤ ││ │ 🟦 │ 🟩 │ 🟦 │ 🟥 │ 🟩 │ 🟪 │ │ ← 매치-3 보드│ ├───┼───┼───┼───┼───┼───┤ ││ │ ... 드래그 매칭 ... │ ││ └───┴───┴───┴───┴───┴───┘ │├─────────────────────────────────┤│ Catalyst 슬롯: [C1] [C2] [C3] │└─────────────────────────────────┘시각 흐름: 보드 → 작업대 → 적 (아래에서 위로 일관된 방향성).
Shop
섹션 제목: “Shop”┌─────────────────────────────────┐│ 💰 Gold ✕ │├─────────────────────────────────┤│ ││ 🧙 상인 캐릭터 + 배경 │ ← 상단 상인 영역│ │├─────────────────────────────────┤│ ─── 진열대 (Instrument · RecipeBook) ─── ││ ┌──────┐ ┌──────┐ ┌──────┐ ││ │ 대형 │ │ 대형 │ │ 대형 │ │ ← 대형 진열대│ │ 슬롯 │ │ 슬롯 │ │ 슬롯 │ ││ └──────┘ └──────┘ └──────┘ ││ ─── 진열대 (Catalyst · Relic) ─── ││ ┌──┐ ┌──┐ ┌──┐ ┌──┐ ┌──┐ │ ← 소형 진열대│ │소│ │소│ │소│ │소│ │소│ ││ └──┘ └──┘ └──┘ └──┘ └──┘ │├─────────────────────────────────┤│ 선택 아이템 설명 영역 ││ (이름 · 설명 · 효과) │├─────────────────────────────────┤│ [🔄 리롤] [나가기] │└─────────────────────────────────┘설계 의도: 같은 크기 카드 3개 일렬 배치를 피하고, 진열대를 두 단으로 나눠 “상점 진열대를 둘러보는” 감각 유도.
GameOver / 결과
섹션 제목: “GameOver / 결과”┌─────────────────────────────────┐│ ││ 🏆 결과 타이틀 (승리/패배) ││ │├─────────────────────────────────┤│ ││ 결과 일러스트 / 무드 이미지 ││ │├─────────────────────────────────┤│ 📍 기록 1 — 도달 층 N/10 ││ ⚔️ 기록 2 — 처치한 적 N마리 ││ 💰 기록 3 — 획득 Gold N ││ 🧴 기록 4 — 사용한 Catalyst N │├─────────────────────────────────┤│ [다시 시작] [메인으로] │└─────────────────────────────────┘무게감: “이번 Run의 마지막 무대”. Run 자산이 모두 사라지는 시점이므로 충분한 무게감 필요.
디자이너 메모
섹션 제목: “디자이너 메모”- 위 도식은 단순화된 ASCII 표현. 원본 HTML 와이어프레임에는 영역 좌표·크기 비율이 더 정확히 들어가 있다 (
/textura/design_brief.html참조). - 화면별 자산 리스트는 에셋 요구 참조.
- 톤·통일성 가드레일은 톤 정책 참조.