프로그레스 바Progress Bar

진행(progress)을 막대(bar)로 그린 것입니다. 기다리는 사람에게 가장 궁금한 두 가지, 얼마나 됐고 얼마나 남았는지를 답합니다. 이 사이트의 강의 진도율도 이 컴포넌트입니다.

언제 쓰나요

진행률을 계산할 수 있는 작업에 씁니다. 파일 업로드(보낸 바이트/전체), 설치(끝난 단계/전체 단계), 강의 진도(본 레슨/전체 레슨). 이런 것은 확정(determinate) 형태로 채워지는 막대와 숫자를 같이 보여 줍니다.

진행률을 알 수 없는 작업(서버 응답 대기)에는 불확정(indeterminate) 형태를 씁니다. 막대가 끝없이 좌우로 흐르거나 스피너로 대신합니다. 이때 가짜 퍼센트를 만들어 보여주는 것은 하지 않습니다. 99%에서 멈춰 있는 막대가 그 결과입니다.

AI에게 시키기

파일 업로드에 프로그레스 바를 붙여줘.
- 업로드 진행률(%)을 받아 막대가 채워지고 옆에 숫자 표시
- 진행률을 모르는 구간(서버 처리 중)은 불확정 애니메이션으로 전환
- 완료 시 초록으로 바뀌고 "완료" 텍스트, 실패 시 빨강 + 다시 시도 버튼
- role="progressbar" 와 aria-valuenow 로 화면 낭독기가 진행률을 읽게

"로딩 표시해줘"라고 하면 스피너가 나옵니다. 진행률이 있는 작업이라면 프로그레스 바라고 이름을 적고 확정/불확정 구분을 넣습니다.

혼동 주의

• 스피너(Spinner): 돌기만 하고 진행률이 없습니다. 짧은 대기(2~3초 이내)나 진행률을 모를 때 씁니다.
• 스켈레톤: 콘텐츠가 올 자리를 미리 그리는 것입니다. 진행률이 아니라 "무엇이 나타날지"를 보여 줍니다.
• 스텝: 단계 이름이 있는 진행 표시입니다. 프로그레스 바는 양(%)을, 스텝은 위치(몇 번째)를 보여 줍니다.
• 미터(Meter): 디스크 사용량처럼 진행이 아니라 현재 양을 보여 주는 막대입니다. 모양은 같지만 뜻이 다릅니다.