구글, 리프트에서 배운 모션그래픽 법칙 6가지
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
목차
법칙 #1: “말하기"위해서가 아니라, “보여주기"위해서 모션을 사용하라.
법칙 #2: 애니메이션 마스터의 7가지 기본 원칙
법칙 #3: 제품을 사람들이 쓰고 싶게 만들자.
법칙 #4: 협업이 답이다.
법칙 #5: 디자인을 통한 확장
법칙 #6: 일관성을 활용하여 신뢰를 쌓아라.
월트 디즈니 같은 선구자들이 처음으로 애니메이션을 활용해 스토리텔링을 시작했을 때부터, 애니메이션은 멋지고, 근사하고, 엄청난 무언가를 만드는 툴로 여겨져왔다.
최근 몇 십년 간, 애니메이션은 디지털 제품 디자이너에게 점점 더 필수적인 툴이 되어왔다. 멋진 어느 순간을 만드는 것 뿐만 아니라, 유저에게 정보를 주고 그들이 제품을 온전히 잘 사용할 수 있도록 안내를 하는 역할도 해야하기 때문이다. 좋은 모션 디자인은 제품을 좀 더 사용성 있고 직관적으로 만든다. 애니메이션 원리가 디지털 인터페이스가 현실 세계를 반영하는 데에 도움이 되기 때문이다.
우리가 Design Better library의 신간인 Animation Handbook 출간 소식을 알리는 것이 기쁜 이유는 위 이유 때문이다. 이는 디자이너들이 애니메이션을 배울 때 도움이 되는 인사이트 뿐만 아니라, 사용자 경험에 대한 이례적인 기술까지 포함한다.
책 안에는:
애플의 개발자이자 디자이너이며, Blackbox로 애플 디자인 어워드를 수상한 Ryan McLeod로부터 얻은, 6백만 플레이어를 확보한 게임에 대한 팁.
모션이 제품에 있어 왜 중요한지 이해하고 있는 사람들을 위한 역전 프레임워크와 실제 적용 방법.
Headspace, Lyft, Zova Fitness, Google 등 모션 디자인이 성공적인 제품을 만들어내는 실제 사례.
애니메이션을 유용하게 사용할 수 있는 핵심적인 원칙들뿐만 아니라, 프로젝트 초기의 모션 디자인을 포함한 다양한 비즈니스 사례.
애니메이션 디자인을 당신의 워크플로우에 포함시키는 가장 좋은 연습법.
본 아티클에서는, 책에서 여섯 가지 핵심 내용을 뽑아서 보여줄 것이다. 하지만 좀 더 깊게 공부해보고 싶다면 여기에서 무료로 파일을 다운 받을 수 있다.
법칙 #1: “말하기"위해서가 아니라, “보여주기"위해서 모션을 사용하라.
물리적인 제품 분야에서는, 디자이너들은 인터랙션에 따라 바뀌는 인터페이스에서 이점을 얻는다. 스위치 껐다켜기, 손잡이 돌리기, 버튼 누르기. 소프트웨어 프로덕트에서는, 2차원이기 때문에 유저들은 그들의 액션에서 예상치 못한 결과를 얻었을 때 당황하기 쉽다. 이러한 이유로, Ryan McLeod가 쓴 바에 따르면, “가장 좋은 에니메이션은 무빙 파트 없이 무언가를 꺼내놓고, 시각적인 변화를 더하는 것이다.”
또한 모션은 소프트웨어에 새로운 발견을 더해주고, 생동감을 불어넣어준다. 말하기보다 보여주는 방식으로, 시선을 사로잡고, 필요한 곳으로 주의를 안내해준다. 틴더처럼 활발한 제스쳐든, 헤드스페이스처럼 눈치채기 어려운 조용한 제스쳐든.
“애니메이션은 당신이 단순히 기능을 시도하는 것을 넘어, 컨셉에 대한 감정을 일으켜주고 끌어올려준다.” -Christine CHA, Headspace 제품 디자이너
애니메이션은 유저가 옳은 방향으로 가는 것을 안내해주는 것 뿐만 아니라, Ryan이 말했듯 “기술적인 툴을 우리의 마음으로 확장하는 것"으로써 점점 더 중요해지고 있다. Chapter 1: 모션의 목적을 읽으면, 좀 더 많은 내용을 알 수 있다.
법칙 #2: 애니메이션 마스터의 7가지 기본 원칙
만약 애니메이션 입문자라면, 좋은 모션 디자인을 하는 건 매우 압도적으로 느껴질 것이다. 하지만 모션에는 7가지 기본 원칙이 있다. Frank Thomas와 Ollie Johnston의 책 <Disney Animation: The Illusion of Life>에서는, 애니메이션에서 마법을 부리는 방법은 간단하다고 한다.: 타이밍, 속도, 상연(staging), follow-throgh(뒤따라오는 장면), 보조 액션(secondary action), overlapping action, 드러내기. 이 원칙들은 다른 시대와 매체들에서 다뤄져왔지만, 오늘날 디지털 프로덕트를 다루는 디자이너들이 배울 수 있는 점이 매우 많다.
following-through 먼저 시작해보자. 벅스 버니나 Wile E. Coyote를 보면, 달리고, 춤추거나 벽을 때리기도 한다. 그들의 깃털같은 귀는 그들이 멈추는 순간에 완전히 멈추지 않는다. 대신에, 스프링처럼 그들의 메인 동작이 끝난 후에도 움직임이 지속된다.
같은 원칙이 디지털 프로덕트에도 적용될 수 있다. Ryan McCleod가 말하기를, 오브젝트들을 “그들이 사라지는 마지막 장소에서 조금의 스프링 효과를 주면, 좀 더 실제에 가까운 미래적인 인터페이스는 구성할 수 있다."
Chapter 2: 애니메이션의 원칙들을 읽으면 follow-through와 나머지 6가지 원칙에 대해 좀 더 배울 수 있다.
법칙 #3: 제품을 사람들이 쓰고 싶게 만들자.
또 다른 일곱가지 원칙은 ‘어필하기’이다. 클래식한 미키나 구피부터 좀 더 모던한 스폰지밥이나 징징이 같은 인기 많은 애니메이션 캐릭터를 보면, 그들은 모두 실제 모습보다 과장된 특징을 공유하고 있다는 것을 알 수 있다. : 거대한 눈, 길고 부드러운 귀, 축 늘어진 코.
Ryan McLeod는 왜 이러한 특징들이 캐릭터들을 더 매력적으로 보이는가에 대해 말했다. : “직관적이지는 않지만, 무언가를 실제 모습보다 더 밝고, 굵게 만들면 우린 그것을 좀 더 사람처럼 느낀다.”
또한, 매력있는 제품을 채워두는 비즈니스 사례도 있다. “브랜딩에 버금가는 애니메이션"을 제공할 수 있을 뿐 아니라, Ryan이 말했듯 캐릭터와 제품의 어필 요소 역시 수치적으로 측정할 수 있는 인게이지먼트를 생산하며 유저들을 재방문하게 만드는 데 도움이 된다. 명상 앱 Headspace를 예로 들면, 장난스럽고 친근한 애니메이션은 주눅 들게 하는 활동들에 대한 날카로운 부분을 제거하며 사랑스러운 캐릭터의 메타포를 사용하며, 명상을 친근한 느낌의 추상적인 컨셉으로 만들어준다.
“우리가 스스로 반짝거리고 인격을 주입하면 할수록, 우리는 사람들이 그러한 질적 지표에 반응하는 것을 보게 된다.” Vicki Tan, Headspace
‘어필'에 대해 더 알고 싶다면, 챕터2: 애니메이션의 원칙을 읽어보자.
법칙 #4: 협업이 답이다.
다른 제품 디자인들의 요소들과 같이, 협업은 인터페이스에 모션을 생산하고 보충하는 데에 매우 중요하다. 우리는 4개의 회사(Zova Fitness, Headspace, Google, Lyft)와 이야기를 나눴으며, 그들의 제품을 위한 애니메이션을 만들 때, 그들의 디자이너와 엔지니어가 어떤 관점으로 협업하는지에 대한 유니크한 관점을 얻을 수 있었다.
각각 디자인 프로세스의 시작과 끝에 애니메이션을 포함시킬 것을 주장한다. Zova Fitness에서는, 정적인 레이아웃으로 시작한다.
“우리는 애니메이션을 레이아웃 프로세스의 시작 부분에 포함시킬 것이다… 애니메이션이 처음뿌터 의도적으로 포함되어야한다고 생각한다. 모든 것이 끝나고 나중에 덧붙이는 방식으로 애니메이션을 넣는 것은 좋지 않다.” -David Fumberger, Zova Fitness CDO
게다가, 반대편에 있는 엔지니어 팀으로부터 피드백을 받아 애니메이션을 프로토타이핑해봄으로써, 디자이너는 개발 환경에서의 제약이나 한계를 알 수 있게 된다.
“디자이너가 그들이 다루는 매체에 있어서, 개발 환경에서 어떤 한계를 갖고 있는지 아는 것은 중요하다. 그리고 그들이 타깃팅하는 프로그래밍 환경에서의 제약도 이해하고 있어야 한다.” -David Fumberger, Zova Fitness CDO
디자인 프로세스 초기에 애니메이션을 넣는 것은 다른 이점들도 많다. 그렇게 하면, 팀은 접근성 높고 도움이 되는 애니메이션을 테스트할 충분한 시간을 벌 수 있다. 챕터 3: 애니메이션 콜라보레이션을 읽으면, 어떻게 모션을 초기 단계에 넣는 게 접근성과 연관되는지, 개발자와 어떻게 협업하는지에 대해 알 수 있다.
법칙 #5: 디자인을 통한 확장
회사가 확장을 할 때, 디자인 시스템은 제품을 유지시키고, 이중적인 수고를 줄이고, 팀이 제품을 더 빠르게 생산하는 데에 중요한 역할을 한다. 그러므로, 애니메이션을 디자인 시스템으로 구축시키는 것은 모션 디자인을 새로운 확장 규모에 맞는 제품으로 통합하는 데에 있어 중요한 부분이다.
매년, 구글은 그들의 디자인 시스템을 사용하는 기업들을 조명하는 Material Design Awards를 개최한다.
구글에서, Material Design System은 다양한 제품, 플랫폼 및 디바이스에 걸쳐 확장하는 방법이 되었다. 시행 방법은 다음과 같다.:
모든 모션 디자인 결정에 대한 일관된 소스 문서화 및 중앙 집중화
모든 디자인 작업을 위한 북극성지표로서의 핵심 원칙 확립
모든 상호 작용을 철저히 정의하여 사용법에 대한 공유
그들의 디자인 시스템에 모션을 포함함으로써, 그들은 프로덕트 팀이 매번 새로운 제품이 출시될 때마다 새로운 경험을 리디자인하는 대신, 가장 큰 임팩트를 주기 위한 모션이 어디 쓰여야 하는지 초점을 맞출 수 있게 도울 수 있었다.
“모션은 사용자 여정에서 중요한 순간을 남긴다. 좋은 일이든 나쁜 일이든 간에, 우리는 기븜이나 동정을 표현한다. 즉, 이는 공감을 표현하는 하나의 방식인 것이다.”
-Eric Henry, Google 시니어 UI 디자이너
챕터 3: 애니메이션 콜라보레이션을 읽으면, 디자인 시스템에 모션을 넣는 것이 어떻게 애니메이션의 파워를 확장할 수 있는지에 대해 알 수 있다.
법칙 #6: 일관성을 활용하여 신뢰를 쌓아라.
디자인 시스템이 제품들 간의 일관성을 만들기 때문에 중요한 것처럼, 제품의 일관성은 좋은 UX의 핵심이다. 모션을 사용하는 데에 있어서 일관되지 않는 것은, 인지 부하를 초래할 수 있으며, 이러한 이유로 Ryan McLeod는 “신뢰와 실험을 유지하기 위하여 인터페이스의 원칙을 완전히 이해하고 항상 염두에 두는 것”이 중요하다고 말했다.
일관성에 대해 덧붙이자면, 책의 마지막 챕터에서는 Ryan은 세 가지 원칙을 제안한다.: 뉘앙스, 인간성, 유동성.
뉘앙스: 모션은 다른 쓸모없는 것들에 주의를 빼앗기지 않고, 중요한 것이 무엇인지를 명확하게 알려주는 것을 보장한다.
인간성: 디지털 애니메이션은 주의 깊은 방식으로 순간적으로 속도를 줄임으로써, 소프트웨어를 인간화하는 역할을 한다.
유동성: 우리가 결정을 할 때 유동적인 상호작용이 일어나면, 중간에서 결정을 변경, 취소, 및 아예 바꿀 수 있는 여지를 주게 된다.
모션 디자인에서 이 모든 요소를 고민해본다면, 당신만의 화합적이고, 미묘하고, 인간적인 인터랙티븝 경험을 만들게 될 것이다. 이 애니메이션 핸드북을 읽었을 때, 당신은 모션이 유저에게 얼마나 많은 맥락을 이야기하고 있는지, 애니메이션의 기본 원칙은 무엇인지, 부서를 넘어선 협업과 디자인 시스템에 모션을 포함시켰을 때의 힘이 얼마나 강력한지에 대해 알게 될 것이다. Ryan이 말한 것과 같은, “몸과 마음이 군더더기 없이 확장된 인터페이스"를 당신도 만들 수 있을 것이다.
마지막으로, Push Pop Press의 모션 작업으로 유명하고 우리가 이 책에서 인터뷰했던 사람인 Austin Sarner이 애니메이션의 핵심 가치를 간결하게 요약한 말을 붙이고 마친다.
“유저가 인터페이스에서 무언가를 느끼게 해야 할 때, 모션은 맥락을 제공한다. 이는 그들의 몸짓과 조작 행위의 연장선상에 있다. 그리고 그것은 그들이 할 수 있는 것에 대해 안내하고, 더 많은 것을 탐험하도록 장려한다.” -Austin Sarner, 소프트웨어 엔지니어 & 프로덕트 디자이너
저자 : Eli Woolery
*무단 전재 및 재배포 금지(링크 공유 가능)
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
