이 글은,
IBM Design Language 페이지에서 발췌하여 지극히 개인적으로 필요한 부분만 발번역한 내용입니다.
http://www.ibm.com/design/language/framework/animation/process
:)
애니메이션 디자인 프로세스
애니메이션 워크플로우를 확립하기 위한 Practice, Tools, Translation 팁들 적용하기.
반복, 그리고 실행
펜으로 그린 스케치에서 멋진 사용자 경험까지 애니메이션을 만들기 위해 전체 팀으로써 일해보기,
Practice
애니메이션 디자인에 접근하기 위한 일반적인 방식들을 제안함,
1. 정의
UI안에 애니메이션의 가치를 접목해보기,
지금 와이어프레임, 높은 수준의 목업, 혹은 코드로 업무를 진행하던지 간에, 경험을 더 증진시켜주고 증가시켜줄 수 있는 애니메이션이 적용되어지는 인터페이스 내 주요 인터랙션들을 정의하는데 시간을 갖도록 하자,
규칙적으로, 한 공간에 모두 이러한 인터랙션들을 문서화하는 것은 당신의 팀이 어떤 애니메이션들이 디자인 상에서 가장 중요할지에 대해 확립하고 우선순위를 정의하는데 도움이 될 것이다.
2. 디자인
도구 선택하고, 기본부터 시작해서 만들어 나가기,
일단 당신이 모션을 추가하는 가치에 구체적인 인터랙션을 접목시켰다면, 당신이 편리한 도구를 선택하도록 하자.
타이밍과 스페이싱과 같은 기본과 짝을 이루는 간단한 트랜지션 내 이동이나 크기변화와 같은 속성들을 사용해보자.
어떤 사람들은 시작하는데 종이와 펜이 더 편할 수도 있고, 다른 이들은 단순한 모양을 가지고 코드로 움직이길 원할 수도 있다.
3. 프로토타입
중간중간(in-betweens) 반복하며 스타일을 만들어내기,
당신이 원하는 디자인이 어떤 타입의 애니메이션인지 이해했기 때문에,
이제는 다양한 도구를 사용하여 많은 버전들을 만들어 낼 시점이다.
다른 수준의 속도, 이징, 그리고 계층을 시도해보도록 하자.
4. 테스트
사용자에게서 프로토타입을 통한 피드백 받기,
애니메이션의 타이밍과 전체적인 느낌을 사용자로부터 받아보도록 하자.
당신의 애니메이션들이 모두에게 즐겁게 사용되고 조작될 수 있는지 접근성 가이드에 기대어 테스트를 해보도록 하자.
5. 다듬기
피드백 확인하고 조정하기,
사용자 평가로 부터 얻은 인사이트를 종합하고 디자인의 세부적인 이슈들을 해결하도록 하자.
만약 당신이 디자인을 백지화하거나 처음부터 다시 시작하지 않는다면,
비디오 혹은 프로토타입을 조정하는 것 대신, 코드 내에서 개발자들이 작은 수정만 하는 것이 더 쉬울 것이다.
6. 실행
코드와 함께 화면에 애니메이션으로 생명을 불어넣기,
개발자들과 엔지니어들 사이에 좋은 관계를 만들고 시작부터 당신의 디자인을 지켜볼 수 있도록 하자.
화면상에 좋은 애니메이션을 적용하는 것은 실제 의미를 실행으로 움직이는데 많은 커뮤니케이션을 필요로 한다.
당신은 수준을 지켜나가기 위해 수정사항들이 생길 수 밖에 없을 것이다.
Tools
당신이 프로세스의 어떤 지점에서도 애니메이션을 구현할 수 있도록 도움,
초기 아이데이션
초기 아이데이션
손으로 그리는 스케치(Sketching)
인터페이스를 손으로 그려봄으로써 프로토타입을 만들 수 있다.
움직이는 중간지점을 직접 그리는 것은 인터페이스가 한 장면에서 다른 장면으로 어떻게 움직이는지에 대한 아이디어를 보여줄 수 있다.
포토샵(Adobe Photoshop)
포토샵은 낮은 수준의 움직이는 GIF를 만들어 낼 수 있다.
목업의 순서를 통해 애니메이션 아이디어를 커뮤니케이션 할 수 있다.
포토샵에서 이전에 만들어졌던 제품에 애니메이션을 추가할 수 있다.
프로토타이핑
키노트
어도비 애프터이펙트
액슈어 RP
프레이머
어도비 엣지 에니메이트
오리가미
Production
CSS
SWIFT
JACASCRIPT
QUARTZCODE
Translate
비디오 프로토타입을 살아있는, 코드기반의 애니메이션으로 만들어내기,
애니메이션 속성을 적용하기
속성들은 시간에 따른 변화를 조건으로 하는 오브젝트의 퀄리티라고 할 수 있음,
아래 속성들은 building blocks를 기반으로 하고 있음,
* building blocks (http://www.ibm.com/design/language/framework/animation/fundamentals#basics)
키프레임 정의하기
키프레임은 다른 속성타입(포지션, 스케일, 투명도, 회전 등) 파라메터값(숫자로 된 값)을 설정하는 것이다.
이는 하나의 액션의 시작과 끝을 정의한다.
듀레이션 타임
키프레임을 결정한 후에, 애니메이션의 듀레이션을 정의하기 시작해야 함.
듀레이션은 애니메이션이 지속되는 시간의 길이를 이야기함.
Frames/Frame rate = seconds
타이밍 기능
당신은 움직이는 애니메이션을 만들기 위해 기반를 만들고 있기 때문에, 업무를 마무리하기 위해 타이밍 기능을 사용하게 된다.
타이밍 기능은 베지에 커브를 만들어 내는 수학공식이고, 그래프에 가속 패턴을 정의하기 위한 라인이라 할 수 있다.
* 관련 링크
http://cubic-bezier.com/#.17,.67,.83,.67
http://www.ibm.com/design/language/framework/animation/fundamentals#timing
Read
애니메이션 디자인과 실행으로 더 깊게 들어가기 위함
당신의 경험 수준이 어느정도 이건 간에, 좋은 디자인은 디테일이 살아있다.
당신 주변에 있는 읽을 만한 좋은 글들에 집중해보자.
PROTOTYPING TOOLS
- AfterEffects for Web Animation
- AfterEffects Tutorials for UX and UI Design
- Intro to Adobe Edge
- Intro to Origami
- Axure Animation Tricks
- Animating with Keynote
- Keynote Resources
- Framer JS Basics
- Framer JS Advanced
- Prototyping Interactive Products With Framer JS
