Designing for motion

안드로이드 모션 디자인

Bay Area Android Developer Group을 주최하게 되어 매우 기쁘게 생각합니다. 연사로 발표해주신 디자이너는 Jairo Avalos입니다. 안드로이드를 비롯한 여타 운영체제들은 인터페이스에 모션을 추가하는 방향으로 발전해 왔습니다. Avalos의 발표는 여러분들의 어플리케이션에 모션을 포함시키는 것에 대한 작업과 장점에 대해 관한 것입니다.


왜 모션을 사용하는가? (2:59)

UI에 모션을 도입해야 하는 이유로 크게 세 가지를 들 수 있습니다. 첫 번째로 사용자에��� 정보를 제공하기 위해서 입니다. 누군가 여러분의 어플리케이션을 사용할 때 분명하고 액션가능한 정보를 제공하는 것은 중요합니다. 어떤 부분을 톡 쳤을 때 일련의 옵션들이 나타나고, 잘못된 비밀번호를 입력했을 때 해당 영역이 격렬하게 흔들리는 것 같은 작은 단서들은 언제 잘 되고, 잘못되는지 이해하는데 도움이 됩니다.

두 번째는 사용자를 안내하기 위함입니다. 여러분들은 사용자가 현재 어플리케이션 내에서 어디에 위치하고 있는지 자각하는 것을 돕고 싶을 것 입니다. 종이를 쌓듯 뷰를 다른 뷰 위에 올려 놓음으로써 어플리케이션 내에서 어떻게 이동해야하는지 안내할 수 있습니다. 쌓였던 모든 뷰를 없앴을 때 시작 점과 동일한 곳으로 되돌아갈 것이라고 사용자를 안심 시킬 수 있습니다.

세 번째로 사용자를 즐겁게 하기 위함입니다. 사람들은 사용자들의 재방문을 원하기 때문에 그들이 즐길 만한 경험을 제공하고자, 할 수 있는 한 엄청난 것들을 만드는 것에 많은 시간을 투자합니다. 만약 여러분이 사용자들이 계속해서 제품을 사용하기 원한다면, 세심한 디테일은 막대한 차이로 이어질 수 있습니다. 누군가 그들의 제품에 심혈을 기울였고 올바른 제품을 만들기 위해 막대한 시간을 투자해서 당신이 놀라운 경험을 할 수 있었다고 말 할 수 있을 것입니다.

머티리얼 디자인 (5:52)

머리티얼 디자인을 이루는 세 가지 근본적인 축이 있습니다. 현실에서와 같은 움직임을 보여주는 마법의 종이가 존재합니다. 깊이 및 명암이 존재하고 색, 활자, 이미지 등을 사용해서 최대한 현실과 가까운 경험을 만들어 낼 수 있습니다. 마지막으로 모션이 의미를 제공하는 것 입니다. 구글 또한 이 부분에 대해 상당한 신경을 썼습니다. 구글은 사용자에게 그들이 머무르는 지점을 알려주고, 사물들이 어디에 위치하고 있는지 보여주는 것에 대한 중요성을 인식하고 있었습니다.

머티리얼 디자인 모션 (7:39)

구글에 따르면 머리티얼 디자인의 모션과 관련해 네 가지 주요 원칙이 있습니다. 사물들이 질량을 갖고 있고, 현실에서의 사물과 동일하게 움직입니다(Authentic Motion). 마술처럼 어딘가에서 나타나는 것이 아니라 특정한 스피드를 갖고 움직이고 가속도를 냅니다. 다음으로는 Responsive Interaction으로 이는 즉각적인 피드백입니다. 우리는 어떤 사건이 발생하고 사물들이 우리가 기대한 방식대로 움직이기를 원합니다. 예를 들어, 아이콘을 터치하면 메뉴가 튀어 나도록 하는 것은 사용자가 계속해서 사용하면서 패턴으로 이해할 수 있습니다. 사용자가 패턴을 이해하게 된다면 이를 통해 더 많은 일들을 할 수 있습니다. 여러분은 아무런 이유 없이 모션을 사용해서는 안됩니다(Meaning transitions). 모든 것에는 이유가 있습니다. 전환 중에 이뤄지는 부차적인 모션은 객체들 간의 관계를 보여주고 화면 상에서 이뤄지는 일을 사용자에게 이해 시키는 데 도움이 됩니다. 이런 방식에서는 삐걱거리는 전환이 아니라 발생 시에 사용자가 따라갈 수 있는 것 이어야 할 것입니다. 마지막으로 기분 좋게하는 디테일(delightful details)입니다. 여러분은 아마 이런 류의 작업에 평생의 시간을 바칠 수도 있을 것 입니다. 물질계와는 직접적인 연관성은 없지만 사물에 기분 좋은 운동 리듬을 부여하거나 아이콘이 다른 아이콘으로 전환되도록 하는 것은 보기에 멋집니다. 이는 사람들이 물건을 움직이는 것을 좋아하기 때문에 일반적으로 인정되는 점이라고 생각합니다.

모션 사용법 (11:14)

실제 적인 질문은 언제 모션을 사용해야 하는가 입니다. 매우 간단합니다. 필요할 때 사용하면 됩니다. 모션에 공을 들이기 시작할 때 모든 것을 움직이고 싶어하는 함정에 빠질 수 있습니다. 주의해야 할 점입니다. 사용자가 어플리케이션을 사용할 때 모션에 진절머리 나기를 원치 않습니다. 상태에 어떤 변화가 있다면 사용자에게 상태 A에서 상태 B로 전환된다는 명확히 전달해야 합니다.

애니메이션 원칙 (12:38)

두 명의 디즈니 애니메이터가 12가지 모션의 원칙을 고안해냈습니다. 그러나 저는 인터페이스와 직접적으로 연관된 가장 중요하다고 생각하는 것에 대해서만 얘기하고자 합니다.

Squash & Stretch

액션을 정말로 강조하고, 여러분의 애니메이션에 중량감을 싣기 위해서 “squash & strech”를 적용합니다. 여러분은 액션을 강조하기 위해 과장할 수도 있습니다. 여러분은 여러분의 애니메이션들에 대한 세심한 계획을 항상 세워야 합니다. 사람이나 물건이나 미리 준비되었을 때 그렇지 않을 때보다 더 낫습니다. 사전에 어떤 경로를 취할 것인지 확실히 하시기 바랍니다.

부수적인 액션

중심 액션이 있을 때 부수 액션은 요소들 간의 관계를 강화하고 이를 사용자에게 이해시키는 데 도움을 줄 것입니다.

타이밍

아마도 가장 중요한 요소는 타이밍일 것입니다. 얼마나 빠르게 혹은 느리게 사물들을 움직이는가는 여러분의 인터페이스의 분위기를 정하는 데 정말로 많은 기여할 것 입니다. 어떤 사물이 스크린 주위를 순회한다면 스피드와 긴급함의 느낌을 줄 것입니다. 반면에 어떤 사물이 매우 천천히 움직인다면 매우 여유로울 것 입니다. 타이밍에는 옳거나 그른 정답이 없지만, 독특한 분위기를 만들어내고 제품을 한층 업그레이드하는 관점에서 확실하게 타이밍을 잴 수 있습니다.

또한 매우 중요한 요소로 프로토타이핑을 꼽을 수 있습니다. 초창기에 저는 엔지니어들에게 애니메이션에 대한 단서를 제공하기 위해 항상 글을 썼습니다. 그러나 글로는 얼마나 빠르게, 느리게 진행되어야 하는지에서 기인하는 독특한 분위기를 설명할 수 없었습니다. Framer, Form, Quartz Composer 등 실로 많은 프로토타이핑 툴들이 있습니다. 제가 매일 사용하고 훌륭하다고 생각하는 툴은 Framer입니다. 여러분들이 쉽게 조작할 수 있는 내장 기능들을 가지고 있으며 다른 툴들이 처음에는 iOS를 지원하고 후에 안드로이드로 확대한 것과 달리 처음부터 두 운영체제를 지원했습니다.

참고자료

Q&A (21:53)

Q: (다른 운영체제들이)더 플랫한 디자인을 선택하는 것에 대한 디자인적인 고려사항이나 우려사항은 무엇일까요?

Jairo: 저는 모든 운영체제들은 그것만의 작동 방식을 취합니다. 애플은 폴더를 들락거리는 것과 같은 방식을 취하고 그래서 모션를 다루는 것에 대한 힌트가 있습니다. 이는 단지 그들의 UI에 대한 선호와 철학인 것 같습니다. 마이크로소프트는 메트로 디자인 언어를 만들어 내는데 기여한 매우 큼직한 글씨체를 선택했습니다.

Q: Framer에서 보여줬던 코드는 커피스크립트와 자바스크립트로 되어있는데, 안드로이드 개발자로서 사용할 수는 있지만 실제로 개발자에게는 반드시 도움이 된다고는 할 수 없지 않나요??

Jairo: 그렇습니다. 제가 아는 iOS 개발자도 동일한 발언을 했습니다. 자바스크립트와 커피스크립트는 디자인에 궁극적으로는 도움이 되지않는 종류의 언어입니다. 그러나 애니메이션과 관련해 의사소통에 도움을 줍니다.

Q: 모션이나 애니메이션이 전반적으로 잘 적용된 플레이스토어에 등록된 어플리케이션 가운데 가장 좋아하시는 것은 어떤 것인가요?

Jario: 일단 환상적인 예시를 알고 있지는 않다고 말씀드리고 싶습니다. 안드로이드 파편화로 인해 2.2 버전까지의 지원을 위해 두서없는 모습을 보이고 있습니다. 롤리팝 발표 이후로 애니메이션을 잘 적용하고 있는 사례를 찾기 힘듭니다. 다른 어플리케이션들이 여전히 따라잡고자 하는 Flipboard가 가장 적합한 사례라고 생각합니다. Flipboard는 문자 그대로 뒤집히는 종이를 사용합니다. 그러나 이런 자체적인 커스텀 애니메이션은 머티리얼 디자인과는 다소 차이가 있습니다. 구글의 첫 번재 서드파티 어플리케이션인 ‘Person2’ 또한 좋은 예시라고 생각합니다. 안드로이드에 내장되어 있는 연락처, 전화 어플리케이션도 좋은 예시입니다. 구글이 발표하게 될 어플리케이션은 유행을 선도하리라 생각합니다.

Q: 구글이 가이드를 발표하기 전에는 협업을 하던 다수의 디자이너들은 어플리케이션을 디자인하는 것이 옛날 미국 서부개척과 같다고 말했습니다. 구글이 발표한 디자인 가이드와 안드로이드 5.0 버전은 안드로이드 디자이너에게 대규모의 리디자인과 상당한 노력을 요구합니다. 5.0 이후에는 가이드라인은 어떻게 변화할 것이라고 생각하십니까?

Jario: 현재 일부만이 5.0버전에서 작동하고 나머지는 여전히 다른 버전에서 작동해야하기 때문에 대답하기 어렵습니다. 이런 방식이 앞으로도 플랫폼이 취할 방식이므로 수용해야하면서 동시에 모든 사람들이 업데이트를 반영하지 않을 것이라는 것을 명심해야하기 때문에 어렵습니다. 여러분은 보유한 자원으로 최선을 다해야 할 것입니다.

Q: 안드로이드가 아직 해결하지 못한 문제점들과 여전히 당신을 괴롭히고 있는 다른 운영체제 및 모바일 디자인 프레임워크가 있다면 무엇인가요?

Jario: 잠금화면은 끔찍합니다. 당신이 핸드폰을 켤 때 가장 처음으로 마주하게 되는 것인데, 지금은 여러분이 스와이핑하는 방향에 따라 엉망인 모습을 보입니다.

Q: 당신은 어플리케이션의 사용성이나 디자인을 어떻게 평가하나요? 어떤 사용하는 기준이나 절차가 있나요?

Jario: 2013년도에 디자인계의 유행어를 인용해 보겠습니다. 만약 당신의 디자인이 직관적이라면, 만약 사용자가 처음 보는 것임에도 어플리케이션을 실행시킨 그 순간 어떻게 사용 해야할 지 안다면 그 디자인은 정말 훌륭한 것 입니다. 만약 어플리케이션을 사용하는 동안 디자인이 사용자가 의도한 작업을 어떻게 수행하는지 이해하는 것을 돕는다면 정말로 훌륭한 것입니다.

Q: 사용자에게 힌트를 제시하지만 5개의 화면을 쌓아나가는 어플리케이션은 어떤가요? 직관적이더라도 여전히 그런 방식을 취할 것을 권고하나요?

Jario: 상황에 따라 다릅니다. 만약 당신의 어플리케이션이 복잡하고 사용자에게 요구하는 것이 많은 종류의 것이라면, 이 방식은 사용자의 삶을 더 편하게 만들 수 있고 중요한 특징이라는 주장이 설득력이 있습니다. 또한 당신에게 직관적으로 보이는 것이 다른 누군가에게는 그렇지 않을 수도 있다는 일면은 매우 곤혹스러운 점입니다.

Q: 당신은 어플리케이션 테스터들을 어떻게 구성하나요? 알파 사용자를 구성할 때 인구 통계적인 요소를 고려해서 구성하나요 아니면 임의로 선택하나요?

Jario: 현재는 격주 금요일마다 사용자들을 데려와서 어플리케이션의 새로운 기능들이나 전체를 사용해보도록 한 후 그들의 피드백을 받습니다.

Q: 마이크로소프트는 윈도우 10을 출시하면서 그들의 평범한 인터페이스로 회귀하고 있습니다. Metro 디자인은 끝난 것 같습니다. 당신은 마이크로소프트의 결정이 옳다고 봅니까 아니면 실수라고 봅니까?

Jario: 내부 소식에 밝지는 않지만 리서치가 불충분하지 않았나 짐작해봅니다. 제가 생각하기에 사용자들은 수 년간 사용하면서 익숙해진 패턴과 멘탄 모델을 갖고 있었는데 이로부터 격리돼 매우 성가신 체제로 던져진 점에서 문제가 발생한 것 같습니다.

Q: 머티리얼 디자인이 데스크탑 환경에 적합하다고 판단하십니까? 모든 것이 터치 기반으로 이뤄지는 머티리얼 디자인 가이드라인을 데스크탑 인터페이스의 모션에도 적용할 것을 권장하나요?

Jario: 플랫폼과 기기 사이에는 닮은 점들이 있지만 거대한 모니터에서 가장자리로 내려가는 작은 물체를 더 작은 스크린에서 동일하게 가지기는 힘듭니다. 그런 작은 물체들은 약간의 성가심으로 디자인을 해치지는 않으나 개선시켜야할 부분이라고 할 수 있습니다.

Q: 디자인의 진보의 형태는 iOS와 같이 점진적이어야 할까요? 아니면 안드로이드나 마이크로소프트와 같이 거대한 도약여야 할까요?

Jario: 그건 당신의 초기 디자인이 얼마나 조악하냐에 달려 있습니다. 적어도 구글에 있어서는 변화의 폭은 그들의 리더십과 얼마나 새로운 생각을 갖고 있느냐에 달려 있습니다.


이런 개발 뉴스를 더 만나보세요

다음: Realm Java의 새로운 기능을 만나 보세요!

General link arrow white

컨텐츠에 대하여

이 컨텐츠는 저자의 허가 하에 이곳에서 공유합니다.

Jairo Avalos

Jairo Avalos

Jairo designs for people. And spends way too much time on ESPN. He is currently the design lead at GametimeUnited. Stanford CS back in the day.

4 design patterns for a RESTless mobile integration »

close