[사용자 친화 웹] - UI / UX 개념과 관계성

📌 UI (User Interface, 사용자 인터페이스)

사람들이 컴퓨터와 상호작용하는 시스템

화면상의 그래픽 요소 외에도 키보드, 마우스 등 물리적 요소도 UI이다.

휴대폰의 경우 숫자버튼, 방향버튼 등 다양한 물리적UI가 있는 형태였지만 스마트폰이 대중화되면서,

화면 터치를 통한 상호작용의 비중이 높아졌다.

따라서 물리적UI는 볼륨, 전원버튼 정도만 남게 되어 그래픽UI가 매우 중요해졌다.

 

컴퓨터 또한 마우스의 등장 이후로 꾸준히 그래픽UI가 중요한 요소이다.

터미널과 같은 CLI(Command Line Interface)와 키보드를 이용해 텍스트로 컴퓨터와 상호작용하는 것보다는 직관적이고 간편하기 때문이다. 현재 많이 사용화되고 있는 스마트 워치, 키오스크, 터치 스크린 안내판 등에서 찾아볼 수 있다.

---

📍 GUI(Graphical User Interface)

사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경으로,

• Window, Mac OS등 운영체제의 화면
• 어플리케이션 화면

등 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다.

---

📌 UX (User Experience, 사용자 경험)

사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험

총체적 경험이란

• 제품, 서비스 그 자체에 대한 직접적인 경험
• 홍보, 접근성, 사후처리 등 직•간접적으로 관련된 모든 경험

을 모두 포함한다.

 

휴대폰을 예로 들면 휴대폰의 성능이 아무리 뛰어나도, 내구성이 약해서 잘 망가지고 사후처리 시스템이 잘 갖춰지지 않아

수리조차 제대로 할 수 없다면 사용자 경험이 좋을 수 없다.

이 외에도 제품의 홍보가 잘 되어 있지 않다면 제품 사용까지 이어지지 않을 가능성도 굉장히 높아지고,

제품을 알게 되더라도 구매하기 힘들다면, 구매하기 전부터 사용자 경험이 좋지 않을 것이다.

이처럼 제품 그 자체뿐만 아니라, 제품과 관련된 모든 요소가 UX에 영향을 준다.

즉, UX에 영향을 주는 많은 요소 중 프론트엔드 개발자에게 가장 중요한 요소는 UI이다.

➡︎ 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다.

---

📌 UI와 UX의 관계

UX는 UI를 포함한다.

UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.

하지만, 나쁜 UI는 보통 나쁜 UX를 유발한다.

기본 계산기 애플리케이션의 경우 디자인이 훌륭하지는 않지만, 계산기의 기능을 제대로 제공하기 때문에 UX는 훌륭하다는 평을 받는다.

반면, 디자인은 화려하지만 기능을 제대로 제공하지 않는 계산기가 있다면, 이걸 사용하는 사람이 있을까?

이것은 UI가 아무리 보기 좋아도 UX는 좋지 않을 것이다. 즉, 좋은 UI가 좋은 UX를 보장하지 않음을 보여준다.

 

하지만 나쁜 UI는 보통 나쁜 UX를 유발한다.

https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950

The worst volume control UI in the world

이처럼 본래의 기능을 제공하는데 불편함을 주는 UI는 나쁜 UX를 유발하게 된다.

 

UI와 UX의 관계성을 정리하자면

UX가 좋지 않은 곳을 찾아냄으로써 UI개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다.

➡︎ UI와 UX는 서로 다르지만 서로를 계속해서 발전시킬 수 있다.