Funes

들어가며

<마이크로인터랙션>은 프론트엔드 개발자가 홈페이지를 설계할 때 반드시 참고해야 할 '인터랙션'에 대산 지침을 제공해주는 책이다. 마이크로인터랙션은 '매크로인터랙션 (기능)'과 대비되는, 조금 더 세밀한 영역에서 벌어자는 유저와 사이트 간의 상호작용을 뜻한다. '회원 가입'이라는 기능이 매크로인터랙션이라면, 마이크로인터랙션은 입력된 비밀번호가 얼마나 강력한지 알려주는 피드백 UI와 같다.

(출처: Jason Mayo - Dribble)

이런 UI의 예를 들어달라고 하면 잔뼈가 굵은 프론트엔드 개발자는 수십 가지 상황을 떠올릴 것이다. 버튼을 누르면 응답이 돌아오기 전까지 로딩 상황을 연출한다든지, 토글 기능 버튼을 만든다든지 하는 상황 말이다.

마이크로인터랙션이 워낙 보편화되고 심화되어서 경험 디자인 설계가 당연한 것으로 여겨지긴 하지만, 사실 여기에는 과학적인 설계 원칙이 있다는 사실을 이 책은 알려주고 있다. 마이크로인터랙션의 역사를 간략히 살펴본 뒤, 마이크로인터랙션을 설계할 때 알아야 할 핵심 원칙을 익혀보도록 하자.

역사상 최고의 마이크로인터랙션 - 마우스를 이용한 복사 / 붙여넣기

1974년, 젊은 엔지니어 래리 테슬러Larry Tesler는 제록스 알토 컴퓨터에 들어갈 집시Gypsy라는 문서 편집 어플리케이션을 제작하고 있었다. 이 프로그램의 원대한 목표는 GUI 환경 친화적인 문서 편집 기능을 구현하는 것이었다. 당시의 모든 문서 편집 프로그램은 '읽기 모드'와 '쓰기 모드'가 구분되어 있었다. (Vim을 떠올려보자) 그래서 문서를 작성하려면 쓰기 모드로 진입해야 했고, 도중에 텍스트를 복사 붙여넣기를 하려면 대체 모드로 들어가야 했다. 래리는 이런 한계를 극복하고 싶어 했다.

"모드의 구분 없이, 사용자가 가상의 종이 위에 곧장 글을 쓰게 할 수는 없을까?"

해결책은 마우스에 있었다. 사용자가 마우스로 특정 문구를 선택한 뒤 '복사' 버튼을 누르고 문구를 옮겨적을 장소를 선택한 뒤 '붙여넣기' 버튼을 누르는 것이었다. 이렇게 레리 테슬러는 컴퓨터 사용자라면 모르는 이가 없는 '복사 붙여넣기' 마이크로인터랙션을 발명하는 데 성공했다.

마이크로인터랙션 핵심 원칙

훌륭한 마이크로인터랙션은 4가지 핵심 원칙이 명확하게 구현되어 있다. 인터랙션을 시작하는 트리거, 인터랙션이 어떻게 동작하는 결정하는 동작규칙, 동작 상황을 표시하는 피드백, 인터랙션에 영향을 미치는 상위규칙인 순환과 모드가 그것이다.

트리거

마이크로인터랙션은 어디서부터 시작될까? 사용자가 무엇인가 원하기 시작할 때 시작된다. "TV를 켜고 싶어." "이 텍스트를 이쪽에서 저쪽으로 옮기고 싶어" "로그인을 하고 싶어." 등등의 욕구가 생기는 시점 말이다. 중요한 건 사용자가 무엇을 원하고, 언제 어떤 상황에서 그것이 필요한지를 이해하는 것이다. 그런 이해가 알맞은 트리거를 언제 등장시킬지 결정하게 된다. 로그인은 사용자가 홈페이지에 접속하자마자 원하게 될 것이므로 메인 페이지 GNB에 가장 먼저 로그인 버튼을 위치시킬 것이다. 반면 스마트폰에서 홈페이지 주소를 복사하도록 하는 버튼은 사용자가 주소창을 터치했을 때 등장할 것이다.

첫 번째 원칙: 트리거는 사용자의 필요가 언제 어디서 발생하는지에 맞추어 등장해야 한다.

트리거의 두 번째 원칙은 하나의 트리거는 언제나 똑같은 행동을 해야 한다는 것이다. TV 리모콘의 음량 + 버튼은 언제나 같은 행동을 해야 한다. 원래 음량보다 음량을 키우는 것이다. 상황에 따라 이 버튼이 외부입력 모드 전환을 한다든가 하면 사용자는 결코 그 버튼을 누르지 않을 것이다.

누구나 아는 대기업에서 이 원칙을 지키지 않은 사례가 있다. 아이폰의 홈 버튼이 바로 그것이다. 홈 버튼을 한번 누르면 초기 화면으로 돌아오는 기능을 갖고 있다. 처음에는 그랬지만, 애플은 이 버튼에 점점 복잡한 기능을 추가하기 시작했다. 초기 화면에서 홈 버튼을 누르면 검색 화면으로 이동한다든지, 홈 버튼을 길게 누르면 시리를 작동시킨다든지 하는 규칙이 그것이다. 저자는 이러한 기능이 지나친 것이 아닌가 라고 지적한다.

세 번째 원칙: 트리거는 자기 내부에 담긴 핵심 정보를 미리 표시할 수 있어야 한다. 메일 어플리케이션에 읽지 않은 메시지를 확인하는 버튼이 있다고 하자. 이 버튼에 사용자가 읽지 않은 메시지가 몇 건이 있는지 미리 배지로 표시해준다면 유저가 트리거를 실행할지 말지를 미리 결정할 수 있게 해줄 것이다.

동작규칙

동작 규칙은 마이크로인터랙션이 어떻게 작동하는지를 표현한다. 이 규칙은 최대한 단순해야 하며, 분명한 목표를 갖고 있어야 한다. 목표를 설계할 때 가장 중요한 건 목표가 단순히 버튼을 누르게 하는 게 아니라 사용자가 원하는 최종적인 상태에 도달하게 하는 데 있다는 것이다.

회원가입 마이크로인터랙션의 목표는 강력한 비밀번호를 입력하게 하는 게 아니라 회원가입을 완료시키는 것이다. 하나의 매크로인터랙션에 담겨 있는 수많은 마이크로인터랙션은 최종 목표를 이루기 위해 협동해야 한다.

기본값 제공

사용자가 선택할 여지가 많은 마이크로인터랙션은 복잡해지기 쉽다. 이를 막기 위해서는 모든 사용자에게 최적으로 설정된 기본값 옵션을 미리 설계해 그 옵션을 강조하거나 자동으로 실행해주는 편이 좋다.

오류 방지

마이크로인터랙션을 디자인할 때는 동작규칙 자체가 사용자의 실수를 방지할 수 있도록 설계하는 것이 좋다. 회원가입 입력 폼을 생각해보면, 반드시 필요한 입력값을 채우지 않은 체 '확인' 버튼을 누르게 해 오류 창을 띄우는 것보다 필수 값이 입력되지 않으면 아예 '확인' 버튼이 활성화되지 않게 하는 편이 좋다.

피드백

마이크로인터랙션에서 피드백의 목적은 사용자가 동작규칙을 이해하도록 돕는 것이다. 사용자가 버튼을 누르면, 두 가지를 표시하는 반응이 있어야 한다. 버튼이 눌렸다는 것, 버튼이 눌림으로 인해 무슨 일이 벌어졌다는 것.

사람을 위한 피드백

개발자는 프로그램에게 피드백을 전달하려고 애쓰지만, 마이크로인터랙션에서는 사람에게 제시되는 피드백에 더 큰 관심을 갖는다.

• 뭔가가 일어났음
• 사용자가 뭔가를 했음
• 어떤 과정이 시작됐음
• 어떤 과정이 끝났음
• 어떤 과정이 진행 중임
• 사용자가 원하는 행동을 할 수 없음

피드백의 동작규칙

피드백을 뚜렷한 이유 없이 제공해선 안 된다. 피드백에는 다음과 같은 자체적인 동작규칙을 지녀야 한다.

• 맥락 변화: 감지되는 맥락에 따라 피드백이 바뀌는가? 예) 주변 밝기에 따라 디스플레이의 밝기도 함께 바뀌는가?
• 지속 시간: 피드백은 얼마나 오랫동안 진행되고 언제 멈추는가?
• 강도: 피드백을 밝기, 속도, 소리 크기, 진동의 세기는 어느 정도인가? 시간이 흐르면 더 강해지는가 약해지는가?
• 반복: 피드백은 한번만 제공되는가, 반복적으로 제공되는가? 얼마나 자주 반복되는가?

순환과 모드

모드

모드는 인터랙션의 동작규칙을 아우르는 상위 개념이라고 볼 수 있다. 어떤 UI가 다른 모드에 진입한다면, 기존 모드와는 전혀 다른 동작규칙으로 인터랙션이 작동하게 된다. 예를 들어, 연락처를 조회하는 모드에서는 연락처를 클릭하면 상세 정보를 조회하거나 전화를 거는 기능 키가 작동하지만, 편집 모드로 전환되면 연락처를 클릭하는 행위가 편집 및 삭제를 하는 동작규칙으로 바뀔 수 있다.

웬만하면 다양한 모드를 만들지 않는 것이 마이크로인터랙션에서는 더 권장된다. 하지만 그럼에도 모드가 필요한 상황이라면 다음과 같은 간소화된 모드 규칙을 적용해보는 것을 고려해 보자.

용수철 모드, 일회성 모드

용수철 모드는 키를 누르거나 마우스 버튼을 누르는 것처럼 물리적인 행동을 했을 때 잠시 활성화됐다가 행동이 멈추면 종료된다. 전형적인 사례로는 쉬프트 키를 누르는 행위를 들 수 있을 것이다. 영타 모드에서 쉬프트를 누르면 모든 문자를 대문자로 입력할 수 있지만, 쉬프트 키에서 손을 때면 다시 소문자를 입력하는 모드로 돌아오게 된다. 용수철 모드는 사용자가 모드를 바꾸었다는 것을 분명하게 인식할 수 있고, 지속시간이 짧고, 단순한 행위를 할 때만 사용해야 한다.

일회성 모드는 사용자가 단 한번 행동할 때에만 지속되고 바로 종료되는 모드를 말한다. 아이폰에서 문자를 두 번 탭하면 복사/잘라내기 선택 창이 나타나고 유저가 버튼을 클릭하면 바로 사라진다. 일회성 모드는 즉각적으로 종료되므로 사용자가 엉뚱한 모드에서 실수를 하지 않도록 방지해준다.

사용자가 모드를 끝내고 다시 원래 상태로 돌아가게 하기 위해선 순환이라는 개념을 적용할 필요가 있다.

순환

순환은 설정된 시간마다 주기적으로 반복되는 상황을 말한다. 사용자는 반복 주기를 설정할 수 있는데 주기의 길이에 따라 마이크로인터랙션의 수명은 매우 길어질 수도 있다. 매주 월요일 아침 7시마다 알람을 주도록 스마트폰에 설정하든지, 1년에 한번씩 누군가의 생일을 캘린더에 저장해두고 알람을 받으려 할 수도 있다.

순환은 4가지 종류가 있다.

• 횟수 기준 순환: 이 순환은 정해진 횟수만큼 반복하고 종료된다. 예) 인터넷 접속이 되지 않을 때 5번 정도 재시도를 하고 사용자에게 오류 메시지를 표시한다.
• 조건 기준 순환: 이 순환은 정해진 조건이 충족되면 계속 반복된다. 트위터 페이지에 접속한 경우 새 트윗이 들어왔는지 1분마다 계속해서 확인하는 경우가 있을 것이다.
• 수집 기준 순환: 조건 기준 순환과 비슷하지만, 조건 집합에 포함된 모든 항목을 대상으로 실행된 후에 종료된다. 예) 새 메일을 모두 확인한 다음에야 새 메일 확인 알람은 종료된다.
• 무한 순환: 일단 시작하면 오류가 생기거나 직접 취소하지 않는 한 계속 반복된다. 예) 전구를 켜는 것. 전구를 끄기 전까지, 혹은 전구의 수명이 다할 때까지 전구는 계속 켜져 있을 것이다.