UI, UX의 사전적 의미를 기억한다.
프론트엔드 개발자가 UX를 공부해야 하는 필요성을 이해한다.
UI, UX의 관계를 이해한다.
UI 디자인 패턴의 필요성을 이해한다.
자주 쓰이는 UI 디자인 패턴의 종류를 기억한다.
자주 쓰이는 UI 디자인 패턴이 필요한 상황과 주의사항을 이해한다.
🍎What is UI?
UI(User Interface, 사용자 인터페이스): 사람들이 컴퓨터와 상호 작용하는 시스템
보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다!
🍒휴대폰의 경우
스마트폰 이전의 피처폰들은 디스플레이가 있긴 했지만, 터치로 상호 작용할 수 있는 모델은 거의 없었다. 그래서 숫자 버튼, 방향 버튼 등 다양한 종류의 물리적 UI가 있는 형태가 대부분이었다.
BUT 스마트폰의 등장 이후 화면 터치를 통한 상호작용의 비중이 높아졌다!
물리적 버튼은 대부분 화면상의 버튼으로 대체되었고, 제스처를 통한 다양한 상호 작용도 가능해졌다.
따라서 물리적 UI는 볼륨, 전원, 홈 버튼 정도만 남게 되었고, 홈 버튼도 최신 모델에서는 찾아보기 힘들게 되었다.
즉, 모바일 디바이스에서 그래픽 UI가 매우 중요해졌다.
🍒컴퓨터의 경우
마우스의 등장 이후로 꾸준히 그래픽 UI가 굉장히 중요한 요소였다.
터미널과 같은 CLI(Command Line Interface, 명령 줄 인터페이스)와 키보드를 이용해서 텍스트만으로도 컴퓨터와 상호 작용할 수는 있지만,
화면상에서의 상호 작용이 더 직관적이고 간편하기 때문
요즘에는 스마트폰과 컴퓨터뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등 화면과의 상호 작용을 통해 사용하는 기기들을 어렵지 않게 찾아볼 수 있다.
결론은,
현대 사회에서는 그래픽 UI, 즉, GUI(Graphical User Interface)가 굉장히 중요한 역할을 하게 되었다.
🍒What is GUI?
GUI(Graphical User Interface, 그래픽 사용자 인터페이스)
: 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다.
🍎What is UX?
UX(User Experience, 사용자 경험)
: 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있다.
아무리 제품 성능이 뛰어나도, 내구성이 약해서 잘 망가지고, 사후처리 시스템이 잘 갖추어지지 않아서 수리조차 제대로 할 수 없다면, 사용자 경험은 좋을 수 없다.
그 외에도 제품의 홍보가 잘 되어 있지 않다면 제품 사용까지 이어지지 않을 가능성도 굉장히 높아지고, 제품을 알게 되더라도 구매하기 힘들다면, 구매하기 전부터 사용자 경험이 좋지 않을 것.
즉 제품 그 자체뿐만 아니라, 제품과 관련된 모든 요소가 UX에 영향을 준다.
UX에 영향을 주는 요소들 중 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI이다!
🍎UI와 UX의 관계
UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
하지만, 나쁜 UI는 보통 나쁜 UX를 유발한다.
보기에는 좋아도 사용하기에 불편하거나, 제대로 기능하지 않는 경우가 이에 해당한다. (ex. 보기엔 깔끔하고 예쁜 계산기가 2+3을 1이라고 출력한다면?)
UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다.
이렇게 UX와 UI는 서로를 계속해서 발전시킬 수 있는 관계이다!
