RPG 인벤토리 UI 설계의 핵심: 카테고리·아이템 슬롯·상세정보창의 연결 구조

RPG의 인벤토리는 플레이어가 가장 자주 사용하는 메뉴 중 하나다. 전투에서 획득한 장비와 재료를 확인하고, 필요한 아이템을 찾거나 장비를 교체하는 과정이 반복되기 때문이다. 게임이 진행될수록 보유 아이템의 종류와 개수도 계속 증가한다.

그래서 인벤토리 UI에서는 많은 아이템을 보여주는 것보다 원하는 아이템을 얼마나 빠르게 찾고, 선택한 뒤 다음 행동까지 자연스럽게 이어갈 수 있는지가 중요하다. 이번 글에서는 카테고리, 아이템 슬롯, 상세정보창이 어떤 관계로 연결되어야 하는지 RPG 인벤토리의 기본 구조를 중심으로 정리해본다.

인벤토리는 아이템을 보관하는 화면만은 아니다

인벤토리를 단순하게 보면 여러 개의 아이템 슬롯이 나열된 화면이다.

하지만 실제 플레이 과정에서 인벤토리를 사용하는 목적은 훨씬 다양하다.

플레이어는 새로운 장비를 확인할 수도 있고, 특정 재료가 얼마나 남았는지 찾을 수도 있다. 장비를 비교하거나 소모품을 사용하고, 필요 없는 아이템을 판매하거나 분해하기 위해 들어오기도 한다.

즉 인벤토리에서는 보통 다음과 같은 흐름이 반복된다.

찾기 → 확인하기 → 판단하기 → 행동하기

여기서 카테고리는 원하는 아이템을 찾는 역할, 슬롯은 여러 아이템을 빠르게 구분하는 역할, 상세정보창은 선택한 아이템을 판단하고 행동하는 역할을 담당한다.

이 세 영역을 각각 따로 설계하기보다 하나의 탐색 흐름으로 연결해서 볼 필요가 있다.

아이템이 많아질수록 카테고리의 역할이 중요해진다

보유 아이템이 적은 게임이라면 하나의 목록만으로도 충분할 수 있다.

하지만 RPG에서는 장비, 소모품, 제작 재료, 퀘스트 아이템 등 성격이 다른 아이템이 하나의 인벤토리에 쌓이는 경우가 많다.

이때 모든 아이템을 같은 목록에 배치하면 플레이어는 원하는 아이템을 찾기 위해 많은 슬롯을 훑어봐야 한다.

그래서 카테고리는 단순히 아이템 종류를 구분하는 탭이 아니라 탐색해야 하는 범위를 줄여주는 장치라고 볼 수 있다.

예를 들어 다음과 같이 나눌 수 있다.

  • 전체
  • 장비
  • 소모품
  • 재료
  • 퀘스트·중요 아이템

게임에 따라 무기와 방어구를 다시 나누거나 제작 재료를 더 세분화할 수도 있다.

다만 카테고리가 많다고 탐색이 항상 쉬워지는 것은 아니다.

분류가 지나치게 세분화되면 플레이어가 원하는 아이템이 어느 카테고리에 속하는지 먼저 생각해야 한다. 반대로 너무 크게 묶으면 한 카테고리 안의 아이템 수가 많아져 분류의 의미가 약해진다.

개인적으로는 개발 시스템의 구분보다 플레이어가 아이템을 어떤 목적으로 찾는지를 기준으로 카테고리를 나누는 것이 중요하다고 본다.

인벤토리의 기본 탐색 구조

인벤토리의 기본 탐색 구조

아이템 슬롯은 작은 공간 안에서 무엇을 보여줘야 할까?

인벤토리에서 가장 많은 면적을 차지하는 것은 아이템 슬롯이다.

하나의 슬롯에는 아이콘뿐 아니라 여러 정보가 함께 들어갈 수 있다.

아이템 등급, 수량, 강화 단계, 장착 여부, 잠금 상태, 신규 획득 표시 등이 대표적이다.

문제는 이 정보를 모두 강조하면 슬롯 하나가 작은 상세정보창처럼 변한다는 것이다.

특히 모바일에서는 슬롯의 크기가 작기 때문에 작은 숫자와 아이콘이 겹치면서 오히려 어떤 아이템인지 알아보기 어려워질 수 있다.

그래서 슬롯에서는 먼저 아이템을 구분하고 현재 상태를 빠르게 인식하는 데 필요한 정보를 남겨야 한다.

예를 들어 재료 아이템이라면 수량이 중요할 수 있고, 장비라면 등급이나 강화 단계가 더 중요할 수 있다.

같은 인벤토리 안에서도 아이템의 성격에 따라 슬롯에서 강조해야 하는 정보가 달라질 수 있는 것이다.

슬롯 안에 어떤 정보를 보여줄 것인지는 다음 글에서 별도로 더 자세히 다룰 예정이다.

슬롯의 모양보다 먼저 스캔 속도를 생각해야 한다

인벤토리에서는 플레이어가 하나의 아이템만 보는 것이 아니다.

수십 개의 슬롯을 빠르게 훑으면서 원하는 아이템을 찾는다.

따라서 개별 슬롯을 예쁘게 만드는 것만큼 여러 슬롯이 모였을 때 얼마나 빠르게 구분되는지가 중요하다.

아이콘의 크기가 슬롯마다 달라 보이거나, 등급 프레임의 장식이 지나치게 강하거나, 상태 표시가 여러 위치에 흩어져 있으면 시선이 계속 끊길 수 있다.

나는 슬롯을 설계할 때 개별 아이템보다 그리드 전체를 축소해서 보는 편이다.

작게 봤을 때도 아이콘의 덩어리가 구분되는지, 등급 표현이 아이콘보다 먼저 튀어나오지 않는지, 수량과 강화 정보의 위치가 일정한지를 확인하기 위해서다.

이 구조가 필요한 이유는 인벤토리가 개별 아이템을 감상하는 화면이기 전에 많은 아이템을 반복해서 탐색하는 화면이기 때문이다.

선택된 아이템은 다른 슬롯과 명확하게 구분되어야 한다

플레이어가 슬롯을 선택하면 인벤토리의 중심은 전체 목록에서 하나의 아이템으로 이동한다.

이때 현재 어떤 아이템이 선택되어 있는지 명확하지 않으면 오른쪽 상세정보가 어떤 슬롯에 대한 내용인지 연결하기 어려워진다.

선택 상태는 테두리, 배경, 밝기 또는 작은 강조 효과 등으로 표현할 수 있다.

중요한 것은 선택 효과 자체를 화려하게 만드는 것이 아니라 슬롯과 상세정보창의 관계를 즉시 이해할 수 있을 정도로 차이를 만드는 것이다.

특히 장비 등급에 이미 강한 색상 테두리를 사용하고 있다면 선택 상태까지 또 다른 색상 테두리로 표현했을 때 두 의미가 충돌할 수 있다.

이런 경우 선택 상태를 외곽선의 두께나 배경 밝기, 슬롯 위치 변화 등 다른 시각 신호로 분리하는 방법을 고려할 수 있다.

상세정보창은 아이템 설명보다 판단을 도와야 한다

아이템을 선택한 다음에는 상세정보창으로 시선이 이동한다.

여기에는 일반적으로 아이템 이름, 등급, 능력치, 설명, 사용 조건 등의 정보가 들어간다.

하지만 상세정보창의 역할을 단순히 아이템 정보를 많이 보여주는 공간으로 보면 화면이 쉽게 복잡해진다.

장비를 선택했다면 플레이어는 현재 장비보다 좋은지 판단하고 싶을 수 있다. 소모품이라면 어떤 효과가 있고 지금 사용할 수 있는지가 중요하다. 재료라면 어디에 사용되는지 확인하고 싶을 수 있다.

따라서 상세정보의 구조도 아이템 종류에 따라 달라질 수 있다.

예를 들어 장비라면

이름·등급 → 핵심 능력치 → 특수 옵션 → 장착 조건 → 행동 버튼

순서로 정보를 구성할 수 있다.

반면 소모품이라면

이름·보유 수량 → 사용 효과 → 사용 조건 → 사용 버튼

처럼 훨씬 단순한 구조가 적합할 수 있다.

다만 이것을 모든 RPG에 동일하게 적용할 수는 없다. 아이템 시스템의 깊이와 실제 플레이에서 필요한 판단에 따라 상세정보의 구조 역시 달라져야 한다.

아이템 선택과 상세정보의 연결

아이템 선택과 상세정보의 연결

상세정보가 길어질수록 우선순위를 다시 나눠야 한다

RPG 장비 시스템이 복잡해지면 상세정보창 역시 길어지기 쉽다.

기본 능력치에 추가 옵션, 세트 효과, 강화 효과, 획득처, 장착 제한까지 들어가면 작은 패널 안에 상당한 양의 정보가 쌓인다.

이때 모든 정보를 같은 크기와 간격으로 보여주면 플레이어는 처음부터 끝까지 읽어야 한다.

그래서 상세정보 안에서도 다시 정보 위계를 만들 필요가 있다.

현재 판단에 직접 필요한 능력치는 위쪽에 두고, 부가 설명이나 획득처처럼 즉시 필요하지 않은 정보는 아래쪽에 배치하거나 별도로 펼쳐볼 수 있게 만드는 방법이 있다.

결국 인벤토리 안에서도 정보 위계는 한 번만 적용되는 것이 아니다.

인벤토리 전체에서는 카테고리와 슬롯, 상세정보 사이에 위계가 존재하고, 하나의 슬롯 안에서도 아이콘과 상태 정보 사이에 위계가 존재한다. 상세정보창 안에서도 주요 능력치와 부가 정보의 우선순위를 다시 정해야 한다.

정렬과 필터는 카테고리를 보완하는 기능이다

아이템이 많아지면 카테고리만으로 원하는 아이템을 찾기 어려워질 수 있다.

예를 들어 장비 카테고리 안에도 수십 개의 아이템이 있다면 등급, 장착 부위, 획득 순서, 전투력 등을 기준으로 다시 탐색해야 할 수 있다.

이때 정렬과 필터가 필요해진다.

둘은 비슷해 보이지만 역할은 다르다.

정렬은 현재 보이는 아이템의 순서를 바꾼다.

필터는 현재 목적에 필요하지 않은 아이템을 목록에서 제외한다.

예를 들어 등급 높은 순은 정렬이고, 검만 보기는 필터에 가깝다.

기능을 추가할 때 이 차이를 구분하지 않으면 하나의 버튼 안에 너무 많은 조건이 들어가거나 비슷한 기능이 여러 위치에 생길 수 있다.

특히 모바일에서는 정렬과 필터 자체가 인벤토리 공간을 많이 차지하지 않도록 하면서도, 현재 어떤 조건이 적용되어 있는지는 알아볼 수 있어야 한다.

인벤토리의 빈 공간을 아이템으로 모두 채울 필요는 없다

아이템을 많이 보여주기 위해 슬롯의 크기를 계속 줄이는 경우가 있다.

한 화면에 더 많은 슬롯을 보여줄 수 있다는 장점은 있지만 아이콘을 구분하기 어려워지고 터치 영역도 작아진다.

반대로 슬롯을 너무 크게 만들면 몇 개의 아이템만 보여서 스크롤이 지나치게 많아질 수 있다.

그래서 인벤토리에서는 단순히 한 화면에 몇 개의 슬롯을 넣을 것인지보다 탐색 속도와 조작 가능성을 함께 봐야 한다.

특히 모바일에서는 슬롯 사이의 간격도 단순한 시각적 여백이 아니다. 서로 다른 아이템을 잘못 선택하지 않도록 터치 영역을 구분하는 역할도 한다.

화면에 공간이 남는다고 슬롯을 확대하고, 공간이 부족하다고 슬롯을 무조건 축소하는 방식보다 기준 슬롯 크기와 간격을 먼저 정한 뒤 화면 크기에 따라 열의 개수나 주변 영역을 조절하는 방법이 더 안정적일 수 있다.

같은 인벤토리, 다른 정보 밀도

img8 03

아이템을 선택한 다음 무엇을 할 수 있는지도 함께 설계해야 한다

인벤토리에서 아이템을 찾고 정보를 확인했다면 다음에는 행동이 이어진다.

장비라면 장착, 소모품이라면 사용, 필요 없는 아이템이라면 판매나 분해가 될 수 있다.

따라서 행동 버튼은 상세정보와 별개의 기능이라기보다 탐색 과정의 마지막 단계로 볼 수 있다.

카테고리 선택 → 아이템 탐색 → 슬롯 선택 → 정보 확인 → 행동

이 흐름에서 마지막 행동이 멀리 떨어져 있거나, 어떤 행동이 가능한지 다시 찾아야 한다면 앞의 탐색 구조가 잘 되어 있어도 사용 흐름이 끊길 수 있다.

작업하면서 인벤토리처럼 기능이 많은 화면을 정리해야 했던 경우에는 나는 각각의 UI 요소를 먼저 배치하기보다 플레이어가 어떤 순서로 시선을 이동하고 버튼을 누르게 될지를 먼저 확인하는 편이다.

UI 요소 하나하나보다 그 사이의 연결이 실제 사용성을 결정하는 경우가 많기 때문이다.

좋은 인벤토리는 많은 아이템을 보여주는 화면이 아니다

인벤토리는 게임이 진행될수록 복잡해질 가능성이 높은 UI다.

아이템 종류가 늘어나고 새로운 장비 시스템이 추가되면 카테고리와 필터, 상태 정보도 함께 늘어날 수 있다.

이때 필요한 것은 모든 정보를 한 화면에 압축하는 것이 아니다.

먼저 카테고리를 통해 탐색 범위를 줄이고, 슬롯에서는 아이템을 빠르게 구분할 수 있게 한다. 하나를 선택한 뒤에는 상세정보를 통해 필요한 판단을 할 수 있어야 하고, 그 결과가 장착이나 사용 같은 다음 행동으로 자연스럽게 이어져야 한다.

결국 RPG 인벤토리 UI의 핵심은 카테고리·아이템 슬롯·상세정보창을 각각 잘 만드는 것보다 세 영역이 하나의 탐색 흐름으로 연결되도록 설계하는 데 있다.

플레이어가 아이템을 많이 가지고 있더라도 원하는 것을 빠르게 찾고, 확인하고, 행동할 수 있다면 인벤토리의 정보량이 많아져도 실제 사용 경험은 복잡하지 않을 수 있다.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

댓글 남기기

광고 차단 알림

광고 클릭 제한을 초과하여 광고가 차단되었습니다.

단시간에 반복적인 광고 클릭은 시스템에 의해 감지되며, IP가 수집되어 사이트 관리자가 확인 가능합니다.