UX 표현적 모션 연구를 위한 디즈니 애니메이션 원리 재분류

투고일_2021.04.10 심사기간_2021.05.01-14 게재확정일_2021.05.27 DOI https://doi.org/10.47294/KSBDA.22.3.18

UX 표현적 모션 연구를 위한 디즈니 애니메이션 원리 재분류

Re-classifying Disney Animation Principles for the Study of UX Expressive Motion

송재연, 서울과학기술대학교 디자인학과

Song, Jae Yeon_Department of Design, Seoul National University of Science & Technology

차례 1. 서론

1.1. 연구 배경 및 목적 1.2. 연구 방법 및 범위 1.3. 용어의 사용

2. 이론적 배경

2.1. 디즈니 애니메이션 원리/목적과 UX 모션 원칙/목적 2.2. UX에서 표현적 모션개념과 활용

2.3. UX에서 표현적 모션의 적용 범위

3. UX 표현적 모션 연구를 위한 디즈니 애니메이션 원리 재분류 4. 결과

5. 결론 References

UX 표현적 모션 연구를 위한 디즈니 애니메이션 원리 재분류

Re-classifying Disney Animation Principles for the Study of UX Expressive Motion

송재연, 서울과학기술대학교 디자인학과

Song, Jae Yeon_Department of Design, Seoul National University of Science & Technology

요약

중심어 UX 표현적 모션 UI 애니메이션

디즈니 애니메이션 원리

웹이나 모바일 인터페이스에서 다양한 기술 구현이 가능해짐에 따라 모션의 활용이 증가하였고, 적절 한 모션의 적용은 사용자 경험(UX)에 직접적인 기여를 하고 있다. 본 연구의 목적은 UX 모션 연구 영역에서 상대적으로 미흡했던 UX 표현적 모션 연구에 대해 체계적인 기준을 확립하는 것이다. 이를 위해 모션의 필수적 개념인 디즈니 애니메이션 원리를 재분류하여, UX 표현적 모션 연구에 대하여 어 떤 기준으로 논의할 수 있는지를 확인하고자 한다. 이에 대한 연구 방법으로 먼저 이론적 고찰을 통해 디즈니 애니메이션 원리와 UX에서 모션의 역할과 목적을 검토하였다. 선행 연구를 살펴본바, UX 모 션에서 디즈니 애니메이션 원리가 소극적이었던 이유가 사용성을 방해한다는 점에 있었다. 그런데 사 용성(Usability) 측정 요소에는 기능적인 측면과 감정적인 측면을 포함한다. 따라서 감정적인 면과 관 련 있는 표현적 측면의 연구도 지속하여야 한다. 이에 본 연구에서는 표현적 모션 개념과 활용 방법을 고찰하여, 디즈니 애니메이션 원리의 재분류 범위를 설정하였다. 연구 결과, UX/UI 디자인을 주도하 고 있는 기업에서 제시한 표현적 모션의 개념은 A) 브랜드 성격을 부여하는, B) 눈에 띄는 역동적인 느낌을 만들어내는, C) 감정적 연결을 만들어내는 수단으로 정의한다. 그리고 활용 방법에는 기능적 인 측면의 사용성을 충족시킨다는 전제하에 표현적 모션이 적용된다. 표현적 측면의 UX 모션 논의가 활발히 이루어질 수 있도록 애니메이션 원리를 적용 효과 중점으로 재정리하여 위의 표현적 개념적 접근 A), B), C) 아래 재분류하였다. 재분류 결과, 1) Staging과 Timing, 2) Follow Through &

Overlapping과 Appeal, 3) Stretch & Squash와 Anticipation이 중점 논의 대상이 된다. 이 연구를 통 해 어떤 기준으로 논의 할 수 있는지를 확보하였고, 향후 후속 연구에 도움이 되는 자료가 되기를 바 란다.

ABSTRACT

Keywords

UX Expressive Motion UI Animation

Disney Animation Principles

The use of motion in web and mobile interfaces has been increasing because of digital technology advancement, and properly applied motion contributes to the user experience. The purpose of this study is to establish a systematic standard for UX expressive motion research that has been relatively insufficient in the field of UX motion. To achieve the purpose of the study, this mainly discussed and reclassified the Disney Animation Principles, which are the foundational concepts in the motion design field. Reclassifying the classical animation principles is also to seek what criteria UX expressive motion research can be discussed further. The research method examines the Disney Animation Principles and the role and purpose of a motion in the UX field. By looking at the previous studies, Disney's animation principles were passive in UX motion because they interfered with usability. However, the usability measurements include both functional and emotional aspects—the emotional elements related to expressive elements, so the research should continue. This study considers UX expressive motion concepts and utilization methods, establishing a scope for re-classification of Disney Animation Principles. Research has shown that the concept of UX expressive motion presented by major corporations leading UX/UI design defines it as A) giving brand personalities, B) creating dynamic atmospheres to be noticeable, and C) producing emotional connections. In addition, expressive motion is applied to the utilization method because it satisfies the usability of functional aspects. The animation principles were rearranged to the application affect focus and reclassified below the above expressive conceptual approaches A), B), and C) to discuss UX motion on the expressive aspect.

As a result of the re-classification: 1) Staging and Timing, 2) Follow Through & Overlapping and Appeal, and 3) Stretch & Squash and Anticipation are the main discussion topics. Hopefully, this result aims to motivate what criteria can be discussed further and be helpful for future UX expressive motion research.

1. 서론

1.1. 연구 배경 및 목적

웹이나 모바일 인터페이스에서 여러 기술 구현이 가능해짐에 따라 모션의 활용도와 중요도가 증가했다. 사용자 인터페이스에서(UI) 모션은 사용자 경험(UX)에 직접적인 기여를 하기 때문 이다. 특히 모션이 만들어내는 인터랙션은 사용자에게 특별한 느낌을 선사할 수 있다. 이러한 이유로 애플이나 구글 등과 같이 UX/UI 디자인 트렌드를 주도하는 기업들도 모션 시스템을 내세워 적극적으로 활용하고 있다.

일반적으로 UX 관점에서 모션을 적용할 시에는 모션 원칙과 가이드라인을 세워 놓는다. 이유 는 목적이 없고, 지나친 모션 활용은 사용성을 방해할 수 있기 때문이다(Barclay, n.d.). 따라서 UX에서 모션에 관한 연구는 ‘사용성(Usability)’ 개선 및 향상에 중점을 둔다. UX와 사용성 분야의 전문가 노먼(Norman)과 닐슨(Nielson)이 설립한 닐슨 노먼 그룹(NN/g)의 정의에 의 하면, ‘사용성(Usability)’ 이란 사용자 인터페이스(UI)가 얼마나 사용하기 쉬운지를 평가하는 품질 속성(Quality Attribute)이며, 디자인 과정 중 사용 편의성을 개선하려는 방법을 가리킨 다. 훌륭한 사용자 경험(UX)이 되려면 사용성 요소 모두를 만족시켜야 하는 것에 목적을 둔다 (Nielsen, 2012, January 3).

베반(Bevan, 2008)은 사용성을 명확히 분류하여 사용성 측정에 관해 연구하였다. 사용성 품질 (Usability in Use) 측정 항목에는 효율성(Effectiveness), 생산성(Productiveness), 만족감 (Satisfaction)이 있다. 사용자 만족감(Satisfaction) 측정 범위에 대하여는 세부적으로 호감도 (Likability), 편안함(Comfort), 신뢰도(Trust), 즐거움(Pleasure)을 포함한다. 이에 대한 각 각의 정의를 살펴보면, 효율성(Effectiveness)과 생산성(Productiveness)은 시스템 성능 (Progmatic)에, 즐거움(Pleasure)에 대한 항목은 쾌락적인(Hedonic) 측면과 관련이 있다 (Carver & Cheier, 1998). 노먼(Norman, 2004)의 분류에 의하면, 즐거움(Pleasure)은 감정 적인 반응(Emotional Response)과 연관이 있다(<Table 1> 참고).

Usability in use

Effectiveness in use Productiveness in use Satisfaction in use

Likability(Satisfaction with progmatic goals) Comfort(Physical Satisfaction)

Likability(Satisfaction with security) Pleasure(Satisfaction with hedonic goals)

<Table 1> The Elements of Usability Measurement (Bevan)

위에서 살펴본 바와 같이, 사용성을 충족시키려면 ①시스템 향상-기능적인(Functional)측면 이고, ②쾌락적 측면- 감정적(Emotional) 측면 모두 고려되어야 한다. 따라서 사용자 경험 (UX)에서 모션 설계시 기능적, 감성적 두가지 측면의 접근이 지속적으로 필요하다.

한편, 그동안 사용성 저해의 이유로 모션의 기본 원칙으로 간주되는 디즈니 애니메이션 12 원리는 사용자 경험(UX)의 UI모션 영역에서는 소극적으로 활용되었다. 김현석(2020)은 UI 애니메이션에서는 사용성을 저해할 수 있다는 이유로 많이 연구되지 않고 있다고 하였다. 장과 웅가(Chang & Ungar, 1995)에 의하면, 사용자 인터페이스(UI)는 상호작용적인 매체이며, 사 용자의 직접 조작 하에 구현된다. 그러므로 애니메이션 원리들을 적용하기 어렵기 떄문에, 인터 페이스의 성격을 드러낼 수 있는 표현적인 측면에서는 미온적이였다.

그런데 사용성 충족 전제 하에 인터페이스의 개성을 연출하는 수단으로서 모션 활용에 관한 연구들이 존재한다. 김현석(Kim, H., 2020)은 UI애니메이션의 브랜드 연출의 가능성을 디즈 니 애니메이션 원리 중 ‘Stetch & Squash, Anitcipation, Follow Through’에서 찾았고, ‘헨더슨 (Henderson, 2015)는 ‘Exggeration, Anticipation, Staging, Appeal’에서의 적용 가능성을 제 시하였다(<Table2 > 참고).

연구자 애니메이션 원리 UX 모션 연출 효과

김현석(2020)

Stretch & Squash, Anticipation, Follow Through

브랜드 성격 연출

Henderson(2015)

Exggeration 피드백(Feedback)에서 확실한 반응 유도

Anticipation 피드포워드(Feedforward)에서 힌트를 제공

Staging 공간인식(Spatial Awareness)에서 사용자의 적응을 도와줌

Appeal 브랜드 톤(Brand Tone of Voice)에서 특유의 느낌을 전달

<Table 2> Previous Research of UX Choreography Applied Disney Animation Principles

이들은 공통으로 디즈니 애니메이션 원리를 적용한 표현적 측면의 UX 모션 연출 방법을 모색 하고 있다. 디즈니가 만들어낸 고전적인 모션 표현들이 여전히 즐거운 경험을 선사하고 있다는 관점에서, UX 모션에 적용할 수 있는 방안에 대해 다각적인 논의가 요구된다. 따라서 본 연구의 목적은 모션의 기본 원리로 대표되는 디즈니 애니메이션 원리를 재분류하여, UX에서 표현적 측면의 모션 활용 방안을 논의할 수 있는 기준을 확립하는 것이다.

1.2. 연구 방법 및 범위

선행 연구를 통해 디즈니 애니메이션 원리와 UX 모션의 원칙과 목적을 파악하여 표현적 개념 연구의 당위성을 확인하였다. 그리고 UX 표현적 개념을 제시하고 있는 주요 기업들의 관점을 검토하고, 활용 범위 및 방법을 살펴보았다. 앞의 선행 연구와 사례들을 통해 파악한 내용을 토대로 본 연구 목적을 달성하기 위한 분석이 이루어졌다. 연구 범위는 디즈니 애니메이션 원리 를 설명한 “The Illusion of Life(1981)” 원문을 자세히 검토하였다. 이는 모션 기본 원리의 본질적인 논의점을 발견하고, UX 표현적 모션에서 연구되어야 할 논의 기준 확립에 대한 타당 성을 높이기 위함이다.

1.3. 용어의 사용

주제 특성상 경우에 따라 각기 다른 번역이 존재한다. 본고에서는 혼란이 있을 수 있는 용어에 대해 다음과 같은 원칙을 세워 사용하였다. 첫째, Principle에 대하여는 ‘원리’와 ‘원칙’으로 번 역이 된다. 표준국어사전에 따르면, ‘원리’와 ‘원칙’의 의미는 차이가 있다. 전자는 기초가 되는 보편적 근거/진리의 의미이고, 후자는 기본적으로 지켜야 하는 규칙이나 법칙의 의미이다. 본고 에서는 모션의 기초적 근거인 디즈니 애니메이션과 관련에서는 ‘원리’로, 기본적 규칙을 지켜야 하는 특성이 강한 UX/UI 모션에 관해서는 ‘원칙’으로 함께 사용하였다.

둘째, Animation, Motion, Movement, Move에 관해서는 본고의 연구 주제가 ‘모션’을 다루고 있기에 ‘모션’으로 통일하여 사용하였다. 단, ‘디즈니 애니메이션’에 대하여는 고유명사로서 널 리 인식되고 있는 특징을 반영하여 제외하였다. 셋째, 사용자 경험은 UX로 표기하였고, 사용자 인터페이스는 UI로 축약하여 사용하였다. 넷째, UX Motion, Motion in UX, UX in Motion, UI Animation, UI Motion, UI Movement, UI Transition, UI Choreography에 관련해서는 ‘UX 모션’으로 통일하였다. UI의 ‘인터페이스’라는 개념은 사용자가 시스템과 상호작용하는 접촉면 의 기능적인 요소들의 집합을 의미(유은, 2011, p.142)하므로, 본 연구의 주제와 부합하지 않 다. 따라서 UI 개념의 상위 개념인 UX로 사용하였다.

2. 이론적 배경

2.1. 디즈니 애니메이션 원리/목적과 UX 모션 원칙/목적 2.1.1. 디즈니 애니메이션 원리와 목적

디자인에서 모션을 활용하려면, 모션 표현의 기본 원리를 이해하고 있어야 한다. 디즈니의 애니 메이션 원리는 모션을 이해하기 위한 필수적 개념이다. 이는 존스턴(Johnston)과 토마스 (Thomas)가 The Illusion of Life(1981)에서 12개의 애니메이션 원리를 정리한 것이다. 이

12가지의 원리에는 ①Stretch & Squash, ②Anticipation, ③Staging, ④Straight Ahead &

Pose to Pose, ⑤Follow Through & Overlapping Action, ⑥Slow In & Out, ⑦Arcs, ⑧ Secondary Action, ⑨Timing, ⑩Exaggeration, ⑪ Solid Drawing, ⑫Appeal이 있다. 이에 대한 세부적 설명은 3장에서 다루고 있다.

디즈니 애니메이션의 본질적인 목적은 사실보다 더 사실적인 모션 표현을 하는 것에 있다(정준 호와 신지호, 2017). 이에 따른 애니메이션 원리는 사실주의(Realism)를 기반으로 하며, 움직 임은 초현실주의(Hyper-realism) 표현을 통해 실현된다. 이는 비현실적으로 보이지만 완벽한 이미지로 시청자를 속이고 싶다는 의도로 해석된다(Wells, 1988). 이 원리는 사실감과 생동감 있는 모션 표현에 중점을 두고, 뷰어들의 시각을 자극하기 위해 고안되었다. 그러기 위해서 현실 세계의 물리적 운동감(Physics)과 비현실적인 표현을 반영하여 애니메이션의 캐릭터에 성격을 부여한다. 한편, 애니메이션은 수동적인 매체지만, UI는 상호작용적 매체이다. 사용자 가 통제하고 있기 때문에, 사용자의 요구에 부응해야 한다(Chang & Unger, 1995, p.53). 즉 UX 모션은 사용자와 상호작용 과정에서 적합한 모션을 마련해야하는 점에서 차이가 있다. 따 라서 UX에서의 모션을 활용하는 목적은 무엇이며, 어떻게 활용되어야 하는지에 대해 살펴볼 필요가 있다.

2.1.2. UX 모션 원칙과 목적

UX 모션 적용은 원칙을 세워 놓는 것이 일반적이다. 이는 모션 시스템 전반에 일관성을 부여하 여 사용자가 편안하고, 예측할 수 있는 환경을 조성하기 위함이다(Barclay, n.d.). 구글의 Material Design에서는 목적이 있고, 잘 디자인된 모션으로 인터페이스에 생명을 불어넣어야, UX가 짜임새 있게 느껴진다고 하였다. 또한 애플사의 HUMAN INTERFACE GUIDELINE (H.I.G.) 모션 적용 원칙을 살펴 보면<Table 3>, ①앱 목적에 꼭 필요한 애니메이션만 활용,

②동작 줄이기 기능을 켜서 애니메이션 제한 가능, ③사용자가 비디오 및 기타 모션 효과를 제어, ④움직이는 요소나 깜박이는 요소를 표시할 때는 주의 하도록 하는 식의 원칙들이 있다.

또한 각각의 원칙들 세밀하게 활용 지침 가이드라인이 명확하게 짜여져 있다. 특징적인 점은 제한적으로 적용하며, 사용자가 모션을 직접 제어할 수 있게 한 것이다.

<Table 3> Appearance Effects and Motion (Human Interface Guidelines)

이밖에 구글의 Material Design에서 모션을 활용하는 목적은 UI를 표현하고, 쉽게 사용할 수 있도록 하는 것에 있다. 여기에서는 모션을 정보적(Informative), 집중적(Focused), 표현적 (Expressive) 측면으로 나누어 접근하고 있는데, 3가지 중 앞의 두 가지 측면은 기능성과 관련 이 있다. 그리고 IBM의 Design Language 모션은 생산적(Productive) 측면과 표현적 (Expressive) 측면으로 나누어 활용하는데, 전자는 기능성에 대한 접근이고, 후자는 감정적인 측면을 끌어내는 것을 목표로 삼는다. 마이크로 소프트의 Fluent Motion은 목적에 맞게 작동하 는 것을 원칙으로 한다. 사용자의 동작을 기반으로 시의적절한 피드백을 제공하고, UI를 살아 있는 느낌이 들도록 하고, 사용자의 탐색을 안내하여, 사용자와 디지털 환경 간의 정신적 연결 을 이끌어 낸다. 즉 실제 세계의 물리적 움직임을 기반에 두고, 모션 디자인 시스템을 확장해나 간다. 이에 따른 모션의 원칙은 물리적(Physical), 기능적(Functional), 지속적(Continuous), 맥락적(Contextual) 모션 4가지로 구분하였다. 여기에서는 물리적(Physical) 모션이 표현적 측면의 접근이고, 나머지는 기능적인 면이다. 위의 내용을 정리하면 다음<Table 4>와 같다.

모션의 역할 : Motion helps UX/UIs expressive and easy to use(Naimark, 2018, September 27).

기업명 모션 원칙 설명 구분

Google

Informative 요소, 동작 효용 및 결과 간의 관계를 강조하는 모션 기능적 (easy to use)

Foused 중요한 요소에만 주의를 집중시키는 모션

Expressive 브랜드에 성격과 스타일을 부여 하는 모션 표현적

(Expressive)

IBM Productive 효율성과 반응성을 지향하는 모션 기능적

Expressive 열정적이고, 활기차며, 눈에 잘 띄는 움직임 표현적

Microsoft

Physical 감정적 연결을 만들어 내어 성격을 부여하는 모션 표현적

Functional 목적과 확신을 제공, 성능이 향상된 느낌을 주는 모션

기능적 Contiuous 시선을 끌고, 안내하여 사용하기 편한 느낌을 주는 모션

Contextual 사용자 조작 방식에 적절한 피드백을 제공, 편암함을 주는 모션

<Table 4> The UX Motion Principles by Major Corporations

위의 원칙들을 종합해보면, UX에서 모션을 적용하는 목적도 크게 두 가지 측면으로 나누어진 다. 첫째, 기능적(Functional)인 측면의 모션은 기술 구현이 핵심이며, 사용자의 경험을 매끄럽 게 함으로써 사용자를 만족시키는 것이 주목적이다. 둘째, 표현적(Expressive) 측면의 모션은 시각적인 재미나 즐거움을 제공하여 인터페이스 안에서 상호작용을 하면서 느꼈던 경험이 기 억에 남도록 하는 것을 목표로 한다. 따라서 모션으로 사용성(기능적인 만족, 감정적인 만족)을 높이기 위해선 위 두가지 측면(기능적, 표현적)의 모션의 체계적인 설계가 필요하다(<Figure 1> 참고).

<Figure 1> The UX Motion Design System Example

(https://www.designsystems.com/5-steps-for-including-motion-design-in-your-system/)

2.2. UX에서 표현적 모션 개념과 활용

앞에서 살펴본 바와 같이<Table 4>, UX 표현적 모션 개념과 관련해서는 구글의 Material Design, IBM의 Design Language, 마이크로소프트사의 Fluent Motion에서 확인할 수 있다.

기업들의 모션 원칙에 표현적 모션 개념을 정의한 것은, UX 모션 디자인 설계 과정에 필수적임 을 시사한다. 이에 대한 각각의 개념과 활용 범위는 다음과 같다. 첫째, 구글의 표현적 모션 (Expressive Motion)은 브랜드에 성격과 스타일을 부여하는 모션을 의미한다. 이를 위해 전환 (Transition)을 사용자화(Customization)하여, 브랜드 성격에 적합한 모션을 구현할 수 있도 록 하였다. 그리고 미묘한 움직임을 그래픽 요소에 적용하여 재미 요소를 준다거나 중요한 부분 을 강조할 때 적용할 수 있다. 둘째, IBM(Expressive Motion)은 열정적이고, 활기차며, 눈에 잘 띄는 모션으로 정의한다. 사용자의 주의를 끌어야 할 때(새 페이지를 열 때, 동작 버튼을 클릭할 때, 시스템 경고 또는 알림 상자가 나타나는 등의 순간)에 적용하며, 생산적인 경험 사이에 리듬감 있는 느낌을 전달한다. 셋째, 마이크로소프트(Physical Motion)에서는 감정적 연결을 만들어내어 성격을 부여하는 모션으로 정의한다. 이를 연결되는 모션(Continued

Animation)이라 칭하며, 주로 전환이 되는 부분에 적용하고 있다. 위의 내용을 예시를 들어 정리하면 다음<Table 5>와 같다.

이처럼 각각의 활용 범주 안의 세부적인 가이드라인을 살펴본 결과, 표현 방식에 대해서는 제한 을 두고 있지 않으나, 적용 범위에 대해서는 기준을 세워 놓았다. 이는 UX에서 모션의 활용은 간결하면서도 섬세해야 하며, 인터페이스의 목적에 따라 꼭 필요한 부분에만 활용되어야 하기 때문이다(Laubheimer, 2020, January 12).

2.3. UX에서 표현적 모션의 적용범위

페센덴(Fessenden, 2017, March 5)은 사용자가 인터페이스와 상호작용할 때 경험할 수 있는 즐거움의 깊이를 논하였다. 첫째, 표면적인 즐거움(Surface Delight)은 인터페이스의 특징에서 도출되므로 국소적이며, 맥락적이다. 개발자가 설계한 재미 요소나 제품의 성능에 기쁨을 느끼 는 것을 말한다. 둘째, 깊은 즐거움(Deep Delight)이다. 기능성, 신뢰성, 사용성, 즐거움을 모두 충족해야 도달할 수 있으므로 총체적이다. 사용자가 완전한 몰입에 도달하는 단계를 말하며, 이를 위해 방해 요소를 두지 않는 것이 바람직하다. 그러므로 즐거움을 제공하는 표현적 모션은 기능적 측면의 사용성을 방해하지 않는 선에서 활용되어야 하고, 감정적인 연결을 도모하여 깊은 즐거움의 영역으로까지 진입할 수 있게 해야 한다.

즉 기능적 모션이 잘 수행이 된 다음, 표현적인 모션을 추가하여 인터페이스에 개성 (Personality)을 더하는 것으로 이해할 수 있다. 아론 월터(Arron Walter, 2020)는 사용자 요구 피라미드(Hierarchy of User Needs)를 통해 즐거움(Pleasure/Delight)과 같은 요구는 더 기본적인 요구들(Functionality/Usability)충족된 후에야 달성될 수 있다고 하였다. 또한 이 와 관련한 예로 IBM의 모션 가이드라인 예시를 보면, 기능적 측면과 표현적 측면의 활용 비율 을 짐작할 수 있다(<Table 6> 참고).

<Table 6> The Example of IBM’s Motion Application (IBM Design Language)

위의 표<Table 5>에서 짐작되는 것은 활용 범위뿐만 아니라, 모션의 지속시간(Duration)에 대한 고려이다. 수많은 연구에서 발견한 인터페이스 모션의 최적의 속도는 0.2-0.5초 (200~500ms) 사이에 있다. 이 수치는 인간의 두뇌의 본질적인 특징을 기반으로 하고 있다 (Skytskyi, 2018, September 5). 클릭하기 전 커서를 대면 반응하는 호버(Hover)와 피드백 (Feedback)과 같은 상호작용에서는 약 0.3초(300ms)이고, 상태 변경(State-change)/전환 (Transition)과 같은 정교한 동작은 약 0.5초(500ms) 이다(Ruthi, 2018, Dec 17). 모션을 구현할 때는 프레임(Frame) 단위로 쪼개서 작업하는데, 1초당 24프레임 수(24fps) 기준으로 하면, 1프레임은 0.4초(400ms)이고, 1초당 30fps 기준으로 하면 1프레임이 0.3(300ms)초이 다. 즉, 1~2프레임에서의 순간적인 효과를 만들어내야 하는 것이다. 이것은 모바일 인터페이스 의 기준이고, 데스크톱 환경의 경우 조금 더 할애될 수 있다. 이처럼 인터페이스에서 모션은 찰나에 이루어지고, 눈에 띄지 않아야 사용성을 저해하지 않는 것이다.

3. UX 표현적 모션 연구를 위한 디즈니 애니메이션 원리 재분류

앞서 살펴보았듯이, UX에서 모션은 순식간에 작동되고, 필요의 목적을 상실했을 때는 사용자 의 시각에서 사라진다. 그렇지만 짧은 시간 안에 이뤄지는 모션 적용에 의도가 있고, 없고의 차이는 사용자 경험에서 큰 차이를 보인다(Laubheimer, 2020, Feburary 9). 이 연구에서는 표현적 모션의 다각적인 논의를 위해, 모션의 기본 원리인 디즈니 애니메이션 12 원리를 재분 류하여 UX 모션에서 활용 가능성을 확보하는 것이 목적이다. 이를 달성하기 위해 애니메이션

구글의 표현적 모션 Transition의 사용자화

모션 적용 효과

좌) 전환 시 Fade Out 모션 효과를 적용하여

사용자가 유틸리티에 집중할 수 있도록 함

우) 전환 시 튕겨지는 모션을 적용하여 활기차고 장난스러운 브랜드 성격을 부여함

IBM의 표현적 모션 사용자의 주의를 끌 때

모션 적용 효과 좌) Productive Motion : 사용자가 동작 버튼을 제어(토글, 탭 버튼 등) 우) Expressive Motion : 사용자의 동작 제어에 따라 나타나는 반응하는 요소에 적용

MS의 표현적 모션 전환이 되는 부분

모션 적용 효과 터치를 통해 UI와 상호작용할 때 자연스러운 환경을 연출하여 감정적 연결을 만들고, 성격을 부여

<Table 5> The Examples of Utilizing UX Expressive Motion

원리를 창안한 존스턴과 토마스(Johnston &Thomas, 1981)의 저서 “The Illusion of Life”

원문을 면밀히 살펴보았고, 특히 적용 효과를 설명하는 부분을 중점으로 정리하였다.

3.1. Stretch & Squash(S&S)

가장 중요하게 여겨지는 원리이며, 어디에나(사물, 캐릭터, 표정 등) 사용할 수 있다. 이를 표현 하기 위해선 중력(Gravity), 부피(Volume), 질량(Mass)이 고려되며, 형태를 변형시킬 때 부피 는 반드시 유지해야 한다.

♦ 적용 효과 : 감정적 연결(기쁨, 좌절, 몰입 등)을 돕는다(Johnston, 1991, p.48). <Figure 2>에서처럼, 객체에 Stretch & Squash 적용시켜 형태를 왜곡시키면서 여러 감정을 표현할 수 있다.

3.2. Anticipation(A)

시청자(인터페이스에선 사용자)들에게 다음 일어날 일에 대한 힌트(Visual Cue)를 먼저 주는 원리이다. 뜻밖의 일(Surprise gag)과는 반대되는 개념이다. 예고 없이 갑자기 전환되는 것은 부자연스럽고, 불편한 감을 준다.

♦ 적용 효과 : 다음 행동이나 제스처를 명확히 할 수 있다(Johnston, 1991, p.50). <Figure 3>을 보면, 예고 동작으로 인해 캐릭터가 앞으로 나갈 것이라는 예상을 하게 한다.

3.3. Staging(S)

가장 일반적인 원리이다. 어떤 아이디어를 분명하게 제시해주고 역할을 한다. 가장 중요한 요소 는 이야기 포인트이며, 특정 분위기를 연출하려면 짧은 시간 내에 하는 것이 효과적이다. 시선 을 끄는 역할을 하므로 다른 요소와 혼동되지 않게 연출해야 한다.

♦ 적용 효과 : 행동이 이해되도록, 성격이 인식될 수 있도록, 표현이 잘 보이도록 할 수 있다 (Johnston, 1991, p.52). <Figure 4>에서처럼, 캐릭터의 성격을 명확하게 연출하여 이해시킨다.

3.4. Straight Ahead Action & Pose to Pose(S&P)

애니메이션 제작 기법을 응용한 원리이다. Straight Ahead Action은 주요 포즈(Key Pose)를 잡고 처음부터 하나씩 차례로 그려나가는 것으로서 즉흥적인 특징이 있다. Pose to Pose는 두 개의 주요 포즈(Key Pose)를 양 끝에 정하고, 중간의 과정을 채워나가는 방식이다.

♦ 적용 효과 : 표현에 있어 Straight Ahead Action 은 자연스러움(Spontaneity)을 주고, Pose to Pose는 명료함(Clarity)과 힘(Strength)을 수반한다(Johnston, 1991, p.55). (<Figure 5>

참고)

3.5. Follow Through & Overlapping(F&O)

모션의 시작과 마무리에 관한 원리이다. 이 원리는 물리 법칙을 따른다. “모든 동작은 갑자기 시작되거나 동시에 멈추지 않는다(Johnston, 1991, p.58)”는 것을 적용하였다. 주요 동작이 있으면 다른 부분들도 각기 다르게 동작한다는 개념이다. Follow Through는 주요 동작이 시작 될 때 주변 요소들도 뒤따라 움직이는 현상을 묘사하고, Overlapping은 주요 동작이 멈출 때 중복적이거나 서서히 멈추는 것을 반영한다.

♦ 적용 효과: 무게감과 현실감을 더하여, 활력(Vitality) 있게 만든다(Johnston, 1991, p.60).

<Figure 6>을 보면, 캐릭터가 점프하기 직전과 멈추기 직전까지의 추가 동작을 더하여 생동감 을 주고 있다.

3.6. Slow-In & Slow-Out(SI&SO)

현실적인 움직임을 끊임없이 관찰하여 고안된 원리이며, 가속도(Easing)를 반영하여 나타낸 다. 이는 기계적인(Mechanical) 표현을 탈피하고, 사실주의를 희화화(Caricature of Realism)

<Figure 2> Stretch &

Squash

<Figure 3> Anticipation

<Figure 4> Staging

<Figure 5> Straight Ahead Action & Pose-to-Pose

<Figure 6> Follow Through

& Overlapping

시킬 방법을 연구한 결과이다. (<Figure 7> 참고)

♦ 적용 효과: 진정성(Sincerity)을 갖게 해준다(Johnston, 1991, p.60).

3.7. Arc(AR)

“현실 세계의 모든 동작은 곡선 경로를 따른다(Johnston, 1991, p.60)”라는 것을 반영한 원리 이다. 직선 경로를 따라 묘사되는 동작은 뻣뻣하고, 경직되게 보이고, 본질을 파괴한다고 여겼 다. (<Figure 8> 참고)

♦ 적용 효과: 부드럽게 만들어주고, 친근함을 이끌어낸다(Johnston, 1991, p.61).

3.8. Secondary Action(SA)

“주 동작 종속되어 있으며(Johnston, 1991, p.61),” “주 동작을 지원하는 보조 작용”이다 (Lasseter, 1987). 이 원리는 전체 작용의 묘사에서 완전성을 위해 사용된다. 모든 동작은 주 동작(Primary Action)을 돕는 보조 동작(Subsidiary Actions)으로 구성된다. 이 동작들을 조 합하면 정확하고 자연스러운 동작이 만들어진다.

♦ 적용 효과: 장면에 풍요로움과 동작의 자연스러움, 캐릭터의 성격을 강화한다(Johnston, 1991, p.62). <Figure 9>에서는, 침대에 누워 잠이 드는 동작에 피곤한 느낌을 주는 보조 동작을 더하여 장면을 연출하였다.

3.9. Timing(T)

성격(Personality)은 외모보다 움직임에 의해 정의되었고, 그 움직임의 다양한 속도는 그 캐릭 터가 무기력하고, 흥분되고, 긴장되고, 느긋한지를 결정하였다. 그러므로 타이밍을 깊게 고려하 여야 한다.

♦ 적용 효과 : 성격을 정의할 수 있다(Johnston, 1991, p.62). <Figure 10>에서처럼, 토끼는 빠르게, 거북이는 느리게 정의하여 표현할 수 있다.

3.10. Exaggeration(E)

디즈니가 생각했던 리얼리즘은 사실주의 희화화(Caricature of Realism)였다(<Figure 11>

참고). 이는 감정을 묘사 할 때, 과장해(슬픈 감정은 더 슬프게, 기쁜 감정을 더 기쁘게 등)표현 하는 원리이다.

♦ 적용 효과 : 어떤 상황에 대한 확신을 심어준다(Johnston, 1991, p.64).

3.11. Solid Drawing(SD)

하나의 대상에 여러 가지 동작에 대한 잠재적인 형태를 그려내어 바로 애니메이션화 할 수 상태를 준비해 놓는 개념이다(<Figure 12> 참고). 부피는 같지만, 유연하고 경직되지 않은 매력 있는 형태가 요구되었다. 이는 드로잉 연출하는 능력에 달려 있다.

♦ 적용 효과 : 가능성 있는 아이디어를 발견하는 기회를 제공한다(Johnston, 1991, p.65).

3.12. Appeal(AP)

사람들이 보기 좋아하는 것들을 의미한다. 이로 인해 시선을 끌 수 있으므로, 처음부터 매우 중요하다. 설정한 캐릭터의 성격이 어떻든 상관없이 호소력을 가져야 한다는 의미이다 (<Figure 13> 참고). 관객은 표현, 캐릭터, 동작, 전체 스토리 상황 등 자신에게 어필되는 것을 보고, 즐긴다. 서투른 디자인, 어색한 동작, 모두 매력이 떨어진다.

♦ 적용 효과 : 시선을 끌어 좋아하게끔 만든다(Johnston, 1991, p.66).

이처럼 적용 효과를 중점으로 정리해보면<Table 7>, UX 표현적 모션에서 애니메이션 원리를 논할 수 있는 토대를 마련할 수 있다.

<Figure 13> Appeal

<Figure 9> Secondary Action

<Figure 11> Exaggeration

<Figure 12> Solid Drawing

<Figure 8> Arc

<Figure 10> Timing (TedEd)

<Figure 7> Slow-In & Out

애니메이션 12 원리 적용 효과

① S&S 감정적 연결(기쁨, 좌절, 몰입 등)을 도와줌

② A 다음 행동이나 제스처를 명확히 함.

③ S 행동, 성격, 표현이 인식될 수 있도록 함

④ S&P 모션의 자연스러움, 명료성과 견고함을 더함.

⑤ F&O 무게감과 현실감을 더하여 활력(Vitality)있게 만듬.

⑥ SI&SO 현실감을 주어 진정성(Sincerity)을 갖게함

⑦ AR 친근함을 이끌어냄.

⑧ SA 장면에 풍요로움과 동작의 자연스러움, 캐릭터의 성격을 강화함.

⑨ T 성격을 정의할 수 있음

⑩ E 상황에 대한 확신을 심어줌

⑪ SD 가능성있는 아이디어를 발견하는 기회를 제공.

⑫ AP 시선을 끌어 좋아하게끔 만듬

<Table 7> The Effects of Applying the Animation Principles

4. 결과

여기에 앞서(2.2.) 살펴본 기업의 UX 표현적 모션 개념의 3가지 접근 방식-A.브랜드 성격을 부여하는 모션, B. 역동적이고 눈에 잘 띄는 모션 모션, C. 감정적 연결을 만들어내는 모션-에 대입하여 재분류하면, 어느 측면에서 연구가 이루어져야 하는지를 가늠해 볼 수 있다. 분류한 결과는 다음과 같다. 첫째, A를 표현적 모션이 성격을 부여하여 규정한다는 의미로 해석하면,

③과 ⑨원리를 논의할 수 있다. 이를 A-중점 논의 대상으로 분류한다. 둘째, B는 의미를 전달 하기 위해 역동적인 모션을 제공하여 사용자의 시선을 단번에 끌어야 하는 특징을 지니므로

⑤와 ⑫을 적용할 수 있다. 이를 B-중점 논의 대상으로 분류한다. 셋째, C 개념은 다른 요소 간 모션에 감정적 연결을 적용하여 그 관계를 이해시키는 것이 핵심이므로 ①와 ②에 대한 논의가 요구된다. 이를 C-중점 논의 대상으로 분류한다.

또한 애니메이션 원리에서 특정 성격이나 상황을 명확하게 하고, 강화/강조의 역할을 하는 보조 적인 수단으로서의 원리들이 있다. 이는 보조적 수단이지만, 모션 표현의 완성도를 높여준다.

따라서 이를 A, B, C-부수적 논의 대상으로 분류하였고, 여기에는 ⑥, ⑧, ⑩의 원리를 고려하 여 적용할 수 있다. 위의 내용을 표로 정리하면 <Table 8>과 같다.

UX 표현적 모션의 3가지 측면( Expressive Motion in UX )

A. 브랜드 성격을 부여하는 모션 B. 역동적이고 눈에 잘 띄는 모션 C. 감정적 연결을 만들어내는 모션 중점 논의 대상 부수적 논의 대상 중점 논의 대상 부수적 논의 대상 중점 논의 대상 부수적 논의 대상

③, ⑨ ⑥, ⑧, ⑩ ⑤, ⑫ ⑥, ⑧, ⑩ ①, ② ⑥, ⑧, ⑩

<Table 8> Reclassification of Animation Principles Incorporating Google, IBM, and Microsoft's UX Expressive Motion Concept Approaches

또한, 나머지 ④, ⑦, ⑪에 대하여는 다음과 같은 이유로 포함하지 않았다. 먼저 ④와 ⑪는 애니 메이션 고유의 기법이므로 인터페이스상에서 적용해야 할 논의점을 발견하지 못했다. 마지막 으로 ⑦은 현실 세계에 움직임을 통해 착안한 곡선 경로의 모션이 자연스러움을 제공하지만, 디지털 세계의 영역에서는 선택적 사항임을 확인하였기 때문이다. 예를 들면 구글 모션 가이드 라인에 포함했지만, IBM이나 마이크로 소프트에서는 활용하고 있지 않다.

5. 결론

본 연구의 목적은 UX 표현적 모션 연구 영역에서 사용성 방해의 이유로 소극적으로 활용 되었 던 디즈니 애니메이션 원리를 재고찰하여, 논의의 기준을 확보해 지속적인 연구의 토대를 마련 하는 것이었다. 이는 본 연구자가 UX 모션를 연구하는 데 있어, 논의 기준이 모호함을 느껴

시작된 연구이다. UXinMotion의 창시자인 윌린스코머(Willenskomer, 2016)가 아직 걸음마 단계라고 한 것처럼, UX를 위한 모션의 활용도와 중요도는 높아졌는데 이론적으로 아직 미숙 함을 느꼈다. 이에 대해 그동안 여러 연구자들(Laurel, 1991; Tognazzini, 1993; Chang &

Ungar, 1993; Lasseter, 1987 등)이 디즈니 애니메이션 원리를 인터페이스에 적용해야 하는 이유에 대해 다양한 방식으로 논의하였기에, 각기 다른 단어의 사용과 논의 범위의 혼재가 존재 하였다. 그러므로 본 연구에서는 모션의 기본 원리인 디즈니 애니메이션 원리의 원문(The Illusion of Life)을 통해 근본적인 논의점을 찾고자 하였다.

따라서 본고에서는 UX 표현적 모션의 개념과 디즈니 애니메이션 원리의 적용 효과를 중점으로 분석하여 논의 기준을 마련하였다. 연구 결과, ‘Netmarketshare’의 최신 측정 자료(2019년 11 월-2020년 10월) 기준 UX 분야 시장 점유율이 높은 기업들(Google, Apple, MS, IBM)의 모션 원칙 중 표현적 모션 개념을 제시한 곳은 구글, IBM, MS사였다. 각각의 UX 표현적 모션 측면과 애니메이션 원리의 적용 효과의 연결점을 찾아 재분류하여 논의 기준을 세웠다. 그 결과는 다음과 같다. 첫째, 표현적 모션에서 성격을 부여하는 모션을 중점으로 논할 수 있는 원리는 Staging과 Timing이다. 둘째, 역동적이고 눈에 잘 띄는 모션에서 고려해 볼 원리는 Follow Through & Overlapping(F&O)과 Appeal이다. 셋째, 감정적 연결을 만들어내는 모션에 서의 중점 논의 대상은 Stretch & Squash와 Anticipation이다. 이 논의 기준을 최종적으로 정리 하여 UX 표현적 모션 적용 방안에 대한 후속 연구 과제를 남기고, 이것이 근거 자료가 되기를 기대한다(<Table 10> 참고).

UX 표현적 모션의 3가지 측면 재분류한 애니메이션 원리 적용 효과 및 예시 <Table 9 참고>

A. 브랜드 성격을 부여하는 모션 Staing 포즈를 명확하게 하여 객체(캐릭터, 장면 묘사

등)의 성격을 표현

Timing 모션 속도를 조절하여 객체의 특징을 표현

B. 역동적이고 눈에 잘 띄는 모션

Follow Through &

Overlapping (F&O)

모션의 시작과 끝에 역동적인 동작을 추가하여 시 선을 끔

Appeal 매력적인 형태나 모션으로 시선을 끌어들임

C. 감정적 연결을 만들어내는 모션

Stretch & Squash 왜곡시킨 형태로 감정 표현 연출하고, 이해시킴

Anticipation 갑자기 전환되지 않도록 하여 상황의 전과 후를

자연스럽게 연결해 줌

<Table 10> Re-classifying Disney Animation Principles for UX Expressive Motion Research

References

Appearance Effects and Motion. (n.d.). Human Interface Guidelines.https://developer.apple com/design/human-interface-guidelines/accessibility/overview/appearance-effects/

Barclay, Caleb (n.d.).

Five Steps for Including Motion Design in Your

https://www.designsystems.com/5-steps-for-including-motion-design- in-your-system.

Bevan, N. (2008). Classifying and Selecting UX and Uasbility Measures.

Proceedings of the International Workshp on Meaningful Measures: Valid Useful User Experience

Measurement(VUUM)

Chalbi, A. (2018).

Understanding and Designing Animations in the User Interfaces

Chung, J., Shin, J. (2017). Reinterpretation Study of 12 Disney Principles Based on MikhailChekhovs Psychological Gesture Theory.

The Korean Journal of animation,13

Fessenden, Therese.(2017, March 5).

The Theory of User Delight,

https://www.nngroup.com/articles/theory-user-delight/

A. Staging

좌측 앞 객체) 어깨를 올리고 팔을 벌리는 포즈로 적극적인 태도를 표현 우측 뒤 객체) 팔짱 끼는 자세와 정면을 응시하지 않는 등의 포즈로 냉소적인 태도를 표현

A. Timing

공이 떨어지는 모션 ) 속도감을 조절하여 각 공의 특성을 표현

B. F&O

좌) 고개를 좌우로 흔들게 하여 눈에 잘 띄게 함.

우) 객체의 귀를 반복적으로 움직여서 시선을 끝까지 머무르게 함.

B. Appeal

위) 일반적인 형태와 모션 표현

아래) 비율 조절된 형태와 강조된 모션을 통해 시선을 끌어들임

C. Stretch & Squash

위) 형태를 늘여 피곤, 놀람 등의 감정을 연출

아래) 형태를 찌그러뜨려 기쁨, 화남 등의 감정을 연출

<Table 9> The Example of the Effects of Applying Reclassified Animation Principles

Head, Val.( 2016, December 19).

Designing Interface Animation.

https://www.uxmatters.com/mt/archives/2016/12/designing-interface-animation.php Henderson, Rebecca.(2015, April 8).

The Principles of UX Choregraphy,

https://medium.com/free-code-camp/the-principles-of-ux-choreography-69c91c2cbc2a Johnston, O., & Thomas, F.(1981).

The Illusion of Life: Disney Animation.

Editions.

Kim, Hyunsuk. (2020). Expression of Brand Personality Using UI Animation

. Design Convergence Study, 19

Lasseter, J. (1991). Priniciples of Traditional Animation Applied to 3D Computer Animation.

SIGGRAPH’87 Confernce Proceedings,

Laubheimer, Page.(2020, January 12).

The Role of Animation and Motion in UX

https://www.nngroup.com/articles/animation-purpose-ux/

Lee, N., Kyung, B., Ryu, S. (2005). Analysis of Squash & Stretch Principle for Animation Action,

Game & Entertaninment, 1

Lim, Yong-Seob. (2019). Comparative Study of Motion in Limited Animation:Focusing on American Animation & Japanes Animation.

Journal of Digital Convergence, 17

Motion for Windows Apps

https://docs.microsoft.com/en-us/windows/uwp/design/motion/#fluent-motion-principles

Motion.

https://www.carbondesignsystem.com/guidelines/motion/overview/

Ruthi. (2018, December 17).

Disney’s Motion Principles in Designing Interface Animations,

Saffer, Dan. (2013). Microinteractions:

Full Color Edition: Designing with Details.,

Skytski, Taras.(2018, September 5).

The Ultimate Guide to Proper Use of Animation in UX.

Sultana, Nekhat et al.(2013). Exproring Believable Character Animation Based on Principles of Animation and Acting,

Informatics and Creative Multimedia.

Understanding motion.

Designing for Emotion

Wells, Paul. (1988).

Understanding Animation

Willenskomer, Issara.(2017, April 1).

Creating Usability with Motion: The UX in Motion Manifesto,

with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Willenskomer, Issara.(2016, November 16).

UI Animation Principles: Disney is Dead,

Yu, Eun. (2011). Design Attributes for Consistent User Experience of MultiDeviceService.

Journal of Korean Society of DesignScience, 25

C. Anticipation

상황의 전과 후 사이에 힘찬 도약을 예고하는 모션을 추가하여 연결시켜줌