10_"BrainBox Delivery" 모바일 게임 기획 및 UI/UX 취업준비 여정

### **10강: 인벤토리 바 UI 설계**

**인벤토리 바 UI 설계의 중요성**

게임 "BrainBox Delivery"에서 인벤토리 바는 플레이어가 현재 보유하고 있는 아이템을 관리하고, 필요한 정보를 즉각적으로 확인할 수 있는 중요한 인터페이스 요소입니다. 인벤토리 바의 UI는 사용자가 게임 내에서 쉽게 접근하고 이해할 수 있어야 하며, 직관적인 디자인을 통해 게임의 흐름을 방해하지 않고 자연스럽게 아이템을 사용할 수 있도록 설계되어야 합니다. 이번 강의에서는 [Figma](https://www.figma.com/)를 활용하여 이러한 요구를 충족하는 인벤토리 바 UI를 설계했습니다.

**Figma를 활용한 인벤토리 바 설계 과정**

1. **기초 디자인 설정**
   - **기본 레이아웃 구상**: 먼저, 인벤토리 바의 기본 레이아웃을 구상했습니다. 인벤토리 바는 화면의 상단 또는 하단에 배치하여 사용자가 게임을 플레이하면서 쉽게 접근할 수 있도록 설계했습니다. 이는 플레이어가 아이템을 확인하고, 필요한 경우 빠르게 사용할 수 있도록 돕기 위한 중요한 요소입니다.
   - **아이템 슬롯 디자인**: 인벤토리 바는 여러 개의 아이템 슬롯으로 구성됩니다. 각 슬롯은 사용자가 픽업한 아이템을 표시하며, 슬롯의 크기와 간격을 조정하여 다양한 크기의 아이템이 명확하게 표시되도록 했습니다. Figma에서 기본 슬롯의 크기와 위치를 설정한 후, 이를 복제하여 전체 인벤토리 바를 구성했습니다.

2. **아이템 아이콘 디자인**
   - **아이템 시각화**: 각 슬롯에 표시될 아이템 아이콘을 디자인했습니다. 아이템 아이콘은 각 아이템의 특성을 명확하게 나타내며, 사용자가 쉽게 구분할 수 있도록 시각적으로 직관적인 디자인을 채택했습니다. 예를 들어, 상자는 간단한 사각형 아이콘으로, 특수 아이템은 고유의 색상과 모양으로 표시했습니다.
   - **상태 표시**: 아이템 아이콘에는 해당 아이템의 상태를 나타내는 시각적 요소를 추가했습니다. 예를 들어, 사용 가능 상태의 아이템은 밝은 색상으로, 사용 불가능한 상태의 아이템은 흐린 색상 또는 잠금 아이콘을 추가하여 표시했습니다. 이를 통해 사용자는 현재 아이템의 상태를 한눈에 파악할 수 있습니다.

3. **인터랙션 디자인**
   - **아이템 사용 인터랙션**: 사용자가 아이템을 클릭하거나 터치했을 때의 인터랙션을 설계했습니다. 아이템을 선택하면, 아이템이 강조되어 표시되고, 화면에 사용 가능 상태임을 나타내는 시각적 피드백이 제공됩니다. 이를 통해 사용자가 아이템을 사용하려는 의도를 명확히 전달할 수 있습니다.
   - **아이템 드래그 앤 드롭**: 인벤토리 바의 중요한 기능 중 하나로, 아이템을 드래그하여 특정 위치로 이동시키는 기능을 구현했습니다. 사용자가 아이템을 드래그하면, 아이템이 인벤토리 바에서 떨어져 나와 다른 슬롯으로 이동하거나, 게임 화면의 특정 위치로 드롭됩니다. 이 과정에서 부드러운 애니메이션을 추가하여 자연스러운 상호작용을 유도했습니다.

4. **사용자 경험(UX) 고려**
   - **직관적 배치**: 인벤토리 바의 각 요소가 사용자가 직관적으로 이해할 수 있도록 배치했습니다. 예를 들어, 가장 중요한 아이템이 항상 왼쪽 상단에 위치하도록 하고, 사용 빈도가 낮은 아이템은 오른쪽 또는 하단에 배치하여 사용자가 필요한 아이템을 쉽게 찾을 수 있도록 했습니다.
   - **시각적 피드백**: 사용자가 아이템을 선택하거나 사용할 때, 즉각적인 시각적 피드백을 제공하여 사용자 경험을 개선했습니다. 예를 들어, 아이템을 사용하면 해당 슬롯이 일시적으로 비워지고, 새로운 아이템이 자동으로 채워지는 애니메이션을 추가했습니다. 이러한 피드백은 사용자가 아이템을 제대로 사용했는지 명확히 인식할 수 있게 돕습니다.

5. **테스트 및 피드백 반영**
   - **프로토타입 테스트**: Figma의 프로토타이핑 기능을 활용하여 인벤토리 바 UI의 작동 방식을 시뮬레이션했습니다. 이를 통해 사용자가 인벤토리 바를 사용하는 과정에서 발생할 수 있는 불편함이나 오류를 미리 확인하고 개선할 수 있었습니다.
   - **사용자 피드백 반영**: 초기 사용자 테스트를 통해 수집된 피드백을 바탕으로 UI를 개선했습니다. 예를 들어, 사용자가 특정 아이템을 쉽게 찾지 못하는 경우, 해당 아이템의 위치를 조정하거나 시각적 강조를 추가했습니다. 또한, 아이템 사용 과정에서 발생할 수 있는 혼동을 줄이기 위해, 사용 불가능한 아이템에 더 뚜렷한 잠금 표시를 추가했습니다.

**결과물 및 향후 계획**

이 과정을 통해 "BrainBox Delivery"의 인벤토리 바 UI는 직관적이고 사용자 친화적인 디자인으로 완성되었습니다. 사용자는 인벤토리 바를 통해 게임 내 아이템을 쉽게 관리하고, 필요할 때 빠르게 사용할 수 있습니다. 직관적인 아이템 배치와 시각적 피드백 덕분에, 게임의 흐름을 방해하지 않으면서도 사용자가 필요한 정보를 즉시 확인할 수 있습니다.

앞으로는 이 인벤토리 바 UI를 게임의 다른 UI 요소와 통합하고, 다양한 게임 상황에서 테스트를 통해 더욱 세밀한 조정을 진행할 계획입니다. 특히, 고난이도 레벨이나 복잡한 게임 상황에서 인벤토리 바가 얼마나 효과적으로 작동하는지를 평가하고, 필요에 따라 추가적인 기능이나 개선을 진행할 것입니다. 이와 함께, 플레이어의 피드백을 지속적으로 반영하여, 게임의 사용자 경험을 지속적으로 개선해 나갈 예정입니다.