국가 선택 드롭다운 UX 개선하기  

국가 선택 드롭다운 UX 개선

문제

아래 이미지는 한 서비스에서 국가를 선택하는 UX이다. 국가 숫자는 193개 정도인데 맨 위는 Afghanistan, Albania, Algeria, Andorra의 순이다. 해당 서비스가 (1) 미국과 영국, 한국에서 많이 사용되며, (2) 그 외의 나라에서도 적지만 사용자가 있는 서비스라고 할 때 국가를 선택하는 UX는 어떻게 바뀌어야 할지 디자인 해보세요 (모바일 기준으로 Wireframe으로 정리하시면 되며, Visual Design은 필요없습니다).

케이스 풀이시 고려사항

  • 사용자의 정황에 따라 적절한 UX를 디자인해야 합니다. 특히 적절한 콤포넌트를 조합해서 사용하는 것이 중요합니다. 이 간단한 케이스를 통해서 UI 콤포넌트를 조합해서 사용하는 연습을 해보세요.
  • 세개의 국가는 사용자가 많으며, 나머지는 적다는 것을 꼭 활용하세요.
  • 국가를 선택한다고 그냥 드롭다운을 사용하면 생각 보다 많은 사용자들이 힘들어합니다. 특히 모바일에서 더 힘들어해요. 게다가 국가명은 여러 개를 사용하기 때문에 (예. 대한민국, 한국, Republic of Korea, South Korea 등) 어떤 명칭을 사용해도 가능하게 디자인할 필요가 있습니다.

문제

아래 이미지는 한 서비스에서 국가를 선택하는 UX이다. 국가 숫자는 193개 정도인데 맨 위는 Afghanistan, Albania, Algeria, Andorra의 순이다. 해당 서비스가 (1) 미국과 영국, 한국에서 많이 사용되며, (2) 그 외의 나라에서도 적지만 사용자가 있는 서비스라고 할 때 국가를 선택하는 UX는 어떻게 바뀌어야 할지 디자인 해보세요 (모바일 기준으로 Wireframe으로 정리하시면 되며, Visual Design은 필요없습니다).

케이스 풀이시 고려사항

사용자의 정황에 따라 적절한 UX를 디자인해야 합니다. 특히 적절한 콤포넌트를 조합해서 사용하는 것이 중요합니다. 이 간단한 케이스를 통해서 UI 콤포넌트를 조합해서 사용하는 연습을 해보세요.

세개의 국가는 사용자가 많으며, 나머지는 적다는 것을 꼭 활용하세요.

국가를 선택한다고 그냥 드롭다운을 사용하면 생각 보다 많은 사용자들이 힘들어합니다. 특히 모바일에서 더 힘들어해요. 게다가 국가명은 여러 개를 사용하기 때문에 (예. 대한민국, 한국, Republic of Korea, South Korea 등) 어떤 명칭을 사용해도 가능하게 디자인할 필요가 있습니다.



케이스 힌트

이 케이스가 어떤 케이스인지,

어떻게 접근해야 하는지 알 수 있어요.

케이스를 풀기 위한 접근법


  • 이 케이스는 사용성의 개념을 알고 있으며 이를 UI로 적용할 수 있는지가 관건입니다.
  • 실습 문제로써 며칠 시간을 주고 물어보는 게 아니라 면접 자리에서 물어보고 바로 답해야 하는 케이스입니다.
  • 해외 시장에 진출한 서비스들에서 고민되어야 하는 기본 UX입니다만, 주변에서 많이 접하는 케이스가 아니라서 면접관들이 선호합니다.

  • 먼저 현재 UX의 문제를 여러 사용자들의 관점에서 정리합니다. 예로 아프가니스탄 Afghanistan 사용자, 미국/영국/한국 사용자, 짐바브웨 Zimbabwe 사용자 등으로요.
  • 또한 국가의 이름이 여러 개가 사용되는 사용자들도 생각해 봅니다. 예로 우리나라는 Republic of Korea, Korea, Republic of, South Korea가 혼용됩니다.
  • 사용자들의 문제가 파악된 후에 국제적으로 제공되는 서비스들, 예로 구글이나 에어비앤비에서 국가 선택을 어떻게 하고 있는지 벤치마킹합니다. UX를 오랫동안 열심히 해온 일류 회사들의 방안을 더 유심히 보셔야 하며, 그렇지 않은 회사들의 방안은 참고만 하시는 게 좋습니다. (대강 만들었을 수 있어요.)
  • 벤치마킹까지 끝났으면 이제 스스로 UI를 만들어 보세요. 여기서 신경 써야 할 점은 드롭다운 박스 하나만 써야 한다는 제약은 없다는 것입니다. 다른 여러 UI Component를 사용하셔도 됩니다. 서치박스와 함께 사용되는 드롭다운 박스도 있어요.
  • IP로 국가를 자동으로 선택하면 된다 라는 안도 나올 수 있습니다만, 다른 나라에서 잠시 여행 중에 가입하는 사용자도 있다는 것을 감안하면 자동으로 국가를 선택해 주지 말아야 하는 경우도 있습니다.
  • UI를 그려보고 위에서 정리한 여러 사용자군들이 쉽고 직관적으로 국가 선택을 할 수 있는지 스스로 검증해 보세요.
  • 이런 케이스의 정리는 아주 짧게 하셔도 됩니다. 면접관들은 생각을 어떻게 했는지를 더 궁금해하고, 디자인된 UI의 장단점은 보면 바로 알기 때문입니다. 사용자군을 적고 이들이 겪는 경험에 따른 사용자 니즈를 적은 후에 이 니즈를 만족하는 UI를 보여주면 됩니다.  

이 케이스를 풀기 위한 접근법

이 케이스는 사용성의 개념을 알고 있으며 이를 UI로 적용할 수 있는지가 관건입니다.

실습 문제로써 며칠 시간을 주고 물어보는 게 아니라 면접 자리에서 물어보고 바로 답해야 하는 케이스입니다.

해외 시장에 진출한 서비스들에서 고민되어야 하는 기본 UX입니다만, 주변에서 많이 접하는 케이스가 아니라서 면접관들이 선호합니다.

먼저 현재 UX의 문제를 여러 사용자들의 관점에서 정리합니다. 예로 아프가니스탄 Afghanistan 사용자, 미국/영국/한국 사용자, 짐바브웨 Zimbabwe 사용자 등으로요.

또한 국가의 이름이 여러 개가 사용되는 사용자들도 생각해 봅니다. 예로 우리나라는 Republic of Korea, Korea, Republic of, South Korea가 혼용됩니다.

사용자들의 문제가 파악된 후에 국제적으로 제공되는 서비스들, 예로 구글이나 에어비앤비에서 국가 선택을 어떻게 하고 있는지 벤치마킹합니다. UX를 오랫동안 열심히 해온 일류 회사들의 방안을 더 유심히 보셔야 하며, 그렇지 않은 회사들의 방안은 참고만 하시는 게 좋습니다. (대강 만들었을 수 있어요.)

벤치마킹까지 끝났으면 이제 스스로 UI를 만들어 보세요. 여기서 신경 써야 할 점은 드롭다운 박스 하나만 써야 한다는 제약은 없다는 것입니다. 다른 여러 UI Component를 사용하셔도 됩니다. 서치박스와 함께 사용되는 드롭다운 박스도 있어요.

IP로 국가를 자동으로 선택하면 된다 라는 안도 나올 수 있습니다만, 다른 나라에서 잠시 여행 중에 가입하는 사용자도 있다는 것을 감안하면 자동으로 국가를 선택해 주지 말아야 하는 경우도 있습니다.

UI를 그려보고 위에서 정리한 여러 사용자군들이 쉽고 직관적으로 국가 선택을 할 수 있는지 스스로 검증해 보세요.

이런 케이스의 정리는 아주 짧게 하셔도 됩니다. 면접관들은 생각을 어떻게 했는지를 더 궁금해하고, 디자인된 UI의 장단점은 보면 바로 알기 때문입니다. 사용자군을 적고 이들이 겪는 경험에 따른 사용자 니즈를 적은 후에 이 니즈를 만족하는 UI를 보여주면 됩니다. 



솔루션·피드백

다른 회원은 이 케이스를 어떻게 풀었는지,

어떤 피드백을 받았는지 볼 수 있어요.

최XX 회원님이 제출하신 솔루션 예시입니다.

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점

  • 사용자가 많은 국가들을 최상단에 배치해서 편의를 높였습니다.

📌 부족한 점 

  • 현재 디자인안은 미국, 영국, 한국 사용자와 상단에 배치된 나라(아프카니스탄, 알바니아, 알제리)만을 위한 디자인입니다. 다른 국가들은 고려되지 않았어요.
  • 고려 사항에 적은 내용들도 감안하지 않으셨습니다. 즉 바로가기가 되는 콤보박스 (K를 누르면 리스트에서 커서가 Kazakhstan으로 이동), 서치가 되는 콤보박스 (Korean를 누르면 South Korea, North Korea 또는 Republic of Korea로 리스트가 줄어듬) 등을 검토했어야 합니다.
  • 또한 사용자의 위치를 알 수 있거나 쿠키 정보로 추측할 수 있다면 국가를 미리 선택해주고 바꿀 수 있게 하는 방안도 제공할 수 있습니다.  

📘 총평 


글로벌 서비스에서 자주 발생하는 국가 선택에 대한 사용자 요구사항을 정확하게 파악하고 이를 UI로 구성할 수 있는 관점이 필요합니다. 특히 UI에서는 주어진 컴포넌트 내에서만 생각하시기보다 다른 컴포넌트와의 조합으로 해결해시는 것이 좋습니다. 일곱시에서 UI를 기획하는 케이스들을 통해 UI 역량을 쌓으시길 추천합니다.

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

케이스를 출제한 전문가의 피드백 입니다.

👍 잘한 점 
사용자가 많은 국가들을 최상단에 배치해서 편의를 높였습니다.
📌 부족한 점 
현재 디자인안은 미국, 영국, 한국 사용자와 상단에 배치된 나라(아프카니스탄, 알바니아, 알제리)만을 위한 디자인입니다. 다른 국가들은 고려되지 않았어요.

고려 사항에 적은 내용들도 감안하지 않으셨습니다. 즉 바로가기가 되는 콤보박스 (K를 누르면 리스트에서 커서가 Kazakhstan으로 이동), 서치가 되는 콤보박스 (Korean를 누르면 South Korea, North Korea 또는 Republic of Korea로 리스트가 줄어듬) 등을 검토했어야 합니다.


또한 사용자의 위치를 알 수 있거나 쿠키 정보로 추측할 수 있다면 국가를 미리 선택해주고 바꿀 수 있게 하는 방안도 제공할 수 있습니다.
📘 총평 
글로벌 서비스에서 자주 발생하는 국가 선택에 대한 사용자 요구사항을 정확하게 파악하고 이를 UI로 구성할 수 있는 관점이 필요합니다. 특히 UI에서는 주어진 컴포넌트 내에서만 생각하시기보다 다른 컴포넌트와의 조합으로 해결해시는 것이 좋습니다. 일곱시에서 UI를 기획하는 케이스들을 통해 UI 역량을 쌓으시길 추천합니다.

전문가의 평가: C
S: 감탄할 만한 수준입니다.
A: 실제 상품에 바로 적용할 수 있어요.
B: 부족함이 조금 있습니다.
C: 노력이 필요해요. 

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 역량 향상에 훨씬 도움이 됩니다.

일곱시로 실무 UX 역량을, 특히 채용 과정에서 중요한 문제해결 역량을 쌓아가세요.

답안 제출을 망설이지 마세요. 디자인에 정답은 없습니다. 

머뭇거리는 것 보다는 전문가의 1:1 피드백을 받는 것이 

 역량 향상에 훨씬 도움이 됩니다.


일곱시로 실무 UX 역량을,

특히 채용 과정에서 중요한  문제해결 역량을 쌓아가세요.