[사용자 친화 웹] UI/UX 개념

1. UI (User Interface) : 사용자 인터페이스

사람이 컴퓨터와 상호작용하는 시스템
ex) 키보드, 마우스, 버튼, 화면상의 그래픽 요소 등

 

기술 발전으로 화면과의 상호작용을 통해 사용하는 기기들이 늘어나며 GUI(Graphical User Interface)의 중요성이 커짐.

※ GUI(Graphical User Interface) : 그래픽 사용자 인터페이스

사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경
ex) 컴퓨터 운영체제의 화면, 애플리케이션 화면 등

=> 프론트엔드 개발자가 다루는 UI는 대부분 이러한 GUI를 의미함.

2. UX(User Experience) : 사용자 경험

사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험
ex) 제품과 서비스 그 자체에 대한 경험, 홍보, 접근성, 사후 처리 등 

=> 프론트엔드 개발자는 UI를 통해 UX를 향상시키는 일에 기여함.

3. UI와 UX의 관계

1. UX는 UI를 포함함.
   ex) UI ⊂ UX
2. 좋은 UX가 반드시 좋은 UI를 의미하지 않음.
   ex) 기본 계산기 애플리케이션 : UI는 투박하지만 계산기의 기능을 제대로 제공한다는 점에서 좋은 UX를 제공함
3. 마찬가지로 좋은 UI가 항상 좋은 UX를 보장하는 것은 아님.
   ex) 디자인은 훌륭하지만 계산 기능이 엉망인 계산기 애플리케이션 : UI는 좋지만 나쁜 UX를 제공함
4. 하지만 나쁜 UI는 보통 나쁜 UX를 유발함.
   ex) 나쁜 UX를 유발하는 나쁜 UI의 예 (사진)

=> UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며 서로를 보완하는 역할을 함.
=> 개발자는 UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 함. 

4. 학습 내용 요약

1. UI, UX의 사전적 의미

• UI(User Interface) : 사용자 인터페이스. 사람이 컴퓨터와 상호작용하는 시스템
• UX(User Experience) : 사용자 경험. 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험

2. 프론트엔드 개발자가 UX를 공부해야 하는 이유

• 좋은 UX를 제공하는 것이 좋은 UI를 개발하는 목표이기 때문

3. UI와 UX의 관계

• UI는 UX를 구성하는 요소 중 하나. 좋은 UX가 반드시 좋은 UI를 의미하지 않으며 좋은 UI가 항상 좋은 UX를 보장하는 것은 아님. 그러나 나쁜 UI는 보통 나쁜 UX를 유발함. 따라서 UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX를 좋게 만들 수도 있음. 이러한 점에서 UI와 UX는 상호보완적인 관계라 말할 수 있음.