Loading
Loading (로딩)
로딩 인디케이터는 데이터를 검색하거나 느린 계산을 수행할 때 사용하며, 프로세스가 진행 중임을 사용자에게 알리는 데 도움을 줍니다. 예상 대기 시간이 3초를 초과할 때 사용하는 진행 상태 표시 컴포넌트입니다.
출처: Loading
본문
개요 (Overview)
로딩 컴포넌트는 프로세스나 액션이 진행 중임을 나타내는 시각적 피드백을 제공해요. 대기 시간 동안 시스템이 뒤에서 작동하고 있음을 신호해 사용자 기대를 설정하는 데 도움을 줍니다. 컨텍스트에 따라 전체 페이지 오버레이로 사용하거나 특정 섹션·UI 요소 안에 배치할 수 있습니다. 예상 대기 시간이 3초를 초과하면 로딩 인디케이터를 사용하세요.
UI에서 로딩 컴포넌트 예시
언제 사용할까요 (When to use)
- 데이터를 검색하거나 느린 계산을 수행할 때 요청이 처리되고 있음을 나타내려면 사용.
- 전체 페이지나 주요 섹션이 처리 중일 때, 예를 들어 사용자가 데이터를 제출하거나 저장한 후에 사용.
언제 사용하지 말아야 할까요 (When not to use)
- 콘텐츠를 점진적으로 표시하는 데 로딩 인디케이터를 사용하지 마세요. 더 나은 경험을 위해 스켈레톤 상태를 사용하세요.
- 진행하기 위해 사용자 인터랙션이 필요하다면 로딩 인디케이터를 사용하지 마세요. 툴팁, 프로그레스 인디케이터, 알림 같은 대안을 대신 사용하세요.
- 전체 화면 로드의 경우 스켈레톤 상태가 인디케이터보다 선호되어 더 부드러운 경험을 만듭니다.
- 여러 로딩 인디케이터를 동시에 사용하지 마세요. 사용자를 압도할 수 있습니다.
포맷 (Formatting)
구조 (Anatomy)
- Large
- Small
- 로딩 인디케이터(Loading indicator): 프로세스가 진행 중임을 나타내는 원형 애니메이션 아이콘. 로딩 상태의 주요 시각적 단서 역할을 해요.
크기 (Sizing)
로딩 컴포넌트는 large와 small 두 가지 크기로 제공돼요. large 로딩 인디케이터 크기가 기본 크기입니다.
로딩 컴포넌트의 large와 small 크기
Large 크기
large 로딩 인디케이터는 전체 화면 점유(takeover) 상황에서 로딩을 표시하는 데 가장 흔히 사용돼요. 페이지 내 섹션, 모달(modals), 개별 타일(tiles)에도 나타날 수 있습니다. 사용자가 현재 로딩 상태인 요소와 상호작용할 수 없도록 보통 large 로딩 인디케이터 뒤에 배경 오버레이가 배치됩니다.
UI에서 large 로딩 컴포넌트 예시
Small 크기
small 로딩 인디케이터는 특정 UI 요소 안의 상황적·지역적 로딩 경험, 특히 인라인 로딩 시나리오에 가장 적합해요. 빠른 로딩 작업에 잘 맞으며, 버튼(button) 같은 트리거 요소 안이나 근처에 배치해 프로세스가 진행 중임을 나타낼 수 있습니다. 흔한 예로 버튼 클릭 후 저장, 파일 업로드, 또는 로딩 상태를 전달하기 위해 라벨 텍스트 옆에 인디케이터를 배치하는 것이 있어요. 자세한 지침은 인라인 로딩 컴포넌트 Usage 탭을 참고하세요.
UI에서 small 로딩 컴포넌트 예시
배치 (Placement)
Large 로딩 배치
large 로딩 인디케이터는 전체 화면 및 컴포넌트 수준 로딩 시나리오에 주로 사용돼요. 전체 화면 로딩의 경우 인디케이터를 뷰포트 중앙에 배치하고 반투명 오버레이를 적용해 전체 인터페이스가 비활성화되었음을 신호하세요.
오버레이가 있는 전체 화면 로딩의 large 로딩 인디케이터 배치 예시
모달, 타일, 사이드 패널 같은 컴포넌트 안에서 사용할 때는 인디케이터를 그 공간 중앙에 배치하고, 로딩 중 콘텐츠와의 상호작용을 막기 위해 오버레이를 사용하세요.
오버레이가 있는 컴포넌트 수준 로딩의 large 로딩 인디케이터 배치 예시
Small 로딩 배치
small 로딩 인디케이터는 버튼이나 컴팩트 콘텐츠 영역 같은 요소 안의 인라인·지역적 로딩에 이상적이에요. 오버레이를 사용하지 않고 관련 액션과 인라인으로 또는 인접하게 나타나야 합니다. 로딩 상태 동안 "Cancel" 같은 관련 액션 버튼은 일시적으로 비활성화되어야 해요. 인라인 로딩에 대한 자세한 내용은 인라인 로딩 컴포넌트 Usage 탭을 참고하세요.
인라인 로딩을 위한 small 로딩 인디케이터 배치 예시
콘텐츠 (Content)
주요 요소 (Main elements)
로딩 인디케이터는 선택적 라벨과 짝을 이루어 로딩 상태 동안 추가 컨텍스트를 제공할 수 있어요.
large 로딩 인디케이터의 경우 인디케이터 아래에 "Loading data…" 같은 간단한 상태 메시지를 추가하면 사용자 기대를 설정하는 데 도움이 돼요. 라벨 텍스트는 컴포넌트에 기본 포함되지 않지만 필요하면 포함하도록 사용자화할 수 있습니다.
라벨 텍스트가 있는 large 로딩 인디케이터 예시
small 로딩 인디케이터의 경우, 특히 인라인 사용에서는 콘텐츠가 간결하고 관련 액션 근처에 배치되어야 해요. 더 자세한 지침은 인라인 로딩 컴포넌트의 Content 섹션을 참고하세요.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
로딩 컴포넌트에는 inactive와 active 두 가지 상태가 있어요. 이 컴포넌트의 다양한 상태에 대한 자세한 시각적 정보는 스타일(Style) 탭을 참고하세요.
| 상태 (State) | 언제 사용하나요 (When to use) |
|---|---|
| Inactive | 로드되는 데이터가 없을 때의 비활성 로딩 상태이며 시각적 표시가 없음. |
| Active | 활성 로딩 상태는 액션이 여전히 진행 중임을 나타냄. |
인터랙션 (Interactions)
large 로딩 인디케이터의 경우 페이지나 컴포넌트 위에 반투명 오버레이가 적용되어 모든 인터랙션을 차단해요. 이 상태 동안 사용자는 어떤 요소와도 상호작용할 수 없어야 하며, 오버레이는 인터페이스가 일시적으로 사용할 수 없음을 나타냅니다.
인라인 로딩 시나리오의 small 로딩 인디케이터의 경우 로딩이 진행되는 동안 버튼 같은 인터랙티브 요소는 일시적으로 비활성화되어야 해요. 이렇게 하면 반복 액션을 막고 부드러운 사용자 경험을 보장합니다. 자세한 지침은 인라인 로딩 컴포넌트 Interactions 섹션을 참고하세요.
관련 컴포넌트 (Related)
컴포넌트 (Components)
- Button
- File uploader
- Inline loading
- Modal
- Notification
- Progress indicator
- Tile
패턴 (Patterns)
- Forms
- Loading
더 알아보기 (Learn more)
로딩 컴포넌트는 3초 이상 걸리는 프로세스의 진행을 알리는 데 사용해요. 전체 화면·컴포넌트 수준에서는 large 크기에 오버레이를, 인라인·지역적 상황에서는 small 크기를 사용하세요. 점진적 콘텐츠 표시나 전체 페이지 로드에는 스켈레톤 상태를, 사용자 입력이 필요할 때는 프로그레스 인디케이터·알림 같은 대안을 쓰는 게 맞습니다.