이탈률을 줄이기 위해 사용자 정의 로딩 애니메이션을 만드는 방법

원래 throbber로 알려진 로딩 애니메이션은 데이터 수집 또는 인터페이스 렌더링의 진행 상황을 나타내는 데 사용됩니다. 이를 나타내기 위해 둔한 진행률 표시줄을 사용하여 한 번 얻을 수 있었지만 그 시절은 지났습니다.

오늘날 CSS, jQuery 또는 간단한 애니메이션 GIF를 활용하는 잘 만들어진 애니메이션은 인터페이스에 활기를 불어넣고 제품에 개성을 더할 수 있는 기회입니다.

사려 깊은 애니메이션은 콘텐츠가 로드되기를 기다리는 동안 사용자를 즐겁게 할 수 있습니다. 좋은 로딩 애니메이션은 기대치를 관리하고 관심을 유지함으로써 사용자 경험을 개선하는 데 도움이 됩니다.

이 자습서에서는 Sketch를 사용하여 기본 모양을 만들고 원리를 사용하여 간단한 사용자 지정 로딩 애니메이션을 빠르게 만듭니다. (이 두 앱은 모두 Mac용입니다.) Trello, Flickr, Slack 등에서 사용되는 다채로운 로딩 애니메이션을 만드는 방법을 배우게 됩니다.

해보자.

슬랙 로딩 애니메이션

Sketch에서 측면이 50px 또는 반경이 각각 100px인 4개의 둥근 사각형을 추적합니다. 완벽한 원처럼 보여야 하지만 모서리가 둥근 사각형을 사용하여 애니메이션에서 선이 늘어나는 효과를 만듭니다.

각 변 사이에 150px의 공간이 있는 가상의 정사각형을 만드는 방식으로 4개의 모양을 배치합니다. 네 가지 색상(#35BA90 녹색, #69CADD 파란색, #EBA900 노란색, #E20661 분홍색)을 적용합니다.

셰이프를 Principle로 가져오고 그룹화한 다음 "구성 요소 만들기"를 클릭하여 그룹을 중첩합니다.

중첩 그룹 내부로 이동하여 대지를 15도 회전합니다. 그런 다음 각 개별 원을 선택하고 원래 위치로 다시 회전합니다(뒤로 15도). 이것은 직선으로 늘어나는 효과를 만듭니다.

대지에 "자동" 트리거를 적용한 다음 각 둥근 사각형을 대지의 반대쪽으로 295px 길이로 늘립니다. 두 대지의 각 모양에 75% 불투명도를 지정합니다.

두 번째 아트보드에 다른 "자동" 트리거를 적용합니다. 새 대지에서 각 줄을 원래의 50px 너비로 줄이되 원래 위치에서 반대쪽으로 줄이십시오.

"자동" 트리거를 사용하여 마지막 아트보드를 첫 번째 아트보드에 연결합니다. 최종 결과를 미리 보려면 "부모로 돌아가기" 버튼을 클릭하십시오.

팁: "부모로 돌아가기"로 이동하면 기본 그룹을 -30도 회전하여 Slack처럼 보이게 할 수 있습니다. 또한 "Animate" 패널 내에서 애니메이션 속도를 변경하고 "Ease Both" 효과를 적용하여 전환을 부드럽게 할 수 있습니다.

Trello 로딩 애니메이션

스케치를 사용하여 100px 파란색 사각형을 추적합니다. 너비 60픽셀, 높이 140픽셀의 흰색 직사각형을 그립니다. 30px의 위쪽 및 왼쪽 여백을 사용하여 이전 사각형의 왼쪽 상단과 정렬합니다. 흰색 사각형을 복제하고 30px 오른쪽 여백으로 사각형의 오른쪽에 정렬하고 높이를 70px로 줄입니다.

대지를 Principle로 가져오고 "자동" 트리거를 적용하여 새 키프레임을 만듭니다. 새 아트보드에서 흰색 사각형의 높이를 반대로 합니다(왼쪽 사각형의 높이를 70px, 오른쪽 사각형을 140px로 설정). "Animate" 패널에서 "Ease-Both" 효과를 적용하여 전환을 부드럽게 합니다.

롤링 서클

스케치에서 원을 그립니다. "Dash" 및 "Gap" 값이 있고 채우기가 없는 10px 테두리를 적용합니다. 나중에 만들 회전 효과를 강조할 테두리에 "각도 그라디언트" 색상을 사용합니다.

새 Principle 파일을 열고 "가져오기" 버튼을 사용하여 Sketch에서 원을 전송합니다. 두 개의 "자동" 트리거를 연속으로 적용합니다.

회전 효과를 만들려면 중간 대지에서 원을 선택하고 "각도" 값을 360도로 변경합니다. 그런 다음 세 번째 원을 선택하고 왼쪽 패널에서 다른 이름(즉, "복사본")을 지정합니다. 이것은 무한 회전을 가짜로 만들 것입니다.

마지막으로 다른 "자동" 트리거를 사용하여 세 번째 아트보드를 초기 아트보드에 다시 연결합니다. 아트보드 1과 2 사이의 타임라인에 "선형" 전환을 적용합니다. 미리보기 창에서 방금 만든 애니메이션을 확인합니다.

Flickr 로딩 애니메이션

파란색 원과 분홍색 원을 나란히 그립니다. 이를 Principle로 가져오고 "Auto" 트리거를 적용하여 새 아트보드를 만듭니다.

원의 위치를 ​​반전하고 새로운 "자동" 트리거를 적용하여 세 번째 아트보드를 만듭니다. 새 대지에서 왼쪽 패널의 원 레이어 순서를 반전시킵니다.

세 번째 "자동" 트리거를 적용하여 네 번째 아트보드를 만듭니다. 마지막 아트보드에서 원의 위치를 ​​다시 한 번 반전하고 마지막 아트보드에서 초기 아트보드로 최종 "자동" 트리거를 적용합니다.

적재 유형

Principle에서 새 프로젝트를 만들고 Text 도구를 사용하여 "LOADING"이라고 작성합니다. 텍스트를 왼쪽으로 정렬하고 아트보드에서 세로로 가운데에 맞춥니다.

"자동" 트리거를 연속으로 5회 적용합니다. 마지막 아트보드 루프의 다섯 번째 트리거를 초기 아트보드로 되돌립니다.

초기 아트보드에서 시작하여 오른쪽으로 이동하여 원본 "LOADING" 텍스트 옆에 각각 0, 1, 2, 3, 2 및 1개의 마침표를 추가하도록 각 아트보드의 텍스트를 편집합니다. 대지의 진행 상황은 다음과 같아야 합니다.

로딩 로딩 중. 로드 중.. 로드 중... 로드 중.. 로드 중.

이제 방금 만든 애니메이션을 미리 볼 수 있습니다.

맥동하는 점

60px 점을 추적합니다. 점을 하나 더 복사하여 붙여넣고 오른쪽에 60px 배치합니다. 60px 간격을 포함하여 두 점이 모두 대지의 중앙에 완벽하게 오도록 하십시오.

"자동" 트리거를 연속으로 4번 적용합니다.

두 번째 대지에서 두 번째 점을 30px로 줄입니다.

세 번째 아트보드에서 두 번째 점을 0px로 줄이고 첫 번째 점을 30px로 줄입니다.

네 번째 대지에서 두 번째 점의 크기를 다시 30px로 조정하고 첫 번째 점을 0px로 줄입니다.

다섯 번째 아트보드에서 첫 번째 점을 30px로 축소하고 "자동" 트리거를 사용하여 아트보드를 첫 번째 보드에 다시 연결합니다.

롤링 도트

6면체 주사위에서 찾을 수 있는 배열에 5개의 점을 놓습니다. 대지를 Principle로 가져와 중앙에 놓습니다.

아트보드에 "자동" 트리거를 적용합니다.

새 대지에서 점 그룹을 360도 회전합니다.

"자동" 트리거를 사용하여 두 번째 아트보드를 첫 번째 아트보드에 다시 연결합니다.

맥동 원

5px 테두리가 있지만 채우기가 없는 150px 원 안에 가운데 정렬된 50px 원으로 시작합니다.

"자동" 트리거를 연속으로 세 번 적용합니다.

첫 번째 대지에서 선 원의 크기를 50px로, 내부 원의 크기를 10px로 줄입니다.

세 번째 대지에서 선 원의 크기를 최대 200px로 조정하고 불투명도를 0%로 지정합니다. 내부 원의 크기를 최대 150px로 조정하고 불투명도를 50%로 지정합니다.

마지막 대지에서 내부 원의 크기를 최대 200px로 조정하고 불투명도를 0%로 지정합니다. 선 원을 50px로 축소하고 불투명도를 25%로 지정합니다.

마지막 아트보드에 "자동" 트리거를 적용합니다. 내부 원을 50% 불투명도로 10px로 축소합니다.

"자동" 트리거를 사용하여 마지막 아트보드를 첫 번째 아트보드에 연결합니다.

점핑 도트

50px 간격을 두고 50px 높이의 완벽한 원 3개를 정렬합니다.

"자동" 트리거를 적용합니다. 두 번째 대지에서 첫 번째 원을 위로 50px 이동합니다.

두 번째 보드에 "자동" 트리거를 적용합니다. 세 번째 대지에서 처음 두 개의 원을 선택하고 위로 50px 이동합니다. 세 개의 원이 대각선에 있어야 합니다.

세 번째 보드에 "자동" 트리거를 적용합니다. 네 번째 대지에서 첫 번째 원을 50px 아래로 이동합니다. 마지막 두 원을 선택하고 위로 50px 이동합니다.

네 번째 보드에 "자동" 트리거를 적용합니다. 다섯 번째 대지에서 처음 두 개의 원을 50px 아래로 이동합니다. 마지막 원을 선택하고 위로 50px 이동합니다.

다섯 번째 보드에 "자동" 트리거를 적용합니다. 여섯 번째 대지에서 마지막 두 원을 50px 아래로 이동합니다.

마지막으로 첫 번째 아트보드로 돌아가서 첫 번째 점을 위로 50px 이동하고 "Auto" 트리거를 사용하여 마지막 아트보드를 첫 번째 아트보드에 연결합니다. 최종 결과를 미리 볼 수 있습니다.

클래식 로더

Sketch에서 원을 추적하고 채우기가 없는 20px 회색 테두리를 지정합니다.

그 위에 동일한 원의 사본을 붙여넣고 사본 채우기를 다른 색상으로 변경합니다. 이 예에서는 파란색을 사용합니다.

파란색 원의 1/4과 겹치는 사각형을 추적하십시오. 사각형 레이어를 원형 레이어 아래로 이동하고 사각형 레이어에 "마스크"를 적용합니다.

원칙으로 이동하고 "가져오기" 버튼으로 스케치 아트웍을 가져옵니다.

첫 번째 아트보드에 "자동" 트리거를 적용하고 파란색 원을 360도 회전합니다.

두 번째 아트보드에 두 번째 "자동" 트리거를 적용합니다. 생성된 세 번째 원 레이어의 이름을 "복사"로 바꾸고 "자동" 트리거를 사용하여 첫 번째 아트보드에 다시 연결합니다.

결론

이러한 검증된 로딩 애니메이션 중 몇 가지를 만드는 연습을 하고 나면 여기에서 배운 기술을 사용하여 자신의 앱을 위한 고유한 애니메이션을 만드는 능력에 자신감을 가질 것입니다.

Sketch and Principle에 있는 약간의 상상력과 편리한 도구를 사용하면 몇 분 만에 앱 디자인과 일치하는 고유한 로딩 애니메이션을 만들 수 있습니다. 사용자는 전문적인 모습과 앱이 제대로 작동하고 있다는 친근한 표시를 높이 평가할 것입니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법