구글의 꼬불거리는 인디케이터
새로운 인디케이터의 유형과 사용방법
인디케이터란?
인디케이터(Indicator)는 사용자가 현재 시스템 상태, 진행 상황, 위치, 변화 등을 직관적으로 인식할 수 있도록 도와주는 컴포넌트입니다. 로딩, 진행률, 선택된 항목, 현재 위치 등의 변화를 시각적으로 전달하는 기능을 합니다. 변화를 시각적으로 전달하는 컴포넌트를 인디케이터라고 부를 수 있겠지만, 일반적으로는 다음의 것들을 주로 사용합니다.
1️⃣ 프로그래스 인디케이터
2️⃣ 로딩 인디케이터
3️⃣ 페이지 인디케이터
4️⃣ 스텝 인디케이터
프로그래스 인디케이터와 로딩 인디케이터
구글의 Material 3에서는 프로그래스 인디케이터와 로딩 인디케이터를 각각의 컴포넌트로 구분해 명확하게 정의하고 있습니다. 각 인디케이터의 역할은 다음과 같습니다.
프로그래스 인디케이터
사용자가 얼마나 기다려야 하는지 예측하게 하는 역할
시스템이 작업을 수행 중이라는 피드백을 줌으로써 사용자 불안을 줄임
로딩 인디케이터
사용자에게 시스템이 멈춘 것이 아님을 알려주는 역할
백엔드 처리가 지연되고 있다는 피드백 제공
프로그래스 인디케이터와 로딩 인디케이터에 대해 자세히 알고 싶으시다면 아래 글을 참고해 보세요!
인디케이터가 Expressive에서 달라진 점
이번 Expressive 업데이트에서는 프로그래스와 로딩 인디케이터 모두 눈에 띄는 형태적 변화가 있었습니다. 프로그래스 인디케이터는 진행선을 따라 유기적으로 꼬불거리는 라인으로 바뀌었고, 로딩 인디케이터는 다양한 곡선형 쉐입으로 구성되어 기존보다 더 풍부한 움직임을 보여줍니다.
이처럼 두 인디케이터 모두 '꼬불거림'이라는 감성적인 요소를 통해 시각적 표현력을 강화한 것이 특징입니다.
직선에서 곡선으로의 변화, 그 이유는?
기존의 직선형 인디케이터에서 곡선형으로의 전환은 단순한 스타일 변경을 넘어, 감성적인 브랜딩을 위한 전략적 선택으로 보입니다. 또한 인디케이터는 사용자의 시선을 끌고 상태를 전달하는 시각적 피드백 요소인 만큼, 더 직관적으로 인지될 수 있도록 개선된 측면도 있습니다.
이제 새롭게 적용된 두 가지 인디케이터 유형을 차례로 살펴보겠습니다.
프로그래스 인디케이터의 구성
1️⃣ 활성 인디케이터 (Active indicator)
2️⃣ 트랙 (Track)
3️⃣ 정지 인디케이터 (Stop indicator)
프로그래스 인디케이터의 유형
프로그래스 인디케이터에는 두 가지 유형이 있습니다.
1️⃣ 선형 (Linear)
2️⃣ 원형 (Circular)
선형 인디케이터는 컨테이너 가장자리에 배치하고, 원형 인디케이터는 요소의 중앙에 배치하는 것을 권장합니다. 또한 제품 전체에서 동일한 유형의 인디케이터로 표현되어야 합니다. 예를 들어, 새로 고침 시 한 곳에 원형 인디케이터를 사용했다면, 모든 곳에 원형 인디케이터를 사용해야 합니다.
프로그래스 인디케이터의 동작 유형
프로그래스 인디케이터는 진행에 따라 다르게 동작합니다.
1️⃣ 확정적(Determinate) : 진행상황 및 대기시간 확인 가능
2️⃣ 불확정(Indeterminate) : 진행상황 및 대기시간 확인 불가
확정적 인디케이터는 0%에서 100%까지 채워지는 반면, 불확정 인디케이터는 크기가 커지거나 작아지면서 고정된 트랙을 따라 이동합니다.
프로그래스 인디케이터의 사용방법
구체적인 사용방법을 이어서 알아보겠습니다.
점 형태의 정지 인디케이터는 Material에서 접근성 기준을 충족하기 위해 추가된 요소입니다. 불확정적이거나 원형 인디케이터에는 사용되지 않습니다. 대비가 낮은 컨테이너 내부에는 정지 인디케이터를 사용하고, 주변과 대비가 최소 3:1인 경우에 정지 인디케이터를 제거할 수 있습니다.
화면 상단에 있는 인디케이터는 모든 페이지 콘텐츠가 로드 중임을 보여줍니다. 카드에 배치하면 인디케이터가 카드 콘텐츠만 로드 중임을 표시합니다.
원형 인디케이터는 페이지가 로드 중임을 보여줄 수 있습니다. 또한 페이지에서 새 항목이 나타나는 위치를 보여줄 수 있습니다.
원형 인디케이터를 버튼에 배치하면 버튼의 동작이 현재 진행 중임을 나타낼 수 있습니다. 매우 작은 버튼의 경우 물결 모양이 눈에 띄지 않으므로 평평한 모양을 권장합니다.
5초 미만의 짧고 불확실한 활동에는 원형 표시기를 사용할 수 있지만, 리스트의 모든 버튼에 인디케이터를 적용하는 것은 권장하지 않습니다.
로딩 인디케이터의 구성
1️⃣ 활성 인디케이터 (Active indicator)
2️⃣ 컨테이너 (Container, optional)
활성 인디케이터는 7개의 고유한 쉐입으로 구성되어 반복되는 쉐입 몰핑 시퀀스입니다. Expressive 업데이트에서 추가된 위 Shape의 7가지 유형을 반복합니다.
컨테이너는 본문 내용과 추가적인 대비를 제공하는 역할을 합니다. 로딩 인디케이터가 다른 콘텐츠 위에 배치되거나 '당겨서 새로고침 동작'을 할 때 함께 사용해야 합니다.
로딩 인디케이터의 사용방법
구체적인 사용방법을 이어서 알아보겠습니다.
페이지나 컨테이너를 로딩하는 동안 로딩 인디케이터는 요소의 중앙에 위치해야 합니다.
기존 콘텐츠가 있는 페이지에서 새 항목을 로드할 때는 새 콘텐츠가 나타날 빈 공간에 로딩 인디케이터를 배치해야 하며, 기존 콘텐츠와 겹치면 안 됩니다.
로딩 인디케이터는 효과가 나타나기까지 몇 초가 걸리는 버튼에 배치할 수 있습니다.
'당겨서 새로고침'하기 위한 로딩 인디케이터는 콘텐츠 위나 옆에 나타날 수 있습니다. 또한 많은 공간을 차지하지 않고 진행 상황을 보여주기 위해 로딩 인디케이터를 사용할 수 있습니다.
로딩과 프로그래스, 언제 써야 할까요?
두 요소 모두 사용자가 콘텐츠를 기다리는 동안 사용되기 때문에 혼동되기 쉽습니다. 하지만 예상되는 대기 시간과 처리 방식에 따라 적절한 인디케이터를 구분해 사용하는 것이 중요합니다.
즉시 (200ms 미만) : 즉시 완료되는 프로세스에는 인디케이터를 사용하지 않고 콘텐츠를 즉시 표시합니다.
짧음 (200ms ~ 5초) : 로딩 인디케이터를 사용합니다.
긺 (5초 이상) : 프로그래스 인디케이터를 사용합니다.
Expressive 업데이트의 핵심: 감성적 표현력과 사용성의 균형
이번 Expressive 업데이트의 주요 목표는 감성적인 표현력을 높이면서도, 사용성을 해치지 않는 방향을 찾는 데 있습니다. 다만, 버튼 내부처럼 물결 형태의 인지가 어려운 상황에서는 기존의 매끄러운 인디케이터를 유지하는 것이 더 효과적입니다.
감성적 표현력 향상
물결형 인디케이터는 단조로운 직선보다 시각적으로 풍부하며, 제품의 개성과 감정적인 톤을 사용자에게 은유적으로 전달합니다.
작업 상태 전달력 향상
이러한 인디케이터는 사용자가 시스템의 작동 여부를 보다 직관적으로 인지할 수 있게 해 주며, 실제로 동작 중임을 생생하게 느끼도록 도와줍니다.
인디케이터의 좋은 사례
일반적인 형태의 인디케이터의 좋은 사례를 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
Microsoft CopolotMS는 제품의 로고를 불확정 인디케이터 상단에 배치해 사용자의 시선을 자연스럽게 유도합니다. 단순한 로딩 화면이지만, 로고 노출을 통해 브랜드 정체성을 효과적으로 각인시키고 있죠.
다만, 인디케이터가 실제 진행과 무관한 형식적인 애니메이션처럼 보일 수 있으며, 반복적인 로고 노출은 시간이 지나면서 신선도가 떨어질 우려도 있습니다.
Cash AppCash App은 단순히 ‘로딩 중’이라는 문구 대신, 현재 어떤 작업이 진행 중인지 명확히 전달하고 있습니다. ‘사진을 확인하는 중’이라는 문장은 사용자에게 더 맥락 있는 피드백을 제공하며, “few seconds”라는 표현을 통해 대기 시간에 대한 기대치도 어느 정도 조절해 줍니다.
다만, 여전히 정확한 진행 상황은 알 수 없고, 전반적인 화면 구성은 다소 단조롭게 느껴질 수 있습니다.
VenmoVenmo는 기능 중심 메시지 대신 축하와 공감을 담은 문구, 그리고 따뜻한 일러스트를 통해 긍정적인 첫인상을 전달합니다. 브랜드의 톤 앤 매너에 맞춘 텍스트와 일러스트레이션은 브랜드 이미지를 일관되게 보여주는 데 효과적입니다.
비록 로딩 진행도를 알 수는 없지만, 감성적인 시각 요소 덕분에 사용자는 비교적 짧게 느끼며 기다릴 수 있습니다.
마치며
아마 다들 인디케이터에 대한 불신은 종종 느끼셨을 것 같습니다. 정말 로딩이 되고 있는 건 맞는지, 프로그래스 바가 실제 진행도를 반영하고 있는 게 맞는지 말이죠. 인디케이터의 표현이 변함으로써 사용자가 기다리는 동안 시선을 끌어 지루함을 줄이고, 실제 처리되고 있는 중인 것 같은 착각을 줄 수 있다면 실제 사용성과도 연결이 될 것으로 보입니다. (실제 지표가 유의미하게 변화할지는 모르겠지만요)
그러나 과하게 사용하면 시각적인 피로감을 제공하거나, 다른 UI 요소와 이질적으로 느껴질 여지가 있어 보입니다. 이러한 마이크로인터랙션을 차용하기 위해서는 적용할 제품의 특성과 사용성, 브랜딩을 다각적으로 고려해야 하겠습니다. 그럼에도 OS 간의 디자인적 차별화가 필요한 시점에서 이러한 구글의 시도는 여전히 유의미해 보입니다. 인디케이터만으로도 Material 3의 이미지가 어느 정도 연상이 되게 되었으니까요.
두 인디케이터에 대한 자세한 내용은 아래에서 확인하실 수 있습니다.
