brunch

매거진 UX 디자인의 모든 것

라이킷 47 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Nov 10. 2016

프로토타입에서 애니메이션을 어떻게 사용하는가?

프로토타이핑 배우기 #04

Today UX 아티클

※ 이 글은 2016년 10월28일 Prototyping.io에 게재된 UXstudio가 작성한 「How and When to use Animations in Prototypes」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.

How and When to use Animations in Prototypes

Prototyping tools have evolved over the last couple of years, enabling us to test almost anything — from low-fidelity wireframes, right…

blog.prototypr.io

프로토타이핑 툴은 지난 몇 년간 발전하여 이제는 로우 피델리티(low-fidelity) 와이어프레임부터 시작해서 하이 피델리티(high-fidelity) 애니메이션까지, 거의 모든 것을 테스트할 수 있게 해줍니다.

복잡한 인터랙션이 프로토타입으로 만들 수 있게 되어 코딩하는데 들이는 시간을 절약할 수 있게 되었고 다양한 모션과 애니메이션 타이밍 등을 테스트할 수 있는 기회를 얻게 되어 효과적인 무언가를 만들 수 있게 되었습니다.

프로토타이핑 애니메이션 및 인터랙션 (ImageCredit: Principle)

저희 UX studio에서는 보통 프로토타이핑 단계에서 애니메이션을 이용하는데, 필요할 때만 씁니다.

Usability.gov에서 지적했듯이 디자인 과정에서 지금 어느 단계에 있는지, 단계 사이에 반복 디자인 횟수가 얼마 되는지, 소통하고자 하는 것이 정확히 무엇인지에 따라 프로토타입에서의 애니메이션 활용은 달라질 수 있습니다.

이번 글에서는, 저희가 디자인하는 프로세스를 전반적으로 보여드리면서, 프로토타입에 애니메이션을 넣는 것이 좋다는 결정을 어떻게 내리는지, 어떻게 만드는 것이 가장 좋은지 알려드리겠습니다.

먼저 프로토타이핑에 대한 생각을 시작하기 전에, 먼저 클라이언트와 좋은 관계를 쌓아야 하며, 우리가 디자인하게 될 비즈니스 분야를 명확히 이해해야 합니다.

해당 분야 이해하기

저희 UX Studio에서는 팀으로 함께 일을 합니다. 디자이너 한 명과 리서처 한 명이 한 프로젝트에 함께 참여합니다. 믿기 힘들겠지만 모든 것은 워크숍과 클라이언트 미팅에서 시작됩니다. 프로토타입을 만들기 시작하려면 정확한 정보가 필요합니다. 무언가를 효과적으로 디자인하려면 어떤 유형의 정보가 필요할까요? 저희는 다음과 같은 정보에서 시작합니다.

비즈니스 목표: 저희가 만드는 제품이 어떤 비즈니스를 위한 것인지 당연히 이해해야 합니다. 비즈니스 분야에 대한 맥락적 탐색을 먼저 하지 않고는 아무것도 만들 수 없습니다.

퍼소나: 제품을 누가 사용할 건가요? 우리는 그들에 대해 무엇을 알고 있나요? 그들은 누구인가요?

콘텐츠: 콘텐츠 제작은 디자인 프로세스의 한 부분입니다. 만일 클라이언트가 아무런 콘텐츠도 주지 않는다고 해서 의미 없는 말로 공간을 채우면 안 됩니다. 이런 경우에는, 현실적인 콘텐츠를 만들어야 합니다. 디자인의 다른 부분과 마찬가지로, 모드 콘텐츠도 유저가 테스트를 해야 합니다.

페이퍼 스케치

클라이언트와 긴 시간을 보내고, 정보를 수집하고, 콘텐츠를 만든 후에는, 이제 포토샵을 열고 멋진 디자인을 만들기 시작하려고 할 수 있습니다. 하지만 안타깝게도 아직 그럴 때가 아닙니다!

그 대신, 앉아서 종이 한 장(혹은 여러 장)을 가지고 스케치를 시작해야 합니다. 정말 종이에 하냐고요? 네.

종이 스케치

이렇게 하는 이유는 최대한 많은 가능성을 탐색하기 위함입니다. 종이는 같은 문제를 두고 완전히 다른 아이디어를 정말 빠르게 시도해 볼 수 있게 해줍니다. 플로우를 스케치할 수도 있고, 다양한 레이아웃을 시도해볼 수도 있으며, 시각적 계층 구조를 개선해 볼 수도 있습니다. 이 초기 단계에서 레이아웃 비율이나 브랜딩, 컬러, 여백, 서체 등과 같은 구체적인 것에 구애를 받을 필요는 없습니다.

로우 피델리티 와이어프레임

다음은 로우 피델리티(low-fidelity) 와이어프레임을 만들 차례입니다. 이 와이어프레임의 목적은 테스트를 하기 위함입니다. 이 단계 중에 다음과 같은 것을 할 수 있습니다.

사용자 플로우(사용자 여정) 만들기 – 페이퍼 스케칭 단계에서 했던 스크린뿐만 아니라 ‘플로우’를 만듦

메뉴 및 사이트/앱 내비게이션 디자인하기

비율 정하고 일부 컬러 테스트하기

일부 카피라이팅 집어넣기

이 단계의 전반적인 목표는 시도해보는 것입니다. 서로 다른 계층 및 구조를 테스트해보는 겁니다. 이 디자인 단계에서 실제 유저 테스팅을 시작할 수 있으며 유저에게 무엇이 최선인지 발견하기 위해 많은 반복 테스트를 해야 합니다.

하이 피델리티 와이어프레임

하이 피델리티(high-fidelity) 와이어프레임 단계에서는 거의 완벽히 최종안에 가까운 디자인을 가지고 정확한 측정을 해봐야 합니다.

모든 특징에 그리드와 기능을 적용하기 시작하긴 하지만, 아직 중요하지 않은 브랜딩이나 컬러는 적용하지 않습니다. 그럼에도 불구하고, 우리는 알고 있는 최대한도 내에서 최종안에 가까운 디자인을 준비해야 합니다. 물론, 여기서도 반복 테스트와 디자인을 해야 합니다.

이제 애니메이션을 테스트해야 할 때

자, 이제 점점 더 프로토타이핑 방법에 익숙해지셨을 겁니다. 앞에서 했던 모든 프로토타이핑 및 유저 테스팅 단계는 디자인을 검증하는 데 도움이 되었으며, 애니메이션과 인터랙션을 테스트하는 프로세스의 마지막 단계로 이어집니다.

AfterEffect 애니메이션

프로토타입에서 애니메이션을 사용하는 목적은 무엇인가?

애니메이션은 디자인과 인터랙션의 보완 요소이기 때문에 저희 UX Studio에서는 애니메이션이 유저 인터랙션을 돕는 경우를 선호합니다. 저희가 여러분에게 드릴 수 있는 최선의 조언은 “애니메이션을 남용하지 마라”입니다.

애니메이션은 디자인 안에서 그 목적을 달성하는 데만 이용해야 하기 때문에 유용한 기능이 전혀 없다면 사용하지 말아야 합니다. 애니메이션은 유저가 여러분의 제품을 더 쉽게 이해하는 데 반드시 도움이 되어야 합니다.

애니메이션은 개발자와의 의사소통을 돕는다

애니메이션은 개발자들에게도 도움이 되기 때문에, 프로토타입을 최고의 의사소통 도구로 생각해도 괜찮습니다. 애니메이션의 움직임과 기능에 대해 여러 장에 자세한 안내를 빼곡히 적을 필요가 없습니다.

애니메이션으로 프로토타이핑을 하고 개발자들과 그것을 공유하면, 제품이 어떻게 움직일 것이라고 생각하고 디자인했는지 정확하게 이해할 것입니다. 다른 이해관계자들에게도 마찬가지입니다. 실제 제품이 존재하지 않아도 움직이는 스크린을 볼 수 있게 되는 거죠. 그리고 그들도 애니메이션을 정말 좋아하게 될 것입니다. 정말입니다. 제 말을 믿으세요.

UX Studio에서는 애니메이션을 어떻게 이용하는가?

저희가 애니메이션을 만드는 데 잘 이용하는 프로토타입은 다음 세 가지입니다:

Axure

Principle

After Effects

Axure로 만드는 기본 애니메이션

전체 와이어프레임 프로세스에서 기본 애니메이션을 추가하는 데는 Axure를 이용하는 걸 선호합니다. 유저는 플로우와 프로세스를 볼 수 있으며, 제대로 된 방식으로 애니메이션을 사용하기만 하면 보다 알기 쉽게 보여줄 수 있습니다. 대단히 멋진 애니메이션은 분명 아니겠지만, 기본적인 컨셉은 테스트할 수 있습니다. 다음은 좋은 사례입니다.

Axure 애니메이션

Principle로 만드는 하이 피델리티 애니메이션

Principle을 이용해서 UI 단계에서 멋진 애니메이션을 만들 수 있습니다. 개발자들과 이해관계자들이 여러분의 창의적인 아이디어를 보다 쉽게 이해할 수 있도록 움직이는 애니메이션을 보여주세요.

프로토타입 및 최종 디자인 애니메이션

마무리

애니메이션은 UX 관점에서 봤을 때 도움이 될 수 있습니다. 하지만, 반드시 미리 테스트를 해야 합니다. 그러니 반드시 필요할 때만 애니메이션을 사용하시고 제대로 사용했는지 확인해보세요. 만일 확신이 서지 않는다면, 애니메이션이 있는 프로토타입과 없는 프로토타입을 동시에 테스트해봐야 합니다.

UX 커뮤니티에 찾아보면 여러분의 아이디어에 대한 주목할 만한 피드백을 줄 사람들도 있을 겁니다.

아니면 저희에게 물어보셔도 됩니다.

저희들의 생각을 공유할 수 있으면 정말 기쁠 것 같습니다!

저희도 여러분이 어떻게 애니메이션을 이용하실지 정말 궁금합니다. 여러분의 생각을 저희에게 공유해주세요! 저희 프로세스를 개선하는 데 이용하면 도움이 될 툴도 추천해주세요.

감사합니다.

전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)

https://brunch.co.kr/@ebprux/1332

전민수 UX 컨설턴트 소개

저는 2001년 이비피알유엑스 설립하였고, 2001년부터 현재까지 한국적 상황에 적합한 UX 방법론 및 사용성 연구하고 있습니다. 또한 해외 UI/UX 트랜드 심도 있는 연구도 함께 진행하고 있습니다. UI/

brunch.co.kr/@ebprux/1332

[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중

(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)