Creating Usability with Motion
모션으로 사용성 창조하기
옮긴이: 이민형 (인터랙티브 스튜디오), 2017.04.25.
+ 회사에서 내부 공유 목적으로 1년도 더 전에 번역 작업했었는데 이제야 공개해봅니다. 억지로 했던 거라서 오역과 의역과 직역이 차고 넘치네요. 주의해주세요!
모션으로 사용성 창조하기: UX 모션 선언문
Creating Usability with Motion: The UX in Motion Manifesto
Issara Willenskomer UX & UI 디자이너를 위한 애프터 이펙트 튜토리얼을 만들고, 워크숍을 진행하며, 모션 디자인을 주제로 글을 씁니다.
앞으로 기술되는 선언문은 “UX 혹은 UI 디자이너로써, 언제 그리고 어디에 모션을 적용해야 사용성을 뒷받침하는지 어떻게 알 수 있을까?”란 질문에 대한 답이다.
지난 5년이 넘는 시간 동안, 필자는 40여 개국의 백여 개의 탑 브랜드들 및 디자인 컨설턴트 회사들에게 워크숍과 UI 애니메이션 강의를 진행하면서 UX & UI를 지도하고 고문 역할을 해왔다. 그리고 15년 이상 유저 인터페이스에서의 모션을 연구하고 보니, UX 프로젝트에서 사용성에 도움이 되는 모션에는 12가지의 특정한 움직임이 존재한다는 결론에 도달했다.
필자는 이 특정한 움직임들을 ‘UX 모션의 12가지 원칙(The 12 Principles of UX in Motion)’으로 이름 붙였으며, 각각의 원칙들은 다양하고 혁신적인 방법들로 겹쳐서 쓰이거나 결합하여 쓰일 수도 있다.
이 선언문은 아래와 같은 다섯 개의 목차로 구성되어 있다.
1. UI 애니메이션에 관한 이야기—기존의 생각과 다른 것
2. 실시간(realtime) vs 비실시간(non-realtime) 인터랙션
3. 사용성에 도움이 되는 모션의 네 가지 방법
4. 원리(Principles), 기법(Techniques), 속성(Properties)과 속성 값(Values)
5. UX 모션의 12가지 원칙
UI 애니메이션과는 다른 UX 모션
유저 인터페이스에서의 모션을 주제로 이야기하면 대부분의 디자이너들이 ‘UI 애니메이션’을 생각한다. 때문에 본론에 들어가기 전에 12가지 원칙들에 대한 배경과 콘텍스트에 대한 이야기를 하고자 한다.
디자이너들이 전형적으로 생각하는 ‘UI 애니메이션’은 유쾌한 사용자 경험을 제공하지만, 전체적으로는 서비스에 많은 가치를 더하지 못하는 한계점을 지닌다. 그러므로 UI 애니메이션은 종종 UX의 계륵처럼 취급당하거나, 적용한다 하더라도 보통 마지막 단계에서 번갯불에 콩 볶아먹듯이 이루어진다. 그리고 사용자 인터페이스 안에서의 모션은 당연하게도 ‘디즈니 애니메이션의 12가지 원칙’의 영향 아래에 있다.
<디즈니 애니메이션의 12가지 원칙> 참고자료:
https://vimeo.com/93206523, http://blog.naver.com/wroseboy/220454358480
필자는 이 선언문을 통해서 UI 애니메이션과 ‘UX 모션의 12가지 원칙’의 관계가 건설공사와 건축의 관계와 같다는 것을 보여주려고 한다.
다시 말하자면 어떤 구조물을 세우기 위해서는 물리적인 법칙에 따라 구축되어야 하는 반면에, 무엇을 만들 것인지를 결정하는 기준은 원칙의 영역으로부터 비롯된다는 것이다. 애니메이션이란 도구 그 자체이다. 원칙이란 도구를 어떻게 하면 실용적으로 응용할 수 있는지를 안내하는 개념이며, 따라서 원칙은 디자이너가 좋은 퍼포먼스를 발휘할 수 있는 기회를 제공한다.
사실, 대부분의 디자이너들이 ‘UI 애니메이션’이라고 생각하는 것은 좀 더 유려한 디자인을 수행하는 것이다: 실시간, 비실시간 이벤트 동안의 인터페이스 오브젝트들의 시간적 움직임을 뜻한다.
실시간 대 비실시간 인터랙션
요즘과 같은 UX 환경에서는 ‘상태(state)’와 ‘행동(act)’의 개념을 구분하는 것은 중요하다. 상태(state)는 디자인 콤프와 같은 본질적으로 정적인 UX의 요소이다. 그리고 행동(act)은 근본적으로 일시적이고 모션을 기반으로 한 UX의 요소를 말한다.
하나의 오브젝트는 마스크 처리된 상태(state) 안에서 존재할 수도 있고, 행동(act) 안에서 존재할 수도 있다. 후자와 같은 경우에서는 사용성에 도움이 되는 모션을 적용할 수 있을 것이다.
추가적으로, 모든 인터랙션의 순간적인 모습은 실시간(Realtime)이거나 비실시간(Non-Realtime)으로 나타난다. 실시간이란 유저 인터페이스 상에서 사용자와 오브젝트 간의 직접적인 인터랙션이 일어나는 것을 뜻한다. 비실시간은 오브젝트의 움직임이 사용자의 액션이 일어난 후에 발생하는 것을 말한다. 한 마디로 정의하면 실시간 모션은 사용자와의 interacting, 비실시간 모션은 post-interactive라고 할 수 있다.
모션으로 사용성을 뒷받침하는 네 가지 방법
아래의 네 가지 항목은 사용자 경험에서의 사용성을 뒷받침해주는 일시적인 움직임들에 대하여 설명하고 있다.
예측성 (Expectation)
예측성은 두 가지 영역으로 나누어진다. 오브젝트가 무엇인지, 그리고 어떻게 움직이는지에 대해 사용자가 얼마나 인지하는지가 그 두 가지이다. 디자이너 관점에서 말하자면, 사용자들의 기대와 경험 사이의 간극을 최소화하는 것이 우리가 원하는 것이다.
연속성 (Continuity)
연속성은 유저 플로우와 사용자 경험에서의 ‘일관성’을 동시에 가지고 있는 개념이다. 연속성은 ‘내부 연속성(intra-continuity)’이라는 용어로도 생각될 수 있다. 연속성은 화면(scene)과 ‘내부 연속성’을 포함하면서, 전체적인 사용자 경험을 형성하고 있는 일련의 화면들에서도 나타난다.
서사성 (Narrative)
서사성은 시간적/공간적 구조(framework)에서 발생하는 사용자 경험이 직렬적으로 진행되는 것을 말한다. 눈에 잘 띄지 않는 순간들과 이벤트들에 의해서 사용자 경험을 처음부터 끝까지 연결되는데, 이 총합이 서사성인 것이다.
관계성 (Relationship)
관계성은 유저의 이해와 결정을 도와주는 인터페이스 오브젝트들 간의 공간적, 시간적, 그리고 위계적인 표상을 말한다.
원칙, 기법, 속성, 그리고 속성 값
Tyler Waye는 “원칙이란… 기본적인 전제이며 여러 가지 기술을 발휘하게 만드는 기능을 정의한다. 이 요소들은 어떤 일이 생겨도 일관성을 유지한다”라고 말하며 언제든지 글을 쓰는 것과 마찬가지라고 한다. 이 말은 원칙이 디자인의 변하지 않는 대전제라는 주장이 되풀이되도록 뒷받침한다.
그러므로 우리는 원칙이 최상위에 자리 잡고 있고, 그 아래에 기법이 있으며, 그다음으로는 속성과 속성 값 순으로 있는 위계를 생각해볼 수 있다.
기법(Technique)은 원칙과 그 조합을 다양하고 무제한적으로 실행하는 것이다. 필자는 기법이 ‘스타일’과 유사하다고 생각한다.
속성(Properties)은 기법을 창조하기 위해 애니메이션 되는 오브젝트의 상세한 매개변수이다. 포지션, 투명도, 스케일, 로테이션, 앵커 포인트, 컬러, 선 굵기와 쉐입 등을 포함하고 있다.
속성 값(Value)은 속성이 가지고 있는 수치적인 값을 말한다. 그리고 이것은 우리가 ‘애니메이션’이라고 표현하는 것, 즉 시간이 지나면서 변화하는 것을 창조한다.
결론적으로 말하자면, UI 애니메이션 레퍼런스에서 볼 수 있는 불투명한 이미지의 원칙은 ‘흐릿한 유리(blurred glass)’ 기법으로 이루어져 있고, 블러와 오퍼시티라는 속성이 각각 속성 값인 25px, 70%의 영향을 받고 있다는 것이다.
이제 우리는 작업할 툴을 가지게 되었다. 그리고 무엇보다 중요한 것은 이 언어형식의 툴은 모든 특정한 프로토타이핑 툴에서도 적용이 된다는 것이다.
UX 모션의 12가지 원칙
Easing(역자주: 애니메이션이 자연스러울 수 있도록 조정 가능한 속성)과 오프셋(Offset, 역자주: 기준점으로부터의 차이 값), 그리고 딜레이(Delay)는 타이밍과 연관되어 있다. 패어런팅(Parenting, 역자주: 어떤 오브젝트에 다른 오브젝트들을 상속시키는 것)은 오브젝트의 관계와 연관이 있다. 변형(Transformation), 속성 값 변화(Value Change), 마스킹(Masking), 오버레이(Overlay), 그리고 복제(Cloning)는 모두 오브젝트 연속성과 연관된다. 시차(Parallax)는 시간적인 위계와 관련되었다. 엄폐(Obscuration, 역자주: 엄폐라는 뜻으로 어떤 화면을 가리는 것), 차원성(Dimensionality), 그리고 달리 & 줌(Dolly & Zoom, 역자주: 카메라를 상하좌우로 이동 & 확대 축소하는 것)은 모두 공간적 연속성과 연결된다.
원칙 1: Easing
시간적 이벤트가 일어날 때, 오브젝트의 움직임이 사용자의 예측에 맞춰 발생한다.
(실시간 혹은 비실시간이든 간에) 모든 인터페이스 오브젝트들은 ease라는 시간적 움직임을 분명히 보여준다. 사용자가 예측한 대로 오브젝트가 움직일 때, Easing은 매끄러운 사용자 경험 속에서 선천적인 ‘자연스러움’을 창조하고 더해주는 역할을 하며 연속성의 감각을 만들어준다. 참고로 디즈니는 이것을 ‘Slow In and Slow Out’이라고 정의하였다.
왼쪽의 리니어(Linear) 모션은 ‘나빠’ 보인다. 그보다 위에 있는 예시의 Easing 모션은 ‘좋아’ 보인다. 위 세 개의 예시들이 보여주는 모션은 정확히 같은 프레임 수와 같은 시간, 동일한 위치로 움직이고 있다. 이들이 차이를 가지고 있는 단 한 가지는 Easing이다.
디자이너들이 사용성을 고려하는 것처럼, 우리는 스스로에게 엄격함을 요구하면서 물어야 한다. 미적인 것과 별개로 어떤 모션이 사용성을 더 뒷받침하는가?
지금 말하고 있는 이 케이스에서, 어느 정도의 스큐어모피즘은 Easing 안에서 자연스럽다는 것이다. 사용자의 예상에서 벗어나 사용성이 떨어지는 인터랙션의 ’easing gradient’를 생각해보자. 적절한 Easing이 적용된 모션의 경우에 사용자들은 눈에 잘 보이지는 않지만 자연스러운 모션을 경험할 것이다. 이러한 모션은 방해되지 않는다는 점에서 좋은 요소가 된다. 리니어 모션은 시각적으로 거슬리며 왠지 작동이 잘 안 되고, 덜 완료된 것처럼 보며이고 조화롭지 못하면서 산만한 느낌을 준다.
지금부터 필자는 주관적인 느낌을 제외하고 오른쪽의 예시에 대해 이야기해보려 한다. 모션은 원래 매끄러운 것(seamless)이 아니다. 사실, 모션은 매끄럽게 느껴지도록 '디자인' 된 것이다. 우리는 오브젝트가 어떻게 도착하는지에 주목한다. 모션마다 각자의 다른 느낌을 주기는 하지만, 아직까지는 리니어 모션보다는 더 ‘맞는’ 것으로 느껴진다.
우리는 여전히 사용성에 도움이 안 되는 (최악의 경우 악화시키는) easing을 이용할 수 있을까? 정답은 ‘그렇다’이고, 그 방법은 여러 가지이다. 그중 한 가지는 타이밍이다. 만약 타이밍이 너무 느리다거나 너무 빠르면, 예측성을 해치고 사용자가 주목해야 할 것들을 방해한다. 유사하게, easing이 브랜드 경험이나 전체적인 사용자 경험과 불일치한다면, 이 역시 예측성과 연속성에 있어서 부정적인 효과를 줄 것이다.
필자가 말하고 싶은 것은 모션의 easing이 주는 기회의 세계이다. 디자이너가 만들고 프로젝트에 적용할 수 있는 easing의 가짓수는 문자 그대로 무한대이다. 그리고 이 모든 easing들은 고유의 예측성을 가지고 사용자의 조작에 반응한다.
요약: easing은 ‘언제나’ 사용해야 한다.
+ easing에 관한 더 많은 이야기는 필자의 다른 글에서 확인할 수 있다.
<The irony of usability and linear motion>: https://medium.com/ux-in-motion/the-irony-of-usability-and-linear-motion-88f67f7efcf9
원칙 2: Offset & Delay
새로운 요소와 화면으로 진입할 때, 오브젝트들 간의 관계와 위계를 정의하는 것.
오프셋(Offset) & 딜레이(Delay)는 UX 모션 원칙의 두 번째 원칙이며, 디즈니의 애니메이션 원칙의 ‘마무리 동작과 액션 겹치기(Follow Through and Overlapping Action)’로부터 영향을 받았다.
하지만, 오프셋 & 딜레이를 적용하는 데 있어서 유의할 점은 실행은 디즈니 애니메이션 원칙과 비슷하지만 목적과 결과가 다르다는 것이다. 디즈니 애니메이션 원칙의 목적이 ‘애니메이션을 더 매력적으로 보이게 하는 것’이라면, UI 애니메이션 원칙은 더 유용한 경험을 제공하는 것이 그 목적이다. 그리고 사용자에게 인터페이스 상의 오브젝트들이 가지고 있는 성격에 대해 ’ 알려줌(telling)’으로써, 사용자들이 인식하기도 전에 결과를 제공하는 것이 이 원칙의 실용성이라고 할 수 있다.
위 레퍼런스가 모션을 통해 보여주는 내러티브는 상위 두 개의 오브젝트들은 하나로 묶여있고 가장 아래의 오브젝트는 분리되어 있다는 것이다. 아마도 상위 두 개의 오브젝트들은 비상호적인 이미지와 텍스트이고, 아래의 오브젝트는 버튼이라고 가정할 수 있다. 사용자가 이 오브젝트들이 무엇이라고 판단을 내리기도 전에, 디자이너는 이미 모션을 통해 저 오브젝트들은 어찌 됐든 ‘분리’되어 있다는 점을 사용자에게 커뮤니케이션하고 있다. 이러한 커뮤니케이션은 대단히 강력한 것이다.
InVision (https://dribbble.com/InVisionApp)위의 예시에서, 플로팅 액션 버튼 (FAB)은 세 개의 버튼을 포함하는 상단의 내비게이션 요소로 변환된다. 세 개은 버튼이 각자 다른 시간차를 두고 ‘오프셋’되기 때문에, 시각적으로 ‘분리성’을 전달하여 사용성에 도움이 되는 모습을 보여준다. 이러한 모습은 시각디자인으로부터 완전히 독립되면서 인터페이스 상의 오브젝트들이 가지고 있는 성격의 일부를 사용자에게 알려주는(telling) 효과를 갖는다.
오프셋 & 딜레이 원칙이 어떻게 작용하는지 더 잘 보여주기 위해서, 이 원칙에서 어긋난 아래의 예시를 가져왔다.
Jordi Verdu (https://dribbble.com/jordiverdu)원칙 3: Parenting
다수의 오브젝트를 인터랙션 할 때 공간적, 시간적인 위계적 관계를 생성하는 것.
패어런팅(Parenting)은 유저 인터페이스에서 오브젝트들을 ‘관계’시켜주는 강력한 원칙이다. 위의 예시에서, 상단에 위치한 ‘차일드(Child)’ 오브젝트의 스케일과 포지션 속성은 하단의 ‘페어런트’ 오브젝트의 포지션 속성에 상속되어(parented) 있다.
패어런팅은 어떤 오브젝트의 속성을 다른 오브젝트의 속성에 연결시키는 것을 뜻한다. 이 원칙은 사용성에 도움이 되는 방향으로 오브젝트의 관계들과 위계들을 생성한다. 또한, 디자이너는 패어런팅을 이용하여 유저 인터페이스의 시간적 이벤트를 조정하고, 동시에 오브젝트들 간의 관계에 대한 성격을 유저와 커뮤니케이션하게 된다.
스케일(Scale), 투명도(Opacity), 위치(Position), 로테이션(Rotation), 형태(Shape), 컬러(Color), 속성 값(Value) 등 오브젝트의 속성(Properties)을 다시 상기해보자. 이 모든 속성들은 다른 어떤 속성들과 연결될 수 있음으로써, 사용자 경험 속에서 시너지가 발생하는 순간을 만들게 된다.
위의 왼쪽 예시는 원형 인디케이터가 패어런트이며, 패어런트의 ‘x-축’ 속성에 ‘얼굴 아이콘’ 요소의 ’y-축’ 속성이 ‘차일드’되어 있는 것이다. 따라서 원형 인디케이터가 가로축을 따라 움직이면, 그것의 ‘차일드’ 오브젝트가 수평수직적으로 움직인다.
이러한 패어런팅의 결과로 모션이 보여주는 시간적인 내러티브 구조가 동시에 일어난다는 것을 알 수 있다. 여기서 흥미로운 점은 ’ 얼굴 아이콘’이 각 숫자에 맞춰서 연속된 ‘자물쇠’ 시리즈로 작동하는데, ‘얼굴 아이콘’이 어떤 구간에서는 완전하게 보이지 않는 것이다. 이것을 보고 미묘한 ‘사용성 속임수(usability cheat)’가 있다고 주장할 수는 있지만, 이로 인해 사용자는 끊김이 없는 경험을 하게 된다.
패어런팅 ‘실시간(realtime)’ 인터랙션에서 최고의 기능성을 보여준다. 디자이너는 오브젝트들이 어떤 관계로 어떻게 연결되어 있는지에 대해 모션을 이용하여 사용자에게 알려주면, 사용자는 인터페이스의 오브젝트들을 직접 능숙하게 조작하게 되는 것이다.
패어런팅은 세 가지 형태로 일어난다. 위의 두 예시에서 볼 수 있는 ‘직접 패어런팅(direct parenting)’과 아래 예시와 같은 ‘지연 패어런팅(delayed parenting)’, 그리고 ‘역 패어런팅(inverse parenting)’이 그 세 가지이다.
원칙 4: Transformation
오브젝트의 용도가 바뀔 때 서사 흐름의 연속적인 모습을 생성하는 것.
UX 모션의 원칙 ‘변형(Transformation)’에 대한 많은 것들이 이미 위 내용에서 다루어졌다. 어떤 면에서는, 이 변형이 애니메이션 원칙 중에 가장 분명하고 직관적인 원칙이다.
변형은 눈에 크게 띄기 때문에 가장 알아보기 쉽다. ‘제출(submit)’ 버튼이 원형의 프로그레스 바의 형태로 바뀌고 최종적으로 확인 체크마크 형태가 되는 움직임들을 알아챌 수 있을 것이다. 이러한 모션은 사용자의 주의를 끌고, 내러티브를 말하며, 그리고 완료를 알린다.
Colin Garven (https://dribbble.com/ColinGarven)변형이 하는 일은 사용자를 자연스럽게 전환(transition)시켜 주는 것이다. 다른 UX 상태 혹은 ‘이다(is)’ (이것은 버튼이다, 이것은 원형 프로그레스 바이다, 이것은 체크마크이다 처럼)를 거쳐 원하던 최종 결과물이 보인다. 사용자는 이러한 기능적인 공간들에서부터 최종 목적지까지 이끌려 간다.
변형은 사용자 경험에서 인지적으로 ‘동강 난(chunking)’ 개별 주요 장면들을 자연스럽고 연속된 일련의 이벤트들로 만드는 효과를 가진다. 이 자연스러움은 사용자의 인식, 기억력, 그리고 지속성을 향상하게 된다.
원칙 5: Value Change
수치가 변할 때 가변적이고 연속적인 내러티브 관계를 생성하는 것.
숫자와 텍스트를 보여주고자 하는 텍스트 기반의 인터페이스 오브젝트는 그 수치(Value)에 변화를 줄 수 있다. 이것은 ‘정의하기 어려운 명백한(elusive obvious)’ 개념 중의 하나이다. 또한 텍스트와 숫자가 변하는 것은 너무나 일반적이어서, 사용성을 지원하는지를 판단하기 위해 정밀하게 구별해내지 않으면 그냥 지나치게 된다.
그렇다면 수치가 바뀔 때 사용자는 무엇을 경험하게 되는 것일까? 사용자 경험에서, 12가지의 UX 모션 원칙은 사용성을 뒷받침하는데 도움이 되는 기회들이다. 예시들이 보여주는 세 개의 기회는 사용자를 데이터와 개념 뒤의 현실세계, 그리고 수치 자체의 가변적인 본질과 연결해준다.
사용자 대시보드(dashboard)의 예들을 한 번 살펴보자.
인터페이스 상의 오브젝트로 존재하는 수치가 ‘수치 변화 (value change)’ 없이 로딩된다면, 사용자에게 전달되는 숫자들은 정적인 오브젝트가 된다. 그건 마치 시속 55마일 제한 표지판이 그려져 있는 것과 같이 보일 것이다.
숫자와 수치는 실제로 존재하는 사물을 표현한다. 이 실제는 시간이 될 수도 있고 수입, 경기 스코어, 비즈니스 척도, 피트니스 분석이 될 수도 있다. 모션을 통해 우리가 구분하고 있는 것은 ‘수치(value subject)’는 가변적이며 수치 값은 가변 수치를 설정하는 무언가를 반영하고 있다는 사실이다. 수치를 시각적으로 구성하고 있는 오브젝트가 정적인 성격을 가지고 있으면 그 관계를 잃는 것뿐만 아니라, 더 깊이 있는 기회마저 상실하게 된다.
수치를 기반으로 한 가변적인 구조를 모션 형식의 표현방식으로 이용할 때, 이것이 ‘뉴로피드백(neurofeedback, 역자주: 뇌파를 우리 의지로 제어하는 기술)’을 활성화하는 것이다. 데이터의 가변적인 성격을 인지하게 된 사용자들은 이제 그 수치 값들을 변경할 수 있게 되었고, 숫자를 만질 수 있는 권한을 얻게 되었다. 반대로 수치들이 정적일 때에는 수치 값 뒤의 실재와 연결성이 약해지고, 사용자들을 숫자에 대한 권한을 잃게 된다.
원칙 6: Masking
오브젝트나 그룹의 일부분이 드러나거나 가려짐으로써 유용성이 결정될 때, 인터페이스 오브젝트 혹은 오브젝트 그룹의 연속성을 생성하는 것.
마스킹(Masking)하는 행동(act)을 묻는다는 것은 오브젝트의 형태와 그 유용성 사이의 관계에 대해 묻는 것과 같이 생각될 수 있다.
디자이너들에게 ‘마스킹’은 정적인 디자인의 맥락에서 친숙하기 때문에, UX 모션 원칙의 ‘마스킹’과 구분되어져야 한다. 모션에서의 마스킹은 상태(state) 일 때가 아닌 행동(act) 일 때 일어나는 것을 말한다. 오브젝트의 드러나고 가려지는 영역을 시간적으로 이용함으로써, 유용성은 연속되고 자연스러운 방법으로 트랜지션 된다. 또한 이는 내러티브의 흐름을 보존하는 효과를 가진다.
Anish Chandran (https://dribbble.com/anish_chandran_위의 예시를 보면, 헤더 이미지는 그 영역의 쉐입과 포지션이 변화하지만 콘텐츠는 유지되고 하나의 앨범 형태가 된다. 그리고 마스크 안의 콘텐츠가 유지되면서, 오브젝트가 무언가로 변화하는 효과를 지니고 있다. 적당하면서 깔끔한 기교이다. 이 같은 효과는 사용자가 액션을 취한 뒤에 활성화되는 트랜지션이며 비실시간으로 일어난다.
UX 애니메이션 원칙은 연속성, 내러티브, 관계성, 그리고 예측성을 통해 시간적으로 일어나고 사용성을 뒷받침한다는 사실을 기억하자. 위의 레퍼런스에서 오브젝트가 변하지 않고 스스로를 유지하는 동안에도, 마찬가지로 영역과 위치를 가지고 있으며 이 두 요소가 그 오브젝트가 무엇인지를 결정한다.
원칙 7: Overlay
겹쳐진 오브젝트들이 종속적으로 위치할 때 시각적인 2차원 공간(visual flatland)에서 내러티브와 오브젝트 간의 공간적 관계를 생성하는 것.
오버레이(Overlay)는 비공간적인(non-spatial) 위계구조가 없는 2차원 공간을 극복하는 속성으로, 사용자가 2차원 공간을 활용하게 하여 사용성을 뒷받침한다.
다시 말하자면, 3D 공간이 아닌 곳에서 종속적으로 위치한 오브젝트들이 다른 오브젝트의 뒷면이나 앞면에 존재하고, 디자이너들이 모션을 이용하여 그 오브젝트를 설명하는 것이 오버레이인 것이다.
왼쪽의 예시를 보면, 앞면에 위치한 오브젝트가 오른쪽으로 슬라이드 하여 추가적인 뒷면 오브젝트의 영역이 노출된다. 오른쪽 예시에서는, 전체의 화면이 아래쪽으로 슬라이드 함으로써 추가적인 콘텐츠와 옵션이 나타난다. (사진들의 개별성을 보여주기 위해 오프셋 & 딜레이 원칙이 사용되고 있다.)
디자이너로써 어느 정도는 ’ 레이어(layer)’에 대한 개념은 자명하고 너무나 분명할 것이다. 우리는 깊숙이 내재화되어있는 레이어와 그 개념과 함께 디자인한다. 하지만 우리는 ‘생산(making)’하는 방식과 ‘이용(using)’하는 방식을 구분하는 것에 있어서 신중해져야만 한다. ‘생산’의 방식을 활용하여 연속적으로 작업을 하는 디자이너라면, 우리가 디자인하고 있는 여러 조각의 오브젝트들(숨겨져 있는 것까지 포함해서)과 매우 친숙할 것이다. 하지만 사용자 입장에서는 눈에 보이지 않는 조각들에 대해 시각적으로, 그리고 인지적으로 숨겨진 것이라고 정의되고 연습된다.
위에서 살펴본 것과 같이 오버레이 원칙은 디자이너가 사용자에게 ‘z-축’에 위치한 레이어들의 관계를 설명할 수 있게 하고, 이를 통해 공간적인 방향성을 알려주는 역할을 한다.
원칙 8: Cloning
새로운 오브젝트가 생성되고 분리될 때 연속성과 관계성, 그리고 내러티브를 생성하는 것.
현재의 화면에서 (그리고 현재의 오브젝트로부터) 새로운 오브젝트가 생성될 때, 그것이 생기게 되는 원인을 내러티브적으로 설명하는 것은 중요하다. 이 선언문에서 필자는 오브젝트 생성과 분리를 위한 내러티브 구조를 창출하는 것이 중요하다고 강력하게 주장한다. 간단한 투명도 페이드 인아웃은 지금 이야기하고 있는 원칙과는 거리가 멀다. 마스킹, 복제(Cloning), 그리고 차원성(Dimensionality) 이 세 가지가 강력한 내러티브 생산을 바탕으로 한 사용성이다.
위 세 개의 예시 속에서, 이미 존재하고 있는 영웅 오브젝트를 향해 사용자의 집중이 쏠려있는 동안에 새로운 오브젝트들이 생성된다. 먼저 주목을 끌고, 그다음 새로운 오브젝트가 복제되는 모습으로 시선을 유도하는 것과 같은 이중의 접근법은 이벤트의 구조를 명료하고 명쾌하게 이해시켜주는 강력한 효과를 가지고 있다. 여기서 이벤트는 액션 ‘x’가 새로운 차일드 오브젝트들이 생성되는 결과 ‘y’를 야기시키는 과정을 말한다.
원칙 9: Obscuration
시각적 위계구조에서 최상위가 아닌 오브젝트나 화면의 관계에 대해 사용자가 적응할 수 있도록 하는 것.
UX 모션 원칙의 마스킹과 비슷하게, 엄폐(Obscuration)는 정적이면서 시간적인 현상들로 나타난다.
이것은 순간과 순간 사이에 있는 시간성에 대해 경험이 없는 디자이너에게는 혼란스러울 수도 있다. 디자이너는 대체적으로 화면에서 화면으로, 혹은 과업에서 과업으로 넘어가는 것을 디자인한다. 엄폐에 대해 생각해보면 엄폐가 된다는 것은 행동(act)이지 상태(state)는 아니라고 생각할 수 있다. 정적인 디자인에서는 상태(state)가 엄폐되는 것을 표현한다.
지금부터 오브젝트가 엄폐되는 행동(act)이 시간을 통해 가능한 모습을 보여주겠다.
위의 두 예시로부터 우리는 엄폐를 확인할 수 있는데, 이 투명한 오브젝트 혹은 오버레이처럼 보이는 엄폐 역시 다수의 속성들을 포함한 시간적 인터랙션이 동시에 일어나면서 보인다. 그러면서 사용자가 실행한 것이 최상위가 아닌 추가적인 콘텍스트라는 것을 깨닫게 만든다. 오브젝트 위계의 최상위 뒤편(behind)에 또 다른 세계가 있는 것이다.
사용자 경험 속에서 엄폐는 디자이너로 하여금 통합된 하나의 화면(view), 혹은 ‘목적이 있는 화면(objective view)’을 보충하는데 도움을 준다.
원칙 10: Parallax
사용자가 스크롤할 때 2차원 공간에서 공간적인 위계구조를 생성하는 것.
‘시차(Parallax)’는 서로 다른 인터페이스 오브젝트들이 서로 다른 속도로 움직이는 것을 말한다.
시차는 디자인의 변화 없이 사용자가 기본 동작과 콘텐츠에 집중하도록 만든다. 시차 이벤트가 일어나는 동안에 배경 요소들은 사용자를 위해서 지각적, 인지적으로 밀려(recede)난다. 따라서 시차는 직접성의 콘텐츠(immediacy content)를 주변의 받쳐주는 콘텐츠로부터 떼어놓기 놓기 위해 사용된다.
이러한 시차가 사용자에게 미치는 영향은 인터랙션이 일어나는 기간(duration) 동안 다양한 오브젝트들의 관계를 명료하게 정의한다는 것이다. 가장 앞쪽에 있는 오브젝트나 ‘더 빠르게’ 움직이는 오브젝트는 사용자에게 ‘더 가깝게’ 느껴진다. 이와 비슷하게 맨 뒤의 오브젝트나 ‘더 천천히’ 움직이는 오브젝트는 ‘멀리 떨어져’ 있는 것처럼 인식된다.
디자이너는 시간 그 자체를 사용함으로써 이러한 관계들을 창조하고, 그로써 사용자에게 어떤 오브젝트가 인터페이스에서 더 상위에 있는지 알려준다. 그러므로 배경 요소이거나 인터랙티브 하지 않은(non-interactive) 요소들은 더 ‘뒤’로 밀려나게 되는 것이다.
사용자는 시각디자인에서 결정된 것 이상으로 인터페이스 오브젝트들을 파악하여 현재의 위계구조를 인식한다. 그뿐만 아니라 이 위계구조는 사용자가 디자인/콘텐츠에 대해 의식적으로 깨닫기도 전에 현재의 사용자 경험의 본질을 파악하는데 도움이 된다.
원칙 11: Dimensionality
새로운 오브젝트가 생기고 사라질 때 공간적인 내러티브 구조를 제공하는 것.
사용자 경험에서 영역에 대에 감각만큼 중요한 것은 연속성의 현상이다. 차원성(Dimensionality)은 사용자 경험의 2차원 공간이 가진 비합리성을 극복하는 강력한 해결법을 제공한다.
사람들은 어떤 것을 조종하는 데 있어서 공간적 구조를 사용하는 것에 놀랍도록 적응을 해낸다. 그것이 존재하는 공간이 실제 세계이든 디지털 세계이든 간에 말이다. 그리고 공간적인 생성과 소멸의 기준을 제시하는 것은 UX 상의 사용자들의 심리적 경험의 모델을 강화시키게 된다. 추가적으로, 시각적 2차원 공간에서 오브젝트들은 뎁스가 결여되어 동일한 평면에 존재하지만, 과업 수행은 다른 오브젝트들의 ‘앞’이나 ‘뒤’에서 발생한다. 차원성 원칙은 이러한 2차원 공간에서의 레이어 역설을 극복한다.
차원성은 오리가미 차원성(Origami Dimensionality), 플로팅 차원성(Floating Dimensionality), 오브젝트 차원성(Object Dimensionality)이라는 세 가지 방법으로 나타난다.
오리가미 차원성은 3D 인터페이스 오브젝트들이 ‘접기(folding)’나 ‘경첩(hinged)’되는 것을 말한다.
다수의 오브젝트들이 ‘오리가미’ 구조 안에서 결합되어 있기 때문에, 공간적으로 눈에 보이지 않더라도 숨겨진 오브젝트들에 대해 여전히 ‘존재’한다고 말할 수 있다. 이와 같은 오리가미 구조는 공간적 이벤트를 끊김 없이 제공하여 사용자 경험을 효과적으로 만들어준다. 여기서 끊김 없는 공간적 이벤트란, 인터랙션 모델 그 자체와 오브젝트 자체의 시간적인 움직임 안에서의 작동 콘텍스트를 사용자가 조종하고 창출하는 것을 말한다.
플로팅 차원성은 직관적인 인터랙션 모델과 고도의 내러티브를 만들면서 인터페이스 오브젝트를 나타나게 하고 사라지게 한다.
Example of Floating Dimensionality (Credit: Virgil Pana)위의 예시를 살펴보면, 3D ‘카드’의 사용을 통해 차원성이 수행되고 있다. 이는 시각디자인을 뒷받침하는 강력한 내러티브 구조를 제공한다. 그리고 추가적인 콘텐츠와 상호작용성(Interactivity)으로의 접근을 위해서 카드를 ‘넘기는(flipping)’ 행위는 내러티브를 확장시키게 된다. 차원성은 돌발성을 최소화시키면서 새로운 요소들을 등장시켜주는 효과적인 방법이다.
오브젝트 차원성은 실제의 뎁스와 형태를 가지고 있는 차원의 오브젝트를 만드는 것을 말한다.
다수의 2D 레이어들이 실제 차원의 오브젝트 형태가 되기 위해 3D 공간에 정렬되는 모습의 예시들이 여기 있다. 이 레이어들의 차원성은 실시간과 비실시간으로 일어나는 트랜지션 동안에 드러난다. 사용자들이 보이지 않는 공간적 영역에 있는 오브젝트의 사용성을 이해하기 쉽게 인식하는 것(keen awareness of)이 유용한 오브젝트 차원성이라고 할 수 있다.
원칙 12: Dolly & Zoom
인터페이스 오브젝트와 공간을 조작할 때 연속성과 공간적 내러티브를 보존하는 것.
달리 & 줌(Dolly & Zoon)은 영화적인 개념으로, 오브젝트의 움직임이 카메라와 연결되어 있고, 프레임 안의 이미지 자체 사이즈가 원경에서 근경으로 (혹은 역으로) 부드럽게 변화하는 것을 말한다.
일정한 콘텍스트 안에서 오브젝트가 3D 공간의 카메라를 향해 움직이고 있다거나, 아래의 레퍼런스처럼 카메라가 3D 공간의 오브젝트를 향해 움직이고 있다면, 오브젝트가 줌 되고(zooming) 있다고 말할 수 있다. 아래 세 개의 예시들은 방금 언급한 것에서 가능한 시나리오들을 묘사하고 있다.
이와 같이 ‘달리 하는 것(dollying)’과 ‘줌 하는 것(zooming)’의 예시들을 나눠서 다룰 수 있지만, 연결적인 요소와 화면의 변형에서 이 둘이 유사성을 가지고 연관되어 있다. 그리고 모션을 통해 사용성을 뒷받침하고 있다는 점에서 UX 모션 원칙의 요건에 부응하고 있다.
달리는 영화에서 쓰이는 용어이자 피사체를 향해가거나 떠나가는 카메라의 움직임을 뜻한다. (또한 알려진 것처럼 수평으로 ‘따라가는 것(tracking)’을 말하기도 하지만, 사용성 콘텍스트와 연관이 적다.)
Credit: AppleUX 내에서 공간적으로 보면, 이 모션은 사용자의 시점(perspective)을 변화시키거나 오브젝트의 시점은 고정시키고 오브젝트의 포지션을 변화시키는 움직임을 보여주고 있다. 이러한 달리 원칙으로 인터페이스 오브젝트와 도착점 사이의 연속성과 내러티브, 매끄러운 트랜지션을 만들어 사용성을 뒷받침하고 있다. 또한 달리는 차원성 원칙과 혼합하여 사용할 수 있는데, 이를 통해 더욱 공간적인 경험과 더 깊은 뎁스 감을 제공하고, 현재 화면의 ‘앞’ 혹은 ‘뒤’에 위치하고 있는 추가적인 영역과 콘텐츠에 대해 사용자와 커뮤니케이션을 하게 만든다.
줌은 시점이나 오브젝트의 공간적 움직임이 아닌, 오브젝트 자체의 스케일 변화(scaling)가 일어나는 이벤트를 뜻한다. (혹은 우리가 보는 화면이 줄어듦으로써 이미지가 확대되는 것을 말한다.) 추가적인 인터페이스 오브젝트들이 다른 오브젝트 혹은 화면의 ‘내부(inside)’에 있는 것을 보는 사람에게 전달하는 것이다.
Credit: Apple이렇게 줌은 실시간, 비실시간으로 매끄러운 트랜지션이 가능하게 만들어 사용성을 뒷받침한다. 이러한 매끄러움(seamlessness)은 달리 & 줌 원칙이 공간의 심리적인 모델을 생성할 때에 효과적으로 쓰인다.
—
만약 여기까지 무사히 읽어 내려왔다면, 축하의 말을 전한다! 매우 복잡하고 혹독한 선언문이었다. 필자는 모든 gif 이미지들이 로드되고 이 gif들로 인해 브라우저가 뻗지 않았기를 바란다. 그리고 독자들이 자기 자신을 위한 어떤 가치를 얻었길 진심으로 바라며, 인터랙티브 프로젝트에 도움이 되는 도구와 긍정적인 효과를 가져가길 바란다.
옮긴이의 말
이 글의 필자가 UX적인 관점에서 유저 인터페이스 내에서의 모션을 서술했다고 이야기하고는 있지만, 사실 구글의 머터리얼 디자인 가이드나 애플의 휴먼 인터페이스 가이드라인의 모션 및 인터랙션과 비교해보면 실무적으로나 HCI적으로 깊고 본질적인 통찰을 보여주고 있지는 않습니다. 그리고 어떻게 보면 <디즈니 애니메이션의 12가지 원칙>의 내용을 모바일 환경에 맞추어 UX용어로 말만 바꾼 것에 불과한 것처럼 보이기도 합니다.
그래도 이 글이 가치가 있는 부분은 우리가 모바일 인터랙션과 모션 작업을 하면서 감각적으로 '더 좋다, 더 부드럽다'라고 어렴풋이 느껴지는 부분들을 UX적인 용어와 모션그래픽/영상 분야에서 쓰이는 용어들을 나름 잘 연결시켜 설명함으로써 사용자 경험에서 모션이 필요한 그 당위성과 의미를 부여하고 있다는 점입니다.
휴먼 컴퓨터 인터페이스에서 사용자의 과업을 도와주는 화면은 한 곳에 머물러있지 않고 계속해서 이동합니다. 이동이라는 개념 자체가 시간성을 포함하고 있는 개념이고, 디자인의 분야에서 그 시간성을 표현하는 영역은 모션 & 인터랙션 디자인입니다. 그리고 우리가 만든 디자인에 시간성을 첨가하면서 결국에는 사용자들에게 디자인의 '서사(narrative)'를 전달하게 될 것입니다.
이 글을 읽으신 독자분들께서 위에 서술된 모션과 인터랙션을 통해 더 나은 사용성을 창조하고 사용자 경험을 풍부하게 만드는데 조금이나마 도움이 됐으면 좋겠습니다.
무려 50개의 gif 압박을 견디면서까지 긴 글 읽어주셔서 고맙습니다! (ง'̀-'́)ง
