은행 디지털부서에서 일하는 40대 아저씨 관점과 배경지식, 경험으로 씌어진 글임을 먼저 밝힙니다.
2012년 뉴욕타임즈에 나온 기사는 마이크로인터랙션 또는 UIUX 관련된 일화를 언급할 때 단골소재가 되었습니다.
그것은 훗날 Patron X라는 별명을 갖게 된 한 아이폰 유저에 대한 이야기입니다. 구글링하면 간단하게 full story는 검색해서 확인하실 수 있으니 간단하게 세줄 요약하면 이렇습니다.
- 한 관현악단의 후원자가 연주회 전날 블랙베리에서 아이폰으로 전화기를 교체했다.
- 연주회 당일 그는 "당연히" 매너모드로 전환한 채 객석에 앉았다.
- 연주 중 휴대폰의 알람이 한참...매우 한참 울려댔고, 연주는 중단되고, 모두 욕을 해댔는데, 이 알람이 바로 (함께 욕을 해댔던) 한 후원자(Patron)의 아이폰이었다.
매너모드에서 알람이 울리는 게 맞을까요? 아니면 매너모드는 그 모든 기능의 최상위에서 통제를 해야할까요?
우리는 이미 수없이 많은 마이크로 인터랙션에 둘러싸여있습니다. 손에 든 핸드폰 뿐 아니라, 노트북, 지하철 발권기, 하물며 버스정류장의 버스대기현황에도 마이크로 인터랙션은 적용되어 있습니다. 그럼 도대체 이 마이크로 인터랙션이 무엇일까?
이미 정답은 용어에 다 들어 있다. 거대(macro)하지 않은 작은(micro) 상호작용(interaction)을 하는 무언가입니다.
"기능"이라는 단어를 사용할까 고민했지만 기능보다는 작은 느낌 또는 개념이기 때문에 우선 무언가로 하고 다음과 같이 부연설명을 하겠습니다. 이 무언가는 화면의 어떤 요소가 될 수도, 소리가 될 수도, 아니면 진동이 될 수도 있습니다. 이해를 돕기위해 몇가지 예를 들어보겠습니다.
아이폰 유저라면 "hey siri"를 종종 외칠텐데, 그 때 폰에서 일어나는 일이 무엇인지 아시는지?
화면하단에 물결이나, 또는 움직이는 아이콘의 형태로 당신의 호출을 인지했다는 걸 가볍게 알려줍니다.
만약 그 아이콘이 없다면 어떨까요?
기계와 인간의 상호작용에 대해서는 HCI와 같은 학문의 형태로 오래전부터 연구하고 고민해온 주제입니다.
마이크로인터랙션도 그와 철학은 같지만, 훨씬 더 작고 언뜻 눈에 띄지 않는 경우도 있습니다. 한가지 주의할 사항은 눈에 아예 안띄는, 또는 사용자의 행동을 유도하거나 사용자의 사용성에 도움을 주지 못하는 마이크로인터랙션은 뭔가 개선이 필요하거나 불필요한 거라고 봅니다.
또 다른 예를 들어보겠습니다.
최근 마이크로 인터랙션이라는 단어가 국내 금융사의 디지털부서의 보고서나 회의에서도 종종 보입니다.
이러한 현상은 카카오뱅크의 다양한 시도가 한 몫을 했습니다. 예를 들어 26주 적금에서 매주 적금이 채워질때 마다 움직이는 카카오 캐릭터들이 채워지거나, Gamification 요소가 이벤트나 앱화면에 적용되면서 움직임을 갖는 다양한 효과같은 것들을 통칭하여 마이크로 인터랙션이라고 하고 있기 때문입니다.
마이크로 인터랙션이 반드시 시각적인 요소로 구성되거나 디자인되는 건 아니지만, 직관적으로 개념을 이해하는데는 가장 쉽기 때문에 UI에서의 효과로 대부분 인식되는 건 사실입니다.
마치 메타버스를 게임으로 인식하듯이.
특히 UI가 아닌 UX라는 단어가 4년여전부터 여기저기 쓰이다 보니 자연스럽게 연결된 측면이 있고, Airbnb에서 만든 Lottie(어도비 이펙트를 사용하기 쉽게 해주는 라이브러리)가 사용되면서 이와같은 움직이는 그림이 마치 마이크로 인터랙션인 것처럼 사람들에게 알려지고 있습니다.
저는 이런 현상이 이와 같은 상위개념의 용어가 겪어야할 운명같은 거라 생각합니다. 마이크로 인터랙션의 철학이나 학문적인 정의는 너무 깊고 넓고 지루합니다. 그러다보니 쉽게 이해할 수 있는 방향으로 흘러가는 거고, 그게 마치 아이폰의 매너모드처럼 맞기도 하고 틀리기도 한거지요. 메타버스가 온통 게임이라고 인식되는 것과도 비슷해 보입니다.
앞에서도 잠깐 언급했지만 마이크로 인터랙션의 종류가 반드시 그래픽적인 요소만을 의미하진 않습니다. 소리나 햅틱(haptic, 진동, 모션 정도로 우선 이해하면 됩니다.)도 마이크로 인터랙션이 될 수 있습니다. 또한 이름이 마이크로지만 마이크로 인터랙션은 일부가 될 수도 있고, 전체가 되기도 합니다. 이는 설명하기가 참 어려운 부분입니다. 마이크로 인터랙션을 기능이라하진 않기 때문인데요, 일반적으로는 많은 인터랙션이 모여 기능으로 구현되거나, 하나의 프로세스로 만들어지기 때문입니다.
저런 이유로 마이크로 인터랙션은 반드시 기획단계부터 고려가 되어야 합니다.
제 주변이나, 국내의 많은 기획자나 디자이너 또는 개발자가 마이크로 인터랙션과 관련해서 놓치는 가장 큰 부분은 개발과정에서 가장 마지막에 이를 고려한다는 것입니다. 업무기획 단계는 넘어가더라도 화면디자인이나 업무 프로세스 설계단계에서는 최소한 고려가 되어야 하는데, 일반적으로 개발이 거의 되었거나, 또는 어느 정도 테스트가 완료된 이후 서비스에 에지를 주거나 톡톡 튀는 효과를 얹기 위해 사용되는 게 현실입니다.
마이크로 인터랙션은 4가지 요소로 구성되어 있습니다.
Trigger, Rule, Feedbank, Loops and Modes 입니다.
트리거는 사용자에 의한 마이크로 인터랙션의 시작입니다.
'Hey. Siri~'가 트리거가 됩니다.
일반적으로 트리거는 사용자에 의해(수동으로) 시작되지만 항상 그런건 아닙니다. 시스템이 어떤 조건에서 트리거를 발생시키도록(자동으로) 설계가 되어 있을 수도 있습니다. 트리거의 가장 중요한 역할은 사용자를 실제 상호작용, 즉, 동작규칙으로 이끈다는 것이입니다.
Rule은 트리거에 시작된 마이크로 인터랙션이 어떻게 동작하는지 결정하는 동작의 규칙입니다.
이러한 규칙은 앞에서 시리를 호출했을때 아이폰이 사용자가 시리를 호출하는 명령에 제대로 응답(음성명력이 제대로 입력)했는지, 제대로 응답이 되지 않았는지 보여주는 동적 아이콘으로 표현됩니다.
Rule은 보통 다음 사항을 결정합니다.
- 트리거가 활성화 될 때 마이크로 인터랙션의 반응
- 마이크로 인터랙션이 진행되는 동안 사용자가 중간에 조작할 수 있는 항목
- 순차적인 동작을 위한 순서와 타이밍 (검색어를 넣은 후 검색 버튼을 보여줌)
다음 요소는 마이크로 인터랙션의 동작상황을 표시하는 피드백입니다.
피드백은 일반적으로 우리가 생각하는 에러가 발생하거나, 정상적으로 Task가 완료된 경우 보여지는 결과입니다.
중요한 건 그 결과가 문맥에 맞아야 하고, 인간적이어야 하며, 고개가 끄덕여져야 합니다.
명확한 피드백을 주기위해, 또는 강한 경고를 위한 것에만 집착하다보면 피드백이 아닌 노이즈가 되기 쉽습니다.
마이크로 인터랙션에게 영향을 미치는 상위규칙인 순환과 모드입니다.
음...이건 4가지 요소 중 하나이긴 모드의 경우 없는 게 좋습니다. 모드는 어플리케이션이 평소와는 다르게 동작하는 특별한 부분입니다. 예를 shift키나 alt키를 누르는 경우입니다. 따라서 사용자는 기존과 다른 동작을 별도로 기억을 해야 합니다.
순환은 하나 이상의 명령이 반복되는 것을 의미합니다. 일정시간마다 데이터를 확인한다거나, 일정시간 동안 실행 후 멈춘다는 것은 모두 순환에 대한 것입니다. 사용자 입장에서 반대방향으로 사고방식을 바꿔 아무런 사용자의 동작이 없을때 자동으로 종료시키거나, 화면에 행동을 유동하는 것도 순환이라는 개념을 이용한 것입니다.
마지막으로 매크로 인터랙션을 소개하고 마치겠습니다. 많이 사용되진 않지만 실제 사용되는 단어입니다.
간단하게 구분하자면 페이지 단위의 인터랙션이 매크로, 페이지 안의 수없이 많고 작은 인터랙션이 마이크로라고 생각하시면 됩니다. 매크로 인터랙션은 이름에서도 알 수 있듯이 지향하는 내용은 마이크로보다는 조금더 크고 장기적입니다.
아래 https://www.uxbooth.com/ 에서 정리한 내용이 이해하는 데 가장 도움이 될 것 같아 인용합니다.
Macrointeraction goals:
- Education for your product or service
- Improve sentiment for a brand
- Generate sales leads
- Make happy users and maintain customer loyalty
- Boost app downloads
- Reaction response
마치 거시경제와 미시경제가 어우러져 하나의 경제 Eco-Systmem과 이 세상의 경제를 설명하듯, 마이크로 인터랙션은 매크로 인터랙션과 어우러지고 인터랙션(상호작용)이 있어야 합니다.
현장에서는 참으로 어려운 이야기가 아닐 수 없는 건 비밀입니다.
'2-minutes lecture' 카테고리의 다른 글
| 은행, 차세대, 다운사이징 (0) | 2021.11.12 |
|---|---|
| Private Debt, Private Debt Fund (0) | 2021.11.03 |
| 와이어프레임, 목업, 프로토타입, 스토리보드 구분하기 (0) | 2021.10.22 |
| SRE 이해하기 (Site Reliability Engineering, feat.DevOps) (0) | 2021.10.21 |
| API vs. BaaS vs. Embedded Finance (0) | 2021.10.20 |
