화면 구성
본 문서는 텍스투라의 주요 화면 구성을 정의한다. 모든 화면은 세로 9:16 고정 (1080 × 1920).
각 화면의 와이어프레임은 비주얼 — 와이어프레임에서 도식으로 확인한다.
핵심 원칙
섹션 제목: “핵심 원칙”| 원칙 | 의미 |
|---|---|
| 세로 9:16 고정 | 모든 화면 1080 × 1920 기준. 모바일 가독성 최우선. |
| 가독성 우선 | UI에서 가독성이 장식보다 우선. 버튼 안 텍스트가 잘리거나 묻히면 안 됨. |
| 톤 일관성 | 모든 화면이 같은 톤 가이드라인을 공유 (톤 정책 참조). |
4개 주요 화면
섹션 제목: “4개 주요 화면”| 화면 | 역할 | 비중 |
|---|---|---|
| RunMap | 분기 맵에서 다음 Cell 선택 | 진행 척추 |
| Stage (전투) | 매치-3 보드 전투 | 게임 플레이의 80% 이상 |
| Shop | Gold로 아이템 구매 | 자원 확장 |
| GameOver / 결과 | 전투 실패 또는 보스 클리어 결과 | Run의 마지막 무대 |
4-1. RunMap 화면
섹션 제목: “4-1. RunMap 화면”Slay the Spire 스타일의 분기 맵. 플레이어가 다음에 갈 Cell을 선택하는 화면.
화면 구성
섹션 제목: “화면 구성”| 영역 | 위치 | 내용 |
|---|---|---|
| 상단 HUD | 화면 상단 | Gold · 진행도 (예: 3/10층) |
| 맵 | 중앙 대형 영역 | RunMap 본체 (분기 노드 + 경로). 아래 → 위 스크롤 |
| 하단 | 화면 하단 | 안내 영역 |
표시 정보
섹션 제목: “표시 정보”- 현재 보유 Gold.
- 맵 전체 진행도 (몇 층 / 전체 층).
- Cell 4종 (Stage / Shop / Elite / Boss).
- Cell 상태 4종 (Available / Completed / Locked / Skipped).
- Cell 간 경로(Route).
아래에서 위로 스크롤. 현재 선택 가능한 Cell은 화면 하단부에 위치하도록 카메라가 따라옴.
상세는 RunMap 시스템 참조.
4-2. Stage(전투) 화면
섹션 제목: “4-2. Stage(전투) 화면”실제 전투가 일어나는 매치-3 보드 화면. 게임 플레이의 80% 이상이 여기서 일어남.
화면 위에서부터의 구성
섹션 제목: “화면 위에서부터의 구성”- 적 등장 공간 + 목표/턴/Damage Bar — 화면 위쪽의 넓은 영역. 적이 시각적으로 존재감 있게 보여야 하며, 그 위/주변에 목표 데미지·남은 턴·현재 데미지 바가 함께 표시됨.
- 연금술 작업대 — 보드 바로 위. Element/Compound 배율과 장착된 Instrument가 표시됨. 플레이어가 매칭으로 만든 자원이 여기서 증폭되어 위쪽 적으로 날아간다는 흐름.
- 매치-3 보드 — 드래그로 조각 매칭.
- Catalyst 슬롯 — 화면 맨 아래. 능동적으로 사용 가능한 소비도구.
핵심 시각 흐름
섹션 제목: “핵심 시각 흐름”표시 정보
섹션 제목: “표시 정보”- 적의 모습과 상태.
- 목표 데미지 / 현재 누적 데미지 (Damage Bar).
- 남은 턴 수 (Turn).
- 연쇄 반응 횟수 (Chain Reaction).
- 장착된 Instrument 슬롯 (작업대).
- Element / Compound 배율 (작업대).
- 보유 중인 Catalyst (하단).
보드 가독성이 최우선. 작업대와 적 영역은 차분히 있다가, 매칭/연쇄 순간에 강하게 반응해야 함 (작업대 빛남 → 적이 맞는 연출).
상세는 전투 시스템 참조.
4-3. Shop 화면
섹션 제목: “4-3. Shop 화면”Shop Cell 진입 시 열리는 상점. 다양한 카테고리의 아이템을 Gold로 구매.
진열 컨셉
섹션 제목: “진열 컨셉”상점은 단순한 카드 나열이 아니라 **“연금술사의 상인이 진열대를 펼쳐놓은 공간”**의 분위기를 지향한다. 판매 아이템의 타입에 따라 진열 방식이 다르며, 플레이어가 선택한 아이템의 상세 정보는 화면 하단 설명 영역에 표시된다.
화면 구성
섹션 제목: “화면 구성”| 영역 | 위치 | 내용 |
|---|---|---|
| 상단 | 상단 | Gold · 상인 캐릭터 · 닫기 |
| 대형 진열대 | 상단~중단 | Instrument · RecipeBook 같은 큰 슬롯 (자주 사용·중요) |
| 소형 진열대 | 중단~하단 | Catalyst · Relic 같은 작은 슬롯 (가벼운 소비형·패시브) |
| 설명 영역 | 하단 | 선택한 아이템의 상세 정보 패널 |
| 하단 액션 | 맨 아래 | 리롤 (가격 표시) · 나가기 (RunMap 복귀) |
표시 정보
섹션 제목: “표시 정보”- 현재 보유 Gold.
- 판매 아이템 카드 (아이콘, 이름, 설명, 가격).
- 아이템 카테고리 구분 (배지 또는 슬롯 상단 띠).
- 구매 불가 (Gold 부족) / 판매 완료 (Sold Out) 상태.
- 리롤(목록 갱신) 버튼.
- 계속하기(RunMap 복귀) 버튼.
4-4. GameOver / 결과 화면
섹션 제목: “4-4. GameOver / 결과 화면”전투 실패 또는 보스 클리어 시 표시되는 결과 화면. 현재 보스 클리어 후 보상 흐름은 미확정.
화면 구성
섹션 제목: “화면 구성”| 영역 | 내용 |
|---|---|
| 결과 타이틀 | 승리 / 패배 타이틀 프레임 |
| 결과 일러스트 | 무드 이미지 (승리/패배) |
| 기록 영역 | 도달 층 / 처치 수 / Gold / 사용한 Catalyst 등 |
| 하단 액션 | 다시 시작 (Primary) · 메인으로 (Secondary) |
무게감 요구
섹션 제목: “무게감 요구”“이번 Run의 마지막 무대”의 역할. 충분한 무게감이 필요. Run이 종료되면 모든 Run 자산이 사라지기 때문 (영속성 시스템 참조).
화면별 자산 / 와이어프레임
섹션 제목: “화면별 자산 / 와이어프레임”- 각 화면의 자산 요구는 비주얼 — 에셋 요구에 정리.
- 각 화면의 와이어프레임은 비주얼 — 와이어프레임에 도식 형태로 정리.
- 원본 HTML 와이어프레임(SVG/div 좌표 기반)은
/textura/design_brief.html에 보존.
열린 질문
섹션 제목: “열린 질문”- 보스 클리어 후의 정확한 결과 화면 흐름 (보상 표현, 다음 Run으로의 연결).
- Relic 보유 목록의 정확한 UI 위치 (현재 미확정 — 디자이너 제안 환영).
- 일시정지 / 메뉴 버튼의 표준 위치.
- 미니맵 또는 진행 미리보기 등 추가 UI 도입 여부.