Spinner

Spinner (스피너)

스피너는 무언가 처리되고 있다는 것을 시각적으로 전달하는 요소예요. 1초 이상 걸리는 로딩 상태에 사용돼요. 로딩 중임을 알려주는 빙글빙글 도는 표시라고 생각하면 쉬워요.

스피너는 프로세스가 끝나기까지 남은 시간을 보여주지는 않아요. 더 구체적인 상태를 전달해야 한다면 확정형 progress bar를 대신 사용해 보세요.

출처: React Spinner 문서

스피너는 로딩 중인 페이지 섹션 위에 중앙에 배치해야 해요. 한 섹션만 로딩 중이라면 스피너가 페이지의 다른 섹션과의 상호작용을 막지 않아야 해요.

Whole page spinner

전체 페이지 스피너

프로세스가 3초보다 오래 걸릴 것으로 알고 있다면 스피너와 함께 라벨을 사용해서 백그라운드에서 무슨 일이 일어나고 있는지 사람들이 알게 하세요. 라벨 텍스트는 aria-labelledby 속성에 사용되고 화면 낭독기에 식별돼요.

무슨 일이 일어나고 있는지 가능한 한 구체적으로 표현하세요. 가능하면 스피너를 촉발한 액션 단어(action word)를 반영하세요.

Button loading

아직 어떤 액션도 취해지지 않았다면 백그라운드 프로세스를 명확한 용어로 설명하세요. 예를 들어 "Working on it …"(열심히 하는 중…) 대신 "Connecting to data …"(데이터 연결 중…)처럼요.

Process description correct

Process description incorrect

무슨 일이 일어나고 있는지 구체적으로 말할 수 없다면, "loading"이나 "authenticating" 같은 애매한 단어를 피하세요. 대신 "Getting things ready …"(준비 중…)을 사용하세요.

Less specific correct

Less specific incorrect

스피너 라벨에는 짧은 -ing 동사를 사용하세요. 간결하게—세 단어 이하—유지하고 프로세스가 진행 중임을 전달하도록 줄임표(...)로 끝내세요. 줄임표 앞에는 공백을 두세요.

문장형 대문자 표기—첫 단어만 대문자로—를 사용하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization을 참고하세요.