brunch

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 보슨생 Jun 17. 2022

UIUX 역량강화 스터디 : AE 2편

도트(Dot) 로딩 애니메이션과 무한 반복 애니메이션 제작 실습

스터디 2편은 「도트 로딩 애니메이션(Dot Loading Animation)」과
「무한 반복 애니메이션(Infinite loop Animation)」 제작 실습입니다.

#로딩 애니메이션(Loading Animation)

IT 서비스 시스템이 요청에 대한 응답을 불러오는(로드, Load) 상태일 때, 사용자가 지루함을 느끼지 않도록 시각적으로 이목을 끌어주는 요소를 로딩(Loading)이라고 합니다. 다양한 형태로 표현할 수 있지만, 특히 애니메이션으로 연출하는 경우엔 대체적으로 움직이는 객체(Object)나 회전하는 스피너(Spinner)로 디자인합니다.

로딩 애니메이션은 기다림의 고통을 덜어주며, 대기 상태의 이유를 알려준다.
Ease the pain of waiting, and Let the user know the reason for the wait.

CSS Loading Animations: How to Make Them + 15 Examples

Learn how to create a loading animation with CSS that will keep visitors engaged while content loads on your site.

blog.hubspot.com

한 때는 사용자들이 점차 빨라지는 인터넷 속도에 익숙해져 로딩 심벌을 보자마자 지루함을 느낄 수 있다는 설이 유행했습니다.

로딩 심볼은 사용자에게 지루함을 유발하는 요소일까?

이쯤부터 웹에서는 스켈레톤(Skeleton) UI의 대세가 시작되었고, 로딩 중인 사실을 숨기는 디자인이 세련된 것으로 받아들여지기도 했는데요. 모바일에서도 이와 같은 시도는 있었지만, 아직은 범용성이 강한 '로딩 애니메이션'의 대체제는 되지 못하고 있습니다. 제 생각에, 로딩 심볼은 아직 건재합니다.

유튜브 웹의 스켈레톤 UI와 유튜브 안드로이드 앱의 로딩 스피너 이미지

#애프터 이펙트로 구현하는 로딩 애니메이션

로딩 애니메이션은 애프터 이펙트의 프레임과 속도를 다루는 능력은 물론, 디자인적으로 창의력도 발휘할 수 있어 모션 애니메이션 실습용으로 적합한 컴포넌트입니다.

그래서 스터디의 두 번째, 세 번째 파트는 무한 반복(Infinite loop)을 기반으로 한 도트(Dot)와 스피너(Spinner) 타입의 로딩 애니메이션을 각 6개씩 총 12개를 실습하는 것으로 기획하였습니다.

스터디 참여자는 이번 과정을 통해 상용되는 거의 모든 로딩 애니메이션을 애프터 이펙트로 제작할 수 있으며, 이후에는 스터디에서 배운 기술을 총동원하여 6개의 새로운 로딩 애니메이션을 창작할 수 있습니다.

도트 타입의 로딩 애니메이션 샘플 6개와 스피너 타입의 로딩 애니메이션 샘플 6개

#실습 2 - 도트 애니메이션(Dot Animation) 6개

참여자들은 아래 6개 샘플을 실습함으로써 애프터 이펙트에서 가장 기본이 되는 프로퍼티 5개(기준점[Anchor], 위치[Position], 비율[Scale], 회전[Rotate], 불투명도[Opacity])를 자유자재로 다룰 수 있게 됩니다.

(막간의 퀴즈) 3번과 6번 샘플의 차이점은 무엇일까요?

실습 순서는 스터디 기획에 따라 1 > 2 > 4 > 5 > 3 > 6 으로 진행됩니다. 실제 스터디 현장에서는 샘플을 메인 스크린에 띄워두고 스스로 샘플의 움직임을 따라 만들어보도록 했습니다. 이후 첨삭을 통해 작업 오류와 오차를 보완하는 과정을 거쳤습니다.

이러한 진행 과정은 인터랙션을 디자인할 때 원하는 모션을 벤치마킹할 수 있는 능력을 기르는 과정입니다. 또한 움직임을 어떻게 구현할 것인지 개발 측에 가이드라인을 제공할 수 있는 능력을 기르는 훈련이기도 합니다.

집중하는 스터디 참여자들

#무한 반복과 웹 접근성의 상관관계

무한 반복(Infinite loop) 로딩 애니메이션의 중요한 포인트는 ‘빈 프레임’이 없어야 한다는 점입니다. 빈 프레임이 있는 애니메이션이 틀린 것은 아닙니다만, 대기 시간이 불분명하거나 짧을 때 사용하는 로딩 애니메이션을 만들 때는 빈 프레임이 없는 애니메이션이 여러모로 유리합니다.

예를 들어, 빈 프레임이 없는 무한 로딩 애니메이션은 웹 접근성에 적합하다고 볼 수 있습니다. 웹 애니메이션에 대한 WCAG 가이드라인에 따르면, 상호 작용으로 동작하는 모션 애니메이션은 ‘색상의 변화, 흐림, 불투명도를 포함하지 않을 것’이라고 정의하고 있습니다. 동급의 인터랙션 애니메이션 가이드에서도 과하게 깜빡거리거나 필수 정보를 전달하는 객체가 시야에서 사라지는 동작을 권장하지 않습니다.

(웹에서의) 모션 애니메이션은 색상의 변화, 흐림, 불투명도를 포함하지 않을 것
Motion animation does not include changes of color, blurring or opacity.

Accessible Web Animation: The WCAG on Animation Explained | CSS-Tricks

It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to

css-tricks.com

로딩 애니메이션은 현재 서버와의 통신 상태를 보여주는 시각적 정보 매체입니다. 만약 빈 프레임에서 로딩 애니메이션이 멈추거나 움직임이 사라지면, 사용자는 시각적 정보에 대한 신뢰를 잃게 됩니다. 현재 진행되고 있는 상태를 알리기 위해서는 빈 프레임 없는 애니메이션이 효과적일 수밖에 없습니다.

스터디에서는 모든 프레임에 객체가 존재하는 루프 애니메이션을 만듭니다

이런 이유로 스터디에서는 무한 반복 애니메이션을 빈 프레임이 없도록 만들었습니다. 다음 실습 샘플들도 이 점을 주목하여 관찰해보세요!

#도트 로딩 애니메이션 - 1번, 2번

1번 샘플은 기준점(A), 위치(P), 회전(R), 불투명도(T)를 이용합니다. 크게 회전하여 자리를 바꾸는 좌우 도트의 기준점(A) 설정이 키 포인트이며 참여자는 실습을 통해 기준점(A)과 위치(P)의 상이한 개념을 익힐 수 있습니다. 단 4개의 도트로 만듭니다. (실습 약 15분 소요, 난이도 하)

2번 샘플은 기준점(A), 위치(P), 비율(S), 회전(R)을 이용합니다. 보이지 않는 회전 모체 레이어 1개를 이용한 ‘상위 및 링크(Link & Parent) ‘기능의 활용이 핵심입니다. 참여자는 4개의 도트 각각의 뒷면이 앞을 향하도록 입체적으로 회전하는 것처럼 보이는 시각적 원리를 이해할 수 있습니다. (실습 약 20분 소요, 난이도 하)

#도트 로딩 애니메이션 - 4번, 5번

4번 샘플은 오로지 위치(P)만 이용합니다. 도트 3개의 퍼즐 같은 움직임과, 보다 완곡한 움직임을 표현하기 위한 베지어(Bezier) 곡선의 핸들 조정이 키 포인트입니다. 위치(P) 키프레임에 적용하는 보간(Interpolation)의 쓰임새도 이해할 수 있습니다. (실습 약 50분 소요, 난이도 상)

4번 샘플의 퍼즐은 특히나 모두 즐거워(?)했습니다

5번 샘플은 위치(P)와 비율(S)만을 이용합니다. 반복 프레임 및 최소 리소스 계산이 핵심입니다. 앞의 1, 2, 4번에서 사용한 기술들을 응용하며, 스터디에서는 도트 4개의 수평 정렬만 통일한 뒤 변형 프레임은 자유롭게 디자인하도록 안내했습니다. 다음 세 번째 파트에서 실습할 불꽃놀이 스피너를 위해 반드시 선행이 필요한 샘플입니다. (실습 약 40분 소요, 난이도 상)

#도트 로딩 애니메이션 - 3번, 6번

마지막 3번과 6번 샘플은 위치(P) 및 비율(S)을 이용한, 비슷해 보이지만 특별한 유형의 샘플입니다. 큰 도트에 작은 도트가 물방울처럼 합쳐지는 표현은 같지만, 6번 샘플이 좀 더 끈적이고 탄력 있는 느낌입니다. 이 샘플들은 시각적 효과(effect)를 필요로 하며, JSON으로는 정상적인 출력이 불가능하다는 특이점이 있습니다. JSON의 표현 한계를 알 수 있는 샘플입니다. (실습 약 30분 소요, 난이도 중)

#반복 애니메이션의 프레임 구획

6개의 샘플은 각각 30 프레임, 45 프레임, 60 프레임 중 하나로 구성되어 있으며, 스터디에서는 하나의 파일에 모든 애니메이션을 무한 반복시키는 것이 목적입니다. 따라서 30, 45, 60의 최소공배수인 180을 한 번의 반복 구간으로 설정하고, 30 프레임이 6번 반복되는 동안 45 프레임은 4번, 60 프레임은 3번 반복되도록 만들면 무한히 반복하는 다중 애니메이션을 완성할 수 있습니다.

무한 반복 다중 애니메이션의 프레임 계산법 도식화

애프터 이펙트에서는 이러한 작업을 위해 컴포지션에 ‘시간 다시 맵핑(타임 리맵, Time remap)’ 기능을 이용한 loopOut() 표현식(Expression)을 활용합니다.

이때 유의해야 할 것은 컴포지션의 시간 속성을 시간 코드(Time) 보다는 프레임(Frame) 단위로 설정해야 유리하다는 것입니다. 또한 타임 라인의 ‘현재 시간 표시 바’는 프레임의 시작에 위치하고, 키프레임은 프레임의 끝이자 다음 프레임의 시작에 위치한다는 개념을 인지하고 있어야 합니다.

이를 숙지하지 않고 타임 리맵 기능을 사용하면 몇 가지 오류 상황을 유발할 수 있습니다. 설정 시 의도한 시간보다 +1 되어 키 프레임이 찍히는 현상, 혹은 영상을 재생할 때 마지막 프레임이 사라지는 현상 등이 그것입니다.

#실습작 리뷰

참여자들은 스터디 두 번째 파트, 「도트 로딩 애니메이션(Dot Loading Animation)」 실습을 통해 애프터 이펙트에서 가장 기본이 되는 프로퍼티 5개(기준점[Anchor], 위치[Position], 비율[Scale], 회전[Rotate], 불투명도[Opacity])를 자유자재로 다룰 수 있게 되었습니다.

1번 샘플을 시작할 때만 하더라도 레이어에 어떤 프로퍼티가 있는 지도 잘 몰랐던 참여자들은, 6번 샘플을 완성하면서 이제 원하는 대로 키프레임을 찍어낼 수 있게 되었습니다.

본 운영기 작성을 시작하면서 결과물을 처음으로 한 판에 모아봤는데, 오밀조밀 귀여운 느낌이 듭니다. 은근히 움직이는 느낌이 다른 4번 샘플, 5번 샘플의 다양한 모양과 전개, 6번 샘플의 서로 다른 끈적거리는 정도, 다양한 배경색을 비교해보시면 스터디 참여자들의 취향도 살짝 엿볼 수 있겠습니다.