본문 바로가기
UXUI/디자인 카타

[디자인 카타] 지도 화면에서 버튼을 어떻게 보여주는 것이 편할까요?

by yeon jeong 2025. 9. 5.
728x90

 

1. 주제 선정

 

지도 화면에서 버튼을 어떻게 보여주는 것이 편할까요?

 

2. 개인 의견

 

[A] 선택

 

왜 해당 UI가 더 좋은지?

  • 화면의 가로폭을 활용하기 때문에 화면을 덜 가리게 된다.
  • 처음 서비스를 접하는 사용자에게 아이콘 + 라벨 + 바텀 네비게이션은 친숙한 경험을 제공한다.
  • 텍스트가 함께 제공되어 B에 비해 곧 바로 기능을 파악할 수 있다.
  • 사용자는 좌→우 방향으로 요소들을 빠르게 스캔하는 데 익숙하다. → 자연스러운 이동 경로로 인해 스캔 시간이 빨라진다.

 

나머지 하나는 왜 선택하지 않았는지?

  • 미관상 깔끔해 보이긴 하나 화면의 세로 공간을 차지하기 때문에 지도의 시각적 영역이 줄어들어 살짝 답답해 보인다.
  • 미니멀하게 아이콘만 배치되어 기능 인식에 불편을 줄 수 있다.
  • a에 비해 터치 영역이 좁아 사용성 저하로 이어질 수 있다.


추가 생각

  • 첫 시작 화면에만 A 방식을 적용해 사용자에게 친숙한 인터페이스를 제공하고, 이용 단계에서는 B 방식으로 자동 전환하면 좋을 것 같다.
  • ++ B 방식이 지도 화면을 가린다면 필요에 따라 버튼 숨김 기능을 추가에 사용자가 화면을 넓게 활용할 수 있도록 하면 좋을 것 같다. 
  • ++ A 방식이 마찬가지로 지도 화면을 가린다면, 반투명으로 배경색을 변경하여 화면을 넓게 활용할 수 있도록 하면 좋을 것 같다. 

 

 

3. 공통의견 및 정리
✊ 팀원 2명  [A] 선택
✊ 팀원 2명  [B] 선택

📖A 선택 이유 정리

  • 장점
    • 바텀 네비게이션 패턴은 대부분의 앱에서 사용되어 사용자가 바로 적응 가능하다.
    • 라벨을 함께 표기할 수 있어 사용자에게 인지부하가 적어서 빠르게 탭할 수 있다.
  • 단점
    • 버튼 개수가 늘어나면 가로폭이 부족해져서 UI가 답답해질 수 있음
    • 지도 화면의 하단 정보를 가린다.
    • 버튼이 박스 안에 모여 있어 상대적으로 답답해 보일 수 있다.

 

 

📖B 선택 이유 정리

  • 장점
    • 화면을 가리는 영역이 적어 지도를 더 넓게 보일 수 있다.
    • 유지보수가 쉽고 버튼을 추가하기에 편하다.
    • 한 손 조작이 편리하다.
  • 단점
    • 라벨이 없어 인지부하가 생긴다.
    • 세로로 길게 버튼이 추가될수록 터치하기 힘들어진다.

 


결론

  • A안은 초기 진입 경험을 강화하는 데 적합하고, B안은 화면 몰입도와 확장성 측면에서 보완책이 될 수 있다. 두 방식을 상황에 맞게 조합하는 것이 최적의 해결책이다.