[UI자료] 로딩 애니메이션에 대해 이해하기 - 로딩 타입과 적용 방법

"https://uxdesign.cc/understanding-loading-animation-types-and-its-application-e41ba914b847" 를 번역한 글입니다.

 

---

Gmail, LinkedIn 또는 기타 웹사이트를 열 때 편안함과 평온함을 느끼시나요? 기다리는 시간을 즐겁게 해줄 무언가가 있나요? 그것이 기다리는 이유를 알려주고, 얼마나 기다려야하는지 신호를 준다고 생각하세요?

예, 이 마법이 바로 로딩 애니메이션입니다.

 

로딩 애니메이션이란?

사용자는 모든 데이터와 페이지를 로드하기 위해 잠시 기다려야 합니다. 그런 순간에 시스템은 사용자의 주의를 끌고 모든 콘텐츠가 로드될 때까지 인내할 수 있는 무언가가 필요합니다.

로딩 애니메이션은 웹사이트 로딩, 양식 제출, 업데이트 저장과 같이 진행 중인 상태에 대한 대기 시간, 이유 및 기대치를 사용자에게 알려주는 것입니다. 오랜 기다림에 대한 조바심을 방지하기 위해 주의를 환기시킬 수도 있습니다. 또한, 브랜딩을 강조하고 회사의 목소리를 전달하기에 좋은 시간이기도 합니다.

그렇다면 디자인에서 어떤 종류의 로딩 애니메이션을 사용할 수 있을까요? 간단한 리뷰를 해보겠습니다.

 

애니메이션 유형 로드

1. 진행 표시기(Progress Indicator)

진행 표시기는 작업이 진행 중임을 사용자에게 알리기 위한 명령줄 인터페이스, 텍스트 사용자 인터페이스 또는 그래픽 사용자 인터페이스의 요소입니다. 이 글에서는 원형과 선형의 다양한 모양으로 분류됩니다.

 

(1) 원형 진행 표시기

정의: 원형 진행률 표시기는 시계 방향으로 보이지 않는 원형 트랙을 따라 표시기에 애니메이션을 적용하여 진행률을 표시합니다. 일반적으로 인터페이스에 적용됩니다.

애니메이션에는 두 가지 유형이 있습니다: 결정 및 불확정 표시기.

결정적인 지표 는 프로세스가 얼마나 오래 걸릴지를 나타냅니다. 프로세스 완료율을 감지하여 사용할 때 표시해야 합니다.

불확실한 표시기 는 불확실한 대기 시간을 나타냅니다. 진행 상황을 감지할 수 없거나 활동 시간을 표현할 필요가 없을 때 사용됩니다.

왼쪽: 확정 지표; 오른쪽: 불확실한 순환 진행률 표시기(출처: Google 머티리얼 디자인)

로딩 스피너

(2) 선형 진행 표시기

정의: 선형 진행 표시기는 고정된 트랙에를 따라 표시기에 애니메이션을 적용하여 진행률을 표시합니다. 표시기의 동작은 프로세스의 진행 상황을 알고 있는지 여부에 따라 다릅니다.
1. 트랙: 지표가 따라 이동하도록 설정된 경계가 있는 고정 너비 규칙.

2. 표시기: 트랙의 길이를 따라 움직입니다.

선형 표시기의 두 가지 필수 요소(출처: Google 머티리얼 디자인)

진행의 확실성에 따라 선형 지표는 두 가지 유형의 애니메이션으로 나눌 수도 있습니다. 결정 지표와 불확정 지표. 앞에서 언급했듯이 결정적 지표는 프로세스가 얼마나 오래 걸릴지를 나타냅니다. 불확실한 표시기는 불확실한 대기 시간을 나타냅니다.

왼쪽: 0에서 100%까지 채워지는 확정 진행률 표시기.   오른쪽: 불확실한 진행률 표시기(Google 머티리얼 디자인)

2. 스켈레톤 스크린(스켈레톤 UI)

스켈레톤 화면은 사용자가 인터페이스 로딩을 점진적으로 느끼도록 하며, 이는 베어본 UI가 먼저 표시됨을 의미합니다. 그런 다음 로드된 콘텐츠가 화면에 점차적으로 표시됩니다. 대기 시간의 주의를 분산시키고 화면상의 진행 상황에 집중하는 또 다른 방법입니다. 사용자를 놀라게 하지 않고 이미 콘텐츠 기대치를 채울 것입니다.

LinkedIn 로딩 페이지 — 스켈레톤 화면

StudentUniverse의 로딩 페이지 - 스켈레톤 화면

 

적용 시나리오

인간의 지각 능력에 따르면 인지적으로 차이를 느끼는 시간에는 크게 세 가지가 있습니다. 0.1초는 사용자가 즉각적이라고 느낍니다. 0.1-1초는 사용자가 지연되거나 작동하지 않는다는 느낌을 느끼게 되며, 1-10초에는 사용자가 조급함을 느끼니, 조급함을 줄이기 위해 피드백을 제공해야 합니다.

0.1초는 결과 표시에 대한 기대와 함께 시스템이 즉각적으로 반응하고 있다고 느끼는 한계입니다.

1.0초는 사용자의 생각의 흐름이 중단되지 않는 한계에 관한 것이지만 사용자는 지연을 알아차릴 것입니다. 0.1초 이상 1.0초 미만의 지연 중에는 특별한 피드백이 필요하지 않지만 사용자는 데이터를 직접 조작하는 느낌을 잃습니다.

10초 는 사용자가 대화에 집중할 수 있는 제한 시간입니다. 더 긴 지연의 경우 사용자는 장치 로드를 기다리는 동안 다른 작업을 수행하므로 예상 완료 시간을 표시하는 피드백이 제공되어야 합니다. 응답 시간이 가변적일 수 있는 경우, 지연되는 동안의 피드백은 사용자가 무엇을 기대해야 하는지 알 수 없기 때문에 중요합니다.

웹: 우리는 브라우저에서 웹 페이지를 즉시 여는 데 익숙해지고 웹 사이트를 여는 속도가 빨라질 것입니다. 따라서 웹 전환 기간은 150~200ms 사이로 모바일 장치보다 약 2 배 더 짧아야 합니다. 다른 경우에는 사용자가 불가피하게 컴퓨터가 정지되거나 인터넷 연결에 문제가 있다고 생각할 것입니다.

휴대폰: 휴대폰은 다른 방식으로 취급됩니다. 모바일 장치에서 머티리얼 디자인 가이드라인 은 애니메이션 지속 시간을 200-300ms로 제한할 것을 제안 합니다 . 태블릿의 경우 지속 시간이 30% 더 길어야 합니다( 약 400–450ms ) . 그 이유는 인식에 관한 것입니다. 화면의 크기가 더 큰 경우, 물체가 위치를 변경할 때 더 긴 경로를 이동해야하기 때문입니다. 웨어러블에서 지속 시간은 그에 따라 30% 더 짧아야 합니다( 약 150–200ms ). 더 작은 화면에서는 이동 거리가 더 짧기 때문입니다.

Alsp는 터치스크린 장치의 상호 작용 설계를 위해 Dimitri Glazkov, Jochen Eisinger 및 Chris Harrelson도 상호 작용 시간을 기반으로 한 플랫폼 성공 모델을 제안했습니다.

우리 시스템이 위의 다이어그램을 따른다면 훌륭한 앱을 만드는 개발자의 능력을 볼 수 있습니다.

1. 로딩 : 시작 상태에서 사용자가 앱을 사용할 수 있는 상태로 전환하는 곳입니다. 1초 허용 , 그 이유는 나중에 자세히 설명합니다. 앱이 완전히 상호 작용하는 대신 여기에 스플래시 화면을 표시해도 됩니다. 기다리는 동안 흰색 화면이 좌절됩니다. 실제 네트워크 지연은 1000ms에 가깝기 때문에 최초 실행 경험 및 서비스를 위한 설계는 이 목표를 달성해야 합니다!
2. 핑거 다운 : 사용자가 시작한 UI 상태 변경은 시작하는 데 100ms 이하 가 소요되어야 합니다. 사용자는 100ms에서 시작하는 지연을 감지할 수 있지만 실제로는 200ms에서 불평하기 시작합니다. 페이지가 조용했다면 사람들이 화를 내지 않고 150ms 동안 벗어날 수 있었을 것입니다.
3. 애니메이션 : 무언가가 움직이기 시작하면 60fps 의 일관된 속도로 한 UI 상태에서 다른 상태로 전환해야 합니다 . 60fps에 도달하려면 작업이 예약 가능한지 확인해야 합니다. 이는 UI 스레드에 대한 모든 작업이 6ms 이하의 청크로 분해되는 것으로 정의됩니다.
4. Finger up : 애니메이션이 끝난 후의 조용한 상태입니다. 작업하기 좋은 시간입니다(따라잡기, 동기화 등). 그러나 사용자가 다시 탭할 경우를 대비하여 0.05초 이내에 해당 작업을 중지할 수 있어야 합니다.

작은 요소나 작은 변화가 있는 애니메이션은 더 빨리 움직여야 합니다. 따라서 크고 복잡한 요소가 있는 애니메이션은 조금 더 오래 지속되어야 더 잘 보입니다.

 

 

결론

로딩 애니메이션은 브랜드 컨셉을 전달하고 기다릴 때 주의를 산만하게 하는 훌륭한 방법입니다. 불확정 및 확정 진행 지표는 다른 시간 제한에서 사용할 수 있습니다. 스켈레톤 스크린은 사용자에 대한 기대치를 보여주는 훌륭한 옵션입니다.

사람들에게는 3가지 주요 시간 제한이 있습니다. 0.1초는 즉각적인 느낌, 0.1-1초는 사용자가 지연을 깨닫도록 하는 반면 1-10초는 사용자가 조급함을 줄이기 위해 피드백을 제공해야 합니다.

화면이 작을수록 이동 거리가 짧아집니다. 모바일 장치는 일반적으로 200–300ms 동안 지속됩니다. 정제는 400–450ms이어야 합니다. 웨어러블은 150~200ms입니다. 그러나 웹 전환은 150–200ms 동안 지속되어야 합니다. 사용자가 웹 브라우징의 지연을 더 쉽게 느끼기 때문입니다.