Web Programming/Design

UI/UX & HCI 디자인이란

안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다.

이번 포스트에서는 UI/UX 그리고 HCI에 대하여 정리해 보았습니다.

 

UI (User Interface) – 사용자와 마주하다
- UI는 요약하자면 사용자가 앱을 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분
- 디자인의 구성요소(폰트, 컬러, 줄간격 등) 상세한 요소가 포함
- 기술적인 부분(반응성, 입출력단계, 애니메이션효과 등) 여러 부분을 포함
- UI = 디자인 & 기술

 

 UI예제

예시)
UI는 다양한 사용자가 사용할 수 있도록 보편성을 지녀야 하며 전체적으로 사용에 잇어 큰 불편함이 없어야 한다.
좋은 UI는 대부분의 사용자가 높은 만족도를 가져야 하며 어쩔 수 없이 발생하는 주관적인 불만족을 최소화 시켜야 한다.

 

UX (User Experience) – 사용자의 경험을 반영하다
- UX는 사용자가 어떠한 서비스를 직간접적으로 이용하면서 느끼는 종합적인 만족도
- UX디자인이란 사용자에게 만족스러운 경험을 제공하는 UI 디자인을 말한다.
- 사용자가 만족할 수 있도록 사용자 중심적으로 설계된 디자인
- 객관적인 데이터를 활용하여 더 효과적인 방안을 찾아내는 것

예시)
UX 디자인이란 사용자의 경험과 목표를 이해하고, 그것을 충족시켜줄 수 있는 UI 디자인
더 편하고 효율적인 방향으로 프로세스가 진행 될 수 있도록 하는 과정 또는 결과를 뜻한다.
통계자료 및 데이터를 기반으로 사용자들의 특성을 면밀하게 분석하여 상황과 시점에 맞게 변화하는 디자인

 

사용자가 어떤 시스템, 제품, 서비스를 직.간접적으로 이용하면서 느끼고
생각하게 되는 지각과 반응, 행동 등 총체적 경험을 말한다.

말그대로 사용자들의 본능으로 인해 쌓인 경험을 분석하여 심미성 있고, 실용성있게 재설계하는 연구이다. HCI(Human Computer Interaction) 연구 분야에서 주로 사용 된것으로 알려져 있고, 공학 분야에 한해서 소프트웨어와 하드웨어 개발에서 사용되어 왔다. 하지만 최근에는 컴퓨터공학 분야를 넘어서 프로세스, 서비스, 프로덕트까지도 다시 응용되고 있다. 세상엔 다양한 제품이 나오고 있고, 기능이 구현되어있다. 그로인해 기업들은 기능적 차별보다는 디자인적인 차별을 두기 시작하였다. 하지만 외적인 디자인에서의 한계도 다가오게 되고, 사람들의 편의성을 디자인하기 시작하였다. 그게 바로 인지과학(cognitive science)의 대부인 도널드 노먼(Donald Norman)이 ‘감성디자인’ 에서 언급한 오늘날 UX의 기본적인 개념이 아닐까 싶다.

UX와 UI, GUI를 구분하는 경우 UX는 주로 와이어 프레임으로 화면을 설계하고 사업과 개발 이슈를 점검합니다. UI, GUI는 주로 시각적인 화면 디자인을 담당하며 인터랙션과 마케팅 이미지를 같이 제작하는 경우가 많습니다. 인터랙션 디자인은 규모가 있는 디자인 조직에서 UI 내부에 사용되는 모션만 전문적으로 다루는 직군입니다. 애프터 이펙트와 Framer, 자바스크립트를 이용한 고품질의 프로토타입을 다룹니다. 인터랙션 디자이너는 프로젝트를 진행하기 위해 필수적인 직군이 아니라서 팀에서 따로 위치가 있는 경우는 적습니다. 이 직군이 없을 시 GUI 디자이너가 업무를 담당합니다.

 

UI와 UX의 차이점

문장 말고 단어로 차이를 표현해 보자.

문장이 아닌 단어를 사용하면 더 명확해질 것 같다.

UX는 과정, UI는 결과

UX는 그릇, UI는 음식

UX는 기획, UI는 디자인

UX는 감성, UI는 테크

이렇게 구분해보니 왠지 UX는 감성이고 UI는 이성인 것 같다.

하지만, 그건 범위가 너무 커서 좀 위험하다.

아직도 복잡하다.

역시 문장이 더 좋은 것 같다.

실패는 거절한다.

문장으로 더 구분해 보자.

UX는 안 보이는 것을 연구하는 것, UI는 그것을 보이게 만드는 구체화 작업

UX는 사용자가 느끼는 느낌, 태도, 행동이고 UI는 사용자가 인터페이스를 직접 대면하는 환경

UX는 사용자의 경험에 대한 통계에 기반을 둔 개선 연구, UI는 그 개선 연구를 실제화하는 것.

UX는 보이는 것에 대한 경험, UI는 사용자에게 보이는 인터페이스 그 자체

 

HCI란 HumanComputerInteraction

- 사람과 컴퓨터 사이의 상호작용을 말한다.

- 사람이란 컴퓨터와 모바일을 포함한 시스템을 사용하는 사용자 이며,
컴퓨터는 사용자와 상호작용이 가능한 모든 시스템이다.

- 단순한 화면 상의 인터페이스 뿐 아니라 사람과 시스템 사이의 모든 상호작용(작업 흐름, 특정 요소나 제스처에 대한 모델 등)이 HCI의 대상이 되며, HCI의 연구 흐름이 UI개발에 초점이 맞추어진 것이라고 할 수 있다.

 

 

 

참고그림 http://uidesignguides.com/

용어에 대한 구분은 직종에서 일하는 사람들에게도 어렵다.

UserExperience, 사용자 경험은 User Interface를 포함하고 UI는 GUI를 포함한다.

이 단어들은 초창기 HCI라는 학문과 함께 만들어 졌으며, 도스와 유닉스처럼 그래픽이 없는 UI와
애플 사의 마크2 컴퓨터처럼 이미지로 표현하는 YI를 구분할 필요가 있다.

IT업계에서 사실상 UI = GUI이기 때문에 두 용어는 조직에서 필요한 경우에 구분해서 쓰일 뿐 차이는 없다.

 

HCI 목적

HCI의 기본 목적은 컴퓨터를 좀 더 인간에게 쉽고 쓸모 있게 함으로써 인간과 컴퓨터 간 상호작용을 개선하는 것이다. 즉, 특정 상품이나 제품을 이용하는 사용자에게 최적의 경험(optimal experience)을 제공하는 것이다. 최적의 경험이란 미하이 칙센트미하이(Mihaly Csikszentmihalyi) 교수가 말한 플로(Flow)와 유사한 개념이나 엄밀히 말하면 약간 다르다. 플로는 행위에 깊게 몰입해 시간의 흐름이나, 공간, 더 나아가서는 자신에 대한 생각까지도 잊어버리게 될 때를 일컫는 심리적 상태인 반면, 최적 경험이란 환경적, 외적 조건들에 의해 압도되지 않고 사용자가 행동을 스스로 조절할 수 있으며, 기술과 주고받는 상호작용에서 주인인 듯한 느낌이 드는 순간을 말한다.

최적의 경험을 넘어선 보다 궁극적인 HCI의 목표는 컴퓨터의 도구로서 잠재력을 극대화해 인간의 의지를 보다 자유롭게 하고, 창의력을 증진시키고, 인간 사이의 의사소통과 협력을 증진시키는 데 있다. 인간‒컴퓨터 상호작용 전문가는 대개 HCI 분야에서 개발된 기법들을 실제 현장의 문제에 적용하는 데 관심이 있는 디자이너들이다. 많은 경우에 그래픽 사용자 인터페이스나 웹 인터페이스를 디자인하는 일이 그들의 몫이다. 이에 더 나아가, 인간‒컴퓨터 상호작용 연구자는 새로운 디자인 기법을 개발하거나, 새로운 하드웨어를 시험하고, 새로운 소프트웨어 시스템을 구현해보고, 새로운 패러다임을 찾거나, 모델이나 이론을 개발하고 있다.

[네이버 지식백과] HCI란 무엇인가? (휴머니타스 테크놀로지, 2013. 2. 25., 신동희)

 

HCI가 중요해지는 배경
1) 사용자
-과거에는 소수의 전문가 집단의 영역
 -스마트폰 사용 인구의 증가
 -HCI분야의 연구대상이 늘어남
2) 기술
 -기술의 발전
 -기기들이 작아지고, 모바일화
 -유비쿼터스

 

GUI(Graphic User Interface)GUI(Graphic User Interface)는 사용자가 그래픽을 통해 컴퓨터와 정보를
교환하는 환경을 말합니다.

이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행시켰지만 GUI에서는 마우스 등을
이용하여 화면의 메뉴 중 하나를 선택하여 작업을 수행합니다.

간단하게 GUI는 글자뿐만 아니라 화면에 아이콘을 띄어 마우스를 이용하여 화면에 있는 아이콘을
클릭하여 작업을 수행하는 방식입니다.

대표적으로는 마이크로소프트의 Windows, 애플의 Mac 운영체제 등이 있습니다.

 

HCI원리

좋은 디지털 제품이 무엇인지 따지는 데에 있어서 HCI에서는 크게 세 가지 기준을 사용한다.

  • 유용성 : 사용자가 원하는 목적을 달성해 주는가의 여부.

  • 사용성 : 쓰기 과정이 효율적이고 편리한가의 여부.

  • 감성 : 보기 좋고 제품에 적합한 감정을 유발하는가의 여부.

 

 


UI/UX & HCI 디자인이란 에서는 기초적인
UI/UX와 HCI에 대해 알아보았습니다.

감사합니다.

 

728x90