Progress bar

Progress bar (프로그레스 바)

프로그레스 바는 시스템 정보(예: OneDrive에서 클라우드 저장 공간을 얼마나 쓰고 있는지)나 작업 정보(예: 다운로드 완료까지 얼마나 남았는지)를 전달하는 요소예요. 사람이 기다리는 동안 '지금 무슨 일이 일어나고 있는지, 얼마나 남았는지'를 한눈에 알려주는 역할을 해요.

프로그레스 바는 1초보다 오래 걸리는 작업에만 사용해야 해요. 구조가 알려진 새 콘텐츠를 로딩하는데 UI를 막지 않는 상황이라면 skeleton을 고려해 보세요.

출처: React Progress Bar 문서

본문

Behavior (동작)

Static progress bars (정적 프로그레스 바)

애니메이션이 없는 프로그레스 바로 정적인 퍼센트를 전달하세요. 예를 들어 저장 공간이 얼마나 남았는지 나타내는 시스템 진행 시나리오를 보여줄 때 사용해요.

Static progress bar

Determinate and indeterminate (확정형과 비확정형)

프로그레스 바는 앱의 요구사항과 기반 기술의 역량에 따라 확정형(determinate) 또는 비확정형(indeterminate)일 수 있어요.

Determinate (확정형) — 확정형 프로그레스 바는 작업이 얼마나 완료되었고 얼마나 남았는지 사람들이 알 수 있게 해 줘요. 가능하면 항상 확정형 프로그레스 바를 사용하세요. 상태를 전달하고 사람들에게 '여전히 잘 작동하고 있다'는 안심을 주기 때문에, 비확정형 프로그레스 바보다 더 나은 사용자 경험을 제공해요.

Determinate

Indeterminate (비확정형) — 때로는 어떤 일이 얼마나 걸릴지 가늠하는 게 불가능해서 비확정형 프로그레스 바를 사용해야 할 때가 있어요. 비확정형 프로그레스 바는 '여전히 작동 중'이라는 어떤 안심도 주지 못하기 때문에, 짧은 작업에만 사용하세요. 막대가 순환하는 걸 너무 오래 지켜보면 사람들은 뭔가 잘못됐다고 생각할 수 있어요.

작업이 시작된 뒤 충분한 데이터가 모여 남은 시간을 전달할 수 있게 되면 확정형 프로그레스 바로 전환하세요. 남은 시간이 아주 적다면, 로딩 상태에서 전환하기 전에 한 번의 애니메이션 주기를 완료하세요. 애니메이션 중간에 비확정형 프로그레스 바를 중단하지 마세요.

Indeterminate

Combining steps (단계 결합)

관련 단계를 하나의 프로그레스 바로 결합해서 막대가 "되감기는" 것을 피하세요. 예를 들어 업데이트를 확인한 다음 설치한다면, 프로그레스 바는 하나만 보여주세요. 설치가 시작되면 상태 텍스트는 바꾸되, 프로그레스 바는 같은 지점부터 계속 앞으로 움직이게 하세요.

막대가 뒤로 움직이는 것처럼 보이면 사람들은 그 막대에 대한 신뢰를 잃어요.

Combine multiple steps of a longer task into one progress bar

긴 작업의 여러 단계를 하나의 프로그레스 바로 결합하세요

Restarting the progress bar for each task step can make people lose confidence

작업 단계마다 프로그레스 바를 다시 시작하면 사람들은 신뢰를 잃을 수 있어요

Layout (레이아웃)

프로그레스 바는 새 서랍(drawer)이나 콜아웃(callout) 안에, 또는 작업을 시작하는 UI 아래에 나타날 수 있어요. 작업이 취소되어도 UI가 원래 상태로 돌아갈 수 있다면, 작업을 시작하는 UI를 대체할 수도 있어요.

작업을 취소할 수 있다면, Close 버튼을 프로그레스 바 라벨의 기준선(baseline)에 맞춰 우측 상단에 배치하세요.

Progress bar layout

Content (콘텐츠)

Progress bar parts

1. Label (라벨) (선택) — 짧고 명확하게 쓰세요. 문장형 대문자 표기(sentence case)를 사용하고 문장 끝 마침표는 쓰지 마세요.

2. Status (상태) (선택) — 지금 무슨 일이 일어나고 있는지 또는 얼마나 진행되었는지를 전달하세요. 정보성 있고 관련성 있는 단위를 사용하세요.

Keep labels short and clear (라벨은 짧고 명확하게 유지하세요)

무슨 일이 진행 중인지 설명하는 짧은 라벨을 프로그레스 바 위에 넣으세요. 마침표는 넣지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

Use status text for additional info (상태 텍스트로 추가 정보를 전달하세요)

상태 텍스트로 얼마나 진행되고 있는지, 작업이 얼마나 걸릴지에 대한 기대치를 설정하거나, 기다리지 않으면 무슨 일이 일어날 수 있는지 사람들이 알게 하세요.

작업 진행을 전달할 때는 설명적인 -ing 동사를 사용하세요. 간결하게 유지하고 작업이 진행 중임을 나타내도록 줄임표(...)로 끝내세요. 줄임표 앞에는 공백을 두세요.

Status text example

작업 완료에 걸릴 시간에 대한 최상의 감을 주려면 정보성 있고 관련성 있는 단위를 사용하세요. 시간 단위는—신뢰할 만큼 정확한 경우가 드물기 때문에—피하세요.

Avoid time units in status text

상태 텍스트에는 시간 단위를 피하세요

오류가 발생하면 상태 텍스트를 오류 메시지로 교체하세요. 무엇이 잘못되었고 사람들이 다음에 무엇을 해야 하는지 전달하기 위해 구체적이고 간결한 동사를 사용하세요.

Use an error to communicate when a task can't continue

작업이 계속될 수 없을 때는 오류로 전달하세요

더 알아보기 (Learn more)