로딩·진행·비동기
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
진행 바 Progress Bar
작업의 알려진 완료 비율을 선형 트랙의 길이로 표시하는 확정형 예시입니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
여기서는 0~100% 완료율을 나타냅니다. 선형 진행 표시기는 불확정형까지 포함하는 상위 개념입니다.
진행 링 Progress Ring
단일 작업의 알려진 완료 비율을 원형 트랙의 채워진 호로 표시합니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
원형 진행 표시기의 확정형 예시입니다. 68%는 작업 완료율이며 구성비나 측정 게이지가 아닙니다.
원형 진행 표시기 Circular Progress Indicator
원형으로 작업 상태를 나타내는 표시기 계열입니다. 완료율을 알면 확정형, 모르면 불확정형을 사용합니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
진행 링과 별개의 모양 이름이 아닙니다. 여기서는 상위 개념으로 두 상태를 나란히 비교합니다.
선형 진행 표시기 Linear Progress Indicator
가로 트랙을 사용하는 진행 상태 계열로 확정형과 불확정형을 포함합니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
알려진 완료율과 반복 이동을 한 카드에서 비교합니다. 진행 바는 이 계열의 확정형 예시입니다.
확정형 로딩 Determinate Loading
전체 작업량 대비 완료량을 알 수 있을 때 진행률을 표시하는 방식입니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
모양이 아니라 상태 표현 방식입니다. 진행 바와 진행 링 모두 사용할 수 있습니다.
불확정형 로딩 Indeterminate Loading
완료량의 비율을 알 수 없을 때 처리 중이라는 사실만 알리는 방식입니다.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
스피너나 움직이는 선형 세그먼트로 표현하며 허위 퍼센트를 표시하지 않습니다.
단계 표시기 Stepper / Step Indicator
다단계 프로세스의 현재·완료·남은 단계를 표시.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
인라인 로더 Inline Loader
페이지 전체가 아니라 특정 영역에서만 로딩을 표시.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
전체 화면 로더 Full-screen Loader
화면 전체 사용을 일시적으로 막으면서 작업 중임을 표시.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
펄스 로딩 Pulse Loading
투명도나 크기가 주기적으로 변화하는 로딩 애니메이션.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
블러업 이미지 Blur-up Image
저해상도·흐릿한 이미지를 선제 표시한 뒤 원본으로 교체.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
지연 로딩 Lazy Loading
필요한 시점에 콘텐츠나 리소스를 불러오는 전략.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
점진적 로딩 Progressive Loading
우선순위에 따라 콘텐츠를 부분적으로 먼저 표시.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
미리 가져오기 Prefetching
다음에 필요할 가능성이 높은 데이터를 사전 요청.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
낙관적 UI Optimistic UI
서버 성공 응답 전에 화면에 결과를 반영하고 실패 시 복구.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
보수적 UI Pessimistic UI
서버 응답 후에만 화면 상태를 확정해 반영하는 방식.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
무한 스크롤 로딩 Infinite Scroll Loading
스크롤 위치에 따라 목록의 다음 데이터를 추가 로드.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
재시도 상태 Retry State
실패 후 사용자가 로딩 작업을 다시 실행할 수 있는 상태.
로딩·진행·비동기에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Loading, Progress & Async Patterns
Open an entry for its visual reference, comparisons and source-language text.
Progress Bar 진행 바
A determinate example that represents known task completion through a filled linear track.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
This example represents 0–100% completion; the linear progress family also includes indeterminate states.
Progress Ring 진행 링
Shows the known completion fraction of one task as a filled arc on a circular track.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
A determinate member of the circular progress family. 68% is task completion, not composition or a measured gauge.
Circular Progress Indicator 원형 진행 표시기
A family of circular task-status indicators: determinate when completion is known and indeterminate otherwise.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Not a separate shape from a progress ring. This family card compares determinate and indeterminate states.
Linear Progress Indicator 선형 진행 표시기
A family of linear status indicators covering determinate and indeterminate progress.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Compares known progress with an indeterminate moving segment. The progress bar here is the determinate example.
Determinate Loading 확정형 로딩
Shows progress when completed work can be measured against a known total.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
This is a status strategy, not a shape; both bars and rings can be determinate.
Indeterminate Loading 불확정형 로딩
Indicates activity when the completion fraction is not known.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Can use a spinner or moving linear segment; do not invent a percentage.
Stepper / Step Indicator 단계 표시기
An indicator of the current, completed, and remaining steps in a multi-step process.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Inline Loader 인라인 로더
A loading indicator confined to a particular area rather than the entire page.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Full-screen Loader 전체 화면 로더
A loading indicator that temporarily blocks use of the entire screen.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Pulse Loading 펄스 로딩
A loading animation with periodically changing opacity or scale.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Blur-up Image 블러업 이미지
A low-resolution or blurred image shown first, then replaced with the full-quality image.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Lazy Loading 지연 로딩
A strategy that loads content or resources only when they are needed.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Progressive Loading 점진적 로딩
A strategy that displays parts of the content in order of priority.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Prefetching 미리 가져오기
Requesting data in advance because it is likely to be needed next.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Optimistic UI 낙관적 UI
Updating the interface before server confirmation, then rolling back if the operation fails.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Pessimistic UI 보수적 UI
Committing a visible state change only after receiving the server response.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Infinite Scroll Loading 무한 스크롤 로딩
Loading the next items in a list as the user reaches a relevant scroll position.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Retry State 재시도 상태
A state that lets the user retry a loading operation after a failure.
Specifying screens, states, and interactions for loading, progress, and asynchronous operations.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.