[UI/UX] 사용자 인터페이스(UI) / 사용자 경험(UX) 이해하기!

UI, UX는 무엇을 의미하는가?

 

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

 

사용자가 컴퓨터와 상호작용하는 모든 시스템을 포함하고, 넓게 보면 컴퓨터 화면과 그 주변기기까지 포함된다. 좁은 의미로만 보자면, 그래픽 즉 GUI 를 의미한다. 프론트엔드 개발에 있어서 UI란 주로 이 GUI를 의미한다.

GUI(Graphical User Interface, 그래픽 사용자 인터페이스
GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 말한다.
GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있습니다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미합니다

 

UX(사용자 경험, User Experience)란?

 

즉 사용자가 제품을 사용하며 느끼고 생각하는 총체적 경험을 의미한다. UX는 단순하게 사용이 편리하다는 의미뿐만 아니라, 사용자가 제품을 사용하며 가치를 느끼는지, 매력적으로 느끼는지 등 다양한 기준이 존재한다.  총체적 경험이라는 의미는 제품 하나에 대해 측정하는 것이 아니라, 제품과 관련된 모든 서비스에 대한 사용자 경험을 의미한다. 

 

UI 와 UX의 관계

UX는 UI를 포함한다. 좋은 UI가 반드시 좋은 UX를 제공한다는 보장은 없지만, 나쁜 UI는 나쁜 UX를 만든다.  UI에서 쓸데없는 정보들을 끌어다 화면에 전부 표시하면 사용자가 쾌적한 경험을 느낄 수 있을까? 혹은 엄청나게 화려하고 트렌디한 디자인의 애플리케이션이 있는데, 종작을 제대로 안한다면 좋은 UX를 제공한다고 말할 수 있을까?

 

UI의 디자인 패턴과 레이아웃

좋은 UI를 만들기 위해서 이미 정의된 UI 디자인 패턴과 UI 레이아웃을 활용할 수 있다. 

 

UI 디자인패턴

'패턴'은 프로그래밍시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다. UI 디자인에서 자주 사용되는 UI 컴포넌트 유형이 있고, 필요에 따라 이렇게 만든어진 유형을 참고해 디자인을 할 수 있다.  더 자세히 알아보고 싶다면 여기 를 클릭하세요.

자주 쓰이는 UI 디자인 패턴
모달 / 태그 / 탭 / 자동완성 / 드롭다운 / 아코디언 / 캐러셀 / 페이지네이션 / 무한스크롤 / GNB 등

 

UI 레이아웃

레이아웃이란 구성 혹은 배열하는 그 자체를 의미한다. 화면에 표시되는 여러가지 컴포넌트들이 있을때 이를 보기 좋게 혹은 사용하기 좋게 배치하는 것을 말한다. 웹 디자인에서 UI 레이아웃은 주로 column으로 구분한 세로형 그리드 방식을 사용한다. 이 그리드 시스템은 하나의 웹 페이지를 세로로 쪼개어 몇 개의 컬럼이 들어갈 것인지로 구분하여 레이아웃을 구성하는 기법이다. 

 

웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성됩니다.

Margin은 화면 양 옆의 빈 공간, Column은 컨텐츠가 위치하게 되는 영역 그리고 컬럼 간의 간격을 의미하는 Gutter 가 있다.

Column의 경우 디바이스의 종류에 따라, 휴대폰의 경우 4개, 태블릿 6개, pc 12개로 구성하는 표준이 있고, 반응형 구현을 위해 주로 상대단위를 사용한다. 

 

좋은 UX를 만들기 위해서는?

좋은 UX를 만들려면 무엇을 고려해야 할까?

이 질문에 대한 답은 피터 모빌의 좋은 UX의 기준 7가지를 제시하고 있다. 

유용성, 사용성, 매력성, 신뢰성, 접근성, 검색 가능성, 가치성

6가지의 기준을 충족하면서 7번째, 사용자에게 적절한 가치를 제공하느냐도 중요한 기준이 된다. 

 

User Flow 다이어그램

사용자의 이용 흐름을 다이어그램을 그려서 확인해볼 수 있다. 

 

User Flow 다이어그램 작성법

사용자 흐름을 다이어그램으로 작성할 때, 기본적으로 세 가지 요소를 사용한다. 

1. 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
2. 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
3. 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

 

User Flow 다이어그램 장점

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제할 수 있음