UI 컴포넌트 유형별 마이크로인터랙션의 트리거에 따른 피드백의 표현 분석

마이크로인터랙션이란 ‘작은’, ‘미세한’의 의미인 마이크로(Micro)와 ‘상호작용’의 의미인 인터랙션(Interaction)의 합성어이다. Dan Saffer가 그의 저서, ‘마이크로인터랙션’에서 마이크로인터랙션이란 말을 유행시켰으며 이후 마이크로인터랙션은 제품, 서비스 및 브랜드와 인터랙션하는 과정의 세분화를 통해 사용자에게 최적의 경험을 줄 수 있는 동작 체계로 통용되고 있다. 전체 경험 영역에서는 ‘작은’ 부분일 수 있으나 순간순간의 경험은 바로 이러한 작은 누적이므로 서비스와 사용자 사이의 섬세한 상호작용은 절대 작지 않고 사용자경험디자인에서 무엇보다 중요한 개념이 되고 있다[2],[3]. Donald A. Norman도 정보 교환이 실시간으로 발생하는 최근 미디어의 인터랙션 환경에서 서비스에 대한 사용자경험 및 평가가 인터랙션 단계별로 즉시 이루어지므로 무엇보다 마이크로인터랙션이 중요하며, 이러한 순간의 경험들이 모여 총체적인 경험이 형성된다고 하였다[4]. 이처럼 마이크로인터랙션은 서비스에 대한 사용자의 빠른 인지를 돕고 차별화된 경험을 제공함으로써 해당 서비스의 선호도 강화와 브랜드 경험을 향상하는 중요 요인으로 자리 잡고 있다.

마이크로인터랙션은 사용자가 시스템과의 소통을 위한 조작이 가능하도록 직관적인 힌트를 제공하는 시그니파이어(Signifier)와 행위를 유도하는 어포던스(Affordance)가 담긴 트리거를 제공하고, 사용자에게 자신의 행동 결과를 인지할 수 있도록 현 상황에 대한 즉각적이고 지속적인 피드백을 준다[4]. 즉, 사용자가 시스템을 어떻게 사용할 수 있을지에 대해 시스템의 상태를 보여주고 안내해주는 역할을 한다[1]. 예를 들어 마이크로인터랙션은 어떤 기능을 켜거나 끌 때, 설정을 바꿀 때, 또는 진행 중인 기능을 조정할 때와 같이 상태 변화가 생길 때 로딩 바(Loading Bar), 알림(Notification)과 같은 UI 컴포넌트를 통해 현재 시스템에서 어떤 일이 벌어지고 있는지 그 상태에 대해 즉각적으로 사용자에게 알려주는 임무를 수행한다[2]. 또한, 필요한 정보를 중요도에 따라 순차 제공하여 사용자의 인지 부하를 줄여주고, 사용자 행동 패턴을 바탕으로 한 경험 과정 전반에 대한 맥락 유지를 통해 사용자의 이해와 적응을 돕는다. 이와 같은 효율성 측면 외에도 재치있고 개성 있는 스타일 연출을 통해 사용자의 흥미와 관심을 유도하고, 향상된 몰입과 만족감으로 사용자 참여 및 지속적 동기부여의 역할을 한다[2],[3]. 그 외에도 오류 방지를 지원하고 브랜드와 소통하는 역할을 한다[1].

트리거는 마이크로인터랙션을 시작하는 요소로 그림 1처럼 사용자 또는 시스템에 의해 트리거 된다. 사용자 트리거는 사용자의 조작으로 시작하며, 시스템 트리거는 특정 값이 되면 시스템이 자동으로 시작한다. 이와 같은 트리거의 디자인은 서비스를 사용하는 시점의 해당 맥락에서 사용자가 트리거로 인식할 수 있도록 디자인해야 한다. 즉, 트리거 디자인을 잘하기 위해서는 사용자가 첫 조작을 잘할 수 있도록 마이크로인터랙션 내부에 담긴 핵심 정보를 표시해야 하며, 정보를 앞당겨 보여주는 것도 좋다[2].

• 사용자 시작 트리거

사용자 시작 트리거는 직접 수동으로 조작되며 조작부와 적용 동작으로 구성된다. 조작부는 아이콘과 문자로 표시되는 레이블(Label) 체계와 버튼 및 메뉴와 같이 조작 가능한 장치가 포함된 부분이고, 적용 동작은 탭, 밀기 흔들기, 음성과 같이 실제 조작하는 방식이다[2]. 사용자 트리거의 시작을 잘하기 위해서는 각종 조작의 단서가 포함된 시그니파이어와 실제 조작을 위한 사용자 행동을 유도하는 어포던스가 반영된 디자인을 하는 것이 중요하다. 시그니파이어는 각종 시각요소와 명확한 의미 전달을 위한 텍스트 레이블 체계로 구성된다. 트리거에서 텍스트 레이블은 행위의 시작을 위해 그 기능 기술을 명확히 해야 한다. 즉, 레이블은 그 자체가 하나의 인터페이스이며 레이블은 전체, 혹은 개별 요소의 이름일 수도 있고 상태 표시일 수도 있다[2],[4]. 그러므로 레이블은 명확한 의미 전달을 위해 명료하고 간결하게, 그리고 일관성 있게 사용해야 한다. 어포던스 측면에서 트리거의 조작 장치는 그 상태에 따라 다음과 같이 나뉜다. 활동이 없는 평소 상태인 기본상태, 툴 팁 및 더 많은 조작부나 입력양식 등 마이크로인터랙션 내부에 담겨 있는 데이터를 표시하는 호버(Hover) 상태, 트리거를 조작했을 때 진행 중 상태를 표현하는 클릭 및 탭 상태, 좌/우, 상/하, 눌림/눌리지 않음과 같은 현 스위치의 상태를 제시하는 토글(Toggle) 상태, 그리고 다이얼, 슬라이드 바 등 값의 위치를 설정하거나 보여주는 설정 상태이다[2]. 이처럼 트리거의 조작부는 사용자에게 필요한 상태 정보를 보여주어야 하며, 사용이 많을수록 눈에 잘 띄어야 한다.

• 시스템 트리거

시스템 트리거는 사용자 시작 수동 트리거와 달리 미리 결정된 특정 조건들이 충족될 경우 시스템에서 자동으로 시작되는 트리거이다[1],[2]. 시스템 트리거의 예로는 사용자가 입력한 이메일 주소를 기반으로 사용자의 이름을 추측해 자동으로 입력해 주거나 메일 도착 시 알림, 근접센서를 통해 어느 장소에 들어가면 조명이 켜지거나 음악이 나오고, 수도꼭지 아래에 손을 넣으면 물이 나오는 것 등이 있다. 이처럼 시스템 트리거는 현재 사용하고 있는 기기의 시간, 위치, 일정과 같은 맥락 정보를 바탕으로 사용자가 이후 행동할 가능성이 큰 부분을 강조하거나 자동으로 실행한다. 맥락 정보의 예로는 전송 실패, 네트워크 연결 끊김과 같은 오류 상황 알림, 위치 정보 기반 특정 영역 안에 들어가면 해당 콘텐츠가 자동 재생, 날씨 정보와 같이 지역별 다른 정보 바탕 피드 전송, 밤이 되면 시간 정보 연계 다크모드(Dark Mode)로 화면 전환[2],[3]이 있다. 이 외에 상대편 채팅창에 ‘⋯’이 표현되면 상대가 현재 답변 중인 상태의 맥락을 전달할 수 있다.

동작 규칙은 비밀번호의 최대 길이, 최대로 키울 수 있는 음량의 크기, 기기 2대를 사용할 때 한쪽 기기의 콘텐츠가 재생되면 다른 쪽 기기는 자동으로 멈추게 하는 것과 같이 마이크로인터랙션이 어떤 방식으로 동작하는지를 결정하는 규칙 체계이다[2]. 동작 규칙의 가장 중요한 부분은 동작 규칙의 목표 설정으로 단순 명료한 형태로 정의해야 한다. 마이크로인터랙션은 일단 시작되면 일련의 동작을 수행하므로 동작 규칙을 통해 어떤 기능을 어떤 순서대로 수행할지, 어떤 기능은 수행할 수 있고 어떤 것은 수행할 수 없는지를 제시해야 한다. 가령, 동작 수행 중 오류가 발생하면 일시 정지를 통해 사용자가 다음 대안을 수행할 수 있도록 안내해야 하며, 기기 위치와 같은 사용 환경의 맥락 정보 인식을 통해 사용자 니즈에 적합한 서비스를 자동 동작시킴으로써 사용자경험을 강화할 수 있다[2]. 동작 규칙의 또 다른 정의는 동작이 가능한 사물, 그리고 그 행위에 따른 속성과 상태를 정의하는 것이기도 하다. 가령, UI를 구성하는 화면 구성 요소, 조작 장치, 표시 장치와 같이 마이크로인터랙션과 관련된 모든 대상은 어떤 속성과 상태를 갖는 명사로써 사용자가 행동할 수 있도록 해주며, 사용자가 이때 취할 수 있는 행동은 동사가 된다. 가령 슬라이드 바(Slide Bar) 자체는 명사이며, 이의 조절을 통해 음량을 높이거나 낮추는 행위는 동사이다. 이때 앞서 트리거에서 언급했던 레이블이나 안내문과 같은 마이크로카피는 사용자에게 이러한 행위의 동작 규칙을 이해할 수 있도록 중요한 역할을 담당한다[2],[3]. 동사 선택은 사용자가 취할 행동에 초점을 맞춰야 하며 조작 장치의 경우 조작의 단순함을 통해 사용자의 인지 부하를 줄여야 한다.

마이크로인터랙션의 피드백은 우리가 시스템의 동작 규칙을 이해할 수 있도록 보고 듣고 느끼게 해주는 모든 것을 의미한다[2]. 이처럼 피드백은 트리거의 작동으로 서비스 사용의 시작과 끝을 표시하거나 수행 가능 여부와 같은 정보를 제공하여 동작 규칙을 잘 설명해 준다[2],[3]. 피드백은 마우스오버(Mouseover), 툴 팁(Tooltips), 프로그레스 바(Progress Bars), 메시지 창과 같은 UI 컴포넌트를 통해 기능 수행 내용을 동적 시각화 방법으로 표현할 수 있다. 이때 시각 피드백 요소는 사용자가 조작하기 쉽도록 해당 트리거에 근접하게 배치된다[2]. 이처럼 대부분의 피드백은 시각을 중심으로 하지만 그 외 피드백 유형에는 소리, 진동, 음성, 및 제스처가 있으며 버튼을 눌렀을 때의 딸깍 소리, 휴대폰 벨소리가 울릴 때 설정에 따라 진동도 함께 작동될 경우, 그리고 졸린 운전자를 깨우기 위해 자동차 핸들에 적용된 햅틱 피드백 등이 그 예이다[1],[2]. 피드백은 트리거에 대응해서 중요 정보를 전달하는 실용적인 역할도 하지만 재치 있는 표현을 통해 제품이나 서비스의 개성을 표현하는 역할도 함께 수행한다. 피드백은 언제 나타나서 어떻게 색상을 바꾸고 애니메이션 되는지, 맥락에 따른 변화와 지속 시간은 어떤지, 강도 및 반복 여부는 어떻게 되는지와 같이 설정 동작의 규칙을 반영해야 한다[2]. 그리고 사용자에게 피드백을 통해서 어떤 의미를 전달해야 하는지 그 메시지 정의도 중요하다.

순환과 모드는 앞서 언급한 ‘트리거-동작규칙-피드백’의 마이크로인터랙션 과정이 시스템에서 어떤 상태나 시기에 동작할지를 결정하고, 사용자 선택 경우의 수에 따라 다음 단계로 이동하게 해주는 것을 의미한다[3],[4].

• 순환

순환은 설정된 시간에 주기적으로 반복되는 것을 의미한다. 순환에서 가장 중요한 것은 이와 같은 주기를 어떻게 설정하는가이며 주기 설정을 통해 마이크로인터랙션의 반응 속도와 지속 시간이 정해진다. 시간에 따라 어떤 일이 일어나는지와 같은 반응의 길이를 정하는 것과 시간이 어느 정도 지난 다음에 다시 원래대로 돌아가는지를 정하는 것이 순환에 해당한다. 예를 들어 물건을 구매할 때 표시되는 ‘Buy it now’ 버튼이 물건을 하나 구매한 주기를 거친 후에는 ‘Buy another’의 하나 더 구매하기 버튼으로 바뀐다. 순환의 유형에는 알람 횟수 설정과 사용자가 패스워드 시도를 10번 실패했을 때 오류 메시지를 보내는 경우와 같이 횟수 기준 순환이 있다. 또한, 인터넷 접속 시 1분마다 다시 로드(Reload)되며 메시지를 확인하게 하는 조건 기준 순환, 안 읽은 이메일 하나마다 새 메일 개수 표시를 하나씩 늘려가는 수집 기준 순환, 그리고, 매일 밤 10시에 조명을 켜도록 설정하면 오류나 강제 종료 전까지 계속 수행하는 무한 순환[2]이 있다.

• 모드

모드는 동작 규칙상의 갈라진 가지와 같은 개념이다. 모드를 너무 많이 구분하는 것은 사용자에게 혼선을 줄 수 있으므로 피해야 한다. 어떤 모드로 들어갔다가 원래의 모드로 돌아갈 때 원래 모드는 사용자가 떠날 때와 같은 상태로 남아 있어야 사용자 혼선이 최소화된다. 모드의 예로는 시작 버튼을 오래 누르고 있으면 셧다운 되거나, 재시동 되는 것처럼 일정 시간이 지나면 모드가 변경되는 경우, 또는 알트(Alt), 옵션(Option), 커맨드(Command), 쉬프트(Shift) 키와 같이 눌려 있는 동안만 다른 기능이 작동하는 것[2]이 있다.

그림 3의 A-1은 업로드 버튼[7]으로 사용자 시작 수동 트리거이며 텍스트 레이블 ‘Upload’와 ‘위로 화살표’의 시각요소가 행위 유도의 시그니파이어 역할을 한다. 버튼 모양의 어포던스 속성은 사용자의 행동을 유도하며, 트리거의 조작 유형은 탭(Tap)또는 클릭(Click)이다. 동작 규칙의 목표는 파일 업로드이며, 동작 단계는 업로드 버튼 탭하기, 파일 업로드 과정 보여주기, 최종 업로드된 파일 보여주기 순이다. 피드백은 모션 기반 비주얼 피드백으로 버튼의 ‘Upload’ 텍스트가 ‘Uploading’에서 ‘Uploaded’로 바뀐다. 이와 함께 위로 화살표는 원 안에 물이 차오르는 로더 애니메이션(Loader Animation)을 거쳐 체크 마크(Check Mark)가 되어 업로드되었음의 메시지를 전달한다. 피드백 시작 시점은 업로드 버튼의 탭 또는 클릭 시점이며, 순환은 한 번 반복 후 정지되고, 분리된 모드는 없다. 모션 시스템의 경우 총 1,800MS이며 가장 긴 업로딩 과정을 뺀 실제 모션 변환 시점들은 평균 200~300MS 사이를 쓰며 ‘Upload-Uploading-Uploaded’의 3단계 텍스트 변환 이징과, 위로 화살표, 물이 차오르는 애니메이션, 체크 마크로 이어지는 시각요소 간에는 가속, 감속 변환 이징이 적용되어 있다. A-2부터는 분석내용 중 트리거와 피드백을 중심으로 요약한 내용으로 다음과 같다. A-2의 전송 버튼[8]은 종이비행기 아이콘이 파일을 날려 보낸다는 트리거의 시그니파이어 역할을 하며, 피드백은 종이비행기가 버튼 주위를 도는 회전 로더 모션을 통해 파일이 전송 중임을 전달한 후 체크 마크로의 변경과 ‘Sent’ 텍스트와 조합을 통해 파일이 전송되었음의 메시지를 전달한다. 모션 시스템의 경우 ‘Send-Sent’의 2단계 텍스트 변환 모션과, 종이비행기 회전 모션과 체크 마크 변경의 두 단계 모션이 적용되어 있다. A-3의 첨부 버튼[9]은 클립 아이콘이 파일 첨부를 상징하는 트리거의 시그니파이어 역할을 한다. 텍스트 레이블이 없고 버튼 표현도 약해 어포던스가 약한 측면이 있다. 트리거의 경우 원형 로더 모션을 통해 파일이 첨부 중임을 전달하고, 클립 아이콘에 파일 아이콘이 끼워지는 모션은 파일 첨부가 완료되었음을 전달한다. 모션 시스템의 경우 원형 로딩 바와 파일 첨부의 두 단계 모션이 순차 적용되어 있다.

Fig. 3.

Analysis of upload, send, and attach buttons

그림 4의 B-1은 플로팅 액션 버튼(Floating Action Button)[10]으로 하위메뉴가 더 있음을 암시하는 '+' 아이콘이 트리거의 시그니파이어 역할을 한다. 피드백은 버튼 조작에 따라 시계방향 회전을 통해 닫기의 의미인 'x' 아이콘으로 바뀐다. 이와 동시에 반원 구조로 순차 생성되는 서브 아이콘들을 통해 각 세부 메뉴로의 이동이 가능함의 의미를 전달한다. 모션 시스템의 경우 순환과 모드가 적용되어 ‘+'가 'x'로변환하고 반대로 돌아오는 모션과, 5개 세부 메뉴가 생성되었다가 다시 사라지는 두 단계 변환 모션이 적용되어 있다. B-2의 소셜 공유 버튼(Social Sharing Button)[11]은 파일을 올려 공유할 수 있다는 의미의 위로 화살표와 ‘Share’ 텍스트가 트리거의 시그니파이어 역할을 한다. 피드백의 경우 버튼 조작 시 버튼이 상하 플립 회전하며 트위터, 핀터레스트, 페이스북을 포함한 소셜네트워크 아이콘들이 나열되어 해당 서비스로의 공유가 가능함의 의미를 전달한다. 모션 시스템의 경우 ‘Share’ 버튼이 플립(Flip) 회전하며 소셜네트워크 아이콘들이 나열되는 모션과 반대로 플립되어 돌아오는 두 단계 변환 모션이 적용되어 있다. B-3의 햄버거 버튼(Hamburger Button)[12]은 세 개 라인 아이콘이 메뉴를 상징하여 하위 옵션을 보기 위한 행위를 유도하며, ‘x’는 닫기 위한 트리거의 시그니파이어 역할을 한다. 피드백은 버튼 조작에 따라 메뉴가 아래로 펼쳐 보이거나 다시 위로 숨겨져 각 아이콘의 의미를 전달하며 이 인터랙션을 통해 뒷 UI 공간을 더 확보할 수 있도록 도움을 준다. 모션 시스템의 경우 세 개의 라인이 회전하며 ‘x’ 아이콘으로 바뀌는 모션과 다시 반대로 돌아오는 순환 모션이 적용되어 있다. B-4의 토글 버튼(Toggle Button)[13]은 ‘ON’, ‘OFF’ 타입의 ‘O’의 요소를 좌우 슬라이드 조작이 가능해 보이는 토글 스위치와 함께 활용하며 이 텍스트는 트리거의 시그니파이어 역할을 하고 있다. 피드백은 토글 버튼을 좌에서 우로 조작 시 녹색의 ‘ON’이 활성화되며, 반대로 우에서 좌로 전환 시 회색 ‘OFF’로 바뀌어 비활성화의 메시지를 전달하고 있다. 모션 시스템의 경우 토글 스위치 조작으로‘ON’과 ‘OFF’의 전환 시 텍스트와 토글 버튼 컬러가 변환되는 순환 모션이 적용되어 있다. B-5의 라디오 버튼(Radio Button)[14]은 항목 텍스트 앞의 선택 필드가 사용자에게 원하는 항목을 선택하도록 트리거의 시그니파이어 역할을 한다. 피드백은 사용자가 특정 항목을 클릭 시 체크되었음을 알리는 점의 표현과 함께 주위 작은 점들이 원형 파티클로 표현되고, 해당 항목의 텍스트 또한 볼드체로 강조된다. 다른 항목 선택 시 기존 항목은 꺼지고 새 항목에 같은 효과가 적용되어 선택되었음의 의미를 전달한다. 모션 시스템의 경우 사용자가 항목 선택 시 선택 표시와 원형 점들의 파티클 효과, 그리고 텍스트가 강조되는 모션이 제시되며, 다른 항목을 선택하면 기존 선택 항목은 꺼지고, 새 항목에 같은 모션 효과가 적용된다. B-6의 럭키 버튼(Lucky Button)[15]의 경우 사용자가 버튼을 롤오버 하면 슬롯머신과 같이 다섯 개의 다른 기분 상태를 담고 있는 문장이 위아래로 회전하며 움직이는 효과를 보여준다. 이때 롤오버 하는 동안 랜덤하게 바뀌며 도는 관련 문장들이 사용자가 흥미롭게 읽어보며 클릭하도록 유도하는 텍스트 레이블 기반 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 버튼 기능에 슬롯머신의 재미를 반영한 인터랙티브 요소를 도입하여 흥미롭게 내 기분 상태를 선택할 수 있도록 감성 피드백 기반 메시지를 전달하고 있다. 모션 시스템의 경우 버튼을 롤오버 하면 기분 상태별 문장이 슬롯머신과 같이 롤링되는 모션이 제시되며, 항목 개수에 맞게 위로 사라지고 아래에서 생성되는 효과가 적용되어 있다.

Fig. 4.

Analysis of loop & modes based buttons

그림 5의 C-1은 텍스트 필드(Text Fields)[16] 컴포넌트로 ’Email’ 의 텍스트 레이블과 이메일 아이콘을 통해 사용자가 이메일을 입력하도록 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 사용자가 이메일을 잘못 입력하면 오류 알람(Error Alert)으로 좌우로 창을 흔드는 모션과 함께 ‘잘못된 이메일입니다’라는 텍스트를 빨간색 컬러와 느낌표 표현의 경고 메시지와 함께 전달한다. 올바르게 입력하면 녹색 컬러와 체크 마크로 바뀌어 ‘확인되었다’는 의미를 전달한다. 모션 시스템의 경우 입력된 이메일의 오류 여부에 따라 다른 컬러로 변환되고, 사용자가 이메일을 잘못 입력할 경우 인풋필드가 좌우로 흔들리는 모션이 적용되어 있다. C-2의 스테퍼(Stepper)[17]의 경우 좌, 우의 ‘+‘, ‘-’ 버튼은 가운데 숫자의 증감을 조절할 수 있음을 알리는 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 사용자가 ‘+‘, ‘-’ 버튼을 한 번씩 누를 때마다 가운데 변경 희망 숫자가 올라가고 내려가는 증감 내용이 실시간으로 보여 그 의미를 전달받을 수 있다. 모션 시스템의 경우 ‘+‘ 버튼을 누르면 가운데 숫자가 위로 올라가고, 반대로 ‘-’ 버튼을 누르면 숫자가 아래로 내려가는 숫자 변환 방향이 반영된 모션이 이징과 함께 표현되어 있다. C-3의 페이지 컨트롤(Page Control)[18]의 경우 흰색 숫자와 파란색 버튼이 선택된 페이지를 암시함과 동시에 나머지 회색 숫자 버튼들도 탭 또는 클릭하면 이동할 수 있다는 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 사용자가 이동하고 싶은 희망 페이지의 숫자를 선택하면 해당 숫자 버튼이 파란색과 흰색 텍스트로 변환되어 해당 페이지로 이동되었음의 의미를 전달하고 있다. 모션 시스템의 경우 클릭 또는 탭을 통해 원하는 페이지 숫자로 선택 이동 시 앞서 언급한 라디오 버튼처럼 하나가 켜지면 다른 하나가 꺼지는 요소 간 이즈-인 앤 아웃 모션이 적용되어 있다.

Fig. 5.

Analysis of text field, stepper and page control

그림 6의 D-1은 상단 바(Tob Bar)의 새로 고침(Refresh)을 위한 풀다운(Pull Down to Refresh) 메뉴[19]로 모바일 기기의 상단 메뉴 영역을 아래로 당기면 중앙의 파란색 새로 고침 버튼이 활성화되며 좌, 우측의 ‘+’, ‘x’ 버튼과 함께 2차 인터랙션이 가능함을 알려주는 트리거의 시그니파이어 역할을 한다. 피드백의 경우 풀다운 이후 펼쳐진 화면에 생성된 ‘새로 고침 아이콘’, 그리고 ‘+’, ‘x’ 버튼은 탭 하면 파란색 변경과 함께 해당 기능 서비스를 받을 수 있다는 의미의 피드백을 전달한다. 모션 시스템의 경우 화면을 아래로 당기면 화면 확장 모션이 구현되고, 버튼 하나를 탭하면 다른 하나가 꺼지는 단계에 맞춰 이즈-인 앤 아웃 모션이 적용되어 있다. D-2의 카드 스와이프(Card Swipe)[20]의 경우 카드 아래의 ‘선택’, 또는 ‘취소’ 버튼이 함께 연동됨을 보여주며, 카드들이 겹쳐 있어 다음 카드를 보기 위해 넘기게 하는 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 카드를 오른쪽 화면 밖으로 내보내면 선택되고, 왼쪽 밖으로 내보내면 취소됨에 대한 메시지를 녹색의 ‘선택’ 버튼과 빨간색의 ‘취소’ 버튼 활성화를 통해 전달하고 있다. 모션 시스템은 카드와 하단 버튼이 함께 연동되어 있고, 이즈-인 앤 아웃 모션이 적용되어 있다. D-3의 하단 내비게이션 바(Bottom Navigation Bar)[21]의 경우 선택 시 분리되는 원형 아이콘과 하단의 텍스트 레이블을 통해 항목별 선택이 가능함을 알려주는 트리거의 시그니파이어 역할을 하고 있다. 피드백의 경우 각 항목의 아이콘을 탭하면 원형으로 분리 선택되고, 섹션 컬러도 변경되어 해당 항목이 선택되었음의 의미를 전달하고 있다. 모션 시스템은 하나가 선택되면 다른 하나는 해제되는 부드러운 연결 느낌을 이지-인 앤 아웃 모션으로 처리하고 있다.

Fig. 6.

Analysis of top bar, card swipe, and bottom navigation bar

그림 7의 E-1은 별점(Star Rating)[22]선택 컴포넌트로 텍스트 레이블인 ‘경험이 어땠는지 알려주세요’를 통해 별점 평가 태스크임을 알게 되며, 잔여 음영의 회색 별들은 그만큼의 추가 선택이 가능함을 알리는 트리거의 시그니파이어 역할을 한다. 피드백은 별점 개수 선택 시 만족도 단계별로 ‘좋음’, ‘아주 좋음’과 같은 텍스트 레이블과 함께 그에 해당하는 손가락 제스처를 통해 만족도별 메시지를 전달한다. 모션 시스템은 별점 선택에 따른 손가락 제스처와 텍스트 레이블이 이즈-인 앤 아웃으로 전환된다. E-2의 볼륨 컨트롤 슬라이더(Volume Control Slider)[23]는 스피커 및 각종 오디오 출력을 조절하는 컴포넌트로 하단 좌우 슬라이더의 길이는 조절 가능한 최대 범위를 보여주고, 볼륨 조절 핸들과 그 위치는 드래그하여 볼륨을 조절할 수 있음을 알려주는 트리거의 시그니파이어 역할을 하고 있다. 피드백은 사용자가 조절 핸들을 오른쪽으로 이동함에 따라 위 스피커 아이콘은 무음의 ‘x’에서 한 단계씩 커지는 메시지를 전달한다. 모션 시스템의 경우 오른쪽으로 슬라이더를 옮기는 단계에 따라 반영된 슬라이더 길이와 볼륨 세기 아이콘이 누적 적용된다. E-3의 툴팁(Tooltips)[24] 컴포넌트의 경우 뮤직 플레이어의 앞으로 가기(Forward) 버튼 위를 롤오버 하면 다음 곡 정보의 텍스트 레이블이 툴팁으로 표현되어 사용자가 다음 곡 재생을 희망할 시 클릭을 유도하는 트리거의 시그니파이어 역할을 하고 있다. 피드백은 버튼 위를 롤오버 할 때 노란색으로 활성화되는 툴팁 표현을 통해 클릭하면 다음 곡 재생을 할 수 있음의 메시지를 전달한다. 모션 시스템의 경우 버튼 롤오버 이벤트로써 툴팁 생성이 이즈 아웃과 함께 연동 적용되어 있다.

Fig. 7.

Analysis of rating, slider, and tooltips

그림 8의 1과 같이 총 18개의 사례분석을 통해 볼 때 트리거 조작부에는 사용자의 첫 조작이 가능하도록 핵심 정보를 담아 표시, 제공하는 것이 무엇보다 중요하다. 이를 위해 텍스트 레이블 및 아이콘을 포함한 각종 시각 단서의 시그니파이어는 명확한 의미 전달이 필요하며 첫 조작의 시작을 위한 힌트와 사용방법의 정보가 담겨야 한다. 이때 정보는 마이크로인터랙션 진행 과정 중에 보여줄 수 있는 현 상태 변경 정보와 내러티브 기반 정보를 포함한다.

Fig. 8.

Analysis of common characteristics in feedback expressions based on triggers

그림 8의 2에 해당하는 분석과 같이 버튼은 버튼다워야 누르고 싶어지듯이 트리거에는 그 조작 방식의 행동 유도를 반영한 어포던스 단서 제시가 중요하다. 트리거 조작 후 피드백 시 단계별 상태 변화를 통해 다음에 일어날 동작을 알려야 하며 순차적 제공을 통해 사용자의 인지 부하를 줄여야 한다.

그림 8의 3과 같이 분석한 대부분 사례의 전환 애니메이션은 단계 연결 과정이 보이는 애니메이션을 통해 사용자를 부드럽게 다음 단계로 안내한다. 이동, 회전과 같은 상태 전환 표현이 있었으며 모션의 지속성은 맥락제공, 집중유도 및 개성연출과 관계되어 있다. 너무 빠른 전환은 의미 전달이 부족하고, 너무 느린 전환은 지루함을 유발하므로 속도 균형이 중요하고, 통합된 움직임을 위해 순차 적용이 필요하다.

그림 8의 4의 모핑 아이콘은 모양이 바뀌어 여러 기능을 함께 수행해주므로 모바일 기기처럼 작은 화면에 별도 공간을 차지하지 않고 적용할 때 도움이 된다. 이 모핑 아이콘은 일종의 가변형 시그니파이어이며 동일 위치에서 기능의 바뀜에 따라 모핑되며 다른 의미를 전달하는 트리거 역할을 한다.

그림 8의 5에 해당하는 업로드, 다운로드 화살표, 스테퍼 증감 방향과 같이 트리거의 시그니파이어가 동세와 방향성을 담고 있으면, 트리거의 움직임 단서의 기대 방향과 같게 피드백 결과 방향을 설계해야 한다.

그림 8의 6에 해당하는 토글의 온·오프 두 단계 상태 선택 옵션부터 플로팅액션 버튼, 소셜공유 버튼과 같은 다중 모드분할 선택 트리거의 경우 대안 조작 단계의 수를 고려해야 한다. 펼쳐짐과 줄어듦의 표현은 중심 객체에 종속되어 있음을 전달해야 하며, 2차 인터랙션 시 펼침의 공간이 필요하다.

그림 8의 7은 피드백 모션의 반응 시간에 관련된 내용으로 입력필드 트리거나 정의된 동작규칙의 범위를 벗어나는 경우에는 실수 방지를 위해 시스템 상태 관련 즉각 피드백이 필요하다. 단지 파일 첨부, 로딩, 새로 고침 등 시스템의 작업 시간이 필요한 경우에는 이에 대한 표현이 필요하다. 애니메이션은 객체의 크기, 이동 거리, 지속 시간, 표현 효과가 함께 고려되어야 하며, 구글 Material Design[6]은 UI용 마이크로인터랙션의 최적 구현 시간을 200~500 밀리초 사이로 언급하고 있다. 본 연구의 사례분석 결과를 볼 때 업로드 및 파일 첨부와 같이 첨부 시간이 걸리거나 내러티브가 긴 모션 외에는 객체별 전환 모션은 평균 200~500 밀리초 사이를 주로 활용하고 있었다. 트리거 후 피드백 모션의 의미 전달이 주로 시작되는 시점은 200 밀리초였고, 의미의 지속성은 동작 객체의 수, 새 요소의 출현, 모션의 내러티브에 따라 달라졌다.

그림 8의 8에 해당하는 예시 이미지와 같이 18개 분석 사례 모두 이즈 인 앤 아웃을 각각의 방식으로 사용해 객체의 움직임에 자연스러움과 생동감을 반영하고 있다. 가속, 감속의 지속 시간, 움직임 거리가 각 UI 컴포넌트 모션에 다르게 반영되어 브랜드 개성을 전달하고 있었으며, 이즈 인 가속과 이즈 아웃의 감속을 비대칭 곡선으로 달리하거나 드로어처럼 트리거 후 피드백이 살짝 늦게 시차를 두고 움직일 때의 모션이 좀 더 자연스러워짐을 알 수 있다.

그림 8의 9와 같이 친근한 텍스트와 시각 언어로 트리거의 시작을 유도하고 있고, 피드백 모션 또한 사용자의 흥미와 관심 유도, 동기부여를 위해 재치있고 개성 있는 스타일을 담고 있다. 내러티브의 위트도 있지만 작은 흔들림, 바운스, 파티클 효과처럼 섬세한 시각 효과가 반영된 피드백 모션을 통해 인상적인 사용자 경험을 강화하고 있다.