UX, UI의 차이점은 뭘까?

대체적으로 Frontend Engineer의 직무 필요 역량에도 기재되어 있듯이 개발하면서 UX, UI 디자인이 많이 언급된다.

그리고 취준 하면서 여러 공고를 보다보니 UX Engineer라는 직종을 보게 되었다.

UI, UX의 차이점을 정리하게 되었고, 다른 분들도 함께 궁금증을 해소할 수 있도록 포스팅하게 되었다.

 

📄 UX 디자인과 UI 디자인의 설명

사진 출처 : https://musemind.agency/blog/ui-vs-ux-designer

• UI design (User Interface Design : 사용자 인터페이스 디자인)
  • 웹 사이트나 앱과 같은 디지털 화면의 시각적인 요소와 레이아웃을 만드는데 중점을 둔 디자인이다.
  • 색상, 타이포그래피, 아이콘, 버튼 및 기타 그래픽 요소를 선택하여 미적으로 쾌적하고 사용자 친화적인 인터페이스를 만든다.
  • 예시 : 거실 인테리어할 때 전체적으로 톤을 맞추어 정돈되고 깔끔한 느낌을 주는 시각적인 디자인을 말한다.

• UX design (User Experience Design : 사용자 경험 디자인)
  
  • 사용자가 경험하는 전반적인 환경을 개선하는데 중점을 두는 디자인이다.
  • 사용자의 요구 이해, 제품을 직관적이고 사용하기 쉽게 설계하며, 사용자가 사용하는데 즐길 수 있도록 솔루션을 만드는 것을 포함한다.
  • 정보 아키텍처, 사용자 흐름, 와이어프레임 및 프로토타이핑과 같은 작업을 포함하여 사용자의 원활한 활동을 보장한다.
  • 예시 : 주방 인테리어할 때 동선을 신경쓰게 된다. 냉장고와 조리대, 설거지 건조기 위치 등 주방을 이용할 때 편하게 이용할 수 있도록 배치하게 된다. 이와 같이 사용자 겪을 관점으로 구성하고 디자인하는 것을 말한다.

즉, 차이점은 UI 디자인은 시작적으로 보이는 작업에 중점을 둔 것이고, UX 디자인은 원활하고 만족스러운 사용자의 경험을 만드는 작업에 중점을 둔 차이라고 말할 수 있다.

 

 

📱 사례를 통한  UX와 UI 디자인  차이 비교

TMAP과 카카오맵의 첫 화면을 예시로 비교

📍 홈 페이지 (첫 화면) UI 비교 

• TMAP
  • 첫화면에서 지도가 바로 보이지 않고 내비, 대중교통 등의 다양한 카테고리가 먼저 눈에 보이게 해두었다. 카테고리에 들어가면 카카오맵의 첫 화면과 유사하게 나온다. 검색창 아래 검색어 추천 키워드 버튼은 동일한 높이와 키워드와 맞는 아이콘으로 표현하였다.
• 카카오맵
  • 카카오맵은 TMAP처럼 페이지를 나누지 않고 한 화면에 모두 표기하였다. 카카오맵 또한 검색어 추천 키워드 버튼을 동일한 높이와 키워드에 맞는 아이콘으로 표현하고 있는 것 볼 수 있다. 길찾기 버튼의 배경을 파란색으로 주었으며, 중간부에서 하단까지 공지 카테고리의 배경, 지하철 노선, 위치 공유 등의 카테고리 아이콘의 색상을 모두 푸른 계열로 통일하여 통일성을 가지고 있는 것을 볼 수 있다.

이를 통해 각 브랜드에서 시작적으로 무엇을 강조하는지 UI에 들어나는 것을 볼 수 있다.

 

📍 홈 페이지 (첫 화면) UX 비교 

• TMAP
  • 티맵은 메인화면에서 내비 카테고리로 들어와야 즐겨찾기 카테고리 등을 이용할 수 있습니다. 
• 카카오맵
  • 카카오맵은 바로 즐겨찾기 등 내비 관련 카테고리를 확인할 수 있습니다.
  • 카카오맵은 티맵이 메인화면에 나눠놓은 카테고리를 메인화면 하단에 메뉴바에 버튼으로 이용할 수 있도록 하여 페이지 전환의 과정을 줄인 느낌이 들었습니다. 

 

👩🏻‍💻 마무리

프론트엔드 개발자라면 UI/UX design에 대한 이해는 꼭 필요하다고 생각한다. 사용자의 경험을 만족스럽고 원활하게 만들기 위해선 가장 고민 해야 하는 부분이고, 최상의 최종 제품을 제공하기 위해  UI design과 UX design 분야는 서로 상호 보완적이여야 한다.