상점 화면 기획

본 문서는 텍스투라 상점 화면을 디자이너가 작업하기 위한 화면 기획서다.

개발 구현 규칙보다 무엇을 그려야 하는지, 어떤 구조로 보여야 하는지를 우선한다.

기준 목업

아래 이미지를 기준 목업으로 사용한다.

화면 콘셉트

상점은 9:16 세로 모바일 화면이다.

기본 콘셉트는 상인이 테이블 위에 상품을 올려두고 파는 상점이다. 전체 톤은 기존 인게임 화면처럼 밝고 장난감 같은 색감, 선명한 테두리, 큼직한 슬롯 감각을 유지한다.

중요한 점:

카드형 UI보다 인게임 물건과 슬롯이 놓인 화면처럼 보이게 한다.
테이블 위 물건처럼 보이는 연출은 특별 유물 1개에만 사용한다.
나머지 상품은 큰 카드가 아니라 아이템 이미지 + 가격 중심의 배치다.
보유 장비/유물 영역은 인게임 슬롯 감각과 맞춘다.

화면 구조

상점 화면은 위에서 아래로 다음 순서다.

영역	내용
상단 상인 영역	상인 얼굴/반신, 말풍선, 테이블, 특별 유물
현재 보유 장비/유물	보유 장비 겹침 슬롯, 보유 유물 축소 리스트, 보유 Gold
구매 목록	장비 / 레시피 / 소비 3줄
선택 상품 영역	선택 이미지, 이름, 설명, 구매/팔기/다음판 가기 버튼

상단 상인 영역

상인은 1명 고정이다.

상인 영역에는 다음이 필요하다.

요소	설명
상인 일러스트	얼굴 또는 반신. 상점 배경과 자연스럽게 붙어야 함
말풍선	상인 대사 표시
테이블	특별 유물이 올라오는 공간
특별 유물	등장할 때만 테이블 위에 물건처럼 배치

상인 대사

일반 대사는 2~3개 중 랜덤으로 사용한다.

특별 유물이 등장한 경우에는 특별 대사를 사용한다.

특별 유물이 없는 경우에는 일반 대사만 사용하고, 테이블은 비어 있어도 된다.

특별 유물

특별 유물은 없을 때가 더 많다.

등장할 때는 항상 1개만 뜬다.

표현 방식:

테이블 위에 유물 오브젝트 1개가 놓인다.
유물 이름/설명 카드가 크게 붙지 않는다.
가격은 유물 옆 또는 아래에 짧게 표시한다.
선택하면 하단 선택 상품 영역에서 자세한 설명을 보여준다.

현재 보유 장비/유물

이 영역은 플레이어가 현재 Run 빌드를 보고 구매 판단을 하는 곳이다.

보유 장비

보유 장비는 인게임 슬롯 감각을 유지한다.

장비가 많을 수 있으므로, 슬롯을 나열하기보다 겹쳐서 쌓인 형태로 보여준다. 최대 7개 정도까지 겹쳐 보이는 것을 기준으로 잡는다.

이 겹침 처리 자체는 개발 쪽에서 조정하므로, 디자이너는 겹쳐도 읽히는 슬롯 형태와 테두리 감각을 잡으면 된다.

보유 유물

보유 유물은 장비 슬롯 아래에 작은 이미지 리스트로 보여준다.

유물이 많아지는 경우에는 개발 쪽에서 축소/정렬 처리한다.

Gold

보유 Gold는 상단 상인 영역이 아니라 현재 보유 장비/유물 영역에 어울리도록 배치한다.

별도 큰 HUD처럼 튀지 않고, 현재 상태 정보의 일부처럼 보이게 한다.

구매 목록

구매 목록은 3줄 고정이다.

줄	기본 상품 수	표시 방식
장비	3개	아이템 이미지 + 가격
레시피	2개	아이템 이미지 + 가격
소비	1개	아이템 이미지 + 가격

상품 개수는 이후 늘어날 수 있다.

배치는 빈칸을 채우지 않고 가운데 정렬한다.

품절 상태는 별도 우선 작업 대상이 아니다. 구매 불가는 가격표 색상으로 처리한다.

선택 상태

상품을 선택하면 다음처럼 보인다.

선택된 아이템은 테두리를 강조한다.
선택된 아이템은 살짝 커진다.
구매 목록 상품과 보유 아이템 모두 같은 선택 표시를 사용한다.

하단 선택 상품 영역

하단 영역에는 현재 선택한 상품의 정보를 보여준다.

구성:

요소	설명
선택 이미지	선택한 상품 이미지를 다시 크게 보여줌
이름	1줄
설명	최대 2줄. 설명이 곧 효과 설명 역할
버튼	구매 / 팔기 / 다음판 가기

버튼

하단 버튼은 3개 고정이다.

버튼	역할
구매	상점 상품 구매
팔기	보유 장비 또는 소비 아이템 판매
다음판 가기	상점 종료 후 다음 노드로 이동

팔기는 장비와 소비 아이템에만 적용한다.

유물은 판매 불가다.

아무것도 구매하지 않고 다음판 가기를 누르면 확인 팝업을 띄운다.

팝업 문구:

아무것도 안 사고 떠나시겠습니까?

필요한 에셋

상점 배경

에셋	비고
상점 배경	기존 인게임 톤과 맞는 밝은 상점 배경
상점 테이블	특별 유물이 놓이는 테이블
상인 일러스트	고정 상인 1명
말풍선 UI	상인 대사용

상품/슬롯

에셋	비고
특별 유물 오브젝트	테이블 위 물건처럼 보이는 유물
장비 슬롯	인게임 8각 슬롯 감각 유지
유물 축소 아이콘	보유 유물 리스트용
상품 이미지 슬롯	구매 목록용
가격표 UI	일반 / 구매 불가 상태

하단 UI

에셋	비고
선택 상품 패널	이미지 + 이름 + 설명
구매 버튼	활성 상태
팔기 버튼	활성/비활성 상태
다음판 가기 버튼	항상 활성
확인 팝업	아무것도 안 사고 떠날 때

스타일 주의

상점 화면도 기존 인게임과 같은 톤으로 간다.
너무 어둡고 고급스러운 상점 UI로 가지 않는다.
현대적인 카드 리스트처럼 보이지 않게 한다.
특별 유물만 테이블 위 물건처럼 보인다.
장비/레시피/소비는 기능적인 구매 줄이다.
텍스트보다 이미지와 가격이 먼저 읽혀야 한다.