모션으로 사용성 만들기 : 모션 선언문의 UX (2)
[번역] 움직임이 있는 UX의 12가지 원칙
이 글은 Medium에 발행된 Issara Willenskomer의 Creating Usability with Motion: The UX in Motion Manifesto 을 번역한 글입니다. 눈을 호강시켜주는 예시들과 고뇌의 내용에 감명받아 번역을 마음먹게 되었습니다. 주제가 무겁고 어려운 용어가 많아 이해를 돕기 위해 수정한 부분이 많고, 2화로 나누어 발행하였으니 양해 바랍니다. 오역은 hello@lain.kr로 제보 부탁드리고, 번역을 허락해 주신 Issara Willenskomer께 감사드립니다. :)
원칙 5 : Value change
값이 변경될 때, 동적이고 연속적인 내러티브(Narrative) 관계를 만듭니다.
텍스트 기반의 UI 오브젝트인 '문자'와 '숫자'는 값을 변경할 수 있습니다. 이것은 ' 놓치기 쉬운(Elusive obvious)' 개념들 중 하나입니다.
문자와 숫자의 변경은 너무 흔한 일이기에, 사용성을 고려하기 위해 차별되고 엄격한 평가 기준을 가지고도 쉽게 넘어가는 경우가 있습니다.
그렇다면, 값이 변경될 때의 사용자 경험은 무엇일까요? 여기서 모션 원칙은 사용자 경험에서 사용성을 개선할 수 있는 기회를 줍니다. 이러한 기회는 데이터에 숨겨진 현실감과 에이전시 콘셉트(Concept of Agency), 값 자체에서 나오는 동적인 성질을 사용자에게 느끼게 합니다.
사용자 대시 보드의 예를 살펴보겠습니다.
값을 기반으로 하는 UI 오브젝트가 'Value change(값 변경)'없이 로드되면 사용자에게 전달되는 것은 정적인 오브젝트일 것입니다. 그것은 마치 속력의 한계를 나타내는 그래프와 같아 보입니다. (좌측예제)
'숫자'혹은 '값'은 실제로 일어나는 일의 표현입니다. 그 표현에는 시간, 소득, 게임 스코어, 비즈니스 지표, 피트니스 트래킹 등이 될 수 있습니다. 우리가 모션을 통해 확인할 수 있는 것은 '값'이 동적으로 변하는지와 동적인 값들이 어떠한 요소와 반응한다는 것입니다.
정적으로 오브젝트로 구성하게 되면 이러한 관계는 무의미해질 뿐 아니라, 사용성 개선의 기회도 잃게 됩니다.
값 기반의 모션 형태로 동적인 시스템을 표현하게 되면, 일종의 '신경 피드백 (Neurofeedback)'이 활성화됩니다. 데이터의 동적인 성질을 이해한 사용자는 그 값을 변경할 수 있음을 알게 되며, 에이전트(Agents)가 될 수도 있습니다. 반대로, 값이 고정되어 있으면 데이터 값의 연결이 적어지고 사용자는 에이전시(Agency)를 잃게 됩니다.
Credit: Barthelemy Chalvet, Gal Shir, Unknown
'Value change' 원칙은 실시간 또는 비실시간 이벤트 모두에서 발생할 수 있습니다. 실시간 이벤트에서는 사용자가 오브젝트와 직접 인터랙션하며 값을 변경시킵니다. 그리고, 로더와 트랜지션 같은 비실시간 이벤트의 경우에는 동적인 흐름을 반영하기 위해 사용자 입력 없이도 값이 변경되도록 움직임을 추가할 수 있습니다.
원칙 6 : Masking
오브젝트 또는 오브젝트 그룹이 보이거나 숨겨질 때의 움직임은 연속성을 가집니다.
어떻게 마스킹을 할 것인지는 오브젝트의 형태와 연속성의 관계를 기준으로 정의해 볼 수 있습니다.
대체로 디자이너들은 움직임이 없는 'Masking'이 익숙하기 있기 때문에, 시간을 기반으로 움직이는 'Masking' 모션 원칙의 특징을 잘 이해해야 합니다.
'Masking'은 오브젝트 영역을 보이고 숨기는 시간을 이용해 연속적이고 매끄럽게 화면을 전환시킵니다. 또한, 이것은 내러티브(Narrative)를 유지하는 효과가 있습니다.
Credit: Anish Chandran
위의 예시에서, 헤더 이미지는 모양과 위치는 변하지만, 내용은 변하지 않고 앨범 커버로 변경됩니다. 여기서 'Masking'을 통해 내용이 유지되는 동안 오브젝트는 어떠한 형태로도 변할 수 있는 이점을 가지게 됩니다. 이것은 상당히 깔끔한 트릭으로, 사용자의 입력 후에 전환되는 비실시간 인터랙션으로 발생합니다.
UI 애니메이션 원칙은 일시적으로 발생하며 연속성, 내러티브, 관계 및 기대를 통해 사용성을 개선한다는 점을 기억해야 합니다. 위의 예시에서 오브젝트의 내용은 변하지 않지만 모양과 위치가 바뀌게 되고, 이 두 가지 요소에 따라 오브젝트가 무엇인지 결정됩니다.
원칙 7 : Overlay
계층화된 오브젝트가 종속된 위치에 있을 경우, 시각적인 배경과 오브젝트 사이에 공간적인 관계를 만듭니다.
'Overlay(씌우다)'는 공간이 부족한 계층 구조를 극복하기 위해, 사용자가 오브젝트 속성을 활용할 수 있게 하여 사용성을 개선합니다.
디자이너는 'Overlay'를 사용하여 공간을 좀 더 확보할 수 있게 되고, 모션을 이용하여 숨겨진 뒷쪽나 앞쪽에 존재하는 종속적인 오브젝트와 커뮤니케이션할 수 있습니다.
Credit: Bady, Javi Pérez
좌측의 예시에서는, 앞쪽 오브젝트가 오른쪽으로 슬라이드 되면서 추가적인 버튼 오브젝트가 나타납니다.
우측의 예시에서는 전체 화면이 아래로 슬라이드 되면서 추가 내용과 옵션을 표시합니다.(원칙 2 'Offset & Delay' 를 사용하여 사진 오브젝트의 특징을 추가로 표현함.)
디자이너들에게 '레이어(Layer)'에 대한 개념은 아주 명확합니다. 레이어로 디자인하면서 레이어 개념에 아주 익숙해져 있습니다. 하지만, 우리는 '만들는'것과 '사용하는'것을 구분할 수 있어야 합니다.
끊임없이 '만드는'과정에 있는 디자이너 입장에서는, 레이어로 디자인한 오브젝트의 모든 요소들(숨겨진 오브젝트 포함)이 친숙하게 이어져 있는 것처럼 느낄 수 있지만, 사용자 입장에서는 눈에 보이지 않는 부분은 시각적으로나 인지적으로 알지 못한다는 것을 알아야 합니다.
그리고, 디자이너는 'Overlay'된 'Z-축' 레이어들의 관계를 통해 공간적인 움직임을 개선할 수 있습니다.
원칙 8 : Cloning
새로운 오브젝트가 생성되고 벗어날 때 연속성, 관계, 내러티브(Narrative)가 만들어집니다.
새로운 오브젝트가 현재 화면(혹은 오브젝트로부터)에서 만들어질 때, 그 오브젝트의 생성 모습을 설명적으로 알려주는 것은 중요합니다. 이 글에서는 오브젝트가 생성되는 시점부터 내러티브 구조를 만드는 과정이 매우 중요하다고 말하고 싶습니다. 단순히 투명도를 이용한 페이드 효과로는 이러한 결과를 얻지 못합니다. 'Masking', 'Cloning', 'Dimensionality' 이 3가지 원칙은 효과적인 내러티브(Narrative)를 만들기 위한 사용성 기반의 접근 방식입니다.
위의 세 가지 예시는 사용자의 관심이 해당 오브젝트에 집중되는 동안 메인이 되는 오브젝트에서 새로운 객체가 생성됩니다. 크게 2뎁스로 구성된 이 방식은 먼저 관심을 끌게 하고 복제된 새로운 오브젝트를 생성해 시선을 유도하게 됩니다. 명확하게 연결되는 이벤트로 인해 효과적인 커뮤니케이션을 할 수 있습니다. 즉, 'A'는 새로운 자식 오브젝트를 생성하면서 'B'가 됩니다.
원칙 9 : Obscuration
사용자는 시각적인 계층 구조보다는 오브젝트나 화면과의 관계를 통해서 공간적인 움직임을 결정합니다.
'Masking'의 원칙과 마찬가지로, 'Obscuration(숨기다, 모호하게 하다)' 또한 정적인 '상태'에서 일시적으로 움직입니다.
순간적이고 일시적인 사고에 대한 경험이 없는 디자이너는 혼란스러울 수 있습니다. 'Obscuration' 은 모호한 '상태'가 아니라 모호한 '행위'라고 생각해야 합니다. 정적인 디자인은 가려진 상태를 말하는 것입니다. 그래서, 시간을 넣어 가려지는 오브젝트의 행동을 만들어 줍니다.
Credit: Virgil Pana, Apple
'Obscuration'된 두 예시를 보면, 오브젝트가 투명해지거나 오버레이된 것처럼 보이는데, 이것은 여러 속성이 포한된 시간적 상호작용이라고 말할 수 있습니다.
여기에 공통으로 사용된 테크닉으로는 '블러 이펙트(Blur effects)'와 '투명(Transparency)' 속성을 가지고 있습니다. 사용자는 자신이 보고있는 것과 동시에 중요하지 않는 문맥도 인지하게 됩니다. 즉, 주요 오브젝트 계층의 '뒤에' 또 다른 세계가 있다는 것을 알게 됩니다.
'Obscuration'를 사용자 경험으로 보면, 일관된 화면을 유지하거나 '목적이 있는 화면(Objective view)'을 만들때 디자이너들에게 유용합니다.
원칙 10 : Parallax
사용자가 스크롤할 때 2차원적인 공간에 계층 구조를 만듭니다.
'Parallax(시차)'는 서로 다른 속도로 움직이는 다양한 UI 오브젝트를 말합니다.
'Parallax'를 통해 사용자는 기존 디자인을 유지하면서 주요 액션과 콘텐츠에 집중할 수 있습니다. 배경 요소는 'Parallax' 이벤트 중에 사용자에게 인지되면서 서서히 물러납니다. 디자이너는 'Parallax'를 사용하여 주변 또는 메인 콘텐츠를 직접 분리합니다.
Credit: Austin Neill, Michael Sevilla
이것이 사용자에게 미치는 영향은 인터랙션의 지속시간 , 다양한 오브젝트의 관계를 명확하게 정의하는 것입니다. 전면에 보이는 오브젝트 또는 '빠르게 움직이는'오브젝트는 사용자에게 '가까이 있음'으로 알려줍니다. 반대로 '느리게'움직이는 배경 오브젝트 또는 오브젝트는 '더 멀리 떨어져 있는'것으로 인식됩니다.
디자이너들은 시간 조절만으로 이러한 관계를 만들어 인터페이스에서 어떤 객체의 우선순위가 높은 지를 사용자에게 알릴 수 있습니다. 따라서 백그라운드 또는 인터랙션이 없는 요소는 더 뒤로 배치하는 것이 합리적입니다.
사용자는 UI 오브젝트를 시각적인 디자인으로 정의하는 것 이상의 계층구조로 인식할 뿐만 아니라, 이 계층구조는 사용자가 디자인/콘텐츠을 인식하기 전에 자연스러운 사용자 경험을 가지도록 하고 있습니다.
원칙 11 : Dimensionality
새로운 오브젝트가 보이고 사라질 때는 공간의 내러티브(Narrative)에 맞는 구조를 제공합니다.
사용자 경험에서 중요한 것은 위치감각을 고려해 연속성을 만드는 것입니다.
'Dimensionality(차원)'는 비논리적인 사용자 경험을 해결하는 효과적인 방법이 될 수 있습니다.
인간은 현실 세계와 디지털 경험을 잘 이해하기 위해 공간적 프레임워크(Spatial frameworks)를 사용하는데 매우 능숙합니다. 공간의 시발점(Spatial origin)과 시작되는 레퍼런스(Departure references)가 잘 마련되어 있다면, 사용자가 UX를 이해하는데 도움이 됩니다.
또한, 'Dimensionality(차원)' 원칙은 뎁스가 없는 오브젝트가 같은 화면에 존재하면서도, 다른 오브젝트의 '앞' 또는 '뒤'에 존재하기에 시각적으로 보이는 평면적 계층화를 극복해 냅니다.
Dimensionality은 'Origami Dimensionality'과 'Floating Dimensionality' 그리고, 'Object Dimensionality' 세 가지 방식으로 나눌 수 있습니다.
'Origami Dimensionality'은 'Folding(접을 수 있는)' 또는 'Hinged(경첩같은)'와 같이 3차원 인터페이스 오브젝트로 생각할 수 있습니다.
Examples of Origami Dimensionality (Credit: Eddie Lobanovskiy, Virgil Pana)
여러 오브젝트가 '종이접기' 구조로 결합되기 때문에 숨겨진 오브젝트는 공간적으로 보이지 않지만, '존재'합니다. 이는 사용자 경험이 연속되는 공간적인 이벤트로서, 인터랙션 모델와 UI 오브젝트의 일시적인 동작 모두를 효과적으로 랜더링 하며, 진행 중인 맥락을 탐색하고 생성합니다.
'Floating Dimensionality'는 UI 오브젝트에 공간적인 시발점(Spatial origin)을 부여하여 직관적이면서 맥락에 맞는 인터랙션을 만듭니다.
Example of Floating Dimensionality (Credit: Virgil Pana)
위의 예시를 보면, 'Dimensionality'는 3D '카드'를 사용하여 만들어졌습니다. 이것은 시각적 디자인을 고려한 강력한 내러티브 프레임워크(Narrative Framework)을 보여주고 있습니다. 이러한 내러티브는 카드가 '뒤집어지면서(Flipping)' 추가 콘텐츠와 인터랙션하며 확장됩니다. 'Dimensionality'는 갑작스러움을 최소화하는 방식으로 새로운 요소를 도입하는 효과적인 방법이 될 수 있습니다.
'Object Dimensionality'는 실제 깊이와 형상을 가진 차원적인(Dimensional) 오브젝트가 됩니다.
이 예시를 보면, 'Dimensionality(차원)' 오브젝트를 만들기 위해 3D 공간에 여러 2D 레이어가 정렬되어 있습니다. 이들 'Dimensionality(차원)'는 실시간 혹은 비실시간으로 전환되는 순간에 보이게 됩니다. 'Object Dimensionality'는 보이지 않는 공간의 위치를 기반으로 하며, 오브젝트 기능이 명확하게 인지되도록 하는 기능이 있습니다.
원칙 12 : Dolly & Zoom
오브젝트와 공간을 탐색할 때는 연속적이고 공간적인 내러티브(Narrative)를 유지해야 합니다.
'Dolly & Zoom'은 카메라를 사용하는 영화적인 개념으로, 오브젝트의 움직임이나 화면의 크기를 멀리 있는 화면부터 가까운 화면까지 부드럽게 연결합니다.(또는 그 반대로)
3D 공간에서 오브젝트가 확대되는 상황을 예를 들면, 오브젝트가 카메라 방향으로 이동하는지 카메라가 오브젝트 쪽으로 이동하는지는 알 수 없습니다.(아래 예시 참고) 아래의 3가지 예시를 통해 가능한 상황을 모두 확인할 수 있습니다.
'Dolly'중인 레이어를 보면, 레이어가 줌인될까요? 카메라가 움직일까요?
따라서, 'Dollying'와 'Zooming'은 연속적인 요소와 주변 환경의 변화를 포함하고, 모션을 통해 사용성을 개선하는 점에서는 유사하지만, 분리해서 이해하는 것이 적절할 것입니다.
왼쪽의 두 이미지는 'Dollying', 오른쪽 이미지는 'Zooming'.
'Dolly'는 영화에서 사용하는 용어이며 피사체를 향하거나 피사체에서 멀어지는 카메라 움직임에 적용됩니다.(또한, 수평 방향의 '트레킹' 움직임에도 적용되지만 사용성 측면에서는 관련성이 적습니다.)
Credit: Apple
UX에서 공간적으로 보면, 이 움직임은 사용자의 시점(Perspective)의 변화와 오브젝트가 위치를 변경하면서 남아있는 정적인 시점을 나타냅니다. 'Dolly' 원칙은 매끄러운 맥락의 흐름을 통해 사용성을 개선하고, 인터페이스 오브젝트와 대상을 자연스럽게 전환시킵니다. 또한, 'Dolly'는 'Dimensionality(11번째 원칙)'원칙을 통합하여 보다 넓은 공간적인 경험과 깊이를 제공하고, '앞' 또는 '뒤'에 있는 추가 영역이나 내용을 사용자에게 전달할 수 있습니다.
'Zoom'은 원근감이나 오브젝트가 공간적으로 움직이는 것이 아니라 오브젝트 자체가 스케일 (또는 우리의 시야가 감소하여 이미지가 확대됨)되는 이벤트를 나타냅니다. 이것은 추가 UI 오브젝트가 다른 오브젝트나 화면의 '내부'에 있음을 사용자에게 전달합니다.
Credit: Apple
이를 통해 "실시간 및 비실시간" 모두의 사용성을 고려한 매끄러운 전환이 가능합니다. 'Dolly & Zoom' 원칙을 사용한 부드러운 전환은 공간감 있는 모델을 만들 때 매우 유용합니다.
모든 gif 이미지가 잘 로드되고, 브라우저가 죽지 않기를 바랍니다. 그리고, 당신이 당신 스스로의 가치로, 새로운 툴로, 인터랙티브한 프로젝트의 이점으로 많은 것을 얻을 수 있었기를 바랍니다.
사용성을 개선하기 위한 디자인 도구로서 '모션'을 시작하고, 더 많은 방법을 배우는 것을 추천합니다.
다시 말하지만, 콘퍼런스에서 연설하거나 흥미진진한 모션 및 유용성 주제에 대해 팀의 현장 워크숍을 이끌길 원하면 여기로 이동하십시오. 만약 당신이 도시에서 진행하는 수업에 참석하고 싶다면 여기로 가십시오. 마지막으로, 프로젝트에 대한 컨설팅을 원하면 여기로 가십시오. 메일을 통해 'usability and motion'에 관한 기사를 보려면 여기를 클릭하십시오.
This manifesto would not have been possible without the generous and patient contribution and constant feedback of Kateryna Sitner from Amazon — thank you! Special thanks to Alex Chang for his brainstorming and insistence that I land the plane, Bryan Mamaril at Microsoft for his eagle eye, Jeremey Hanson for his editing notes, Eric Braff for being the insane UI motion guru he is, Rob Girling at Artefact for his belief in me all those years ago, Matt Silverman for his inspiring talk on UI motion at the After Effects conference, Bradley Munkowitz for being an awesome roommate and getting me inspired in UI, Pasquale D’Silva for his incredible articles on motion, Rebecca Ussai Henderson for her awesome article on UI Choreography, Adrian Zumbrunnen for his awesome contributions to the topic of UI and motion, Wayne Greenfield and Christian Brodin for being my mastermind brothers and always pushing me to level up, and all you thousands of UI Animators who keep cranking out inspiring gifs.
