구글의 꼬불거리는 인디케이터

카테고리

디자인

서브카테고리

UI 디자인

대상자

UI/UX 디자이너, 웹/앱 개발자, 디자인 시스템 구축 담당자

난이도: 중급 이상 (Material Design 3 기반 디자인 원칙, 사용성 테스트 기준 이해 필요)

핵심 요약

• Material 3의 꼬불거리는 인디케이터는 감성적 브랜딩과 사용자 인지 향상을 위한 전략적 디자인 변화
• 프로그래스 인디케이터와 로딩 인디케이터의 구분 및 사용 시나리오 명확화 (예: 5초 이상 작업 → 프로그래스 인디케이터)
• 접근성 기준 충족을 위한 정지 인디케이터 도입 (대비 3:1 기준)

섹션별 세부 요약

1. 인디케이터의 정의 및 역할

• 인디케이터(Indicator): 시스템 상태, 진행 상황, 위치 등을 사용자에게 직관적으로 전달하는 UI 요소
• 4가지 주요 유형: 프로그래스, 로딩, 페이지, 스텝 인디케이터 (Material 3 기준)
• 감성적 표현력 강화를 위한 물결형 디자인 도입 (기존 직선형 → 곡선형 전환)

2. 프로그래스/로딩 인디케이터의 차이

• 프로그래스 인디케이터: 작업 진행 상황 예측 가능 (예: 파일 업로드)
• 로딩 인디케이터: 백엔드 지연 시 피드백 제공 (예: 버튼 클릭 후 처리 중)
• 확정적/불확정적 구분:

- 확정적: 0%~100% 진행 표시 (예: 파일 다운로드)

- 불확정적: 고정 트랙 따라 움직임 (예: 짧은 요청 처리)

3. Expressive 업데이트의 디자인 변화

• 선형/원형 인디케이터 배치 권장:

- 선형: 컨테이너 가장자리

- 원형: 요소 중앙 (예: 버튼 내부)

• 활성 인디케이터 (7가지 쉐입)과 트랙의 시각적 강화
• 정지 인디케이터: 접근성 기준 충족 (대비 3:1 미만 시 제거)

4. 사용 시나리오 및 최적화

• 5초 미만 작업: 원형 인디케이터 사용 (예: 버튼 클릭)
• 5초 이상 작업: 프로그래스 인디케이터 사용 (예: 대용량 파일 처리)
• 화면 상단/카드 내부에 배치 시 전체/부분 로딩 상태 구분
• '당겨서 새로고침' 애니메이션 시 인디케이터와 콘텐츠 겹침 방지

5. 사례 분석 및 고려사항

• Microsoft Copilot: 로고 노출로 브랜드 정체성 강화 (단, 반복 노출 시 신선도 저하 가능성)
• Cash App: 작업 내용 명시 (예: "사진 확인 중") → 사용자 기대치 조절
• Venmo: 감성적 일러스트로 사용자 기다림 감소 (단, 진행도 미표시로 한계 존재)
• 과도한 사용 시: 시각적 피로감 유발, UI 요소와 이질성 발생 가능성

결론

• Material 3의 꼬불거리는 인디케이터는 감성적 표현과 사용성 향상을 위한 디자인 전략
• 5초 이상 작업은 프로그래스 인디케이터, 짧은 작업은 로딩 인디케이터 사용 (시간 기준 구분 필수)
• 접근성 기준 (대비 3:1)과 브랜딩 일관성을 고려한 유형/배치 최적화가 실무 적용 핵심