UX/UI 디자인이란?
디자인에 관심이 조금이라도 있는 분이라면 UX / UI 디자인에 대해 한번쯤은 들어본 적이 있으실 것 같습니다. 둘 사이에는 분명한 차이가 존재하지만, 둘을 완벽하게 분리해서 다룰 수 있냐고 묻는다면… 그것도 불가능합니다.
보기에는 예쁜데 쓰기에는 불편한 서비스. 보기에는 이게 뭔가 싶지만 쓰는데는 아무런 문제가 없는 서비스. 다들 경험해보셨죠?
전자는 UI가 충족되지만 UX가 부족한 디자인이고, 후자는 UI가 부족하지만 UX가 충족된 디자인입니다. 이번 글에서는 UX와 UI의 각 정의와 차이점, 이들이 함께갈 수밖에 없는 이유에 대해 알아봅니다.
UX 디자인과 UI 디자인의 각 정의와 차이점
먼저 UX 디자인과 UI 디자인의 정의와 차이점에 대해 간단하게 알아봅시다.
1. UX 디자인
User eXperience Design / 사용자 경험 디자인
1) UX 디자인이란?
제품이나 서비스를 이용할 때 사용자가 겪게 되는 전체 경험을 디자인
→ "사용자가 쉽고 효율적이고 즐거운 경험을 하도록 하는 것"
2) 예를 들어,
쇼핑몰 앱의 경우, 쇼핑몰 앱을 클릭해서 여는 것부터 시작해 회원가입, 로그인, 검색, 장바구니 담기, 결제까지의 모든 여정을 디자인
3) 더 구체적으로는?
· 사용자가 겪고 있는 고충, 사용자가 원하는 니즈를 파악하고 해결책과 개선책을 찾음
· 그 과정에서 광범위한 리서치 필요
· 리서치 결과를 바탕으로 정보 아키텍쳐(IA, Information Architecture)와 사용자 여정(User Journeymap)을 설계
· 이를 반영한 와이어 프레임을 설계
2. UI 디자인
UI 디자인 / User Interface Design
1) UI 디자인이란?
사용자 인터페이스 디자인
제품이나 서비스를 이용할 때 인터페이스가 어떻게 보이고 기능하는지를 디자인
(GUI 디자인(Graphic User Interface Design)을 분리해서 보는 경우도 있으나, 경계가 모호하다.)
→ "직관적인 인터페이스를 통해 사용자가 헤매지 않고 행동 하도록 하는 것"
2) 예를 들어,
사용자가 직접 마주하는 폰트, 칼라, 레이아웃, 아이콘 등을 디자인
3) 더 구체적으로는?
· UX단계에서 정해진 와이어프레임을 바탕으로 시각적 측면을 고려해 디자인
· 사용자가 접할 수 있는 모든 개별 화면과 터치포인트를 고려
3. UX/UI 디자인 비교 예시
UX/UI 디자인에 대해 간단하게 한번 알아봤는데, 여전히 이게 뭔가 싶으시죠? 이해를 돕기 위해 예시를 준비했습니다. 기존의 은행 앱과는 다른 UX개선으로 큰 호평을 받은 카카오톡 간편 송금을 통해, UX/UI의 차이를 한 번 더 짚고 넘어가 봅시다.
카카오톡 채팅창1) UX 디자인
→ + 버튼을 탭하면 다른 기능의 버튼들과 함께 송금 버튼이 나타남
2) UI 디자인
→ 송금 버튼을 더 직관적으로 나타내기 위해 원화 기호를 아이콘으로 사용
송금 버튼 탭 시 팝업되는 화면1) UX 디자인
→ 송금 버튼을 탭하면 송금하기/요청하기/정산하기/ 페이상품권 보내기 등이 팝업 됨
→ 가장 자주 쓰는 기능인 송금하기를 최상단에 배치
2) UI 디자인
→ 송금 타이틀과 송금하기/요청하기/정산하기/페이상품권 등의 하위 메뉴의 위계를 폰트 굵기를 통해 표현
→ 다른 버튼을 실수로 누르지 않도록 버튼 사이의 충분한 간격 제공
송금하기를 탭하면 나오는 송금 화면1) UX 디자인
→ 송금하기를 누르면 송금 화면으로 연결 됨
2) UI 디자인
→ 보낼금액(원) / 부족 금액은 자동충전됨 등의 가이드 문구는 회색으로 처리
→ 가장 중요한 보낼금액이 입력될 창에는 노란색의 포인트 컬러를 이용해 주목도를 높임
송금액을 입력시 나오는 화면1) UX 디자인
→ 송금할 금액을 입력하고 확인을 누르면 송금이 완료 됨
2) UI 디자인
→ 송금할 금액을 입력하면 회색으로 비활성화 되어있던 확인 버튼이 노란색으로 활성화
UX/UI를 함께 챙겨야 하는 이유
멋져 보이지만 사용하기 어려운 것이 훌륭한 UI와 열악한 UX의 예입니다.
끔찍해 보이지만 매우 사용하기 쉬운 것은 훌륭한 UX와 열악한 UI의 예입니다.
- The Gap between UI and UX Design – Know the Difference [Helga Moreno]
UX와 UI의 차이점에 대해 알게 되었으니, 서두에 말했던 보기에는 예쁜데 쓰기에는 불편한 서비스. 보기에는 이게 뭔가 싶지만 쓰는데는 아무런 문제가 없는 서비스에 대해 조금 더 자세하게 예시를 들어 설명해봅시다.
누가 봐도 멋지다는 감탄이 나올만한 웹사이트가 있습니다. 사이트에 들어온 누구나 심미적 가치에 감탄합니다. 하지만, 그 화면에 감탄하는 것 말고는 할 수 있는 게 아무것도 없습니다. 어디를 클릭해야 다음으로 넘어가는지, 운좋게 다음 페이지로 넘어갔다고 해도 내가 원하는 정보(그래서 대체 이게 무슨 웹사이트야? 어떤 회사가 만든 거야? 그 회사는 무슨 일을 해?)를 알 수 없습니다. 보기에는 예쁜데 쓰기에는 불편한 서비스. 그래픽이 예쁘고 아름답다고 좋은 사용자 경험을 선사할 수는 없습니다.
반대의 예시를 한 번 살펴볼까요?
여기 우리가 원하는 것을 제공해줄 수 있는 앱이 있습니다. 하지만 텍스트의 색상이 너무 흐릿합니다. (하얀 바탕에 노란 글씨를 상상해보세요!) 하지만 읽을 수는 있으니, 다음 단계로 넘어갔다고 칩시다. 정보 입력란이 나오는데 터치 포인트가 너무 작습니다. 게다가 버튼 사이의 간격이 너무 가까워, 다음을 누르고 싶은데 계속 이전 버튼을 누르게 되어 같은 정보를 몇번이고 재입력해야 합니다. 이것이 바로 원하는 기능은 제대로 준비되어있지만 나쁜 UI로 인해 사용자의 경험이 부정적으로 각인되는 예시 중 하나입니다.
빠른 이해를 돕기 위해 최악의 UI를 경험할 수 있는 사이트가 있어 소개해봅니다.
최악의 UI만을 모아놓은 사이트 (하단링크 참조)해당 사이트는 최악의 UI를 실험하기 위해 만들어진 사이트로, 평소 우리가 당연하게 생각해오던 UI 디자인이 얼마나 많은 기능을 하고 있는지 확인해보는 데 큰 도움을 줍니다.
마치며
UX디자이너가 사용자의 여정을 계획하는 동안, UI 디자이너는 이 여정을 위한 모든 디테일에 집중합니다. 계획된 여정이 없으면 준비된 디테일이 소용이 없고, 계획만 있고 준비가 되지 않았다면 쓸모없는 계획이 되듯이 UX와 UI는 상호보완적인 관계를 가집니다. 특히 오늘날처럼 디지털 환경이 익숙한 사람들을 대상으로 하는 시장에서는 두가지 측면을 올바르게 이해하고 사용하는 것이 절대적으로 필요합니다.
출처
The Difference Between UX and UI Design – A Beginner’s Guide
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/
