2015. 7. 23. 07:04ㆍGUI 가벼운 이야기
원문 링크: The Principles of UX Choreography, Apr. 7. 2015 / 번역 : 권소정, pxd Innovation Group 2, 선임연구원
The Principles of UX Choreography -UX 연출의 원칙-
디즈니와 UX의 교차점, 그리고 미키마우스 그리는 방법을 배우는 것이 당신의 디자인 접근 방식을 변화시킬 것이다.
최근 나는 디즈니 애니메이터로서 전설적인 Glen Keane과 SXSW(South by Southwest: 영화와 음악 페스티벌)에서 대담을 나누었다. 이 글은 토론 중에 나눈 이야기를 정리한 것이다.
-----------------
나는 UX 디자이너가 되기 전에 타이틀 시퀀스 디자이너가 되고 싶었다. 카네기 멜런 재학 시절 ‘Time, Motion, Communication’이라는 댄 보야르스키 교수의 수업을 들었는데, 그 수업은 타이포그래피, 리듬, 색상, 움직임에 대한 강의였다. 댄 교수는 화면상의 모든 요소를 무대 위의 배우로 묘사하곤 했다.
여러분은 각 배우의 등장, 연기, 그리고
퇴장을 감독할 책임이 있습니다.
우리는 끝없이 그 캐릭터가 왜 그 곳에 있으지, 어떤 역할을 하는지에 대한 근거를 마련하기 위해 장면들을 다시 돌려보곤 했다. 시간과 움직임 (time and motion)에 대해 알게 되면서 나에게는 많은 변화가 생겼는데, 시간과 움직임을 통해 내가 전달하려는 감정과 관객들이 나의 메시지를 해석하는 방법에 대한 미세한 조절이 가능하다는 것을 깨달았기 때문이다. 나는 종종 타이틀 시퀀스에서 영감을 받았다. 30초에서 3분 정도의 길이로 영화 전체의 톤을 설정하고 앞으로 벌어질 사건을 예시하는 타이틀 시퀀스의 매력에 푹 빠져있었던 것이다.
R/GA(뉴욕에 본사를 둔 광고 에이전시)에 UX 디자이너로 취업하게 된 것은 정말 뜻밖의 행운이었다. 나는 R/GA사가 타이틀 시퀀스 디자인을 했던 사실을 알고 있었고 - 그들이 그때까지 하고 있는지는 몰랐다. - 그곳에서 일하고 싶다고 생각했다. 나는 Visual Design 분야로 지원했지만 UX 파트로 채용되었고, "와이어프레임’이 대체 뭐지?!" 하며 입사 첫날을 시작했다.
몇 년이 지나는 동안 나는 수백 장의 와이어프레임을 그렸고, 어떻게 요소들이 작동하고 서로 들어맞는지를 묘사하는 수십만 개의 설명 구를 작성했다.
예를 들면 : 사용자가 메뉴 아이콘을 탭 하면, 패널은 페이지 상단에서부터 아래로 슬라이드 된다. 사용자가 미리 보기 이미지를 클릭하면 동영상이 전체 화면으로 확대된다. 같은 것들 말이다.
그런데 갑자기, 우리가 곤궁한 상황에 갇힌 채 디자인하고 있고 거기에는 거대한 무언가가 빠져있다는 생각이 들기 시작했다. 홈페이지 혹은 제품 설명 페이지나 칼럼 같은 정적인 디자인을 결과물로 가져가면서, 우리는 다만 어떠한 흐름으로 디자인이 연결되는지만 설명했을 뿐, 그 사이사이에 어떠한 일이 일어날지는 전혀 보여주지 않았다. ‘설명하는 것’만으로는 충분한 맥락을 전달할 수 없었다: 우리는 그것을 ‘보여’주어야 했다.
와이어프레임을 그리면 그릴수록 모션 디자인에 대해 배웠던 내용이 UX와 비주얼 디자이너라는 직무에 전적으로 연관되어 있다는 생각이 들기 시작했다. 내가 매 순간 접하는 모든 것들을 더욱 자세히 관찰하면서, 모션 디자인을 세심하게 다듬어낸 것들이 자연스럽고 유쾌하며 직관적인 경험을 선사한다는 사실을 깨달았다.
Disney & UX
모션에 대한 이야기는 디즈니(Disney)로부터 시작해야 할 것이다. 디즈니는 애니메이션의 12원칙을 개발했는데, 이것은 사실적인 움직임과 감정의 몰입을 어떻게 그려낼 수 있는지를 설명하고 있다는 점에서 굉장히 중요하다.
디즈니는 사물이 어떻게 움직이고 실제로 어떻게 행동하는지에 대한 깊은 이해가 있었다. 그들은 관객이 스크린에서 어떤 대상을 볼 때 자연스러운 움직임을 기대한다는 것을 알고 있었고, 관객을 사로잡기 위해서는 감정의 몰입이 필요하다는 것 또한 알고 있었다. 이것은 디즈니의 초창기 애니메이터들이 관객의 마음을 사로잡고, 사실적이고 믿을만한 캐릭터가 등장하는 장편 애니메이션을 만들 수 있었던 이유였다. 극한 상황을 해소하는 사실감 있는 움직임, 감정의 몰입... 그렇게 이 모든 것들이 시작하게 되었다.
UX 연출은 어떻게(how)와 언제 그리고 왜(when and why)의 결합입니다. - 모션을 적용하는 기술과 청중을 사로잡는 방법을 UX의 전반적인 부분에 녹여내면, 당신은 사용자를 양방향 대화(two-way dialogue)에 참여시킬 수 있게 됩니다.
UX 연출의 5가지 원칙
먼저 가장 염두에 둘 것은 UX와 Visual 디자이너로서의 우리 역할이 단지 요소에 기능을 붙이고 정답을 따르는 것만은 아니라는 점이다. 우리는 동시에 사용자 경험을 더 즐겁게 만들기 위해, 그리고 무엇보다도 이런 연속적인 경험 속에 어떤 스토리를 전달하기 위해 노력하고 있다.
나는 모션 디자인이 어떻게 디지털과 기술에 적용되고 있는지를 점점 주의 깊게 살펴보면서 일정한 패턴을 파악하게 됐고 이를 바탕으로 다음의 5가지 원칙을 마련해냈다. 이 5가지 원칙은 UX에서 가장 중요한 커뮤니케이션 포인트를 짚어주고, 서로 다른 상태의 간극을 메우며, 전반적으로 더욱 세련된 경험을 전달해줄 수 있을 것이다. 이러한 디테일을 제대로 잡아낸다면, 제품에 대한 사람들의 인식과 신뢰를 쌓을 수 있을 뿐 아니라, 더욱 긍정적이고 즐거운 경험을 선사해줄 수 있을 것이다.
피드백 Feedback
피드백은 사용자와의 상호작용이 성공적이었는지의 여부와 그 이유를 설명하는 데에 도움을 준다.
피드백은 무언가가 잘 되거나 잘못된 상태, 로드 중인 상태, 혹은 어떤 과정이 진행 중인 상태, 아니면 단순히 선택해야 하는 상태를 보여준다. 피드백을 통해 사용자와의 신뢰를 구축할 수 있다는 점도 물론 중요하지만, 그저 피드백을 보여주는 것만으로도 사용자는 굉장히 만족감을 느끼고 즐거워한다! 게다가 피드백에 촉각적인 요소까지 가미하면, 사용자는 유리 표면을 터치했다는 사실을 잊고, 화면상에 실재하는 요소와 상호작용하고 있다는 기분을 느낄 수 있다. 무언가가 우리가 한 동작에 반응하는 것은 기분 좋은 일이다. 피드백은 사용자에게 ‘명백하게’ 느껴질 수 있도록 디자인하는 것이 중요하다. 또한, 하나의 동작에 여러 계층의 요소가 함께 반응할 때 한층 효과적이다.
그럼, 디즈니로부터 배울 수 있는 것은 무엇일까? 과장(Exaggeration)의 원칙이다.
Glen은 과장이란 단순히 보이는 것이 아니라 느껴지는 것이라고 설명한다. 종종 우리는 캐릭터가 큰 동작으로 확실하게 반응하는 것을 볼 수 있다.
미녀와 야수 애니메이션 중 야수가 실망하고 놀라는 장면
Glen은 미녀와 야수의 다음 장면을 예로 들었다. Belle(여주인공)이 저녁 식사에 가지 않겠다고 말하자 야수가 실망하는 장면에서 야수의 얼굴은 쭉 늘어나고 두 눈은 놀란 듯 커진다. 그 후 그의 얼굴이 다시 아래로 찌푸려지며 눈썹은 화난 듯 보인다. 이 과정은 너무나 순식간에 벌어지기 때문에 관객은 무슨 일이 일어났는지를 상세하게 알아채지는 못하지만, 결과적으로 명백하게 야수가 충격을 받은 것 같은 느낌을 받는다.
피드백의 예시. iOS 틀린 비밀번호 입력 시 흔들리는 것. 단순한 흔들림이지만, 우리가 실생활에서 서로 주고받는 피드백과 직접 연관되어 있다. Dots(게임) : 단순하지만, 정말 기분 좋은 모션이다. 많은 요소들이 한꺼번에 동작하고 있다. Yahoo News : 각각의 원이 하나씩 채워지고, 숫자가 카운트되고, 로딩이 끝나면 그 대가는 풀 스크린으로 꽉 찬 화면이다. Beats : 장르의 원이 탭 할 때 반응하고, 프로그레스 로딩바가 보인다. (PS - capptivate.co 사이트에서 좋은 예시들을 체크해보길 바란다)
피드포워드 feed forward
피드포워드(Feed Forward) : 일종의 힌트이다.
시각적 어포던스(Visual Affordance)로 사용자에게 어떤 상호작용이 가능한지, 무엇을 기대할 수 있는지 암시를 줌으로써, 각각의 요소가 어떻게 동작하고 맞아들어가는지 이해할 수 있게 도와주는 것이다. 피드포워드는 사용자들을 올바른 순서로 안내하여 덜 혼란스럽고 더 성공적으로 목적을 달성할 수 있게 도와준다. 앞으로 어떤 일이 벌어질 것인지, 무엇을 해야 할지 대비할 수 있도록, “여기를 봐주세요!”, “여기로 끌어다 놓으세요.”, 혹은 “조금만 더 당겨주세요.” 같은 힌트를 주는 것이다. 이러한 힌트는 대부분 사소하기 때문에 사람들은 도움을 준 어떤 힌트가 있었다는 사실조차도 눈치채지 못할 때가 많다. 미세하지만, 강력하다! 피드포워드가 제대로 적용되었을 때 그 효과는 굉장할 수 있다.
디즈니의 기대 원칙 (Principle of Anticipation)은 이와 비슷한 목적이 있다 : 앞으로 일어날 일에 관객을 준비시키는 것.
미키의 벌어진 손은, 앞으로 손을 뻗어 공을 잡는 다음 액션에 대한 힌트가 된다
이 원칙을 설명하기 위해 Glen은 미키가 테이블 건너편에 있는 공을 집으려는 아주 간단한 장면을 예로 들었다.
첫 장면에서 미키의 손은 몸 가까이에 있고 눈은 테이블 건너편의 공을 향해 있다. 다음 장면에서 미키의 손은 이미 공 위에 얹혀있다. 이 두 장면이면 충분할 것 같다, 그렇지 않은가?
문제는, 여기에 관객이 누릴 수 있는 그 어떤 재미요소도 찾아볼 수 없다는 점이다. 관객이 미처 인식하기도 전에 한 동작이 끝나버렸다. 이 장면을 그린 당신에게는 모든 것이 분명했겠지만, 관객은 어떤 일이 곧 벌어질 것이라는 데에 준비되어있지 않았을 것이다.
관객의 기대감을 형성하기 위해서, 미키의 손이 바깥으로 벌어지는 몇 개의 프레임을 더 할애한다면, 테이블을 가로질러 손을 뻗는 것은 어떤 일이 곧 벌어질 것이라는 암시로 작용할 수 있다.
관객은 그저 반응할 뿐이지,
결코 조바심을 내지 않습니다.
‘기대 원칙’의 또 다른 예로 Glen은 Duet 애니메이션에서 남자 주인공이 나무를 기어 내려가는 장면을 보여주었다. 처음에 그는 남자 주인공이 단순히 폴짝 뛰어 내려가게 했다. 하지만 그 동작이 너무 순식간에 벌어져서 관객은 그 장면을 놓쳐버렸다.
“당신은 결코 관객을 뒤에 놓고 가길 바라지는 않겠죠.” 하고 그는 말했다. Glen은 이 장면을 다시 그렸는데, 이번에는 남자주인공이 먼저 Mia를 향해 뒤돌아본 후, 다시 상체를 돌려 나무 밑으로 내려가게 했다. 이 작은 힌트 덕분에 관객은 남자 주인공이 이동하는 곳으로 자연스럽게 뒤따를 수 있었다.
피드포워드의 예시 : Clear : 화면을 아래로 당길 때 새 아이템 작성에 대한 미세한 힌트를 준다. Moldiv : 홈화면 뒤에 숨어있는 메뉴를 살짝 보여주며 사용자에게 힌트를 준다. Yummly : 흰 바탕이었던 영역이 그대로 글자 입력 영역이 된다. Snapchat : 아래로 당겨서 새로고침했을 때, 색의 변화와 작은 애니메이션이 무언가 벌어질 것이라는 힌트를 준다.
공간 인식 spatial awareness
공간 인식은 사용자가 환경을 인지하고 각각의 요소 간의 관계를 명확하게 파악하는 데 도움을 준다. 생각해보면, 우리가 만들고 있는 가상의 디지털 환경에는 본질적으로 무한한 가능성이 존재한다. 우리가 만들어내는 모든 경험은 어디든 고유한 영역에 분포되어 있다. 어떤 요소는 스크린 뒤에, 왼쪽 혹은 오른쪽에, Pinch 사이에, Drawer 메뉴 속에 “살아 움직이고 있다". 어디든, 디자이너 우리 자신이 원하는 곳에 말이다. 다만 우리는 그 상황에 논리를 부여할 필요가 있다. 화면의 크기가 작을수록 좁은 공간을 어떻게 하면 적절하게 이용하고 복잡도를 줄일 수 있을지 고민해야 하므로 특히 중요하다.
이렇게 가능성이 열려 있는 캔버스 위에 화면을 설계할 수 있다는 점은 디자이너에게는 매우 멋진 일이지만, 동시에 사용자에게는 만들어진 무언가를 배우고 이해해야 한다는 것을 의미한다. 사용자는, 그들이 관계하고 있는 모든 환경을 터득하고 그 상황에 적응하는 시간이 필요하다. 어떤 요소가 어디에서 왔고 다음에는 어디로 이동하며, 나중에 어디에서 다시 찾아낼 수 있는지를 알아야만 한다. 따라서 어떠한 요소든 그것이 급격한 변화나 갑작스러운 것으로 느껴지지 않도록 적절한 트랜지션을 통해 사용자를 안심시켜야 한다. 사실 현실 세계에는 무엇이든 갑작스럽게 변하는 것은 없다! 공간 인식의 주된 목적은 사용자들을 올바른 방향으로 이끌고 그 상황에 타당성을 부여하는 데에 있다. 디즈니의 ‘배치 원리’(principle of staging)로 이것을 설명할 수 있다.
Glen은 화면 속 캐릭터의 배치 방식이 어떻게 기대심리를 형성할 수 있는지 말해주곤 했다. 예를 들어, 주인공이 맨 왼쪽에 존재할 때 오른쪽에 생기는 여백 공간으로 인한 심리적인 결핍이 발생한다. “그러한 결핍이 생길 때 우린 무언가를 해야 합니다.” 여백 공간은 마치 어떤 일이 벌어질 것만 같은 긴장감을 만들어낸다.
Duet 애니메이션 중 Mia의 장면
애니메이션 Duet에는 Mia가 연못으로 뛰어들어 이리저리 수영하다가 물 밖으로 나와 텀블링을 하는 아름다운 장면이 있다.
Glen은 그 장면에 있는 ‘자석 같은 힘’이 Mia의 동작에 반응하고 다음 동작으로 그녀를 밀어내고 있다고 말한다.
예를 들면, 미아가 물에 처음 닿을 때, 거품이 그녀 주변으로 폭발하듯 생성된다. “어떤 커다란 충돌이나 영향력 없이 장면을 바꿔버릴 수는 없습니다.” 미아 주변에 생긴 거품들은 미아가 어디에 있었는지를 말해주고, 그 후 미아 주변을 감싸는 물고기들은 그녀가 다음에 어디로 가는지를 알 수 있게 한다. 그것은 미아를 이 장면에서 저 장면으로 쥐어짜 내는 듯한 효과를 가지고 있다. 내가 이 장면을 좋아하는 이유는 이 장면이 상황에 논리를 부여함으로써, 장면들 사이에 연결고리를 생성하고, 그것으로 관객의 주의를 유도하고 있기 때문이다.
공간 인식의 예시 : Calendar : 날짜가 옆으로 이동하면서 사이사이 공간이 사용자를 편하게 해준다. Stellar : 스토리텔링 앱이라는 테마를 UI에 접목시켜 페이지를 넘기는 효과를 넣었다. VSCO: 버튼이 담긴 트레이가 마치 아래에서 위로 당겨 올라온 듯 움직인다. Nike Making : 카테고리 선택시 풀화면으로 줌 인 된 후, 화면 상단으로 밀려 올라가고, 서브 카테고리가 아래로 떨어지며 쌓인다.
사용자 포커스 User Focus
사용자 포커스는 관객의 시선을 인도하고, 각 단계를 명확하게 설명해준다. 화면 계층 간의 연결을 순간순간 어떻게 제어하느냐의 문제이다. 그 목적이 무엇인가에 따라 알맞은 요소에 강조점을 두어야 한다. 물론 이러한 효과를 주기 위해 여러 가지 요소가 한 번에 동작할 수도 있다. 그 상황에 필요한 하나의 요소가 전면으로 배치되는 동시에 배경의 요소들 역시 함께 반응해야 할 때도 있다. 예를 들면, 포커스 되는 전면의 요소를 더욱 잘 드러내기 위해 배경이 약간 흐려지거나 어두워지는 경우가 있다. 또한, 맥락에 따라 숨겨져 있던 버튼이나 메뉴가 등장하는 것을 경험한 적 있을 것이다. 우리는 특정 메뉴에 항상 접근할 수 있기를 원하고 어딘가에 그 기능이 존재한다는 것을 알지만, 항상 그 버튼이나 메뉴를 보고 있어야 할 이유는 없다. 우리가 호출할 때에만 나타나면 되는 것이다.
사용자 포커스User Focus는 목표를 명확하게 만든다.
‘명확함(Clarity)’이라는 요소가 디즈니의 공식 원리는 아니지만, 13번째 요소로 들어간다고 하자. 글렌은 디즈니에 있는 동안 배우게 된 굉장히 중요한 기술이 바로 이것이라고 한다. Eric Larson은 디즈니 애니메이터들에게 절대로 관객을 뒤에 남겨두지 말 것을 강조했다.
“나는 디즈니에서 그럴듯한 불가능(Plausible impossible)에 대해 수없이 들어왔다.” Glen은 말했다. 우리는 말도 안 되는 미친 듯한 상황도 사람들이 의심하지 않고 믿게 만들 수 있다. 예를 들면, Little Whirlwind(1941)에서, Freddie Moore는 회오리바람에 자꾸 날아가는 바구니를 고정하려 하는 미키를 그린 적이 있다.
갑자기 미키가 바지춤에 손을 넣어 거대한 망치를 꺼낸다. 그 망치는 오로지 그 장면에서만 등장했으며 그 장면에서 제일 중요한 물건이었다. 그 장면에서는 망치가 절실히 필요한 제일 중요한 것이었기 때문에, 관객들은 대체 망치가 어디서 나왔고 왜 저기 있는지 전혀 의심하지 않았다.
'그럴듯한 불가능’ 원칙에 따르면, 세상의 법칙이라는 것도 조금은 깨뜨려도 될 법하다.
관객이 당신과 함께 있다면, 그들은 행복해할 것입니다.
만일 당신이 그들을 놓쳐버린다면, 그 누구도 행복하지 않을 겁니다.
사용자 포커스의 예시. Pinterest : 상황에 맞는 버튼들이 필요할 때에 나타난다. Paper Notifications : 여러 층의 애니메이션이 시선을 안내한다 - 지구 모양 아이콘이 움직이고, 팝업창이 펼쳐진 후에 제목 영역이 살짝 빛난다. Peek : 시간 선택 영역이 전체 화면이 되고, 선택된 숫자만 다른 숫자에 비해 굉장히 밝다. 선택이 완료된 후에는 해당 숫자가 다시 제자리에 위치한다. Yahoo Weather : 움직이는 것이 제일 먼저 시선을 끈다.
브랜드의 목소리 톤 Brand Tone of Voice
나는 종종 사람들에게 광고 카피를 다룰 때 처럼 생각해보라고 말한다.
모든 프로젝트에서 “만약 이 브랜드가 말을 할 수 있다면, 무슨 말을 할까?” 라고 생각하듯이, 우리는 “만약 이 브랜드가 움직일 수 있다면, 어떻게 움직일까?” 라고 생각해볼 필요가 있다. 엉뚱하거나 기발한가? 빠르고 강력한가? 사용자에게 도움이 되도록 추가된 미세한 움직임인가?
당신의 브랜드 목소리 톤이 잘 설정되면 사용자는 짧은 순간 이렇게 말하고 싶은 느낌을 받을 것이다. “ 이 브랜드가 뭘 하려는지 알 것 같아!” 왜냐하면, 그것이 상당히 타당하고 적절해 보일 것이기 때문이다.
일상적으로 사용하고 있는 애플리케이션, 사이트, 그리고 여러 가지 경험을 떠올리며, 왜 그것들을 지속적으로 사용하게 되는지 생각해보자. 우리 주변에는 동일한 작업을 똑같이 수행하는 수없이 많은 비슷한 류의 어플리케이션이 있게 마련이다. 그것들 모두 좋은 사용자 경험을 갖고 있다.
나날이 일상적으로 사용하게 되는 애플리케이션, 웹사이트, 그리고 여러 가지 경험을 떠올려보자. 우리 주변에는 동일한 작업을 똑같이 수행하는 수없이 많은 애플리케이션이 있음에도 불구하고 왜 특정 상품들을 계속 사용하게 되는걸까. 그것들 모두 좋은 사용자 경험을 선사해 주고 있겠지만, 사람들을 더 사로잡는 무언가가 있다. 아마도 당신을 더 기쁘게 하거나, 무언가를 더 가능하게 하거나, 어떤 것을 더 얻을 수 있을 것 같은, 사용자 경험 그 이상의 것이 있을 것이다. 바로 감성적 호소력이다. ‘호소력’은 우리가 마지막으로 참고할 디즈니의 원칙이다. 가장 마법 같은 요소임에도, 설계하기는 가장 어렵다.
신기하게도, 호소력이 있는지 없는지는 쉽게 알 수 있지만,
어떻게 그것을 구현해낼 수 있는지는 알기 힘들어요.
프레디 무어(Freddie Moore)는 애니메이터로서 디즈니의 룩앤필(Look and feel)을 책임지고 있었다고 Glen은 말했다. 그가 있기 전에 미키 마우스는 단지 ‘원’에 불과했고, 우리가 오늘날 알고 있는 미키마우스와는 사뭇 달랐다고 한다. 프레디는 미키가 가진 요소들 사이에 관계를 부여하기 시작했다. 프랭크 토마스와 올리 존스턴은 작화가들에게 이렇게 말하곤 했다. “ 모든 라인은 다른 라인과 관계가 있다.” 미키를 그릴 때 모든 것은 하나의 테마를 따르게 된다.
먼저 미키의 머리가 될 원을 그린 후, 위를 향하게 코를 그려 머리의 곡선과 이어지게 한다. 미키의 두 눈을 코에 가깝게 그려 연결하고, 눈썹과 입을 그리면 두 뺨이 밀려 올라간다. 이렇게 그려진 미키에는 무언가가 있다. 미키는 관객을 끌어당길 수 있는 어떤 ‘호소력’을 가지고 있다. 글렌은 우리가 그리는 모든 캐릭터는 이미 그 이전부터 존재한다는 신념을 갖고 있다. 그것을 제대로 이해하고 나면, 그 캐릭터를 세상 밖으로 끄집어낼 수 있다. 그러한 ‘호소력’을 표현할 수 있게 되면, 이 모든 것이 함께 조화를 이루는 아름다운 순간을 경험하게 될 것이다.
그것이 바로 호소력의 열쇠입니다.
요소들의 조화, 완벽한 화음, 아마도 ‘바로 이거야!’ 라고 말하고 싶게 될 겁니다.
브랜드 톤의 예시. Snapchat : 엉뚱하다 - 유령은 상징적이 되어서 사람들은 이제 그들이 다음에 무얼 할지 기대를 하게 된다. Flicker : 미세하지만 영리하다 - 누군가의 프로필을 새로고침하면, 플리커를 상징하는 분홍색과 파란색의 원이 회전한다. Nike+ : 어플리케이션 전체가 달리기라는 테마를 담고 있다. Zappos : 사람들은 부활절달걀을 좋아한다. 특히나 그게 망토 입은 고양이라면...
-----------------
앞서 살펴본 5가지 원칙에서 어떻게 하면 관객을 사로잡고, 우리의 이야기에 상호작용할 수 있게 할 수 있을지에 대해 살펴보았다. 이 모든 프레임을 연결해 감성적이고 현실적인 경험의 시퀀스를 다듬어내는 것은 여러분의 몫이다. 그 작업은 비어있는 조각을 채워내고, 캐릭터를 정의하는 것에서 시작할 것이다.
캐릭터라 함은 단지 화면 속에 있는 것 뿐만이 아니다. - 우리는 인간적인 요소도 다루고 있다. - 메인 캐릭터는 바로 우리의 사용자다.
영화든, 애플리케이션이든, 웹사이트든 아니면 책이든, 맥락이 어떠하든, 상황, 매체, 환경이 어떠하든, 우리의 목표는 같다. 우리는 어떤 이야기 속에서 캐릭터와 관계 맺고 있으며, 각 캐릭터의 등장, 연기, 퇴장을 감독할 책임이 있다. 우리가 만들어내는 인터페이스는 더 큰 이야기로 나아가기 위한 작은 창문에 불과하다.
움직이는 것을 디자인하기란 아마도 새롭고 낯선 일일 수도 있지만, 새로운 문제를 직면하고 어떻게 해결해야 할지 모르는 순간은 절대 낯설지 않을 것이다. Glen은 듀엣을 제작하는 일이 처음에는 얼마나 어려운 과제였는지를 털어놓았다. 그는 지금까지 항상 종이에 그림을 그려왔고 종이를 벗어나면 그 캐릭터는 화면에서 사라지는 것이었다. 그러나 다양한 각도에서 캐릭터의 움직임을 관객이 따라오는 이 인터렉티브한 경험은, 무한한 캔버스를 다뤄야 할 것만 같았다고 한다. 앞서 설명한 원칙들을 항상 염두에 둔다면, 아마도 이것은 앞으로 닥쳐올 어떤 문제를 해결하는 데에 실마리가 되어줄 수도 있을 것이다.
나는 항상 ‘어떻게 해야 할지 모르는 일’을 하면서 어떻게 해야 하는지를 배우고 있다.
- Picasso
Glen Keane의 단편, 듀엣, Google’s Spotlight Stories(App)을 위해 만들어진 단편이다. 모토로라 기종에서의 Interactive 버전을 볼 것을 강추한다. 시청자가 정한 캐릭터를 따라 Glen이 그린 무한한 화폭속에서 몰입할 수 있다.
-----------------
보너스 : UX 연출 제작 뒷이야기, 그리고 디즈니의 전설적인 애니메이터와 어떻게 일할 수 있었는지.
작년에 나는 한 가지 목표를 세웠다 : 내가 관심 있던 주제에 대하여 디자인 대담 (Design talk)을 나눌 것. 아주 간단한 것이었다. 모션 디자인은 내가 항상 관심 있어 하던 주제였고, UX와 비주얼 디자이너로서 현재 하고 있는 일과 깊은 연관이 있다는 생각이 들었다. 그래서 작년 여름 R/GA에서 열린 AIGA 멘토 이벤트에 대담을 나눌 자리를 마련했다. 나는 SXSW에 해당 건을 제출했고, 처음에는 별생각 없었지만, 나중에 함께 일할 디즈니 애니메이터를 찾아보라는 조언을 받고 (대체 어디서 찾으려고 했던 걸까?!), 몇 번의 시도 끝에, 행운과, 이런 저런 소개와 스타들을 줄지워 세우고 - 나는 디즈니의 전설적인 애니메이터, Glen Kean을 소개받게 되었다. 글렌은 디즈니에서 38년을 일했고 인어공주, 미녀와 야수, 알라딘 등 우리가 사랑해 마지않는 애니메이션을 작업했었다. 2년 전 그는 디즈니를 떠나서, 디즈니 밖의 세상에는 어떤 것이 있는지, 자신의 애니메이션 기술을 어떤 다른 곳에 접목할 수 있을지 알아보기 시작했다. ( 그의 가장 최근작인 Duet이 포함되어 있는 Google’s Spotlight Stories 에서 그의 작업을 확인해볼 수 있다.) 내가 글렌에게 UX 연출에 관해 이야기했을 때 그는 바로 관심을 보였다(!). 그가 디즈니에 처음 합류했을 당시, ‘9 old man’은 디즈니의 애니메이션 원칙을 물려주었다.
“언젠가 너가 우리보다 훨씬 큰 일을 해낼 것이다.” 올리 존스톤이 Glen에게 이렇게 말할 때 Glen은 그들에게서 바톤을 넘겨 받은 기분이 들었다고 한다. 그는 이러한 디즈니의 애니메이션 원칙이 UX 같은 분야로 번역될 수 있을지는 상상도 하지 못했고, 이것이 나에게 바톤을 넘겨줄 기회라고 보았다. 그래서 우리는 함께 SXSW에서 환상적인 발표를 해냈던 것이다. 나는 몇 시간이고 Glen이 나에게 전수해준 이야기를 하고 싶지만, 다음에 기회가 또 있을 것이다!
-----------------
여기까지 읽어주셔서 감사합니다! 추가적인 정보를 위해서는 다음 사이트를 확인해보거나, @becca_u 로 트윗하세요!
영감을 얻을 수 있는 곳
이 글에 쓰인 많은 예시는 Alli Dryer가 마련해주었다. 좋은 모션의 실제 예시를 아래 Alli가 만든 사이트에서 확인해볼 수 있다.
그 외의 즐겨찾기:
https://instagram.com/userinterfacesio
더 훌륭한 읽을거리:
https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/
디즈니의 원칙에 대해 배우고 뭔가 만들어보기
http://the12principles.tumblr.com/
http://digg.com/2015/12-principles-animation-ollie-johnston-frank-thomas-alan-becker