2.UI/UX

 

1. UI/UX의 개념

UI(User Interface), 사용자 인터페이스는 '사람들이 컴퓨터와 상호 작용하는 시스템'으로 정의됩니다. 더 쉽게 예를 들어서 접근 하면 우리가 맥이나 리눅스에서 사용하는 터미널부터 핸드폰의 앱이나 음식점 터치주문기의 아이콘 같은 것 들을  UI라고 할 수 있다.

 

UI의 종류로는 터미널 등의 CLI(Command Line Interface, 명령 줄 인터페이스), 우리가 일반적으로 전자기기에서 다루는 이미지 기반의 인터페이스인 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 총 두 가지의 인터페이스가 우리가 가장 많이 접하는 형태의 UI이다 이 외에도 AUI(Auditory User Interface, 예시로는 각종 컴퓨터 알림음),NUI(Natural User Interface, 각종 터치 기능을 예시로 들 수 있다.) 등의 UI가 있습니다.

 

UX(User Experience)는 UI를 포괄하는 개념입니다. UX는 '사용자가 느끼는 모든 직•간접적인 경험 들의 합' 이라고 정의 할 수 있습니다. 

UI와 UX의 관계는 UI를 자동차의 핸들로 UX는 자동차와 같기에 UI외에도 사용자는 다양한 경험들을 하게 되고 이 모든 것들이 UX에 포함됩니다. 물론 나쁜 UI는 일반적으로 나쁜 UX로 이어지기에 UI는 UX의 가장 중요한 요소라고 할 수 있습니다.

 

2. 우리가 UI에서 알아야 할  것 

 UI디자인 패턴은 자주 사용되는 단골 패턴 등이 있습니다. 이를 UI컴포넌트라고 말 할 수 있는데, 대표적으로 '모달(Modal)',토글(Toggle)','탭(Tab)' 등이 있습니다. 이외에도 자주 사용되는 다양한 패턴들이 있으므로 참고하면 좋을 것 같습니다.

 

이외에 정석처럼 사용되는 그리드 시스템(Grid System)이라는 개념이 있고,  크게 Margin, Column, Gutter 세 가지 요소로 구성 되어 있습니다.. 밑의 이미지를 참고하면 이해하기 좋습니다.

Margin은 화면 양쪽의 레터박스 등의 여백을 말하고

Column은 콘텐츠가 위치하게 될 위치로 미리 구역을 나누어 놓았다고 생각하면 맞습니다. 일반적으로 휴대폰에서는 4개, 태블릿은 8개, PC는 12개의 Coulmn으로 구역을 나눕니다. 보통 상대 단위를 적용하여 컨탠츠를 배열하는데 이러면 브라우저의 크기에 맞추어서 화면을 재조정 하기에 용이합니다.

Gutter은 Column 사이의 공간으로 컨탠츠를 구분 하는데 도움을 줍니다. 적당한 사이즈가 중요하며 Column보다는 작게 설정합니다.

 

우리가 사용하는 대부분의 사이트들이 위의 3가지 요소로 페이지 UI를 구성하므로 직접 비교해서 공부해 보면 좋습니다.

 

3. 좋은 UX를 만들기 원한다면

좋은 UX는 어떻게 만들 수 있을까 고민을 하는 당신!!! 피터모빌(Peter Morville)의 벌집(Honeycomb)모델을 알아봅시다.

이 모델은 '유용성(Useful)', '사용성(Usable)', '매력성(Desirable)', '신뢰성(Credible)', '접근성(Accessible)', '검색 가능성(Findable)', '가치성(Valuable)'의 7가지 요소로 좋은 UX인지 평가합니다. 어떤 요소에 보완이 필요한지 직관적으로 알 수 있으므로 큰 도움이 됩니다.

이밖에도 사용자 흐름(User Flow)를 작성해 보는 방법이 있습니다. 사용자가 이용 할 흐름을 다이어그램으로 직접 작성해보며 사용자의 입장에서 간접적으로 체험해보며 놓칠 수 있는 부분을 보완하여 좋은 UX를 만들 수 있습니다.

소비자의 관점에서 UI/UX는 서비스 기능 다음으로 가장 중요한 핵심 요소입니다.