서비스의 호감을 높이는 마이크로인터렉션
별것 아니지만 서비스의 호감도를 높이는 것들이 있는데, 잘 녹아든 마이크로인터렉션이 그렇지 않나 싶다. 움직이는 것은 재밌다. 특히 내 행동에 반응하는 움직임이라면, 괜히 한 번 더 눌러보고 싶어진다. 마이크로인터렉션이 주는 즐거움은 정말 “마이크로”하지만, 이런 미세한 즐거움들이 쌓여 서비스에 대한 호감을 굳힌다고 믿는다. (물론, 때와 장소를 가리는 적절한 애니메이션일 경우에.)
웹툰 플랫폼의 디자이너로서, 마이크로인터렉션이 잘 녹아들면 웹툰을 읽는 경험 뿐만 아니라 서비스를 사용하는 경험이 더욱 즐거워지지 않을까 생각했다. 마침 구독 기능을 개선할 기회가 있었고, 구독 액션에 대한 피드백을 더 명확하게 하기 위해 마이크로인터렉션을 추가해보기로했다.
하지만 문제는 내가 모션 디자인의 ‘모’자도 모르고, After Effects는 켜본 적도 없다는 것…
입문자를 위한 아이콘 애니메이션 제작법
아무것도 모르는 채로 일단 도전을 했고 다행히 구글과 유투브 선생의 큰 도움으로 완성시킬 수 있었다. 하지만 수 많은 튜토리얼 중 프로덕트 디자이너가 필요한 수준의 정보를 찾기는 어려웠다. 그래서 혹시 나와 비슷한 상황의 사람이 있다면 조금이라도 도움이 되어보고자 내가 배운 것을 써 보기로한다. 프로그램 설치부터 배워야했던 내가 할 수 있다면… 야, 너두 할 수 있어!
Step 1. After Effects를 설치한다.
다행히 7일 무료 체험권이 있어서 (돈만 버리고 실패하면 어쩌나 걱정없이) 가볍게 시도해볼 수 있다.
Step 2. Figma/Sketch와 After Effects를 연결해주는 플러그인을 설치한다.
프로덕트 디자이너라면 아마 Figma/Sketch로 만든 아이콘을 활용할 것이다. 디자인 툴로 만든 애셋을 After Effects로 보내기 위해서 플러그인을 설치해야한다.
우선 AEUX 웹사이트에서 AEUX 파일을 다운받는다.
만약 Sketch 사용자라면: 다운받은 파일 중 Sketch 폴더 안의 aeux.sketchplugin을 실행하면 끝.
만약 Figma 사용자라면:
- Figma를 열고 메뉴 중 Plugins > Development > Import plugin from manifest 선택해서 방금 다운받은 파일 중 Figma 폴더의 manifest.json을 연다.
- 다시 메뉴로 가서 Figma Plugins > Development에 AEUX 플러그인이 보이면 완료!
Step 3. After Effects에도 플러그인을 설치한다.
- 우선 (플러그인을 설치하기 위한 프로그램) ZXP Installer를 다운받는다.
- ZXP Installer를 실행시킨 후, 아까 받은 AEUX 폴더 중 AEUX.zxp를 찾아서 드래그한다.
- After Effects를 켜서 메뉴 중 Window > Extension에 AEUX가 보이면 잘 설치가 된 거다.
Step 4. 플러그인을 사용해서 아이콘을 After Effects로 보낸다.
사용할 아이콘을 After Effects로 보내보자. Figma/Sketch에서 아이콘을 선택하고, AEUX 플러그인을 열어 Send selection to Ae 버튼을 누른다. (컴포넌트 상태에서는 보낼 수 없으니 cmd + option + B 눌러서 컴포넌트 해제시킨다.)
이제 준비는 끝났다! 애니메이션을 만들어보자.
Step 4. 구상하는 애니메이션을 프레임 단위로 쪼갠다.
내가 상상하는 애니메이션을 그림 한 컷 한 컷으로 쪼개서 대략의 계획을 세운다. 어릴 때 가지고놀던 플립북을 생각하면된다. (초딩 때 다들 한 번쯤 만들어본 그것…!)
예를 들어, 더하기 모양이 체크 모양으로 바뀌는 애니메이션을 만들고싶다면, 각각의 막대기가 어느 방향으로 움직이고, 어떻게 길어지거나 짧아질지 한 컷씩 잘라서 그려본다.
Step 5. 밑그림을 토대로 주요 컷을 키프레임으로 설정한다.
플립북에서 한 페이지에 해당하는 컷을 After Effects에서는 프레임이라고 부른다. 즉, 프레임이 많을 수록 애니메이션이 자연스럽고, 프레임이 적을수록 삐그덕거려 보인다.
모든 프레임을 일일이 그릴 필요는 없고, 중요한 변화가 생기는 지점들만 키프레임 (key frame)으로 지정하면, 나머지는 프로그램이 알아서 만들어준다. 키프레임은 한 지점에서 다른 지점으로 이동하는 사이 변화한 모든 속성들에 대해 지정해야한다.
예를들어, 위의 그림에서 세로 (자주색) 막대기의 시작점과 끝 지점을 비교해보면, 다음 속성이 달라진 것을 알 수 있다.
- 각도 (Rotation)
- 위치 (Position)
- 길이 (Path)
그러므로 위 세 가지 속성에 키프레임을 지정해줘야한다. 시작점, 끝 지점에 각각.
시작 모양을 키프레임으로 설정하기
시작점의 각도 (Rotation)
좌측 하단 패널에서 ‘vertical’ 레이어를 클릭, Transform > Rotation을 선택한다. 이 속성에 최초로 키프레임을 생성하기 위해서는 왼쪽의 시계 아이콘을 클릭한다. 우측 타임라인에 마름모 모양이 생기면 해당 프레임에 키프레임이 생성되었다는 뜻이다.
시작점의 위치 (Position)
이번에는 Transform > Position을 찾은 후 오른쪽 클릭해서 Separate Dimensions를 누른다. 포지션을 X와 Y로 구분하겠다는 뜻이다. X Position, Y Position이 각각 30인 것을 확인할 수 있다. 이 위치에 키프레임을 지정하기 위해서 왼쪽의 시계 아이콘을 클릭한다. (주의: 시작점이 같아야하기 때문에 아까 Position 키프레임을 만든 위치와 동일한 위치인지 확인한다.)
시작점의 길이 (Path)
Path 설정을 위해서는 Transform 위에 있는 메뉴 Contents > vertical > Path1로 들어가서, 역시 시계 아이콘을 클릭한다.
세로 막대기의 시작점 키프레임을 모두 설정했다.
…하지만 아직 아무것도 움직이지 않아서 재미가 없다. 이제 끝 지점의 키프레임을 설정해서 움직여보자.
끝 모양을 키프레임으로 설정하기
아까 그린 밑그림을 다시 살펴보면, 더하기 아이콘의 세로 막대기가 이동해서 체크모양 아이콘의 왼쪽 막대기 부분이된다. 체크 아이콘의 모양과 위치를 정확히 설정하기 위해서, 참고용 체크 아이콘을 After Effects로 가져왔다.
끝 지점의 각도 (Rotation)
끝 지점 키프레임을 생성하는 것이니까, 커서 위치를 적당히 나중 지점으로 움직인다. 다시 한번 vertical 레이어를 선택한 후 Rotation 속성을 클릭, 보라색 체크 모양을 참고해서 짧은 막대 부분과 같은 각도가 되도록 조정한다. 각도가 바뀌는 순간, 자동으로 커서 지점에 키프레임이 생성될 것이다. 아까 설정한 시작점 키프레임과 다른 값이 감지되는 순간 자동으로 새 키프레임이 만들어진다.
끝 지점의 위치 (Position)
Vertical 레이어 선택 후, 보라색 체크 아이콘을 참고해서 왼쪽 짧은 막대 위치로 이동시킨다. 역시 Position에 새로운 값이 입력되는 순간 커서 지점에 새로운 키프레임이 생성되는 것을 확인할 수 있다.
길이 (Path)
이제 막대의 길이를 조절해보자. 위에서 지정했던 Path 속성을 선택한 뒤 막대기 레이어를 클릭해서 길이를 직접 바꾼다. (Path 1을 클릭하고 펜툴 선택 후 양쪽 모서리를 클릭해서 길이를 동시에 바꿀 수 있다.)
끝 지점의 키프레임이 완성되었다!
이제 시작점으로 커서를 두고 스페이스바를 눌러 재생해보면 세로 막대가 움직인다.
같은 방법으로 모든 레이어에 키프레임 적용하기
동일한 방법으로 가로 막대에도 시작점과 끝 지점에 키프레임을 만들어준다.
다시 한번 그림을 보면, 가로 막대기는 처음부터 끝까지 길이가 바뀌지 않기 때문에
- 각도 (Rotation)
- 위치 (Position)
두가지에만 keyframe을 적용하면된다. Vertical 막대와 동일하게 시작점의 Rotation, Position 키프레임을 지정하고, 체크 모양을 참고해서 각도와 위치를 바꾼 후 끝지점의 키프레임을 설정한다.
완성된 모습. 이제 애니메이션의 큰 틀은 잡았다!
하지만 어딘가 어색하고 밋밋하다. 생동감있는 애니메이션을 만들기 위해서는 스피드 조정이 핵심이기 때문이다.
스피드 다듬는 법과 완성된 애니메이션을 Lottie 파일로 완성시켜 개발자에게 전달하는법은 다음 글에서 계속…
