Toast

Toast (토스트)

토스트는 사람이 취하려는 액션의 상태나 앱의 다른 곳에서 무언가 일어났다는 것을 전달하는 요소예요. 토스트는 임시적인 표면(surface)이에요. 유용하고 관련성 있지만 치명적이지 않은 정보에 사용하세요. 화면 구석에 잠깐 떠서 알림을 주는 작은 메시지 상자라고 생각하면 쉬워요.

치명적인 메시지에는 모달 Dialog, Field 오류, 또는 Message bar를 대신 사용하세요.

출처: Toast 문서

본문

Types (유형)

토스트는 일반적으로 확인(confirmation), 진행(progress), 통신(communication)의 세 범주로 나뉘어요. 토스트 컴포넌트는 사람들이 목표를 달성하도록 최선을 다해 돕기 위해 켜고 끌 수 있는 슬롯이 있어요. 각 토스트 유형의 이상적인 구성과 사용법은 아래 그림과 같아요.

Confirmation toast

Confirmation toast (확인 토스트) — 확인 토스트는 사람의 액션의 직접적인 결과로 보여줘요. 확인 토스트의 상태는 성공(success), 오류(error), 경고(warning), 정보(informational), 진행(progress)일 수 있어요.

Progress toast

Progress toast (진행 토스트) — 진행 토스트는 사람이 시작한 작업의 상태를 알려줘요.

Communication toast

Communication toast (통신 토스트) — 통신 토스트는 시스템의 메시지나 다른 사람의 액션을 알려줘요. 이 메시지에는 멘션(mentions), 일정 알림, 답글, 시스템 업데이트가 포함될 수 있어요.

통신 토스트는 해결책이나 참조하는 콘텐츠에 직접 연결하는 콜 투 액션(call to action)을 포함해요. 임시적이거나 영구적(persistent)일 수 있죠. 나중에 고객이 이 콘텐츠를 다시 찾을 수 있는 알림 센터 같은 다른 표면이 있을 때만 해제할 수 있어요.

Behavior (동작)

Dismissal (해제)

토스트는 사용 사례에 따라 시간 기반(timed), 조건부(conditional), 또는 명시적(express) 해제를 가질 수 있어요.

Timed dismissal (시간 기반 해제) — 취할 액션이 없으면 토스트는 7초 후에 타임아웃돼요. 성공 확인 토스트처럼 더 이상 취할 액션이 없을 때 시간 기반 해제가 가장 좋아요.

마우스로 탐색하는 사람들은 토스트 위에 마우스를 올리면 타이머를 일시 정지할 수 있어요. 그러나 액션을 포함하지 않는 토스트는 주로 키보드로 탐색하는 사람들에게 키보드 포커스를 받지 못해요.

Conditional dismissal (조건부 해제) — 작업이 완료되면 해제되는 진행 토스트처럼, 어떤 조건이 충족될 때까지 지속되어야 하는 토스트에 조건부 해제를 사용하세요.

필수 액션에 토스트를 사용하지 마세요. 진행하기 전에 사람들이 액션을 취하도록 장려해야 한다면 message bar나 dialog처럼 더 강력한 표면을 시도해 보세요.

Express dismissal (명시적 해제) — 알림 센터처럼 그 정보를 다른 곳에서 다시 찾을 수 있을 때만, 사람들이 토스트를 명시적으로 해제할 수 있게 Close 버튼을 포함하세요.

Express dismissal

Determinate and indeterminate progress (확정형·비확정형 진행)

진행 토스트는 앱의 요구사항과 기반 기술의 역량에 따라 확정형(determinate) 또는 비확정형(indeterminate)일 수 있어요.

완료 시간을 예측할 수 있을 때는 확정형 progress bar와 완료 백분율을 보여주세요. 확정형 progress bar는 상태를 전달하고 '여전히 작동 중'이라는 안심을 주기 때문에 신뢰할 수 있는 사용자 경험을 제공해요.

완료 시간을 알 수 없거나 정확성이 신뢰할 수 없다면 비확정형 spinner 아이콘을 대신 보여주세요. 같은 토스트에 spinner와 progress bar를 둘 다 보여주지 마세요.

Don't use both a spinner and a progress bar in a toast

토스트에 spinner와 progress bar를 둘 다 사용하지 마세요

Layout (레이아웃)

Keep location predictable (위치를 예측 가능하게 유지)

토스트는 앱 안에서 일관된 위치, 주로 메인 콘텐츠를 막을 가능성이 가장 낮은 우측 상단이나 우측 하단에 항상 나타나야 해요.

제품에 가장 잘 맞는 위치를 선택하세요. 예를 들어 우측 상단에서 알림 서랍(notifications drawer)을 토글할 수 있다면 토스트도 거기에 배치해서, 사람들이 레이아웃의 그 부분에서 정보를 찾는 데 익숙해지게 하세요.

Place toasts in a consistent location

토스트를 일관된 위치에 배치하세요

Don't block the main content

메인 콘텐츠를 막지 마세요

Don't overload the toaster (토스터를 과부하시키지 마세요)

토스트는 toaster라고 하는, 토스트의 위치를 처리하는 컨테이너에 감싸여 있어요.

새 토스트는 항상 레이아웃의 가장자리에 나타나서, toaster 안의 더 오래된 토스트를 중앙 쪽으로 밀어요. 예를 들어 toaster가 화면 상단에 있다면 새 토스트는 상단에 나타나고 더 오래된 토스트를 아래로 밀어요.

toaster에 토스트를 네 개 이상 보여주지 말고, 토스트 사이에 16픽셀의 공간을 유지하세요.

Stack up to 4 toasts

최대 4개의 토스트를 쌓으세요

Accessibility (접근성)

intent prop을 사용해 토스트에 사용되는 의미론적(semantic) 스타일, 아이콘, aria-live 지역과 역할을 올바르게 결정하세요.

info를 제외한 모든 피드백 상태는 "assertive" aria-live를 가지며, 화면 낭독기가 하는 다른 어떤 발표도 중단해요. 너무 많은 중단은 사람의 흐름을 방해할 수 있으므로 assertive 토스트를 너무 많이 보여주지 마세요.

Content (콘텐츠)

Communicate the main message in the title (제목에 핵심 메시지를 전달하세요)

토스트 제목은 간결하게 유지하고 가장 중요한 정보에 집중하세요. 사람들은 나머지를 읽지 않을 수도 있어요. 대부분의 확인·통신 토스트 제목은 명사로 시작하고 과거 시제 동사로 끝나는 수동태(passive voice)를 사용해요. 예를 들어 "File saved"나 "App was updated"처럼요.

Confirmation toast title

확인 토스트 제목

Communication toast title

통신 토스트 제목

진행 토스트에서는 일어나고 있는 프로세스를 설명하는 -ing 동사로 제목을 시작하고 명사로 끝내세요. 예를 들어 "Uploading file"이나 "Migrating your data"처럼요. 여러 유사한 프로세스가 동시에 일어난다면 하나의 토스트로 결합하고 제목에 요약하세요. 예를 들어 "Uploading 6 files to OneDrive"처럼요.

제목의 첫 단어만 대문자로 쓰고 끝 마침표는 생략하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization과 Periods을 참고하세요.

Progress toast title

진행 토스트 제목

Give additional context in the body (본문에서 추가 맥락 제공)

선택적 본문에 문제 해결 액션이나 다음 단계 같은 추가 정보를 포함하세요. 토스트는 작은 표면이고 빠르게 사라지므로, 본문 콘텐츠는 한눈에 훑기 쉬워야 해요. 본문 콘텐츠는 60자 이하로 제한하세요.

본문 콘텐츠가 이메일이나 멘션 같은 외부 소스에서 가져온다면 한 줄 뒤에서 잘린다는 점을 유의하세요.

Toast body

Use status text to describe progress (상태 텍스트로 진행 설명)

사람들에게 가능한 한 정확한 진행 설명을 주세요.

  1. 시간 기반 추정에는 "X minutes remaining"을 사용하세요. 예: "10 minutes remaining"
  2. 백분율 기반 추정에는 "X% complete"를 사용하세요. 예: "65% complete"
  3. 파일 크기 기반 추정에는 "X of X [unit of measure]"을 사용하세요. 예: "10 of 17 GB"

상태 텍스트 끝의 마침표는 생략하세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

Status text

Buttons should respond to title text (버튼은 제목 텍스트에 응답해야 해요)

제목의 핵심 메시지에 대한 구체적인 응답으로 버튼 라벨을 작성하세요. 예를 들어 "An app was shared with you"라는 제목에는 "Open app"이라는 버튼 텍스트가 있어요.

간결하게—링크 텍스트를 한두 단어, 36자 이하로 제한하세요. 보통 단일 동사가 가장 좋아요. 동사가 무엇을 대상으로 하는지 애매하면 명사를 포함하세요. 예를 들어 "Open" 대신 "Open app"처럼요.

Toast button

더 알아보기 (Learn more)