모션으로 사용성 만들기 : 모션 선언문의 UX (1)
[번역] 움직임이 있는 UX의 12가지 원칙
이 글은 Medium에 발행된 Issara Willenskomer의 Creating Usability with Motion: The UX in Motion Manifesto 을 번역한 글입니다. 눈을 호강시켜주는 예시들과 고뇌의 내용에 감명받아 번역을 마음먹게 되었습니다. 주제가 무겁고 어려운 용어가 많아 이해를 돕기 위해 수정한 부분이 많고, 2화로 나누어 발행하였으니 양해 바랍니다. 오역은 hello@lain.kr로 제보 부탁드리고, 번역을 허락해 주신 Issara Willenskomer께 감사드립니다. :)
Creating Usability with Motion: The UX in Motion Manifesto
모션으로 사용성 만들기 : 모션 선언문의 UX
원글 : Issara Willenskomer
번역 : 강운봉
이 글은 "UX 혹은 UI 디자이너들이 사용성을 모션으로 확인할 때 어떤 것을 고려해야 할까?"라는 질문에 대한 답이 될 수 있을 것 같습니다.
저는 지난 5년 동안, 40개국 이상을 돌며 UX/UI 디자이너를 지도하고 멘토링 하였습니다. 워크숍과 UI 애니메이션 튜토리얼들을 통해서 수많은 브랜드와 디자인 컨설팅을 지도하였으며, 개인적으로 큰 영광이었습니다.
15년 넘게 UI 모션을 연구하면서, 모션을 통해 UX 프로젝트의 사용성을 개선하는 12가지 방법이 있다는 결론을 얻었습니다.
이러한 방법들을 '움직임이 있는 UX의 12가지 원칙'이라 부르며, 수많은 혁신적인 방법으로 시너지 효과를 낼 수 있을 것으로 생각합니다.
이 선언은 총 5 섹션으로 나누어져 있습니다.
1. UI 애니메이션을 말하는 것이 아닙니다. - 당신이 생각하는게 아닐 수 있어요.
2. 실시간 인터랙션 vs 비실시간 인터랙션
3. 모션으로 사용성을 개선하는 4가지 방법
4. 원칙, 기법, 특성, 그리고 값
5. 움직임이 있는 UX의 12가지 원칙
콘퍼런스에서 연설하거나 흥미진진한 모션 및 유용성 주제에 대해 팀의 현장 워크숍을 이끌길 원하면 여기로 이동하십시오. 당신이 사는 도시에서 진행하는 수업에 참석하고 싶다면 여기로 가십시오. 마지막으로, 프로젝트에 대해 컨설팅을 원하면 여기로 가십시오. 메일을 통해 'usability and motion'에 관한 기사를 보려면 여기를 클릭하십시오.
UI 애니메이션을 말하는 것이 아닙니다.
12원칙에 들어가기에 앞서 약간의 배경 설명을 하겠습니다. 왜냐하면 대부분 디자이너가 유저 인터페이스에서 모션은 'UI 애니메이션'으로만 이해하고 있기 때문입니다.
일반적으로 'UI 애니메이션'이 사용자 경험을 더욱 즐겁게 만드는 것으로 생각하지만, 서비스 전체를 봤을 땐 사실, 많은 가치를 부여하지 않습니다. 그래서, UI 애니메이션은 종종 이유 없이 구박받는 존재처럼 다뤄지기도 하고, 결국 일반적 형태로 마무리되기도 합니다.
또한, 유저 인터페이스의 모션은 '디즈니의 12 애니메이션 원칙'의 영역에 포함되어있는 것으로 이해될 수 있지만, 나의 아티클인 ‘UI Animation Principles — Disney is Dead.'에서는 논쟁의 대상이 됩니다.
이 글에서는 '건축물'이 '건축학'에 속하는 것처럼 'UI 애니메이션'이 '움직임이 있는 UX의 12가지 원칙'에 속한다고 말하고 싶습니다.
애니메이션은 어떤 것이든 만들 수 있는 툴이라고 생각합니다. 원칙은 그 툴의 사용법으로 아이디어를 실용적으로 만들 수 있도록 도와줍니다. 그래서 원칙들은 디자이너에게 높은 레버리지 기회를 준다고 생각합니다.
대부분의 디자이너들이 생각하는 'UI 애니메이션'은 사실 좀 더 높은 차원의 디자인 양식을 말합니다. 이것은, 실시간 또는 비실시간으로 이벤트가 발생할 때 일어나는 일시적인 오브젝트의 움직임을 말합니다.
실시간 인터랙션 VS 비실시간 인터랙션
여기에서는, 'state(상태)'와 'act(행위)'를 구별하는 것이 중요합니다. UX에서 어떠한 '상태'는 기본적으로 정적인(모션이 없는) 상태입니다. UX에서 어떠한 '행위'는 시간적이고 모션을 동반하고 있습니다. 오브젝트가 마스킹인 '상태(모션이 없는)'에 있거나 마스킹 '행위(모션이 있는)'중일 수 있습니다. 후자의 경우 움직임과 관련 있고 이 움직임은 사용성을 개선할 수 있는 요소임을 알아야 합니다.
또한, 인터랙션의 시간적인 요소는 실시간(realtime) 또는 비실시간(non-realtime)으로 일어날 수 있습니다. 실시간은 사용자가 인터페이스에서 오브젝트와 직접 상호작용하고 있음을 의미하고, 비실시간은 오브젝트 행위가 사용자 액션 이후에 발생하며, 일시적인 것을 의미합니다.
이 같은 차이는 중요합니다.
실시간 인터랙션은 사용자가 인터페이스 오브젝트와 직접 상호작용한다는 점에서 '직접 조작'이라고 할 수 있고, 인터페이스의 모션은 사용자가 사용 중일 때만 발생합니다.
비실시간 인터랙션은 사용자의 입력 후에만 발생하고, 모션이 완료될 때까지는 잠시 사용자 경험을 잠가놓는 효과가 있습니다.
이러한 구별은 이후에 이야기할 '움직임이 있는 UX의 12가지 원칙'을 이해하는데 도움이 될 것입니다.
모션으로 사용성을 개선하는 4가지 방법
중심축이 되는 다음 4가지는 사용자 경험 중에서 시간적 행동의 사용성을 고려한 방법입니다.
기대, 예상 (Expectation)
"Expectation"은 2가지 영역으로 나눌 수 있습니다. 사용자가 어떤 오브젝트인지 인식하는 영역과 그 오브젝트가 어떻게 움직이는지 인지하는 영역입니다. 디자이너들은 사용자가 기대하는 것과 실제로 사용자가 경험하는 것의 갭을 최소화해야 할 것입니다.
연속성 (Continuity)
"Continuity"는 사용자 흐름과 사용자 경험의 '일관성' 모두를 말합니다. 장면 내에서의 '내부 연속성'과 전반적인 사용자 경험을 만들어 내는 여러 장면들에서의 연속성을 고려해야 합니다.
내러티브, 서술적, 맥락, 이야기 (Narrative)
"Narrative"는 사용자 경험을 통해 시간적/공간적인 구조를 만들어내는 이벤트의 과정들입니다. 쉽게 말하면, 사용자 경험들이 서로 연결되는 일관된 상황과 이벤트를 고려해야 합니다.
관계 (Relationship)
"Relationship"은 사용자가 이해하고 의도한 대로 움직이는 인터페이스 오브젝트들의 공간적, 시간적, 계층적 표현을 나타냅니다.
원칙, 기법, 특성, 그리고 값
타일러 웨이 (Tyler Waye) 는 다음과 같이 말합니다. "원칙은... 여러 가지 기법을 만들어 내는 기본 전제이자 기능들의 약속, 규칙을 근간으로 하고 있습니다. 이러한 요소는 어떤 일이 일어나든지 일관성을 유지하게 됩니다." 여기에서 원칙은 디자인이 불가지론적(agnostic, 자유롭게 이해할 수 있는)이라는 것을 강조하고 있습니다.
그래서, 최상위에 원칙을 두고, 그 아래에는 기법, 그 아래에는 속성, 그 아래에는 값이 있는 계층 구조를 상상해 보았습니다.
Techniques(기법, 테크닉)은 원칙의 다양하고 제한 없는 실행 / 또는 원칙들의 결합으로 생각할 수 있습니다. 나는 테크닉을 '스타일'과 유사한 개념이라고 생각합니다.
Properties(속성)은 움직임이 있는 테크닉을 만들기 위해 필요한 오브젝트의 특정한 성질들입니다. 여기에는 위치, 불투명도, 크기, 회전, 고정 점, 색상, 획의 너비, 모양 등이 포함됩니다.(제한 없음)
Values(값)은 우리가 '애니메이션'이라 부르는 것을 만들 때 필요한 것으로, 시간이 지남에 따라 달라지는 실제 수치의 속성 값입니다.
이 것을 이해했다면, 화면에 오브젝트가 나타나는 모션을 다음과 같이 설명할 수 있을 것입니다.
"내가 생각한 UI 애니메이션은 블러와 불투명도 속성이 각각 25px과 70% 값인 'blurred glass’ 기법으로, 'Obscuration(숨기다, 모호하게 하다)'원칙을 사용해서 만든 거야!"
움직임이 있는 UX의 12가지 원칙
'Easing'과 'Offset & Delay'는 타이밍과 관련이 있습니다. 'Parenting'은 오브젝트의 관계와 관련이 있습니다. 'Transformation', 'Value Change', 'Masking', 'Overlay', and 'Cloning' 는 모두 오브젝트의 연속성과 관련이 있습니다. 'Parallax'는 시간적인 계층과 관련이 있습니다. 'Obscuration', 'Dimensionality' 및 'Dolly & Zoom'은 모두 공간의 연속성과 관련이 있습니다.
원칙 1 : Easing
이벤트가 발생하고 오브젝트에 움직임이 있을 때에는 사용자의 기대하는 것과 일치하도록 합니다.
예시 1
대체로 인터페이스 오브젝트에는 움직임(실시간, 비실시간 구분 없이)이 있습니다. 여기서 'Easing(가속도)'이라는 것은 사용자 경험을 매끄럽게 하는 '자연스러움'을 만들어 내고, 오브젝트는 사용자가 기대 한대로 움직이면서 연속성을 느끼게 합니다. 덧붙이면, 디즈니는 이것을 'Slow In and Slow Out'이라고 부릅니다.
예시 2 / 예시 3
예시 2의 움직임을 보면 '나빠' 보입니다. 'Easing'을 더한 예시 1은 '좋아' 보입니다. 위의 3가지 예시에는 같은 프레임 수와 시간을 가지고 움직입니다. 유일한 차이점이라면 속도가 느려지는 것입니다.
사용성을 고려하는 디자이너라면 아름다움은 잠시 제쳐두고, 어떻게 하면 더 좋은 사용성을 가질 수 있을까 하는 엄격한 요구와 질문을 스스로에게 할 수 있어야 합니다.
여기에 있는 예시들은, 기본 모션에 'Easing'이 포함되어 있습니다. 사용자의 기대치를 벗어나는 모션은 사용자의 인터랙션을 감소시킬 수 있지만, 'Easing'이 적절하게 잘 적용된 모션의 경우라면, 사용자들은 매끄러우면서 과장되지 않은 경험을 줍니다. 산만하지 않다는 점에서 분명 좋은 점입니다. 어찌 되었든 'Linear motion'은 어설프고 불안정하며, 산만해게 느꺄지는 것은 분명합니다.
그럼 이제 앞서 말한 것에 모순되는 예시 3에 대해 이야기해 보겠습니다. 모션이 매끄럽지는 않습니다. 사실, 그것은 '디자인된(튕기는 듯한)'느낌을 가지고 있습니다. 오브젝트가 어떻게 배경에 멈추는지 알 수 있습니다. 예시 1과는 다른 느낌이고 'Linear motion'보다는 '정확함'을 더 느낄 수 있습니다.
당신이 'Easing'을 사용하고도 여전히 사용성을 고려하지 않은 것처럼(또는 최악의 경우처럼) 보일 수 있냐고 묻는다면, 대답은 '예'이며 여러 가지 케이스가 있습니다. 첫 번째는 타이밍입니다. 타이밍이 너무 느리거나 빠르면 예상을 깨고 사용자의 주의를 분산시킬 수 있습니다. 마찬가지로, 당신의 'Easing'이 브랜드 또는 전반적인 경험에 맞지 않을 경우, 기대하는 경험과 일관성에 부정적인 영향을 줄 수 있습니다.
저는 여러분이 'Easing'을 다양하고 적극적으로 사용했으면 합니다. 말 그대로, 디자이너가 프로젝트에서 구현할 수 있는 'Easing'은 수없이 많이 존재합니다. 이 모든 'Easing'들은 사용자가 기대하는 반응을 보여 줄 것입니다.
요약하면 : 이징은 언제 사용합니까? 항상.
필자의 기사 'The irony of usability and linear motion'에서 'Easing'에 대해 자세한 내용을 확인할 수 있다.
원칙 2 : Offset & Delay
새로운 오브젝트나 화면의 모션은 오브젝트들의 관계와 계층 구조를 통해 정의합니다.
Offset(상쇄:원래의 상태로 돌아간다) & Delay(지연)는 디즈니의 애니메이션 원칙들 중 'Follow Through and Overlapping Action'에서 영향을 받았습니다.
하지만, 목적과 결과가 다를 수 있다는 점에서는 차이가 있다는 것을 유념해야 합니다. 디즈니의 원칙은 '더 매력적인 애니메이션'을 만들고자 함이지만, UI 애니메이션 원칙은 더 좋은 사용자 경험을 만들고자 하는 것입니다.
이번 원칙의 사용성은 사용자가 인터페이스의 오브젝트 특성에 대해 사용자에게 미리 '말해' 줌으로써 의식적으로 인지시켜 준다는 점입니다. 위 예시를 보면, 상단의 두 오브젝트는 결합되어 있고 하단의 오브젝트는 분리되어 보입니다. 아마도 상단의 두 오브젝트는 대화가 없는 이미지이거나 텍스트인 같은 오브젝트일 테고, 하단의 오브젝트는 상단과는 다른 형태인 버튼이 될 수 있을 것입니다.
사용자가 오브젝트를 인지하려고 하는 순간, 디자이너가 오브젝트를 어떻게 '분리' 시켜 놓았는지를 통해 무엇인지를 알려주게 되는데, 이것은 매우 설득력이 있습니다.
Credit : InVision
위의 예제에서 플로팅 버튼은 세 개의 버튼으로 구성된 머리글 탐색 요소로 변환됩니다. 버튼들은 서로 'Offset(상쇄:원래의 상태로 돌아간다)'되기 때문에 결국 'Separateness(분리)'를 통해 사용성을 개선할 수 있게 됩니다. 다르게 말하면, 디자이너는 시간이라는 요소를 이용하여 사용자가 플로팅 버튼을 인식하기 전에도 오브젝트가 분리되어 있다고 이해시킵니다. 이것은 인터페이스의 오브젝트가 디자인과는 다른 특성을 가지고 있다는 것을 사용자에게 알리는 효과가 있습니다.
더 이해를 돋기 위해, Offset & Delay 원칙을 위반하는 예제를 보여 드리겠습니다.
Credit : Jordi Verdu
위의 예제를 보면 배경 이미지 위에 아이콘들이 나타나고 있습니다. 이 아이콘들은 서로 독립적이고 다른 기능을 하지만, 진입하는 움직임은 이것과 모순됩니다.
아이콘은 행으로 그룹화되어 마치 단일 오브젝트처럼 움직입니다. 그리고 타이틀 또한 행으로 그룹화되어 단일 오브젝트처럼 움직입니다. 모션이라는 것은 사용자에게 눈에 보이지 않는 것도 알려 준다는 것을 명심해야 합니다. 이 경우에는 인터페이스의 오브젝트의 모션이 좋은 사용성을 가지지 못한다고 말할 수 있습니다.
원칙 3 : Parenting
여러 오브젝트와 상호 작용을 할 때에는 공간적/시간적 계층 관계를 만들 수 있습니다.
'Parenting'은 사용자 인터페이스의 오브젝트들을 '연결시키는' 매우 효과적인 원칙입니다. 위의 예제에서 자식 오브젝트(상단)의 'scale'과 'position'속성은 부모 오브젝트(하단)의 'position'속성과 연결시켜 움직이고 있습니다.
'Parenting'은 오브젝트 속성을 다른 오브젝트 속성과 연결하는 것입니다. 이것은 오브젝트 관계와 계층 구조를 만들어 내는 방식으로 사용성을 고려하게 됩니다.
또한, 'Parenting'은 디자이너가 사용자 인터페이스에서 일어나는 이벤트를 다양하게 설계할 수 있도록 해 주고, 오브젝트 관계의 특징을 사용자에게 전달해 줍니다.
오브젝트의 속성에는 스케일, 불투명도, 위치, 회전, 모양, 색상, 값 등이 포함됩니다. 이러한 속성은 다른 속성과 연결되어 사용자 경험에 있어 시너지 효과를 낼 수 있습니다.
Credit: Andrew J Lee / Frank Rapacciuolo
좌측 예시에서 '얼굴'요소의 'y-축' 속성은 '라운드 숫자 바' 요소의 'x-축' 속성과 연결되어 있습니다. '라운드 숫자 바'요소가 가로축을 따라 이동하게 되면 '자식'요소가 되는 '얼굴'요소의 가로 및 세로 방향(마스크 된 상태 - 또 다른 원칙)과 함께 이동합니다.
이 예시는 결과적으로, 계층 관계가 동시에 발생하는 구조라고 말할 수 있습니다. 각각의 숫자에서 '얼굴' 오브젝트가 완전히 보일 때도 있고 부분적으로는 보이지 않을 때도 있는데, '얼굴' 오브젝트는 값을 고정시키는 '고정 장치(lockup)'로 사용되고 있습니다.
'Parenting'는 '실시간 인터랙션'으로서 가장 효과적 원칙입니다. 디자이너는 사용자가 직접 인터페이스 오브젝트를 조작한다는 것을 염두하면서 오브젝트의 연결 방식과 그 관계를 통해 사용자와 커뮤니케이션한다고 이해하면 됩니다.
'Parenting'에는 ‘Direct parenting’(위의 2가지 예시), 'Delayed parenting'과 'Inverse parenting'(아래 예시 참고)의 세 가지 종류가 있습니다.
Delayed Parenting (Credit: AgenceMe) & Inverse Parenting (Credit: AgenceMe)
원칙 4 : Transformation
오브젝트의 사용성이 변경될 때는 내러티브(이야기, 맥락, 서술)에 맞는 연속적인 상태로 만듭니다.
'Transformation(변형)' 원칙에 대해서는 이미 많은 사람들의 글이 나와 있습니다. 그런 면에서는 다른 원칙들 보다 가장 명백하다고 할 수 있습니다.
'Transformation'은 눈에 띄기 때문에, 가장 잘 인식합니다. 아래의 예시를 보면, Submit버튼이 진행상태를 확인하기 위해 방사형 막대 모양으로 바뀌고, 최종적으로는 원래의 버튼 모양을 바뀌면서 완료 표시하고 있습니다. 이 예시는 우리의 관심을 끌고, 이야기를 들려주듯이 이벤트가 완료됩니다.
Credit: Colin Garven
'Transformation'은 기능적인 공간을 통해 완전히 다른 UX 상태들(버튼, 방사형 로딩바, 완료 마크)로 바뀌면서 최종 화면으로 오게 됩니다.
'Transformation'은 사용자 경험에서 중요한 부분을 인지적으로 분리하고, 연속적인 이벤트로 만들면서 ‘Chunking(개별적인 정보가 의미 있는 전체로 결합되는 과정)’ 효과가 있습니다. 이를 통해 사용자 인식, 유지 관리 및 후속조치를 보다 효과적으로 수행할 수 있습니다.
내용이 길어 2화에서 계속 이어집니다!
혹여나, 오역이 있을 경우 hello@lain.kr로 제보 부탁드립니다 :)
