[상호작용]interaction에 대한 고찰

02 Mar 2020

Reading time ~9 minutes

상호작용 오늘은 너다.

너와 나의 연결고리! 너와 나의 상호작용! 앞서 ‘인터페이스’ 란 도구가 최적의 ‘사용자 경험’ 이라는 목표를 이루기 위해서는 시스템과 사용자 간의 효과적인 ‘상호작용’ 이 필요하다.

그렇다면 상호작용을 한다는 것은 무엇인가?

너와 나는 의사소통을하고 교류를 한다. 이것도 물론 상호작용이다. 하지만 이는 우리가 보통 이야기하는 ‘사람 간의 상호작용’ 이고 HCI에서 이야기하는 상호작용은 보통

‘사람과 시스템 간에 발생하는 일련의 여러 절차’ 를 의미한다.

하지만 요즘 세태를 보아하니 디지털 시스템 내에서도 서로 댓글도 남기고 채팅도 함으로써 ‘사람 간의 커뮤니케이션’이 이뤄지고 있다고 무방할 것이다. 즉 요즘은 시스템을 이용해서 대부분의 상호작용이 일어나고 있다고 봐도 무방할 것 같다.

————

1. 상호작용은 어떤 절차가 있는가?

사용자 –> 표명단계 –> 입력장치(Input) –> 변환단계 –> 컴퓨터 –> 표현단계 –> 출력장치(Output) –> 평가단계 –> 사용자

표명단계(acticulation) : 사용자가 특정 목적을 가지고 시스템을 접했을 때 시스템 정보 내에서 자신의 목표를 구체적으로 명료화 시키는 단계
변환단계(performance) : 사용자로부터 받은 입력을 시스템의 정보 처리 장치로 변환하는 단계
표현단계(presentation) : 시스템의 반응을 출력하여 도구로 전환하는 단계
평가단계(observation) : 사용자가 인터페이스에 나타난 출력 결과를 보고 자신의 목표와 비교하여 평가하는 단계

예를들어 설명한다. 여기 사용자 A가 있다.사용자 A는 급격히 늘어난 미세먼지와 유행하는 바이러스를 차단하기 위해 마스크를 사려고 한다. 현재 코로나 상태로 마스크 구매가 하늘에 별따기 이다..

마스크가 어쩌다 이렇게 품귀한 물건이 되었는가

표명단계(Articulation)

A는 마스크 판매 사이트에 접속하였다. 마스크 판매 사이트에서는 다양한 종류의 마스크를 판매하고 있다. 사용자 A는 초미세먼지와 바이러스 차단을 위해 KF80이상이 되는 마스크를 사야했기에 일반 마스크와 비교해가며 KF80이상이 되는 마스크만을 집중하여 살펴 보고 사고자 하는 품목을 선택하여 구매하기 버튼을 눌렀다.

중요 : 사용자의 목표와 시스템이 제공하는 정보가 얼마나 일치하고 찾는 과정이 용이한지 확인하기

마스크 꽤나 종류가 다양하다...패션도 다양하다....와 ㅇ

입력장치 (Input)

선택된 마스크 품목들을 모두 선택하여 ‘구매하기’ 버튼을 눌러 바로 구매하는 단계로 넘어간다.

중요: 사용자에게 제시되는 결제창의 기능이 시스템을 잘 반영하는지 번거롭지 않은지 살펴보기

변환단계(Performance)

사용자 A의 ‘구매하기’ 데이터베이스에는 A가 선택한 마스크 품목이 모두 기재가 된다.

중요 : 사용자에게 제시되었던 기능과 시스템의 기능이 얼마나 일치하는지 살펴보기

표현단계(Presentation)

사용자 A의 구매상황에 맞게 결제 창으로 띄워준다.

시스템의 표현하는 기능과 정보를 출력장치가 얼마나 잘 표현하는지 살펴보기

자 시스템이이시여, 결제를 표현하자!

출력장치(Output)

결제창에 사용자 A가 품목, 카드번호, 이메일주소 입력 창 등의 다양한 정보를 기입하도록 한다.

중요 : 시스템이 사용자의 반응에 대한 결과물 그리고 요구사항에 대한 출력이 얼마나 잘 묘사되어 있는지 살펴보기 (결과물을 시스템 측면에서 바라보기)

평가단계(Observation)

사용자 A는 결제창의 각 항목을 살펴보고 이에 알맞게 기재한 후, 카드결제를 진행하여 결제를 마무리한다.

*중요 : 사용자가 이해하고 평가하기 쉬운 형태로 시스템의 결과를 제시하고 있는지 살펴보기 (결과물을 사용자 측면에서 바라보기)

결제 완료 메시지 + 결제 내역보기 까지 를 평가하기 항목임

2. 상호작용의 종류에는 무엇이 있는가?

상호작용이라고 그냥 교류만 하면 되는 것이 아니다. 다 종류가 있다. 일방통행이냐 양방통행이냐. 누군가의 통치하에 있냐. 이런 것들이 세상의 이치처럼 다 존재하기 마련인 것이다. 초코케이크 처럼 정확히 조각을 나눌수는 없어도 이러한 종류가 있구나. 라는것을 알고 넘어가면 좋을 듯 하다. 실생활에선 융합된 형태의 다양한 모습이 많이 벌어지고 있으니까…너무 심각하게 분류하려 하지마시길..

1) 전송형 (transmission) : 상호작용과 모든 편집권을 사업자가 가지고 주도. 일방성. (예) 인터넷 강의, 생방송, TV

2) 등록형 (registration) : 상호작용의 진행자는 사업자,운영자 이지만 서비스 내에서는 개별 사용자가 상호작용 콘텐츠 만듦 (예) 네이버판매, 일기앱,기록앱

3) 문의형 (consultation) : 상호작용의 내용은 사업자가 만들지만 내용 전달 과정은 개개인의 사용자가 맡음. (예) 전자책, 해피캠퍼스

4) 대화형 (conversation): 상호작용과 관련된 모든 과정을 사용자가 주도적으로 진행함. (예) SNS, 블로그, 트위터

2)과 4)의 차이를 모르겠어요

2)은 개개인의 사용자들의 권한이 좀더 제한된 공간 내에서 일어나는 개념이고 4)은 개개인의 사용자들이 서비스의 주인이 되는 것을 의미함. 즉 2)보단 4)에서 사용자들이 좀더 강한 권한을 갖고 있음.

3. 어떤 수준의 상호작용 인가?

상호작용이 많다? 적다?. 그냥 이렇게 말하기엔 너무나 모호하다. 시스템과 상호작용이 많고 적은 것을 따지고 보면 그냥 이 시스템을 잘 쓰냐 안쓰냐 정도일테니까. 그래서 좀만 더 수준을 나눠 봐보자면 상호성, 신속성, 반응성, 다중성, 통제성 으로 나눠볼 수 있다. 이러한 수준을 보는 것이 중요한 이유는 각 수준의 정도에 따라 기획하고자 하는 서비스의 모습이 여러 방면에서 상호작용이 매우 높은 상태가 될 수도 있고 아닐 수도 있다. 사용자를 고려하여 적절한 수준의 상호작용을 잘 디자인해보아야 한다.

상호성 (reciprocity) 일방적인 시스템이 아니라 사용자와 시스템이 양방향 상호작용이 얼마나 일어나는지를 보는 것이다. 워낙에 기본 조건이다. 보통 얼마나 자주 발생하는지 의미하는 경우가 많다.
신속성 (speed of response) 상호작용이 얼마나 즉각적인지를 의미한다. 보통 동시성이라는 의미로도 사용되며 실시간 서비스 인경우, 이 요소를 중요하게 보는 경우가 많다. 시스템 개발시 사용자를 고려하여 지연을 낮추기 위한 부단한 노력도 다 이 신속성을 맞추기 위함이다..
반응성 (responsiveness) 시스템과 상호작용하는 사용자에게 시스템 반응이 얼마나 적절하게 제공되고 있는지를 의마하는 지표이다. 반응성이 높은 상호작용인 경우 사용자가 원하는 내용으로 관련성 높은 주제를 지속적으로 진행하여 사용자 만족도를 높이는 경우가 많다. 보통 이 반응성이 높은 경우, 사용자 경험 및 만족도가 빠르게 올라가기도 한다.
다중성 (multiple node) 한번에 얼마나 다양한 정보를 제공하고 받을 수 있는지를 의미하며 시각,청각,촉각 등의 여러 감각적 채널의 쓰임에 있어 다중성이 중요도를 차지하고 있다.
통제성 (limitation) 상호작용에 있어서 사용자가 정보의 순서, 내용, 시간을 조종할 수 있는 정도를 의미한다. 통제성이 높아 조정할 수 있는 부분이 적은 서비스가 있는 반면 통제성이 낮은 서비스는 사용자가 변경가능한 부분이 큰 경우도 있다. 통제성은 내용을 조정하거나, 시간을 조정하는 권한의 정도와 연관이 있다.

4. 상호작용의 행위와 스타일을 알아보자!

모든 것에는 다 스타일이 있고 그에 따른 행위가 있다. 이번에는 상호작용의 스타일과 행위를 알아봄으로서 자신의 서비스나 제품에 어떤 스타일의 상호작용을 디자인할지 함께 고민해보는 시간을 갖도록 해 본다. 물론 여러 스타일이 짬뽕되어 디자인 가능하니 꼭 한가지만 하겠다는 마인드는 버리도록 하자! 요즘이 어느시대인데 ~

기본 뼈대는 비슷해도 스타일은 다르다!

(1) 지시하고 명령하는 스톼일 :D

사용자는 시스템에게 명령어 스타일(command entry style) 상호작용을 사용하여 특정 행위를 지시(instructing)한다. 즉 사용자가 어떤 일을 수행하기 위해 디지털 시스템에게 어떤 작업을 지시하면, 시스템은 주어진 명령을 그대로 수행하기만 하는 것이다. 아주 그냥 노예같은 시스템이다. 아주 흔히 볼 수 있는 ATM, 자판기 같은 것들이다. 좀더 발전된 형태로는 vim, excel 같은 에디터도 있다.

장점 : 명렁어만 익숙해지면 시스템을 쉽게 사용할 수 있음.
단점 : 명렁어 익숙해지는게 어려움. 기억의 한계.

명령어만 익숙하면 코딩에 엄청난 효율을 가져다 준다만..

(2) 이야기하고 대화하는 스톼일 :D

대화형 스타일(dialog style)의 상호작용을 사용하여 이야기하기(conversing) 행위를 하는 스타일 이다. 즉 사용자가 시스템과 대화하고 시스템은 사람과 대화 상대가 된다. 뭐 진짜 대화하는 것이냐고? 그럴수도 있고 아닐 수도 있다.

쉽게 알 수 있는 대화형 스타일은 질의응답형, 인스톨 과정에서 “~하시겠습니까?” 라고 나오는 거를 생각하면 된다. 여기서 중요한 것은 질문과 응답 순서에 관한 것인데, 질문과 응답 순서가 제대로 기획되지 않으면 HCI측면에서 많은 손실을 야기할 수 있다. 한꺼번에 많은 양의 질문이 필요할 땐 그냥 설문지형으로 가는게 맞다.

솔직히 이게 대화냐;; 거의 반협박 처럼 느껴진다..

그리고 다른 대화형 스타일로는 자연어형식이 있다. 이건 그야말로 인간의 언어로 시스템과 대화하는 것인데 아이폰의 시리나 삼성의 빅스비, 스마트 스피커들과의 대화를 생각하면 된다. 이 경우는 HCI측면에서 인식률이 중요하다고 볼 수 있다.

(3) 탐색하는 메뉴 스톼일 :D

메뉴 스타일 (menu sytle)이라는 상호작용을 이용하여 탐색하기 (browsing) 라는 행위를 통해 사용자가 다양한 정보를 둘러보고 자신이 원하는 항목을 선택할 수 있게 한다. 메뉴는 우리가 쉽게 접했던 윈도우 메뉴 창을 생각하면된다. 굳이 기억하지 않고도 재인(recognition)을 통해 원하는 대안을 선택할 수 있으나아아…그만큼 시간은 더 걸리겠지? 그렇다보니 메뉴를 사용할 땐 이에 상응하는 단축키 정돈 알고 있음 효율적으로 쓰기에 좋을 것 같다.

(4) 조종하는 직조작 스톼일 :D

직접 조작하자. 직조작 스타일(direct manipulation style)! 상호작용을 이용하여 사용자가 자신이 가진 지식을 기반으로 시스템에서 제공하는 대상을 직접 조종하는 것(manipulation)을 의미한다. 직조작을 하려면 사용자의 작업 환경을 반영하는 대상이나 기능을 시각적으로 표현하는 인터페이스가 있어야 하며 이 인터페이스는 마우스, 키보드 등을 이용하여 직접 조종할 수 있다. 그래서 직조작이 가능한 상호작용이 일어나려면

조종하는 대상이 항상 눈에 보여야 함
조종하는 대상을 직접 조작할 수 있어야 함
조작한 효과가 즉시 나타날 수 있어야 함

장점 : 학습하기, 기억하기 쉽고, 높은 효율성, 사용하는 과정에서 오류가 적어 사용자가 편안하게 사용가능 함 단점 : 대부분 시각정보에 의존하여 추상적인 개념을 나타날 때에는 한계가 있음

(5) 위임하는 대리인 스톼일 :D

대리인 스타일 (intelligent agent style) 상호작용을 적용하여 사용자가 일일이 시스템을 조작하지 않아도 디지털 시스템이 어느정도의 자율권을 가지고 작업을 수행하여 위임하는 (deligating) 경우를 말한다. 대리인은 특정 사용자가 어떤 필요성을 느끼고 있다는 것을 사용자가 굳이 다 말하지 않아도 미리 예측하고 스스로 판단하에 필요한 행위를 취하고 자신의 행위를 설명도 할 수 있다. 하이고 편하다. 이는 사용자가 꼭 필요한 작업에만 집중할 수 있도록 만들 수 있어 모든 것에 다 관여해야하는 직조작 보다는 더 효율적인 시스템이 될 수 있다. 하지만 사람처럼 행동하는건 한계가 있겠지…

뭐 그래서 대리인 스타일을 도입하려면 시스템에 대한 꽤나 두터운 신뢰가 필요하다. 신뢰를 만족하기 위해서는

대리인 시스템의 행동이 예측 가능해야 한다 (규칙적)
사람이 대리인에게 의존할 수 있어야 한다 (안정적)
대리인의 의견을 믿고 의지할 수 있어야 한다

5. 요즘 유행하는 상호작용은 무엇인가?

말하면 무엇하랴. 바로 ‘사회적인 상호작용’ 이다. 대부분의 서비스 추세는 모두 소셜 기반으로 넘어가고 있다. 하드웨어 조차도 소셜 기능을 넣을 정도이니 말이다. 사회적 상호작용의 키워드는 바로 ‘참여’, ‘공유’, ‘공감’ 이다. 어떤 한 온라인 이벤트에 대해 참여하고 이것을 공유하며 댓글작성 및 의견 공유를 통한 콘텐츠 맥락기반 공감이 일어나는 시대가 바로 요즘인 것이다.

IoT 기반 스마트 화분 조차도 사람과의 상호작용 중요. 개와의 상호작용 중요. 결과물 SNS에 굥유 중요 (출처 : https://www.indiegogo.com/projects/lua-the-smart-planter-with-feelings#/lua)

아 그리고 이것을 빠뜨리면 아쉽다. 유튜브와 같은 ‘창조적 상호작용’ 에 대한 중요성은 거의 당연시 되고 있다. 이제는 유투브 촬영 안하는 사람이 없을 정도로 모두가 다 1인기업, 1인 미디어 콘텐츠 제작자가 될 수 있는 시대이다. 실제로 대부분의 검색이 유투브에서 일어나고 있는 것도 중요한 사실이다.

마지막으로 ‘촉지적 상호작용 (tangible interaction)’ 이 요즘시대에 중요한 상호작용으로 떠오르고 있다. 촉지. 말 그대로 촉감,만져지는 것에 대한 상호작용이다. 필자는 이 분야를 주제로 석사졸업논문을 썼으며 뒤에 나오는 테이블탑 시스템으로 내재화된 촉진을 기반으로한 인터랙션을 구현하여 인지재활 프로그램 사용성 테스트를 진행하였다 . 뭐암튼, 촉지적 상호작용은 터치 폰이 상용화되면서 급격히 증가하였는데 굳이 나눠보자보면 이와 같다.

촉지적 상호작용의 종류

(1) 경량 상호작용 (lightweight interaction)

사용자가 점진적으로 상호작용하고 이에따른 즉각적인 피드백을 받는 것을 말한다. 사용자가 조금씩 사진을 움직일 때 조금씩 반응하는 것과 같은 부분.

(2) 동형 효과 (isomorph effects)

사용자의 행동에 대한 시스템의 반응이 실제 세상과 마찬가지로 제공되는 것을 의미. 물론 진짜 만져지는건 아니고 진짜 만치는 것 같은 착각을 주는 것 뿐이다.

(3) 공간적 상호작용 (spatial interaction)

상호작용이 일어나는 공간의 의미를 활용한 상호작용을 의미한다. 닌텐도 wii fit 같이 사용자가 자신의 몸 전체를 사용해 상호작용(full-body interaction), 신체적 소통, 내재적 공간(inhabited space, 사람고 상호작용하는 대상을 의미있는 장소에서 만나게 하는 상호작용)을 이용한 것을 대표적으로 말할 수 있다.

닌텐도 위 복싱 게임 모습

(4) 표면적 묘사 (expressive representation)

디지털 시스템에서 상호작용의 대상을 사실적으로 표현하는 상호작용을 말한다. 지도 서비스처럼 중점표현하여 실제 세상의 모습을 묘사하는 것, 테이블탑 시스템처럼 사용자의 생각과 행동을 공유할 수 있는 시스템이 제공되는 것 (외재화, externalization), 그리고 로드뷰 맵 처럼 실제 모습이 얼마나 충실하게 매핑되는지 보는 것을 지각된 맵핑 (perceived mapping) 이라 한다.

(5) 내재화된 촉진 (embodied facilitation)

사용자의 행동을 촉진,허용,금지,제한 등을 하는 상호작용으로 다수의 사용자가 서로의 공동 경험을 공유할 수 있는 물리적 구조와 관련이 높다. 여기에는 내재화된 제약사항 (embodied constraints, 협업유도), 다중접속점 (multiple access points, 사용자가 진행되는 것을 동시에 보고 직접 조작 가할 수 있는 상호작용), 맞춤형 표현 (tailored representation, 시스템에서 표현하는 방식이 사용자의 일상생활 경험과 일치하여 효과적으로 이 기술을 활용하는 상호작용) 등을 볼 수 있다.

필자가 진행했던 테이블탑 석사연구 이미지 자료 (주제 : 인지재활 훈련을 위한 테이블탑과 컴퓨터기반 재활 프로그램 사용성 비교)

간단하게 설명하자면 필자의 테이블탑 석사연구가 왜 내재화된 촉진인가? 인지재활 훈련시 ‘쿠키만들기’라는 사용자가 일상생활에서 접할 수 있는 주제로 ‘맞춤형 표현’ 상호작용을 제공한다. 이 상태에서 사용자는 실제 만져지는 tangible objects를 활용하여 쿠키 만들기라는 디지털 시스템과 상호작용을 진행함으로써 다중접속점의 특성을 가지게 된다. 이 시스템에는 다양한 협엽을 유도하는 내제화된 제약사항들이 있다 (쿠키 찍는 방법, 시럽 바르는 방법, 토핑 뿌리는 방법 등) 이러한 여러 상호작용들을 이용하여 사용자는 인지재활 훈련을 실제 도구들을 가지고 촉지적 상호작용을 통해 진행할 수 있는 것이다.