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

### **11강: 맵 및 경로 UI 설계**

**맵 및 경로 UI 설계의 중요성**

게임 "BrainBox Delivery"에서 맵과 경로 UI는 게임의 핵심 동작인 이동과 배달을 시각적으로 명확하게 표현하는 중요한 요소입니다. 맵과 경로 UI는 사용자가 게임 내에서 목적지를 파악하고, 배달할 경로를 계획하며, 게임의 흐름을 직관적으로 이해할 수 있도록 돕습니다. 이번 강의에서는 맵과 경로 UI를 설계하는 과정에서, 이러한 요소들이 어떻게 사용자에게 명확하게 전달될 수 있을지를 중점적으로 고민했습니다.

**맵 및 경로 UI 설계 과정**

1. **기본 레이아웃 설계**
   - **맵의 전체 구조 설정**: 게임의 맵은 사용자가 배달해야 할 목적지와 경로를 명확하게 보여주어야 합니다. 맵의 기본 레이아웃은 여러 목적지를 포함하며, 사용자가 한눈에 전체 맵을 파악할 수 있도록 설계했습니다. Figma를 사용해 기본 맵의 형태를 설정하고, 목적지와 경로가 균형 있게 배치되도록 조정했습니다.
   - **경로 시각화**: 맵 내의 경로는 사용자가 이동할 수 있는 길을 명확히 표시하기 위해 선명한 색상과 굵기의 라인으로 디자인했습니다. 경로는 사용자가 쉽게 따라갈 수 있도록 부드럽고 직관적인 곡선으로 표현했으며, 경로 위에 아이콘이나 표시를 추가하여 중간에 특정 지점을 나타내도록 했습니다.

2. **목적지와 경로의 명확한 표현**
   - **목적지 아이콘 디자인**: 각 목적지는 맵 상에서 쉽게 구분될 수 있도록 고유한 아이콘과 색상으로 표시했습니다. 예를 들어, 일반적인 집이나 상점은 단순한 아이콘으로, 특별한 목적지는 더 복잡한 디자인을 사용해 시각적으로 눈에 띄도록 했습니다.
   - **경로와 목적지의 상호작용**: 사용자가 경로를 선택하고 목적지로 이동하는 과정을 직관적으로 표현하기 위해, 경로를 선택하면 해당 경로가 강조되어 표시되고, 목적지 아이콘도 함께 활성화되는 효과를 추가했습니다. 이러한 시각적 피드백은 사용자가 올바른 경로를 선택했음을 확인하는 데 도움이 됩니다.

3. **맵 상의 UI 요소 배치**
   - **줌 및 이동 기능**: 맵이 큰 경우, 사용자가 쉽게 전체 맵을 확인하고 특정 부분을 확대할 수 있도록 줌 기능을 추가했습니다. 또한, 맵을 드래그하여 이동할 수 있는 기능을 통해 사용자가 필요한 부분을 쉽게 탐색할 수 있도록 했습니다.
   - **미니맵 추가**: 전체 맵이 큰 경우, 메인 화면의 한쪽에 미니맵을 추가하여 사용자가 전체적인 위치를 항상 파악할 수 있도록 했습니다. 미니맵에는 현재 위치와 주요 목적지만 간략하게 표시하여, 사용자가 빠르게 참조할 수 있도록 설계했습니다.

4. **경로의 상태 표시**
   - **현재 경로 강조**: 사용자가 현재 진행 중인 경로를 시각적으로 강조하여, 경로 위에서의 위치와 방향을 쉽게 파악할 수 있도록 했습니다. 경로 강조는 밝은 색상이나 애니메이션 효과를 통해 사용자가 현재 어디에 있는지를 명확히 알 수 있게 도와줍니다.
   - **경로 상태 표시**: 특정 경로가 사용 가능한지, 또는 특정 조건을 충족해야만 사용할 수 있는지를 나타내는 상태 표시를 추가했습니다. 예를 들어, 잠겨 있는 경로는 회색으로 표시하고, 특정 아이템을 획득하면 경로가 활성화되는 효과를 적용했습니다.

5. **사용자 경험(UX) 최적화**
   - **직관적 경로 선택**: 사용자가 경로를 선택할 때 직관적으로 선택할 수 있도록, 선택 가능한 경로는 항상 명확하게 표시되도록 설계했습니다. 또한, 사용자가 잘못된 경로를 선택하는 것을 방지하기 위해, 잘못된 선택에 대한 경고 메시지와 함께 다른 경로로 유도하는 피드백을 제공했습니다.
   - **애니메이션 효과**: 맵과 경로 UI에 애니메이션을 추가하여 사용자가 경로를 선택하고 이동하는 과정이 자연스럽게 느껴지도록 했습니다. 경로를 따라 이동할 때 캐릭터나 아이콘이 부드럽게 이동하는 애니메이션을 추가하여, 사용자의 몰입감을 높였습니다.

6. **테스트 및 피드백 반영**
   - **사용자 테스트 진행**: 초기 디자인을 바탕으로 프로토타입을 제작하고, 사용자 테스트를 진행했습니다. 사용자가 맵을 탐색하고 경로를 선택하는 과정에서 발생하는 불편함이나 혼동을 사전에 파악하기 위해 여러 테스트를 실시했습니다.
   - **피드백 반영 및 수정**: 테스트 결과를 바탕으로, 사용자가 맵 상에서 목적지와 경로를 더 명확하게 인식할 수 있도록 개선 작업을 진행했습니다. 예를 들어, 특정 경로가 다른 UI 요소에 의해 가려지는 문제를 해결하기 위해 UI 레이아웃을 조정했습니다. 또한, 사용자가 경로를 잘못 선택하는 경우를 줄이기 위해, 더 강한 시각적 피드백을 추가했습니다.

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

맵 및 경로 UI 설계를 통해 "BrainBox Delivery"의 사용자 인터페이스는 직관적이고 명확하게 표현되었습니다. 사용자는 게임 내에서 목적지를 쉽게 파악하고, 올바른 경로를 선택하여 배달을 완료할 수 있으며, 이 과정에서 게임의 핵심 동작인 이동과 배달을 자연스럽게 이해할 수 있습니다. 맵과 경로 UI의 시각적 피드백과 사용자 경험 최적화 덕분에, 게임의 진행이 매끄럽고 몰입감 있게 느껴지도록 설계되었습니다.

향후 계획으로는 이 설계를 바탕으로 다양한 레벨에서의 맵과 경로 UI를 추가적으로 개발하고, 복잡한 맵 구조에서도 사용자가 쉽게 탐색할 수 있도록 개선 작업을 지속할 예정입니다. 또한, 사용자 피드백을 바탕으로 필요한 경우 UI를 조정하고, 최적의 사용자 경험을 제공할 수 있도록 지속적으로 업데이트할 계획입니다. 이를 통해 "BrainBox Delivery"가 사용자에게 더 나은 게임 경험을 제공할 수 있도록 노력할 것입니다.