UI란
UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
UI 하면 우리가 흔히 떠올리는 GUI(Graphical User Interface) 외에 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.
그러나 프론트엔드 개발자에게 있어 UI는 대부분 GUI를 의미한다. 프론트엔드 / ui 디자인 관련 글에서 'UI'라는 단어가 사용된다면 '아~ 이건 GUI를 의미하는 거구나~' 라고 생각하면 된다.
(원작자: 尾大的小马_Chi7 Ma)
위 GIF에서는 항공편 선택 창, 상세 정보 확인 창, 체크인 버튼, 좌석 예약 화면 (스크롤로 화면을 움직여 전체 좌석 현황을 살펴볼 수 있고, 전체 항공기 기준으로 현재 어느 위치에 있는지 하단의 애니메이션을 통해 알 수 있음), 티켓 확인 모달 창 및 버튼 등등... 사용자가 앱과 상호작용할 수 있도록 만들어진 모든 요소가 UI라고 할 수 있다.
UX란?
UX(User Experience, 사용자 경험)는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다.
제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다. 말 그대로 총체적 경험인 것이다.
정의만 읽으면 UX는 굉장히 추상적인 개념인 것처럼 느껴진다. UI와 UX의 관계를 연결지어 살펴보면 조금 더 쉽게 이해할 수 있을 것이다.
UI와 UX의 관계
UX는 UI보다 상위 개념이며, UI는 UX를 담는 그릇 / 내지는 훌륭한 UX를 제공하기 위한 도구에 가깝다. (라고 생각한다...) 이유는 간단하다. 넓은 의미에서는 UI를 디자인하는 목적 자체가 사용자가 웹(앱 등)과 편리하게 상호작용할 수 있도록 하여 만족스러운 사용자 경험을 하게 하는 것이기 때문이다.
아름답고 세련된 UI가 반드시 더 나은 UX를 제공해주지는 않는다.
위 사진은 맥북에서 기본으로 제공되는 계산기 앱의 UI이다. 디자인적 요소가 많이 가미되어있지 않고 오히려 투박해보이기까지 하지만, 계산기 본연의 기능에 충실하다. 이 계산기 앱을 사용하는 사용자는 만족스러운 UX를 경험했을 것이다.
이것은 내가 만든 계산기의 UI이다. 세련된 디자인을 중점으로 두고 만들었기 때문에, 예쁘고 보기 좋다. 하지만 만약 AC 버튼을 눌러도 이전 값이 초기화되지 않거나, 9 버튼을 눌렀는데 1 버튼이 출력되는 식으로 제멋대로 오작동한다면 어떨까? 아니면, 계산기 컴포넌트가 사실은 모달창이라 바깥쪽을 누르면 화면에서 사라지고 다시 띄우는 버튼이 없다면 어떨까? 사용자는 매우 불만족하여 두 번 다시는 이 계산기 앱을 사용하지 않을 것이다.
그러나 '나쁜' UI는 반드시 '나쁜' UX를 제공한다.
여기서 '나쁜' UI란 직관적이지 않고, 사용자를 전혀 배려하지 않으며 오히려 헷갈리게 까지하는 UI를 의미한다.
이 사이트의 이름은 User Inyerface. 천하제일 개쓰레기 UI의 향연을 헤치고 무사히 회원가입을 하는 것이 목적인 게임이다. (...) 사용자를 화나게 하는 UI가 어떤 참사를 불러일으킬 수 있는지 적나라하게 보여준다.
가령 화면의 'NO' 버튼은 아무런 역할을 하지 않고, 'HERE'을 눌러야 다음 페이지로 이동할 수 있다.
placeholder와 같은 텍스트를 기본값으로 지정해둔다든지, '약관에 동의하지 않는다' 가 체크박스 옆에 적혀있다든지, 모달창의 닫기 버튼이 숨겨져있다든지... ... .
해당 사이트는 반쯤 유머 사이트에 가깝지만, 사용자를 혼란스럽게 하는 나쁜 UI의 예는 우리 생활 곳곳에 숨겨져있다.
https://refreshstudio.tistory.com/entry/실무-디자이너개발자들이-뽑은-최악의-UX-사례 [리프레시 스튜디오 Refresh Studio:티스토리]
UI 디자인과 UX 디자인의 차이점
UI와 UX는 뗄래야 뗄 수 없는 관계이기 때문에, UI 디자인과 UX 디자인을 혼동하기가 쉽다. 그러나 UI는 사용자가 직접 상호작용할 유형적 요소를 디자인하는 데에 집중한다면, UX는 User flow를 중심으로 고려하여 최상의 사용자 경험을 디자인하는 데에 집중한다는 차이점이 있다.
