Message bar

Message bar (메시지 바)

Message bar는 페이지, drawer, dialog, 카드처럼 제품 전체나 현재 서피스의 상태에 대한 중요한 정보를 전달해요. 화면에 상태를 알려주는 안내 배너라고 생각하면 돼요.

메시지가 파괴적인 액션을 막기 위한 것이라면 dialog를 시도해 보세요. 메시지가 시기에 민감하지만 다른 위치의 활동이나 상태와 관련된다면 toast 알림을 시도해 보세요.

출처: Message bar 문서

본문

Types (유형)

Info (정보) — 즉각적인 액션이 필요하지 않지만 경험을 개선할 수 있는 유용한 정보를 전달할 때 정보 메시지 바를 사용하세요. 예를 들어 앱에 업데이트가 있거나 보고서를 개인화할 수 있을 때처럼요. 링크와 버튼은 선택 사항이에요.

Success (성공) — 나타나는 서피스, 전체 앱, 또는 방금 완료한 작업과 관련해 무언가 제대로 되었음을 전달할 때 성공 메시지 바를 사용하세요. 링크와 버튼은 선택 사항이에요.

Warning (경고) — 연결 문제 같은 일시적 상태나 해로워지거나 파괴적이 될 수 있는 상태를 알릴 때 경고 메시지 바를 사용하세요. 경고는 잠재적 결과를 경고하지만 작업 진행을 막지는 않아요. 문제를 예방하는 데 도움이 되도록 경고에는 버튼, 링크, 또는 둘 다를 포함해야 해요.

Error (오류) — 앱이 연결을 잃거나 잘못된 정보를 입력하는 것처럼 계속하기 전에 해결해야 할 문제가 생겼을 때 오류 메시지 바를 사용하세요. 오류는 사람들이 작업을 진행하지 못하도록 막아요. 문제 해결을 돕기 위해 오류 메시지 바에는 버튼, 링크, 또는 둘 다를 포함해야 해요.

Behavior (동작)

Reflow (리플로우)

메시지 바의 컨테이너는 유연해서, 콘텐츠와 메시지 바가 놓인 서피스를 수용하도록 높이와 폭 모두에서 성장할 수 있어요. 메시지 바 콘텐츠는 절대 잘리지(truncate) 않아요. 더 깔끔한 레이아웃을 위해 두 번째 줄 이후 리플로우는 메시지 바의 액션을 본문 아래로 밀어내요.

전체 페이지 바는 페이지 폭에 맞으면서 전체 메시지를 보여주도록 높이를 늘려요. 컨테이너 안의 메시지도 마찬가지로 해당 컨테이너의 콘텐츠 영역 폭에 맞고 필요에 따라 리플로우돼요.

Dismissal (닫기)

메시지 바는 사람들이 치울 수 있도록 항상 Close(X) 버튼으로 닫을 수 있어요. 하지만 누군가 필요한 액션을 취하지 않고 경고나 오류 메시지를 닫으면, 메시지 바는 다음 세션에 다시 나타나고 문제를 해결하는 액션을 취할 때까지 계속 다시 나타나요.

시스템이 메시지를 선제적으로 닫도록 조건을 설정할 수도 있어요.

Layout (레이아웃)

Stacking multiple message bars (여러 메시지 바 쌓기)

페이지나 콘텐츠 컨테이너 상단에 메시지 바가 두 개 이상 있을 수 있어요. 메시지 바를 쌓을 때는 다음 순서대로 가장 치명적인 것부터 덜 치명적인 것으로 유형별로 정렬하세요:

  1. Error
  2. Warning
  3. Success
  4. Informational

Collapsible message bars (접을 수 있는 메시지 바)

여러 메시지 바가 있을 때 공간을 절약하려면 선택적으로 아코디언(accordion) 안에 그룹화할 수 있어요. 이 경우 심각도가 가장 높은 메시지가 상단에 표면화되어 제목 역할을 하고, 남은 메시지 수를 보여주는 배지가 함께 표시돼요.

여러 메시지가 닫혀서 단일 메시지만 남으면 "Dismiss all" 액션이 "Dismiss"로 바뀌고 메시지 바는 단일 줄 상태로 전환돼요. 기본적으로 메시지 바는 메시지가 길면 줄바꿈하고 전체 콘텐츠를 표시해요. 그러나 공간이 제한된 시나리오에서는 단일 메시지도 단일 줄 접힘 상태로 표시되고 남은 콘텐츠는 잘릴 수 있어요.

App or feature-level message bars (앱 또는 기능 수준 메시지 바)

페이지 수준 메시지 바는 전체 앱이나 현재 페이지의 상태에 대한 정보를 전달해요. 메인 콘텐츠 영역의 명령 바 아래에 나타나요. 사이드 내비게이션 위에는 배치하지 마세요.

Container-level message bars (컨테이너 수준 메시지 바)

컨테이너 수준 메시지 바는 섹션, 탭, 카드, dialog, drawer 같은 특정 콘텐츠 컨테이너 안의 콘텐츠 상태를 알려줘요.

일반적으로 컨테이너 상단이나 제목·헤더 바로 아래에 메시지 바를 배치하세요. 여러 영역에서 피드백을 전달해야 한다면 페이지에 메시지 바를 두 개 이상 사용하세요.

컨테이너 수준 메시지 바를 사용할 때는 모서리가 둥글므로 여백을 고려하세요. 메시지 바는 컨테이너 수준 인스턴스의 320픽셀 폭보다 작을 수 있어요.

Tab-level(탭 수준) — 탭 수준 메시지 바는 탭 안의 콘텐츠 상태를 알려줘요. 탭 바로 아래, 해당 탭의 메인 콘텐츠 위에 배치하세요.

Card-level(카드 수준) — 카드 수준 메시지 바는 카드의 상태를 알려줘요. 구분선이 있는 카드에서는 카드 제목 아래, 구분선이 없는 카드에서는 카드 헤더 아래에 배치하세요.

Within a form(폼 안) — 메시지 바는 폼의 하나 이상의 문제를 사용자에게 알려줘요. 오류와 함께 폼이 제출되면 포커스가 폼 상단의 메시지 바로 이동하고, 필요하면 페이지를 스크롤해요. 그런 다음 문제가 있는 필드 옆의 하나 이상의 인라인 오류 메시지로 구체적인 오류를 강화해요.

Drawer-level(drawer 수준) — drawer 수준 메시지 바는 drawer의 보조 콘텐츠나 액션의 상태를 알려줘요. 헤더 아래, 콘텐츠 영역 상단에 배치하세요.

Accessibility (접근성)

오류와 경고 메시지 바는 assertive(강제) aria-live를 가져서 스크린 리더가 하고 있는 다른 공지를 중단해요. 정보 및 성공 메시지 바는 polite(공손)해서, 누군가 선택할 때만 읽혀요.

너무 많은 중단은 흐름을 방해할 수 있어요. 너무 많은 assertive 메시지 바로 흐름에 과부하를 주지 않도록 중요한 메시지만 강조하세요.

Content (콘텐츠)

  1. 제목 (Title) (선택) — 가장 중요한 정보를 앞세워 훑어보기 쉽게 해요.
  2. 본문 (Body) (필수) — 메시지를 명확하고 빠르게 요약해요.
  3. 닫기 (Dismiss) (선택) — 사용자가 메시지 바를 치울 수 있게 해요.
  4. 링크 (Link) (선택) — 메시지와 관련된 추가 정보를 제공해요.
  5. 버튼 (Button) (선택) — 메시지와 관련된 명확한 다음 단계를 제공해요.

Communicate the main message in the title (제목에 핵심 메시지를 담으세요)

메시지 바 제목은 빠른 훑어보기와 이해를 돕고, 특히 주요 메시지에서 떨어져 나타나는 버튼을 포함하는 더 넓은 메시지 바에서 유용해요. 가장 중요한 정보를 굵은 제목에 넣으면 그 정보를 버튼 액션과 연결하는 데 도움이 돼요.

주요 정보를 명확하고 간결하며 구체적인 단어나 문구로 요약하세요. 예를 들어 "Almost out of storage"가 "Warning"보다 더 명확해요.

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

Give additional context in the message body (메시지 본문에서 추가 맥락을 제공하세요)

사용자가 진행하기 위해 필요한 명확하고 간결하며 실행 가능한 정보를 제공하세요. 한두 개의 짧은 문장을 목표로 하세요. 메시지 본문에서 제목을 반복하지 말고 그 위에 덧붙이세요.

각각 약 100자 정도인 2줄보다 긴 메시지는 피하세요. 추가 콘텐츠는 항상 줄바꿈되고 절대 잘리지 않아 메시지 바를 크고 훑어보기 어렵게 만들 수 있어요. 더 긴 설명이 필요하면 대신 문서로 연결하는 링크를 거세요.

Write useful success messages (유용한 성공 메시지 작성)

성공 메시지에서 평범한 작업 완료를 축하하지 마세요. "success"나 "successfully"라는 단어를 피하세요. 대신 무엇이 준비되었거나 변경되었는지를 구체적으로, 다른 유용하거나 실행 가능한 세부 사항과 함께 말하세요.

성공 메시지는 무엇이 변경되었는지 구체적으로 말해요.

Use links for additional info (추가 정보에 링크 사용)

오류 및 경고 메시지는 콘텐츠로 가는 링크나 액션을 취할 버튼, 또는 둘 다를 가져야 해요. 링크와 버튼은 성공 및 정보 메시지에서는 선택 사항이에요.

메시지와 관련된 보충 정보에 링크를 사용해 사람들이 정보에 입각한 결정을 내리고 메시지를 보는 이유를 이해하도록 도우세요.

링크 텍스트를 "Learn"이나 "Explore" 같은 동사로 시작한 다음, 구체적으로 무엇을 배우게 될지 설명하세요. 좋은 링크 텍스트는 사람들이 링크가 어디로 가는지, 거기서 무엇을 할 수 있는지 정확히 예측하게 해 줘요. URL을 링크 텍스트로 사용하지 말고 "Click here"를 절대 쓰지 마세요. 좋은 링크 작성에 대한 자세한 내용은 Link Content를 참조하세요.

링크를 사용해 메시지와 관련된 추가 정보를 제공하세요.

Write buttons in response to titles (제목에 응답하는 버튼 작성)

버튼 라벨은 제목과 메시지에 직접 응답해야 해요. 버튼을 선택하면 메시지 바가 생긴 이유를 해결할 것임이 분명해야 해요.

보통 단일 동사가 가장 좋아요. 동사의 의미에 해석의 여지가 있다면 명사를 포함하세요. 예를 들어 "Renew license"나 "Start trial"이라고 말하세요. 좋은 버튼 라벨 작성에 대한 자세한 내용은 Button Content를 참조하세요.

버튼 라벨은 메시지 제목에 대한 명확하고 직접적인 응답이어야 해요.

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

더 알아보기 (Learn more)

  • Message bar 스토리북 및 React/Web Components 가이드 확인
  • 파괴적 액션 방지에는 dialog, 시기 민감 알림에는 toast를 함께 참고하세요
  • Microsoft Writing Style Guide: Capitalization, Link Content, Button Content