UI : User Interface (사용자 인터페이스)
UX : User Experience (사용자 경험)
UI 와 UX...?
UI와 UX는 일반 사용자 입장에서 혼용되기 쉬운 개념을 가진 용어라고 할 수 있을 것이다. 일반 사용자에게는 이 둘을 구분하는 과정이 굳이 필요하지 않은데다가, 두 가지 용어들이 크게 다르게 느껴지지도 않기 때문이다. 그러나 이러한 과정이 일반 사용자가 아닌 UI 및 UX를 실질적으로 다루는 개발자와 디자이너들에게는 이 둘의 개념을 분명히 구분하고 설계하는 것이 반드시 필요한 일이라고 할 수 있다. 왜냐하면 이 둘을 분명히 구분하는 것이 바로 좋은 사용자 경험을 만들어 낼 수 있는 첫 걸음이기 때문이다.
UI (User Interface)란 무엇인가?
UI란 사용자 인터페이스 즉, 사용자와 서비스가 상호작용하는 부분을 일컫는다. 사용자는 이 UI를 이용해서 서비스를 원하는대로 동작시키고 조종할 수 있다. 이러한 UI의 개념은 단순히 웹 개발(프론트 엔드)분야에 국한되는 것이 아닌, 다른 소프트웨어 또는 하드웨어 등 모든 분야로 확장될 수 있다. 단순히 우리가 컴퓨터 마우스 버튼을 이동해 아이콘을 클릭하는 것에서 부터, 티비 리모콘을 눌러 원하는 채널을 작동시키거나 세탁기의 버튼을 눌러 세탁기를 동작시키는 것 까지 모두 사용자 인터페이스에 해당한다고 할 수 있다. 그러나 이러한 UI의 개념을 소프트웨어적으로, 그 중에서도 웹 브라우저로 적용시켜 본다면, 우리가 홈페이지를 들어가자마자 나타나는 웹 페이지(클라이언트)의 요소 라고 이해할 수 있을 것이다.
웹 페이지의 UI
현대의 웹페이지는 그래픽 유저 인터페이스(GUI)를 통해 웹페이지의 UI를 구현해서 사용자와 상호작용한다. 즉, 사용자는 웹페이지의 버튼을 클릭하거나 스크롤, 타이핑 등을 통해서 웹페이지를 원하는 대로 동작시킨다. CSS와 JS의 지속적인 변화와 웹브라우저들의 엔진이 발전하면서 더욱 더 다양한 방법으로 웹페이지의 UI를 구성할 수 있는 방법들이 다양해졌지만 (참고, https://ui-patterns.com/patterns) , UI의 변하지 않는 단 하나의 목적을 지닌다. 사용자가 의도한대로 동작해야 하며, 사용자에게 좋은 경험을 주는데 도움을 주어야 한다는 것이다.
UX (User Experience)
UX란 어느 한 서비스를 사용자가 이용하면서 겪게 되는 총체적인 사용자의 경험 그 자체 를 의미한다. 이 UX에는 UI를 통해 얻게 되는 경험과 UI 외적인 요소가 모두 작용하게 된다. 즉, 좋은 UI의 구현이 반드시 좋은 UX를 보장하는 것은 아니라는 의미이다. 어떠한 서비스에는 UI보다는 UI 외적인 요소가 더 큰 의미를 지닐 수도 있다. 우리가 리모콘이나 계산기를 사용하면서 이 인터페이스가 어떠한 유려한 UI를 가지고 있는가는 그다지 중요한 의미를 가지지 않는다. 이와 같이 서비스와 목적에 따라서 좋은 UX를 구현하기 위해서는 UI 외적인 요소의 중요성도 같이 재고해보아야 할 것이다. 단순히 좋은 UI (특히, 디자이너나 개발자가 자신의 맘에 든다고 생각하는 UI) 가 좋은 UX이다 라는 일대일대응적인 사고는 지양해야할 것이다.
UX를 고려하지 못한 UI는 그저 불쾌한 경험만을 초래할 뿐...
그렇다면, 좋은 UX란?
그렇다면 좋은 UX를 제공하는 서비스란 도대체 어떠한 점을 만족하는 서비스인가? 다행히도 우리에게는 어떠한 서비스가 좋은 UX를 제공하는가에 대한 척도가 존재한다. 여기서는 이 척도들에 대해서 소개한다.
1) 피터 모빌 벌집 모형 (Peter Morville Honeycomb)
피터 모빌은 좋은 UX를 7가지의 기준을 통해서 제시하고 있다.
1) Credible (신뢰성)
사용자에게 서비스의 신뢰를 보장하는가? 과장, 과대, 거짓이 없는가?
2) Desirable (심미성)
심미적인 관점에서 사용자에게 매력적으로 다가오는가?
3) Accessible (접근성)
어떠한 조건(신체, 사회 등)에 관계 없이 서비스에 편하게 접근할 수 있는가?
4) Usable (사용성)
사용이 편리하고 직관적이어서 사용하기 쉬운가?
5) Findable (검색가능성)
사용자들이 원하는 것을 편하게 발견하고 찾을 수 있는가?
6) Useful (유용성)
서비스가 사용자들의 목적에 맞는 기능과 정보를 제공하고 있는가?
7) Valuealbe (가치성)
앞선 6가지의 항목을 모두 제공하여, 사용자에게 필요한 가치를 제공하고 있는가?
2) 제이콥 닐슨의 휴리스틱 사용성 평가기준 (Jakob’s Ten Usability Heuristics)
제이콥 닐슨의 평가 모형은 휴리스틱 (직관과 경험에 의거한 판단 방법) 적으로 이러한 것이 존재하고 있을 때, 좋은 UX를 제공하고 있다고 이야기한다.
1) Visiability of System Status (시스템 상태의 가시성)
시스템의 현재 상태를 유저에게 표시하여 확인시킬 수 있어야 한다.
(현재 상태에 대한 피드백을 UI적으로 사용자에게 인지하도록 표현)
2) Match Between System & Real World (현실과 시스템 사이의 유사성)
시스템에 대한 로직과 UI가 현실을 반영하여 보다 친근하게 다가가야 한다.
3) User Control And Freedom (사용자 조종과 자유도)
사용자에게 기본적인 시스템을 통제할 수 있는 자유도를 부여하여 UX를 증대한다.
(현재 작업 실행, 취소 등)
4) Consistency And Standards (일관성과 규칙)
사용자에게 일관적인 규칙과 체계를 통한 경험을 제공하여 혼란을 방지한다.
(일관 적인 UI 디자인, 등)
5) Error Prevention (오류 방지)
최대한 사용자가 오류를 경험하는 것을 막아 UX를 증대한다.
6) Recognition Rather Than Recall (기억 보다는 인지)
시스템이 사용자 보다 더 많은 정보를 기억하여, 사용자의 기억 부담을 덜며 사용자가 필요할 때 마다 이를 제공한다.
7) Flexibility And Efficiency of Use (유연함과 효율성)
숙련된 경험자와 입문자에게 모두 편리한 UX를 제공해야 한다.
8) Aesthetic And Minimalistic Design (심미성과 직관적 디자인)
불필요한 디자인을 최소화 화고 심미적으로 유려한 디자인을 제공한다.
9) Help Users With Errors (사용자를 오류에서 부터 돕기)
사용자가 오류 상황에 처했을 때, 사용자를 오류로 부터 해결할 수 있는 도움말과 도움 서비스를 제공해야 한다.
10) Help And Documentation (도움말과 문서화)
사용자가 서비스를 사용하는데에 필요한 정보들을 도움말을 통해 제공하고, 사비스 사용방법을 문서화해서 제공한다.
클론을 통해 직접 UI / UX 고려해보기
웹 UI 디자인 어플리케이션 'Figma'를 통해서, 하나의 웹페이지를 클론해보면서 앞서 언급된 평가기준들을 통해서 UI / UX에 대해 실질적으로 고려해보았다. 내가 선택한 웹페이지는 'React'의 공식 문서 웹페이지였다.
공식 웹페이지
클론 웹페이지
figma 링크) https://www.figma.com/file/Ky3juGMJevxGiwfpCyKqWS/Untitled?node-id=0%3A1
7가지의 UX 가치 척도를 만족하는가?
React 웹페이지의 경우, React 라이브러리의 사용법을 담은 공식 웹페이지이기 때문에 대부분의 조건들을 만족하였다. 주목할 만한 부분은, 다양한 언어를 홈페이지에서 제공하기 때문에 웹페이지의 접근성을 높일 수 있었다는 점이라고 할 수 있을 것이다. 다만, 웹페이지 내부에 존재하는 다양한 개념과 단어들에 대한 링크 인터랙션을 더욱 많이 제공했다면 검색가능성이 더 좋아지지 않을까 하는 생각이 들었다.
휴리스틱 모델을 만족하는가?
앞서 언급된 React 웹페이지의 특성상, 사용자와 많은 인터랙션이 존재하는 웹페이지라고 할 수 없었다. 따라서 많은 부분에 대해서 기준을 그대로 적용하여 생각해볼 수 없었다. 하지만 그럼에도 불구하고 스크롤링 하면서 자신의 스크롤 위치를 피드백 해주는 인터랙션이나, 도큐먼트 내 검색 기능 등을 통해서 최대한 UX를 증진하려는 모습을 발견할 수 있었다.
어떠한 UI 컴포넌트들이 사용되었을까?
가장 먼저 발견할 수 있는 것은 웹페이지의 최상단에 존재하여 자유자재로 페이지 이동을 가능하게 하는 네비게이션 바 라고 할 수 있다. 이 네비게이션 바는 React 웹페이지 내의 어떠한 하부 페이지에서도 접근할 수 있어 편의성을 도모한다. 또한, 검색 인풋과 검색 자동완성기능 을 제공하기도 한다. 다른 한 가지로는 공식 문서 페이지의 계층 구조를 자유롭게 탐색할 수 있는 사이드 바 라고 할 수 있을 것이다. 이 사이드 바는 토글이 가능한 아코디언 패턴을 통해 문서의 트리 구조를 구현하여 페이지 간 이동의 효율성을 증진한다.
간단한 디자인인 것 같은데, 레이아웃이 잘 적용되었을까?
React 웹페이지의 대문에는 곧 바로 3등분 된 레이아웃을 발견할 수 있다. 실제로 콘솔창을 열어 확인해 보았을 때도, 페이지마다 일정한 레이아웃을 통해 통일성과 가독성을 높이고 있다. 이러한 문서위주의 웹페이지일 경우, 허술한 레이아웃이 가독성을 매우 저해하기 때문에 이것에 대한 주의가 잘 반영되었다고 생각한다.
