인벤토리 화면을 처음 구성할 때는 슬롯을 정렬하는 것 자체가 크게 어렵지 않다. 문제는 아이템이 늘어나기 시작한 뒤다. 장비와 재료, 소모품이 쌓이고 정렬·필터·분해 같은 기능까지 추가되면 단순했던 슬롯 화면이 빠르게 복잡해진다.
나는 이런 화면을 작업할 때 슬롯 디자인부터 시작하기보다 플레이어가 아이템을 찾고 → 선택하고 → 확인하고 → 행동하는 과정을 먼저 보는 편이다. 인벤토리의 카테고리, 슬롯, 상세정보창은 각각 다른 UI처럼 보이지만 실제로는 이 하나의 탐색 과정 안에서 연결되어 있기 때문이다.
슬롯의 가장 중요한 역할은 아이템을 알아보게 하는 것이다
아이템 슬롯에는 여러 정보가 필요하지만 가장 기본적인 역할은 단순하다.
플레이어가 어떤 아이템인지 빠르게 알아볼 수 있어야 한다.
인벤토리를 열었을 때 플레이어는 슬롯 하나를 오랫동안 읽기보다 여러 슬롯을 빠르게 훑어보는 경우가 많다. 이때 아이콘보다 등급 테두리나 숫자, 상태 표시가 먼저 눈에 들어오면 정작 아이템을 구분하기 어려워질 수 있다.
그래서 슬롯을 설계할 때는 먼저 아이콘이 충분한 면적을 확보하고 있는지 확인할 필요가 있다.
예를 들어 같은 검 아이템이라도 실루엣이나 색상, 장식의 차이로 서로 구분되어야 한다. 슬롯의 부가 정보가 아이콘의 중요한 형태를 가리지 않는 것도 중요하다.
개인적으로는 슬롯 안에서 가장 먼저 읽혀야 하는 것은 아이템의 종류이고, 나머지 정보는 그 아이템의 상태를 보조해야 한다고 본다.
하나의 슬롯에 정보가 추가되는 과정
등급은 아이템을 가리지 않으면서 빠르게 구분되어야 한다
RPG에서는 아이템 등급을 색상으로 표현하는 경우가 많다.
일반, 고급, 희귀, 영웅, 전설처럼 등급에 따라 슬롯의 테두리나 배경색을 변경하면 많은 아이템 가운데 높은 등급의 아이템을 빠르게 찾을 수 있다.
하지만 등급 표현이 지나치게 강하면 문제가 생긴다.
화려한 테두리, 강한 발광 효과, 움직이는 파티클까지 사용하면 아이템보다 슬롯 프레임이 먼저 보일 수 있다. 여러 개의 고등급 아이템이 한 화면에 모이면 화면 전체가 지나치게 화려해질 수도 있다.
등급은 중요한 정보지만 아이템의 정체성을 대신하는 정보는 아니다.
따라서 등급 표현은 아이콘을 보조하면서도 여러 슬롯을 빠르게 비교할 수 있는 정도가 적절하다.
테두리, 슬롯 배경, 작은 등급 마크 등을 사용할 수 있고 게임의 아트 스타일에 따라 두 가지 이상의 신호를 함께 사용하는 방법도 있다.
특히 색상만으로 등급을 구분하면 환경이나 사용자에 따라 차이를 알아보기 어려울 수 있기 때문에 형태나 프레임 같은 다른 시각 신호를 함께 사용할 수도 있다.
수량은 모든 아이템에 필요한 정보가 아니다
재료나 소모품에서는 수량이 중요하다.
강화석이 3개 있는지 300개 있는지는 다음 행동을 결정하는 정보가 될 수 있기 때문이다.
반면 하나씩만 존재하는 장비에 1이라는 숫자를 항상 표시하는 것은 정보의 의미가 크지 않을 수 있다.
그래서 수량은 모든 슬롯에 일괄적으로 넣기보다 중첩 가능한 아이템에서 필요한 경우 표시하는 방식을 사용할 수 있다.
수량을 표시한다면 위치도 일정하게 유지하는 것이 좋다.
예를 들어 항상 슬롯 오른쪽 아래에 수량을 표시하면 플레이어는 여러 아이템을 볼 때 같은 위치만 확인할 수 있다.
반대로 어떤 슬롯은 오른쪽 위, 다른 슬롯은 아래쪽에 수량이 표시되면 작은 숫자를 찾기 위해 슬롯 전체를 확인해야 한다.
이 구조가 필요한 이유는 수량이 개별 아이템의 설명이 아니라 여러 슬롯을 반복해서 비교하는 정보이기 때문이다.
강화 단계는 숫자가 아니라 장비의 상태를 보여준다
장비에서는 수량보다 강화 단계가 중요할 수 있다.
+5, +10, +15 같은 표시는 현재 장비가 어느 정도 성장했는지를 빠르게 보여준다.
문제는 수량과 강화 수치가 모두 숫자로 표현된다는 점이다.
예를 들어 슬롯 한쪽에는 12, 다른 쪽에는 +12가 있다면 익숙하지 않은 플레이어에게는 각각 무엇을 의미하는지 순간적으로 판단해야 할 수 있다.
따라서 두 정보가 동시에 필요한 구조라면 위치와 표현 규칙을 명확하게 분리하는 것이 중요하다.
예를 들어
수량은 오른쪽 아래
강화 단계는 아이콘 아래 또는 왼쪽 위
강화 수치에는 + 기호 사용
처럼 일관된 규칙을 만들 수 있다.
나는 이런 작은 정보일수록 화면마다 위치를 바꾸기보다 게임 전체에서 같은 규칙을 유지하는 것이 중요하다고 보는 편이다.
플레이어가 규칙에 익숙해지면 숫자를 읽기 전에 위치만으로 정보의 의미를 예상할 수 있기 때문이다.
슬롯 안의 정보 위치 규칙
상태 정보는 항상 보일 필요가 없다
슬롯에는 아이템 자체의 정보 외에도 현재 상태를 나타내는 표시가 들어갈 수 있다.
대표적으로 다음과 같은 정보가 있다.
장착 중
잠금
신규 획득
선택 상태
사용 불가
즐겨찾기
이 정보들은 모두 필요할 수 있지만 성격은 다르다.
등급이나 강화 단계는 아이템 자체의 속성에 가깝지만, 선택됨이나 신규는 특정 상황에서만 필요한 상태 정보다.
따라서 모든 상태를 슬롯에 계속 남겨둘 필요는 없다.
예를 들어 NEW 표시는 플레이어가 아이템을 확인한 뒤 사라질 수 있고, 선택 효과는 해당 슬롯을 선택한 동안에만 나타난다. 사용 불가 상태 역시 현재 행동과 관련된 화면에서만 필요할 수 있다.
이처럼 항상 필요한 정보와 일시적으로 필요한 정보를 분리하면 슬롯의 기본 상태를 단순하게 유지할 수 있다.
같은 위치에 여러 정보가 경쟁하지 않게 해야 한다
슬롯의 공간은 제한되어 있기 때문에 새로운 상태 정보를 추가할 때 기존 정보와 충돌하기 쉽다.
오른쪽 위에 NEW를 넣었는데 이후 잠금 아이콘도 같은 위치에 필요할 수 있다. 오른쪽 아래에는 이미 수량이 있는데 장착 상태까지 숫자 근처에 추가될 수도 있다.
이때 각각의 기능만 보면 모두 작은 표시 하나에 불과하다.
하지만 라이브 서비스 과정에서 이런 표시가 하나씩 추가되면 슬롯에는 여러 개의 작은 배지가 붙기 시작한다.
그래서 슬롯을 처음 설계할 때부터 단순히 현재 필요한 정보만 배치하기보다 각 영역이 어떤 종류의 정보를 담당할지 규칙을 정해두는 방법이 유용하다.
예를 들어 상단은 상태, 하단은 수치 정보처럼 역할을 구분할 수 있다.
새로운 기능이 추가되었을 때도 먼저 어느 정보군에 속하는지 판단할 수 있기 때문이다.
선택 상태와 등급 표현은 서로 다른 의미를 가져야 한다
아이템 슬롯에서 자주 충돌하는 표현 중 하나가 등급과 선택 상태다.
등급을 테두리 색상으로 표현하고 있는데 선택 상태까지 밝은 테두리로 표현하면 두 정보가 시각적으로 비슷해질 수 있다.
예를 들어 전설 등급 아이템에 금색 테두리가 있고 선택된 아이템에 또 다른 밝은 테두리를 추가하면 프레임이 겹치거나 지나치게 강조될 수 있다.
이런 경우에는 표현 방식을 분리할 수 있다.
등급은 슬롯 내부의 배경이나 얇은 프레임으로 표현하고, 선택 상태는 외곽선이나 밝기 변화로 보여주는 방식이다.
또는 선택된 슬롯의 위치에 작은 커서나 마커를 추가할 수도 있다.
중요한 것은 플레이어가 무엇 때문에 강조되어 있는지 구분할 수 있어야 한다는 것이다.
정보의 중요도는 아이템 종류에 따라 달라진다
모든 아이템 슬롯에 같은 정보 규칙을 적용하기 어려운 이유도 있다.
아이템의 성격이 서로 다르기 때문이다.
장비에서는 등급과 강화 단계가 중요하지만, 재료에서는 수량이 더 중요할 수 있다. 소모품에서는 남은 개수와 사용 가능 여부가 중요하고, 퀘스트 아이템에서는 일반 아이템과 구분되는 성격 자체가 중요할 수 있다.
예를 들어 같은 슬롯 구조에서도 우선순위는 다음처럼 달라질 수 있다.
아이템 유형에 따른 정보 배치
장비 아이콘 → 등급 → 강화 → 장착 상태
재료 아이콘 → 수량 → 등급 또는 종류
소모품 아이콘 → 수량 → 사용 가능 상태
중요 아이템 아이콘 → 중요도 표시 → 상태
따라서 모든 슬롯을 완전히 동일하게 만드는 것보다 기본적인 위치 규칙은 유지하면서 아이템 유형에 따라 필요한 정보만 사용하는 방식이 더 적합할 수 있다.
슬롯 하나보다 여러 슬롯이 모였을 때 확인해야 한다
아이템 슬롯을 크게 확대해서 작업하면 각각의 요소가 잘 보인다.
하지만 실제 인벤토리에서는 슬롯이 여러 개 반복된다.
그래서 작업하면서 슬롯을 디자인할 때 나는 확대된 상태만 확인하기보다 실제 화면 크기로 줄여 여러 개를 반복 배치해보는 편이다.
이 상태에서 확인하면 개별 슬롯에서는 괜찮았던 요소가 예상보다 강하게 보이는 경우가 있다.
등급 테두리가 화면 전체를 뒤덮거나, NEW 표시가 지나치게 많이 반복되거나, 강화 숫자가 아이콘보다 먼저 보이는 식이다.
반대로 너무 작게 만든 정보는 실제 화면에서는 거의 읽히지 않을 수도 있다.
슬롯 디자인은 결국 하나의 컴포넌트를 만드는 작업이지만 평가는 인벤토리 전체 화면에서 해야 한다.
슬롯에 넣지 않은 정보는 상세정보창에서 보여줄 수 있다
슬롯의 정보를 줄인다고 해서 아이템 정보를 삭제해야 하는 것은 아니다.
인벤토리 슬롯의 역할은 모든 정보를 설명하는 것이 아니라 플레이어가 원하는 아이템을 찾고 구분할 수 있게 하는 것이다.
아이템의 세부 옵션, 획득처, 세트 효과, 상세 설명처럼 판단할 때 필요한 정보는 슬롯을 선택한 뒤 상세정보창에서 보여줄 수 있다.
이전 글에서 다룬 인벤토리 구조처럼
카테고리 → 슬롯 탐색 → 아이템 선택 → 상세정보 확인
으로 정보의 깊이를 나누면 작은 슬롯 하나에 모든 내용을 압축할 필요가 없다.
이 구조를 사용하면 슬롯에서는 빠른 탐색에 필요한 정보에 집중하고, 상세정보창에서는 하나의 아이템을 자세히 판단할 수 있다.
좋은 아이템 슬롯은 정보가 많은 슬롯이 아니다
아이템 슬롯에 무엇을 넣을지 결정할 때는 정보를 얼마나 많이 표시할 수 있는지를 먼저 볼 필요가 없다.
아이콘은 아이템을 구분하게 하고, 등급은 가치를 빠르게 판단하게 한다. 수량은 보유 상태를 보여주고, 강화 단계는 장비의 성장 상태를 알려준다. 장착이나 잠금 같은 표시는 필요한 순간에 현재 상태를 전달한다.
각 정보에는 서로 다른 역할이 있다.
따라서 중요한 것은 모든 정보를 동시에 강조하는 것이 아니라 플레이어가 슬롯을 보는 순간 어떤 판단을 해야 하는지에 따라 정보의 우선순위를 정하는 것이다.
결국 인벤토리 슬롯은 작은 공간에 많은 정보를 집어넣는 UI가 아니라, 필요한 정보를 가장 짧은 시간 안에 구분할 수 있도록 압축하는 UI라고 볼 수 있다.
