[HCI] 휴먼-컴퓨터 인터랙션 개론 읽기 pt.1
1장 HCI와 UX, 2장 상호작용 요약 및 적용 (영화 그녀)
들어가며
대학교 2학년 시절 HCI(Human Computer Interaction)이라는 분야를 처음 알게 되었다. 일단 이름이 멋있었다. 검색해 보니 '인간과 컴퓨터 간 상호작용에 대해 연구하는 분야'였고 적당히 추상적이고 적당히 현실적인걸 좋아하던 나는 "이거다!"싶었다. 당시 디자인의 전문성을 의심한 나는 디자인이 특별해지기 위한 방법을 고민했었고 사람과 외부 세계를 연결한다는 측면에서 HCI라면 디자인이 특별 해질 수 있다 믿어 가장 교과서적인 책인 김진우 교수님의 [Human Computer Interaction 개론]이라는 책(그림 1)을 읽기 시작했지만 100페이지 남짓 읽고 과제에 치여 결국 수년간 방치했다.
그림 1. 바로 이 책이다. 출처:블로그, 게임 UXUI매거진그 후 시간이 지나 나는 졸업 유예상태로 HCI와는 큰 관련 없는 직무를 하며 다양한 성격의 프로젝트를 수행했다. 일을 하며 내가 진정 원하는, 강한 모티베이션을 느끼는 일을 탐색하고자 했고 그건 아직도 시도 중이다. 그러던 중 예전에 사둔 이 책이 생각났다. 대학원 진학을 고려 중인 시점에서 HCI분야를 스터디를 한다는 생각으로 2일에 한 장씩(총 15장이다) 책을 읽고 책 내용이 요약하고 활용한 글을 브런치에 작성하기로 했다. 읽은 내용이 휘발되는 경험이 이미 숱한 바, 이번에는 제대로 기억하고자 책에서 쉽게 전달하고자 쓰인 방법인 "내용에 적합한 영화"를 선정해 개념들을 적용해 내용을 정리하고자 한다. 한낱 남루에 지나지 않은 내 머리가 부디 이 훌륭한 책의 절반은 기억하길 바란다...
선정영화
일상의 미래 기술을 보여주는 영화 "그녀(Her)"
먼저, 첫 선정 영화는 스파이크 존스의 [그녀]이다. 일단 내가 좋아하고 친숙한 영화를 활용하는 게 좋겠다는 게 첫 번째 선정 이유이다. 두 번째 이유는 미래 기술의 현실적 적용 방식이 돋보여서이다. 보통 Sci-Fi 영화에 등장하는 기술들은 하늘을 날아다니고 인조인간을 만드는 등 원미래 기술 중심이고 그 기술이 마치 PPL홍보를 하는 제품처럼 영화 내용 전면에 강조되어 보인다. 한편으로는 너무 이상화된 이미지를 통해 "미래성"을 부자연스럽게 표현되기도 한다(그림 2). 하지만 이 영화에서는 이미 일상에 흡수된 듯 매우 자연스럽게 활용되고 있다. 일상에 이미 깊이 자리 잡아 자연스럽게 쓰이는 제품이야말로 가장 이상적인 프로덕트이지 않을까 싶다.
그림 2. Sci-Fi영화들이 미래를 상상한 모습이 어색하다는 점에서 Frutiger Aero적이라고 할 수 있겠다. 출처: 아사달1장
HCI와 UX
주요 내용
HCI와 UX의 의미
사용자인터페이스 / 인터랙션 / UX의 관계
최적의 UX를 위한 조건
1-1. HCI란 무엇인가?
HCI(Human Computer Interaction)란, 다양한 디지털 기술을 이용해 개인 또는 집단의 사람들이 최적의 사용경험을 할 수 있는 방법과 원리를 연구하는 분야이다. 과거에는 전문가들이 사용하는 컴퓨터 장비였고 이후에는 PC, 현재에는 모바일 핸드폰 등 소형화를 거쳐 일상 이곳저곳에 컴퓨터 시스템이 있다. 디지털 시스템 사용자가 전문가에서 일반인으로 바뀌면서 사용경험이 쉽고 재미있게 만드는 것이 중요해졌다. 얼마나 유용하고 편하고 재미있게 사용자가 쓸 수 있는지가 제품의 성공에 핵심이 되었다. (p.19)
1-2. 사용자인터페이스와 인터랙션 그리고 사용자 경험은 무슨 관계인가?
인터페이스(Interface)는 도구이고 인터랙션(Interaction)은 행동, 그리고 사용자 경험(User Experience)은 목표이다. 그리고 이 세 가지 요소를 아우르는 게 HCI라 말할 수 있다.
인터페이스 (도구) : 디지털 시스템과 사람사이에는 일반적으로 입력/출력 장치가 있고 일반적으로 이러한 장치를 사이에 두고 상호작용이 이루어진다. 이 중 사람과 접촉하는 입출력 장치를 인터페이스라 부른다. 핸드폰의 UI나 효과음등이 이에 해당되고 상대적으로 사용자와 접하는 시간이 짧다.
인터랙션 (행동) : 인터랙션은 입출력 장치를 매개로 사람과 컴퓨터 간의 의사소통을 하는 행위이다. 시지각적 인터페이스를 가지고 상호 소통을 하는 등 행위에 관한 상호작용을 인터랙션이라 한다. 눈에 보이는 화면뿐만 아니라 그 안에서 사람의 행위까지 포함한다.
사용자 경험 (목표) : 사용자 경험은 일상에서 사람이 컴퓨터와 상호작용할 때 축적되는 모든 기억과 감정이 포함된다. 사용 전이나 사용 중 그리고 사용 후에 일어나는 사용자의 감정, 신념, 선호도, 지각, 신체 정신적 반응이나 행동을 포함하는 넓은 개념이다. 경험은 주관적이고 총체적이며 맥락적인 속성이 있다.
위 세 가지 요소가 결코 분리된 개념이 아니다. 인터페이스가 기본 되어 그 위에 인터랙션이 일어나며 이게 모여 사용자 경험을 축적시킬 수 있다. (p.23)
1-3. 최적의 UX를 위한 조건은 무엇인가?
최적의 경험이란 계속 그 경험을 하고 싶고(1) 그 일에만 집중하고(2) 각별한 관심을 가지게(3) 되고 그 경험을 하는 것을 즐기는(4) 것이다. 이러한 네 가지 상태가 되게 하는 경험을 제공하기 위해서는 유용성, 사용성, 감성이라는 세 가지 조건이 있다. 이와 비슷한 맥락에서 도널드 노먼 또한 제품디자인에 관해 사고적 디자인(반성적)/행동적 디자인/ 본능적 디자인이라는 세 가지 디자인을 제시한 적 있다. 사고적 디자인은 지적 자극을 줄 수 있는 디자인이고 행동적 디자인은 편리함에 중점을 둔 디자인이고 본능적 디자인은 직관을 중시한 감성적, 감각적 디자인을 말한다. (p.27)
도널드 노먼 선생님의 [감성 디자인]에서 여행지의 추억을 상기시켜 주는 에펠탑 기념품도 사고적(반성적) 디자인의 예시로 제시되었다. 출처:이베이(RealHearts4 Autism)그럼 유용성/사용성/감성이라는 세 조건에 대해 조금 더 알아보자.
유용성(Usefulness) : 유용성은 일을 효과적으로 달성할 수 있는 것으로 기능성과 같다고 할 수 있다. 가령 브런치에 글을 쓰는 상황에서 사진을 첨부하기도 하고 단락을 나누기도 하는 등 글을 쓰기 위해 다양한 기능을 활용한다. 브런치 또한 적절한 유용성이 확보해 쾌적한 글쓰기 경험을 제공한다고 할 수 있다.
사용성(Usability) : 사용성은 사용하는 과정의 효율성이다. 효율성이란 적은 노력으로 목적을 달성하는 것을 말한다. 유용성과 구분이 어려울 수 있다 하지만 유용성은 목적을 충족하기 위해 얼마나 편의를 제공하는가에 방점이 찍힌다면 사용성은 그 과정의 효율을 의미한다.
감성(Affect) : 감성은 대상을 보고 느끼는 미적 인상과 정서, 대상에 대한 개성을 포함하여 사람들의 마음속에 얼마나 적절한 느낌을 받았는지를 의미한다. 일반적인 의미에서 사람들이 디자인에 기대는 것과 같다 할 수 있다. 다만, 과거에는 감성을 기능과 분리된 개념으로 해석했다면 현대에는 감성도 유용성과 사용성을 충족시키는데 핵심적인 기능을 제공하는 등 필수조건으로 인식한다.
위 세 조건이 조화를 이뤄야 최적의 UX를 제공할 수 있다. (p.31)
영화 그녀(Her)의 장면 : 편지 대필 장면
편지 대필 프로그램 인터페이스1-1. HCI란 무엇인가?
주인공 테오도르의 직업은 손글씨 편지 대필가이다. 고객 정보를 바탕으로 고객이 만족할만한 편지 내용을 구상하고 작성해 실물 종이 편지로 제작해 주는 일이다. 이때 주인공은 컴퓨터 시스템의 도움을 받는다. 이 과정에서 컴퓨터와 상호작용을 하며 원하는 결과물을 얻게 된다.
1-2. 사용자인터페이스와 인터랙션 그리고 사용자 경험은 무슨 관계인가?
인터페이스 (도구) : 영화의 "편지 쓰기 시스템"은 디스플레이스로 보이는 시각적 인터페이스와 보이스 인터페이스를 활용한다. 위 장면에서 보이는 인터페이스를 보면 텍스트의 색과 굵기 등을 지정하기도 하고 고객의 기본 정보와 사진 또한 확인할 수 있다. 시스템과 사용자를 연결해 주는 이 모든 요소들이 인터페이스이다.
인터랙션 (행동) : 사용자는 자신의 보이스로 편지를 써 내려가며 그 과정을 실시간으로 디스플레이에서 확인한다. 쓰고자 하는 편지 내용에 부합하는 서체를 선택하기도 하고 고객의 과거 사진들을 보며 편지 내용을 구상하기도 한다. 마지막으로 인쇄 명령을 통해 종이 편지로 인쇄하기도 한다. 이러한 인터페이스와의 접점을 오가는 행위들이 인터랙션이다.
사용자 경험 (목표) : 인터랙션 과정에서 발생한 행동들의 종합이 결국 사용자 경험이 된다. 사용자인 주인공은 익숙한 듯 매끄럽게 편지 한 장을 작성하고 빠르게 검토 후 바로 수정본을 작성한다. 영화에서 드러난 평가가 없지만 불편한 것도 없고 새로울 것도 없는 업무의 과정으로 보여서 그냥 So-So 한 사용자 경험이라 할 수 있겠다.
1-3. 최적의 UX를 위한 조건은 무엇인가?
"편지 쓰기 시스템"은 좋은 UX를 위한 조건을 조화롭게 담고 있다.
유용성(Usefulness) : 기본적으로 고객의 정보를 디스플레이에서 확인하고 목소리로 실시간으로 편지를 쓰게 해 준다는 부분에서 매우 유용하다.
사용성(Usability) : 심리스 하게 보이스로 바로 출력할 수 있다는 점에서 높은 사용성을 보여준다. 또한 사용자가 자신의 감정을 담아 편지를 말로 표현하면 실시간으로 편지를 받아 적는 기능 또한 시간과 오류 가능성을 줄여준다는 점에서 좋은 사용성을 제공한다.
감성(Affect) : 물리적인 종이 질감이나 필기체 서체 등 극 중 편지 대필은 "더 사람 냄새나게"만드는 것이 핵심이다. 이런 부분에서 "편지 쓰기 시스템"은 감성적인 부분에서도 목적에 충실하다.
2장
상호작용
주요 내용
상호작용의 의미
성호작용의 종류/절차/수준
상호작용의 행위와 스타일 그리고 추세
2-1. 상호작용이란 무엇인가?
"상호작용"은 학문별로 다양한 의미로 다음과 같다. (p.49)
사람 간의 상호작용 - 사회학
사람과 콘텐츠 간의 상호작용 - 커뮤니케이션학
사람과 시스템 간 상호작용 - HCI
디지털 시스템이 발전하며 현대에는 남녀가 교제하는 것과 같이 복잡한 상호작용을 한다. 상호작용하는 과정을 절차로 정리하면 상호작용은 [표명-변환-표현-평가]의 4단계를 거친다.
표명 단계 : 시스템이 제공한 정보를 바탕으로 사용자가 목표를 구체적으로 명료화하는 과정.
(ex. 음악 감상 사이트에 들어간 사용자가 오늘 가장 인기 있는 곡을 알게 되는 것으로 목표가 구체화되는 것)
변환 단계 : 사용자의 입력이 적절히 컴퓨터가 받아들이는 과정.
(ex. DVD플레이어에 4배속 재생 기능이 있지만 리모컨에 없어 사용할 수 없는 경우 변환 단계에 문제가 있는 것임)
표현 단계 : 시스템의 정보를 사용자에게 출력해 표현하는 과정.
(ex. 음악 플레이어에서 사용자가 선택한 곡의 앨범 커버를 보여주고 재생시간을 표현함)
평가 단계 : 사용자가 결과를 확인하고 평가/비교하는 과정.
(ex. 음악 플레이어에서 사용자가 재생한 음악이 본인이 선택한 음악이 맞는지 평가함)
위 4단계를 거쳐 사람과 시스템은 상호작용(Interaction)을 한다. 상호작용의 내용과 범위가 많아지게 되면서 그것을 사용하는 사람의 경험도 풍부해지게 되었다.
음악 스트리밍 서비스인 스포티파이의 재생 인터페이스로 상호작용의 4단계를 경험할 수 있다. 출처 : 본인2-2. 상호작용의 종류와 요소에는 무엇이 있을까?
2-2.1. 상호작용의 종류
상호 작용에는 크게 4가지 종류가 있다. 내용의 전달의 주도권을 사용자와 사업자 중 누가 가지느냐에 따라 분류할 수 있다. (p.53)
전송형 : 사업자가 전적으로 편집권을 가지며 사용자는 수동적으로 정보를 받아들이는 입장이다.
(ex. TV생방송)
등록형 : 사용자가 내용을 만들지만 상호작용 과정은 운영자를 통해 이루어진다.
(ex. 이베이와 같은 인터넷 경매 서비스)
문의형 : 상호작용 내용은 사업자가 만들지만 그 전달은 사용자가 맡는다.
(ex. 전자책 서비스)
대화형 : 내용과 전달 모두 사용자가 능동적으로 수행한다.
(ex. 트위터나 마이크로 블로그 서비스)
2-2.2. 상호작용의 세부 요인
과거에는 상호작용의 정도를 높고 <--> 낮음 정도로 측정했다. 하지만 단순히 피드백이 오가는 정도 측정으로는 상호작용을 파악하기 힘들어 총 4가지 세부 요인으로 상호작용을 평가한다.(p.56)
상호성 : 인터랙션의 가장 기본적인 개념으로 양방향 커뮤니케이션 정도를 의미한다.
(ex. 인터넷방송의 실시간 채팅)
반응성 : 시스템의 응답이 얼마나 사용자의 의도에 부합하는가를 의미한다.
(ex. 스팸메일은 반응성이 낮다고 할 수 있음)
신속성 : 상호작용의 반응이 얼마나 즉각적이고 지연이 없는지를 뜻한다. 또한 동시에 여러 내용을 전달할 때도 사용한다.
(ex. 빠른 인터넷망을 사용하는 것 )
다중성 : 얼마나 다양한 모드의 정보(시각, 촉각, 청각 등)를 제공하고 제공받을 수 있는지를 의미한다.
(ex. 이동통신 서비스가 갈수록 다양한 감각의 정보를 제공하는 추세임)
통제성 : 정보의 순서와 내용, 시간을 사용자가 조종할 수 있는 정도를 의미한다.
(ex. 내용 통제 - 위키피디아 / 시간 통제 - 생방송과 유튜브)
본인이 즐겨 쓰는 나무위키. 위키 형식은 내용의 통제권을 사용자들이 가지고 있다. 출처 : 본인2-3. 상호작용 행위와 스타일에는 무엇이 있을까?
상호작용 행위는 사용자가 디지털 시스템과 상호작용하면서 수행하는 행동을 뜻하며 상호작용 행위는 총 5가지 유형이 있다. 한편 상호작용 스타일은 이러한 행동을 가능하게 하기 위해 시스템에서 제공하는 반응의 유형을 의미한다. 상호작용 스타일도 5가지로 구분할 수 있다. 5가지 행위에 5가지 스타일을 매치해 설명하고자 한다.(p.61)
지시하기(행위) - 명령어(스타일)
지시하기(Instructing)는 상호작용의 방향이 일방적이어서 사용자가 시스템에 명령하면 그대로 수행만 하는 경우를 뜻한다. (ex. 자동 커피 판매기에서 커피를 뽑는 경우) 이러한 행위에 적합한 스타일은 명령어 스타일이다(ex. 윈도의 실행창). 명령어 스타일은 일관된 설계가 중요하며 초반 명령어 학습과 지속적인 기억이 어렵다.
이야기하기(행위) - 대화형(스타일)
이야기하기(Conversing)는 사용자와 시스템이 서로 대화하는 행위를 뜻한다. 이때는 대화형 스타일을 사용하여 사람과 시스템이 질문과 대답을 주고받으며 인터랙션을 해 나가는 방식이다. 이때 대화 스타일에는 질의응답형, 양식형 그리고 자연어형이 있다(ex. 프로그램 설치 과정 대화창). 이때 질의응답과 순서가 중요하다(ex. 현금 지급기에서 카드를 뽑아야 현금을 주는 등).
탐색하기(행위) - 메뉴(스타일)
탐색하기(Browsing)는 사용자가 다양한 정보를 둘러보고 원하는 것을 선택하는 행위를 뜻한다. 탐색하기에 가장 적합한 스타일은 메뉴이다. 메뉴 스타일은 사용자에게 여러 대안을 제시하고 선택하게 한다(ex. 맥 OS 상단 메뉴바). 이때 사용자가 정보를 탐색하며 알아가는 과정을 즐겁게 해줘야 하고 복잡한 정보 속에서 헤매지 않게 해줘야 한다.
맥 OS도 탐색하기 - 메뉴 스타일에 해당한다. 정보를 구조화해 둘러보고 선택하게 한다. 출처 : 본인조종하기(행위) - 직조작(스타일)
조종하기(Manipulating)는 사용자가 자기가 가지고 있는 지식을 기반으로 대상을 스스로 조종하는 것을 뜻한다(ex. 밸프사의 게임인 하프라이프의 고든 프리먼). 직조작 스타일이 이 행위에 가장 적합하다. 사용자가 대상을 직접 조종하고 있다고 느끼게 해야 한다. 이를 위해 대상이 항상 눈에 보이고 조작 결과가 바로 나타나야 한다.
위임하기(행위) - 대리인(스타일)
이임하기(Deligating)는 사용자가 직접 수행하기 어렵거나 귀찮은 일을 시스템에 위임하여 시스템이 자율권을 갖고 작업을 수행하는 것을 말한다. 이 경우 적절한 상호작용 스타일은 대리인 스타일이다(ex. 온라인 서점 시스템의 책 추천 시스템).
위에서 제시된 다섯 가지 행위와 스타일들은 상호배타적이지 않고 동시 병형적으로 진행될 수 있다는 것을 기억해야 한다. 그 대표적인 예시로 자동차 내비게이션 시스템이 있다.
영화 그녀(Her)의 장면 : 비디오 게임 장면
퇴근 후 테오도르는 집 거실에서 홀로그램 비디오 게임을 즐기곤 한다.2-1. 상호작용이란 무엇인가?
장면에서 보이는 상호작용은 전형적인 비디오게임과 유사하다. 근데 이제 핸드 제스처도 적극적으로 쓰이고(컨트롤러가 없다) 거실 공간 전체에 홀로그램으로 상을 띄워서 플레이고 심지어 매우 자연스러운 대화도 가능하다. 영화의 배경이 2025년(현재 기준, 1년 뒤이다!)이라 먼가 미래적인 기술들이 쓰이는데.... 책이 제시한 개념 기준으로 인터랙션을 분석해 보자!
먼저 상호작용의 4단계이다.
표명 단계 : 장면에 등장하는 시스템은 게임이다. 모험을 하고 무엇인가를 찾는 어드벤처 게임으로 보인다. 사용자는 자신이 무엇을 원하는지 시청각 단서로 파악하며 미션을 수행한다.
변환 단계 : 사용자는 마치 걷는듯한 모션을 양손가락으로 취해서 캐릭터를 조종한다. 또한 욕쟁이 캐릭터와는 실시간 대화를 통해 데이터를 입력하게 된다.
표현 단계 : 사용자의 입력을 받은 게임은 그에 상응하는 표현을 한다. 주인공 캐릭터가 앞으로 전진하거나 넘어지기도 하고 욕쟁이 캐릭터가 input문장에 적절히 대응하기도 한다.
평가 단계 : 게임의 목적은 외로움이나 심심함을 달래는 유희적 목적일 것이다. 영화에서 사용자는 소기의 목적을 달성했다!
욕쟁이 캐릭터다. 매우 귀엽다. 출처 : SCIENCE FICTIONAL2-2. 상호작용의 종류와 요소에는 무엇이 있을까?
상호작용 종류
장면에 등장하는 비디오게임은 대화형 상호작용을 한다. 게임 내 캐릭터를 직접 조종하여 내용을 만들고 손가락 컨트롤과 보이스를 활용해 전달한다. 심지어 욕쟁이 캐릭터는 주인공의 OS친구인 사만사에게 뚱뚱하다고 말하기도하고 사진을 볼 수 있는 등 주변 환경을 감지할 수 있다.
상호작용의 요인
상호작용의 요인은 아래 5가지이고 각 요인의 정도의 차이가 있지만 적절히 장면에 반영되었다.
상호성 : 게임이라 그런지 극강의 상호성을 보여준다. 주인공이 움직이는 대로 시뮬레이션 캐릭터가 움직이고 음성에 실시간으로 반응한다.MS의 Kinect과 같이 모션을 감지하는 기기가 사용된것으로 보인다.
반응성 : 인터랙션의 측면에서 높은 반응성을 보여준다. 만약 사용자가 의도하지 않은 반응이 출력되었다면 그건 게임의 목적이 일종의 "퍼즐"이기 때문일 것이다.
신속성 : 아주 빠른 피드백을 보여준다.
다중성 : 시각과 청각 피드백을 위주로 받는다. 사용자는 핸드모션으로 인풋을 넣는 게 인상 깊다.
통제성 : 큰 플롯은 제시되겠지만 [젤다의 전설 야생의 숨결]처럼 높은 자율도의 게임으로 보인다.
2-3. 상호작용 행위와 스타일에는 무엇이 있을까?
조종하기(행위) - 직조작(스타일)
이 행위와 스타일은 아마 VR에 대한 논문에 자주 등장하는 현존감과 유사한 특징이 있는 것 같다. 사용자가 대상을 직접 조작하고 있다고 감각하는 것이 핵심으로 보인다. 그런 점에서 이 장면에 가장 부합하는 행위/스타일 아닐까 한다. 그리고 이러한 특징은 가상 환경을 가진 대부분의 게임에 적용될 것이다.
