UX vs UI (1)
UX와 UI의 차이점과 필요한 스킬셋
한윤석 (두블링 DOBLING, UI/UX 디자이너)
안녕하세요, 현업에서 UX/UI 디자이너로 활동하고 있는 두블링 한윤석(@duddwoff_yoon)입니다.
드디어 첫번째 UX/UI 강의를 시작하겠습니다!
UX vs UI
UX
UX란?
UI와 UX는 무엇을 뜻하고 어떤 차이점이 있을까요? UX/UI의 기초인 UX와 UI의 차이점과 해당 분야에서 취업에 필요한 스킬셋은 무엇인지 알아보겠습니다.
실제로 취준생, 대학생, 주니어 디자이너 분들이 UX/UI디자이너로 취업을 하실때 면접에서 많은 물어볼 질문중 하나가 UX와 UI의 차이점에 대해서 설명해달라는 것입니다. 두가지 개념을 확실하게 알아야겠죠?
UX는 User eXperiece, 번역하면 '사용자 경험' 즉, 사용자가 제품(또는 서비스)을 사용하면서 총체적으로 느끼는 사용자의 경험을 말하는데요, 여기서 사용자 경험이란 무엇일까요?
사용자 경험이란 사용자가 어떠한 제품을 가지고 '행동' 하면서 느끼는 감정, 생각을 말합니다.
캐쳡을 짤때, 리모콘을 조작할때 등 어떠한 제품을 통해 사용자가 행동하는 순간을 경험이라고 합니다. 이러한 경험에서 얻어지는 불편함이 있겠죠?
예를들어 눈이 침침한 할머니가 리모콘의 버튼이 너무 많아서 조작하는데 어려움을 느끼고 있습니다. 실제로 사용하는 버튼은 채널변경, 음량조절, 전원버튼 정도일 텐데 말이죠. 이러한 리모콘을 조작하는 경험을 통해 할머니가 느끼는 감정과 생각은 불편함과 짜증입니다. 결국 할머니는 리모콘 조작 경험에서 짜증나는 경험을 하게 되는 거죠.
리모콘에 실제로 사용하는 버튼 이상의 버튼이 너무 많다는 문제점은 UX심리학이자 사용자에게 주어진 선택지의 갯수와 복잡성에 따라 사용자가 결정하는데 소요되는 시간이 결정된다는 힉스 법칙과 일맥상통합니다.
그래서 위의 애플 리모콘처럼 이러한 불편한 경험을 개선하는 것이 바로 UX 디자이너라 할 역할입니다.
어떠가요? 이해가 쉽게 되시나요?
사용자를 배려하는 것
사용자를 중심으로 설계하는 것
사용자 입장에서 생각하고 공감하며 고민하는 것
이것이 바로 UX입니다.
그럼 UX를 하려면 뭐부터 하면되지?
위 글에 설명한 것처럼 UX를 하려면 어떠한 제품을 경험하는 사용자가 원하는 것, 불편해 하는 것을 알아야 합니다.
그것을 알아내는 방법에는 UX Research가 있는데요, 그것은 나중 강의에서 심도있게 다뤄보겠습니다.
UI
UI란?
UX에 대하여 간단하게 알아보았습니다. 그럼 영어 스펠링 하나만 다른 UI는 무엇을 뜻할까요?
UI는 User Interface로 장치에서 사람과 컴퓨터의 상호 작용 및 통신 지점으로 사용자가 제품(또는 서비스)을 사용하기위해 상호작용하게 되는 제품의 접점입니다.
이미지처럼 실제 사람과 제품이 마주하게되는(터치하게되는) 접점을 뜻합니다.여기에는 디스플레이 화면, 키보드, 마우스 및 데스크탑 모양, 화면의 아이콘, 색상, 폰트 크기, 그래픽, 인터렉션등이 포함될 수 있습니다.
깊게 들어가면 창, 풀다운 메뉴, 버튼, 스크롤 막대, 아이콘 등의 그래픽은 UI중에서도 GUI(Graphic User Interface)에 포함됩니다. GUI의 일부로 멀티미디어 사용이 증가함에 따라 소리, 음성, 모션 비디오 및 가상 현실이 점차 많은 응용 프로그램의 GUI가 되고 있습니다.
위의 이미지는 UI의 발전역사 입니다. 미래의 UI는 어떻게 발전할까요?
현재 애플의 놀라운 VR기기가 나온시점이죠? UI의 미래를 한번 상상해봅시다!
자, 보다 구체적으로 훌륭한 UI의 가장 중요한 요소는 다음과 같습니다.
인터랙티브 디자인: ID의 요소는 사용자 입력 인스턴스를 제공하여 수동적인 독자를 능동적인 참여자로 바꾸는 것을 목표로 합니다. UI를 만드는 동안 사용자를 염두에 두는 것은 사용자 요구를 충족하는 특정 동작의 상호 작용 및 실행을 개선하는 데 도움이 됩니다. 또한 효율적으로 설계된 대화형 UI는 사용자 경험에 부정적인 영향을 미치기 전에 발생할 수 있는 문제를 예상하고 해결하는 방법을 '학습'할 수 있습니다.
예: 소셜 공유 기능, 토글, 버튼
시각적 디자인: 사이트의 미적 가치의 중요성을 과소평가할 수 없습니다. 효과적인 디자인은 색상, 대비, 글꼴, 비디오 및 사진 요소를 활용하여 방문자의 관심을 끌고 콘텐츠 주변이 아닌 콘텐츠를 쉽게 읽고 작업하여 논리적이고 직관적인 기능 흐름을 만듭니다.
예: 대비, 색상, 공백, 타이포그래피, 모바일 최적화
그럼 UI를 하려면 뭐부터 하면되지?
UI를 하려면 UX가 선행되어 '설계'가 먼저 진행되어야 하며 UX로 건물의 골격 구조 설계가 완료되었다면 UI로 골격 구조 설계된 건물에 콘크리트를 붓고 인테리어를 진행하면 됩니다.
UI는 피그마 등의 툴을 통해 실제로 그래픽 작업을 진행합니다.
자세한 내용은 차후 강의에 계속 진행하겠습니다.
다음 강의
UX와 UI가 무엇인지 그들의 차이점은 무엇인지에 대하여 간단하게 알아보았습니다. 다음 강의는 UX vs UI(2)로 UX와 UI의 차이점을 한번더 요약하여 짚고 넘어가고 각 분야의 필요한 스킬셋과 역량이 무엇인지 채용사이트를 직접찾아가며 알아보겠습니다.
