프로토타입에서 애니메이션을 어떻게 사용하는가?
프로토타이핑 배우기 #04
Today UX 아티클
※ 이 글은 2016년 10월28일 Prototyping.io에 게재된 UXstudio가 작성한 「How and When to use Animations in Prototypes」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.
프로토타이핑 툴은 지난 몇 년간 발전하여 이제는 로우 피델리티(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 커뮤니티에 찾아보면 여러분의 아이디어에 대한 주목할 만한 피드백을 줄 사람들도 있을 겁니다.
아니면 저희에게 물어보셔도 됩니다.
저희들의 생각을 공유할 수 있으면 정말 기쁠 것 같습니다!
저희도 여러분이 어떻게 애니메이션을 이용하실지 정말 궁금합니다. 여러분의 생각을 저희에게 공유해주세요! 저희 프로세스를 개선하는 데 이용하면 도움이 될 툴도 추천해주세요.
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
