UX/UI에서 HCI란?_2편
UX분야에서의 HCI의 적용: IOS/Android
HCI와 UX/UI
1편에서는 UX/UI 디자인의 이론적 기반이 되는 학문인 HCI과 HCI의 관점에서 정의한 UX/UI의 개념에 대해 소개하였는데요. 본문에 들어가기에 앞서, 1편에서 다루었던 HCI와 UX/UI의 개념을 한번 더 정리하고자 합니다.
HCI?
HCI는 사람과 상호작용이 가능한 시스템이 사람과 잘 어울려서 주어진 목표를 달성할 수 있도록 이 둘 사이의 상호작용 방법과 절차를 설계하고, 평가하며, 구현하는 분야라고 정의할 수 있습니다.
UX 디자인?
UX는 사용자가 경험하는 시스템 또는 제품, 서비스 등을 만지고 작동해 보고 사용해보아 직접적이나 간접적으로 느끼는 모든 활동을 말하며 사용자 경험이라고도 합니다. 이러한 사용자 경험을 통하여 디자인 하는 것이 사용자 경험 디자인 즉, UX디자인입니다.
UI 디자인?
UI 디자인은 User Interface 디자인으로 사용자 인터페이스 디자인이라고 하는데요. 사용자 인터페이스는 어플리케이션 내에 레이아웃, 버튼, 아이콘 등 화면의 모든 표현 방식이라 할 수 있으며, 기기와 사용자간의 상호작용이 나 커뮤니케이션을 그림으로 나타내는 것이 사용자 인터페이스 디자인 즉, UI디자인입니다.
1편의 자세한 내용은 아래 링크에서 확인할 수 있습니다:)
https://brunch.co.kr/@lyi0922/4
IOS와 안드로이드의 UX/UI 원칙과 HCI
이어서 오늘은 현재 사회적으로 가장 상용화 된 기기인 스마트폰 어플리케이션을 중심으로 HCI가 UX/UI 디자인에 적용된 사례를 분석하고자 합니다. 스마트폰도 PC와 마찬가지로 운영 체제가 있는데요. 이를 Operating System으로 OS라 부릅니다. 모바일 OS는 애플의 아이폰 OS인 iOS와 구글의 OS인 안드로이드가 대표적이며 많은 사용자를 보유하고 있습니다. 따라서 현재 스마트폰 시장을 양분화 하고 있는 아이폰의 iOS와 갤럭시의 안드로이드를 중심으로 HCI의 적용에 대해 살펴보았습니다.
IOS의 디자인 원칙
IOS와 안드로이드의 디자인 목표는 HCI의 관점을 반영하고 있습니다. 즉, 사람과 컴퓨터 시스템의 원활한 상호작용이 이들의 목표에서 공통적으로 드러나있는데요. IOS가 제시한 디자인 목표는 명쾌함, 친절함, 깊이입니다. 명쾌함은 시스템 전체에서 인터페이스 요소들이 명료하게 디자인되어 기능을 정확하게 표현해야 함을 뜻합합니다. 친절함은 사람들이 콘텐츠를 잘 이해하고 상호작용할 수 있도록 시각적 요소의 조화를 이루어야한다는 의미라고 할 수 있습니다. 마지막으로 깊이는 뚜렷한 시각적 순서와 사실적인 움직임을 통해 계층을 전달하고 활력을 부여하여 이해를 촉진함을 말하고 있습니다.
안드로이드의 디자인 원칙
안드로이드에서는 창조, 단일화, 커스터마이즈를 디자인 목표로 내세우고 있습니다. 창조는 기술과 과학의 혁신을 바탕으로 우수한 디자인의 고전적 원칙을 합성하여 시각적 언어를 만드는 과정이며, 단일화는 플랫폼, 장치 및 입력 방법에서 사용자 경험을 통합하는 단일 기본 시스템을 개발하는 과정입니다. 마지막으로 커스터마이즈는 시각적 언어를 확장하고 혁신과 브랜드 표현을 위한 유연한 기반을 제공하고자 함을 의미하는데, IOS와 구분되는 안드로이드의 대표적인 특성으로 볼 수 있습니다.
IOS/안드로이드 어플리케이션과 HCI
이어 구체적인 분석의 단계로는 1편에서 소개한 HCI의 세가지 조건인 유용성, 사용성, 감성의 영역으로 IOS와 안드로이드 어플리케이션의 인터페이스 요소를 분석하였습니다. 1편을 보지못한 분들을 위해 본격적인 분석에 앞서 먼저 유용성, 사용성, 감성에 대해 간단히 소개하겠습니다.
유용성: 사람들이 시스템을 이용해서 하고자 하는 과업을 효과적으로 달성할 수 있는 가를 뜻합니다.
사용성: 시스템을 사용하는 과정이 효율적인지를 따져봅니다.
(유용성은 과업달성을 중심으로 결과에 초점을 두었고, 사용성은 사용과정의 편리성에 초점을 두고 있다는점에서 차이가 있습니다.)
감성: 시스템을 사용하면서 사람들이 마음 속에서 얼마나 적절한 느낌을 받았는지를 살펴봅니다.
IOS: Flow
Flow의 시작화면
IOS 어플리케이션의 대표적 예시로 애플 디자인 어워드의 수상작 중 하나인 ‘Flow’를 선정하였습니다. ‘Flow’는 노트 작성 어플리케이션으로, 강력한 기능과 우아한 디자인을 결합하였다는 평가를 받고있습니다. Flow의 시작 페이지에서 유용성의 영역으로 시작페이지의 레이아웃 구성을 들 수 있는데요. 크게는 어플리케이션의 주요 기능을 설명하는 페이지와 마지막에 회원권에 대한 안내를 제시하는 페이지를 구분하여 레이아웃에 변화를 주고있습니다. 이는 사용자에게 정보의 분류를 시각적으로 제시하여 효과적으로 정보를 전달하는 기능을 합니다.
더 세부적인 레이아웃을 들여다보면 앞서 주요기능을 설명하는 페이지에서는 그래픽 요소인 일러스트와 타이포 요소인 설명의 영역을 색상을 통해 명확히 구분지음으로서 명시성을 높이고 있습니다. 또한 이용권을 제시하는 페이지에서는 일러스트 위에 배치된 흰 박스를 강조하기 위해 배경과 박스 사이에 그림자 효과를 사용하고 있습니다. 사용성의 관점에서는 각 페이지를 넘기는 동작을 하는 버튼의 이동을 주목할 수 있습니다. 하나의 페이지를 넘기는 동안 중앙에 위치한 버튼이 이동하는 대신 주변 그래픽 요소에 변화를 주어 페이지가 이동하고 있다는 정보를 전달하고있는데요. 때문에 사람의 손가락을 이동하지 않아도 쉽게 페이지를 넘길 수 있습니다.
Flow의 메인화면다음으로 Flow의 메인 화면은 유용성을 극대화한 레이아웃으로 구성되어있는데요. 노트작성을 위해 필요한 주요기능을 그림과 아이콘으로 적절히 배치함으로서 많은 기능이 직관적이고 간편하게 정리되어 있습니다. 또한 현재 작업에 집중할 수 있도록 부가적인 기능은 양 사이드에 숨겨져 있습니다. 더 나아가 필기구의 다양한 색상을 포용하기 위해 배경을 블랙과 화이트로 구성함으로서 사용성을 높이고 있습니다.
부가기능을 사용하기 위해 숨겨진 사이드 화면으로 들어갔을 때 메인 화면의 일부분을 보여줌으로서 슬라이드를 통해 메인화면으로 돌아갈 수 있다는 정보를 제시한 것 또한 사용성을 위한 결과라고 할 수 있습니다. 마지막으로 전체적인 색상을 블랙, 화이트, 채도가 높지않은 은은한 색상으로 구성하고, 다양한 펜의 종류와 색상, 많은 용지 옵션을 제시함으로서 노트의 아날로그적인 감성을 자극하고 있습니다.
Android: Owl
Owl의 메인화면안드로이드 어플리케이션의 대표적 예시로 안드로이드 개발자 사이트에서 제시한 어플리케이션 중 ‘Owl’을 선정했습니다. ‘Owl’은 디자인, 예술, 건축 및 패션의 새로운 기술을 탐구하고 배우려는 사람들에게 코스를 제공하는 교육용 어플리케이션인데요, 색상을 이용하여 기능을 분류하고있다는 점이 가장 큰 특징이라고 할 수 있습니다.
Owl은 각각 고유한 색상 테마와 상호 작용이 있는 세 섹션으로 나누어져 있습니다. 개인(노란색), 찾아보기(파란색), 배우기(자홍색)의 각 색상은 각 섹션에 대해 뚜렷한 시각적 테마를 만들어 유용성을 극대화하고 있는데요. 이에 더해 레이아웃의 기능배치와 버튼은 통일성을 주어 혼란을 줄이고 사용성을 높이고 있습니다.
Owl의 색상, 폰트, 아이콘
또한 명도가 높은 색상, 둥근 모양이 반영된 아이콘과 폰트를 사용하여 에너지, 재미와 같은 브랜드의 감성을 표현하고 있습니다. ‘Owl’은 Rubik 서체를 사용하는데, 루빅은 모서리가 약간 둥글고 글꼴 크기가 많은 서체입니다. 아이콘 역시 브랜드 서체 Rubik의 곡선과 스타일을 반영하고 있습니다. 이는 새로운 기술을 배우는 에너지와 흥분을 반영하여 사용자의 감성을 자극하고자 하는 의도를 담고 있다고 합니다.
Owl의 상세화면
이 외에 감성을 자극하는 요소를 살펴보면, 시각적인 요소로 채워지지 않은 모양이 포함되어있어 사용자가 새로운 콘텐츠 및 코스로 채우도록 초대하고 있습니다. 마지막으로 파란색의 메인화면은 다양한 정보를 카드형의 블록으로 정리하고 로딩화면에서 흥미를 유발하는 그래픽을 제공함으로서 지루함을 예방하고 있습니다.
‘감성’의 시대 : UX/UI 디자인의 발전 키워드?
지금까지의 분석을 바탕으로, 제가 개인적으로 발견한 UX/UI디자인의 발전방향 키워드는 ‘감성’이었습니다. 감성의 사전적 의미는 “자극 또는 자극의 변화에 대하여 감각, 지각이 일어나는 능력, 감수성” 인데요. 전통적으로는 감성을 이성에 반대되는 개념으로 인식해왔으나, ‘HCI 개론’에 따르면 최근 HCI 분야의 추세 중에 하나는 감성이 반드시 유용성이나 사용성에 반대되는 개념이 아니며, 오히려 적절한 감성은 유용성이나 사용성을 충족시키는데 없어서는 안될 조건으로 인식되고 있습니다.
또한 1990년대 초반부터 X세대가 사회적으로 점차 세력을 형성해 감에 따라 개인적인 것, 즉각적이고 감각적인 보상의 추구, 지속적인 변화에 대한 요구가 중시되기 시작했는데요. 이는 현재에 이르러 ‘감성의 시대’에 도래하게 됩니다. 감성의 시대에서 사용자는 개개인의 기호나 감성에 대응할 수 있는 시스템을 원하게 됩니다. 이런 흐름에 따라 최근 감성마케팅의 활용은 성공적인 브랜드 마케팅 수단으로 여겨지고 있는데요. 사용자가 브랜드와 감성적으로 연결 될 때, 비록 감성적 연결이 특정 제품에 관한 것이라 하더라도 소비자들은 그 브랜드의 다양한 상품들을 구매하는 경향이 있다고 합니다.
이처럼 급변하는 트렌드와 사용자들의 즉각적인 반응이 중심이 되는 현대사회의 양상을 고려했을 때, 감성은 직관적인 UX/UI디자인에서 중요한 요소라고 할 수 있을 것 같습니다. 사람의 본능을 자극하고 순간적으로 이끌리게 하는 것이 바로 감성의 힘이 아닐까요?
인스타그램의 로고변화UX/UI 분야에서 감성을 중심으로 한 성공적인 디자인의 예로는 인스타그램을 들 수 있습니다. 인스타그램은 기존에 색상과 단순한 색상과 그래픽을 강조하던 ‘플랫 디자인’의 흐름에 반하여 그라데이션을 사용하였는데, 이는 결과적으로 젊은 층의 감성을 자극하는 브랜드 이미지를 형성하는 데 큰 역할을 하게 되었습니다. 이에 더해 사진을 중심으로 한 직관적인 피드 구성으로 사용자의 흥미를 높이고 피로도는 낮추게 됩니다. 현재는 다양한 효과를 사용한 짧은 영상을 제작할 수 있는 기능을 제공함으로서 영상의 분야로 나아가고 있습니다.
지금까지 HCI가 UX/UI디자인에 적용되는 양상을 살펴보았는데요. UX/UI는 사용자를 중심으로 이루어지는 분야인만큼, 사람과 컴퓨터의 상호작용을 분석하는 이론인 HCI와 긴밀하게 연결되어 있음을 알 수 있었습니다. 물론 HCI외에도 다양하고 광범위한 이론들이 UX디자인의 근거로 활용되어오고 있는데요. 이처럼 UX디자인을 단순히 시각적 디자인의 영역으로 접근하기보다는, 그 이면의 다양한 학문적인 이론들도 살펴보면 더욱 근거와 기초가 탄탄한 UX/UI를 설계할 수 있지 않을까 싶습니다.
참고자료)
-김진우, 『HCI 개론』, 안그라픽스, 2005.
-김선형, 「스마트폰 환경에서 국내 주요 포털사이트 애플리케이션 UX·UI 디자인에 대한 연구」 ,학위논문(석사)— 단국대학교 대학원, 2015.
-윤동환, 「모바일 환경에서의 UX디자인이 사용자에게 미치는 영향에 관한 연구 : SNS 어플리케이션 중심으로」 , 학위논문(석사)— 한양대학교 융합산업대학원, 2019.8.
- 배지선, 「스마트폰 어플리케이션 GUI 감성요인 추출에 관한 연구」 , 학위논문(석사)— 울산대학교 대학원, 2012.2.
-애플 개발자 사이트
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
-안드로이드 개발자 사이트
https://developer.android.com/design/handhelds?hl=ko
