Drawer

Drawer (드로어)

Drawer는 레이아웃의 한쪽 가장자리에서 미끄러져 들어오는 보조 콘텐츠 서피스예요. 메인 콘텐츠와 관련된 보충 정보와 간단한 액션에 사용해요. 옆에서 슬라이드로 열리는 작은 패널이라고 생각하면 돼요.

메인 레이아웃의 특정 부분과 관련된 짧은 정보에는 drawer가 과할 수 있어요. 그럴 때는 tooltip이나 popover를 사용해 보세요. 사용자가 취하려는 액션을 확인받아야 한다면 dialog를 사용하세요.

출처: Drawer 문서

본문

Types (유형)

Inline (인라인) — 인라인 드로어는 메인 페이지 콘텐츠와 나란히 배치되는 수동적인(passive) 서피스예요. 메인 콘텐츠와 드로어 콘텐츠를 동시에 보고 상호작용하는 것이 유용할 때 사용하세요.

Overlay (오버레이) — 오버레이 드로어는 메인 페이지 콘텐츠의 전체 또는 일부를 덮는 침습적인(intrusive) 서피스예요. 드로어 속 콘텐츠에 더 많은 주의를 끌 때 사용하세요.

Behavior (동작)

Modality (모달성)

오버레이 드로어는 메인 페이지 콘텐츠 위에 떠 있으며 기본적으로 모달이에요. 기본 동작은 메인 페이지 콘텐츠를 회색으로 처리하고 상호작용을 비활성화해요.

모달성은 명확하고 신속하게 완수할 수 있는 중요한 작업에만 쓰세요. 다른 모달 패턴과 마찬가지로 한 번에 너무 많이 띄우지 마세요. 다음 단계가 무엇인지 항상 명확해야 해요. 차단 서피스가 너무 많으면 원래 맥락에서 주의가 분산되고 콘텐츠와 상호작용하기 어려워져요.

한 번에 여러 오버레이 드로어를 띄우지 마세요 — 드로어는 유용한 맥락과 명확한 다음 단계를 제공해야 해요.

선택적으로 모달성을 끄고 사람들이 메인 페이지 콘텐츠와 계속 상호작용하도록 할 수 있어요. 이 동작은 카트의 항목을 보거나 새 알림을 확인하는 것처럼, 액션보다는 정보 제공에 가깝고 쉽게 닫을 수 있는 콘텐츠에 유용해요.

쉽게 닫을 수 있는 한눈에 보는 정보에는 오버레이 드로어를 사용하세요 — 오버레이 드로어는 주의해서 쓰세요. 거의 항상 페이지의 이미지나 텍스트, 심지어 닫기 같은 액션까지 막아요.

Collapsing vs dismissing (접기 vs 닫기)

드로어는 보통 화면의 버튼과 상호작용해서 열어요. 같은 버튼이나 포함된 닫기 아이콘과 상호작용해서 다시 닫을 수 있어요. 드로어에 입력이나 체크박스처럼 정보를 모으는 컴포넌트가 있다면, 드로어를 닫을 때 진행 상황을 잃을 수 있음을 꼭 알려주세요.

Prolonged flows and multi-step tasks (긴 흐름과 다단계 작업)

드로어는 다단계 작업을 허용하지만 2~3단계로 제한해야 해요. 드로어는 항상 상위 뷰와 관련된 정보와 액션을 제공해야 해요. 예를 들어 피드백을 요청하는 드로어는 첫 화면에 폼 필드가 있고, 두 번째 화면에 확인과 후속 단계가 있을 수 있어요. 더 길거나 복잡한 작업과 워크플로우에는 더 집중된 서피스를 고려하세요.

Errors and confirmation messages (오류와 확인 메시지)

드로어 안의 message bar나 빈 상태(empty state)로 드로어 콘텐츠의 상태를 전달하세요. 전달하는 상태에 가장 가까운 위치에 컴포넌트를 배치하세요. 예를 들어 드로어의 한 섹션만 오류 상태라면 그 섹션에 인라인으로 message bar를 두고, 오류가 여러 개라면 드로어 상단에 message bar를 두세요. 드로어 전체를 렌더링할 수 없다면 빈 상태를 시도해 보세요.

사용자가 드로어에서 취하려는 액션, 특히 데이터 손실로 이어질 수 있는 액션은 dialog로 확인하세요. 잦은 확인이 필요한 액션, 특히 오버레이 드로어에는 액션을 넣지 마세요. 추가 서피스가 너무 많으면 원래 맥락에서 주의가 분산될 수 있어요.

Wrapping and overflow (줄바꿈과 넘침)

드로어 콘텐츠는 드로어 폭에 맞춰 줄바꿈돼요. 콘텐츠가 드로어 높이를 초과하면 넘친 콘텐츠는 기본적으로 스크롤되지 않아요. 본문 콘텐츠를 <DrawerBody> 컴포넌트로 감싸면 스크롤이 활성화돼요.

Layout (레이아웃)

Placement (배치)

드로어는 상황별 액션과 정보를 위한 예측 가능한 서피스를 제공해야 해요. 경험 전반에서 비슷한 콘텐츠의 드로어 배치를 일관되게 유지하세요. 제품 간 일관성을 위해 다른 Microsoft 앱에서 드로어를 어떻게 배치하는지 확인해 보세요. 관례를 깨지 마세요. 예를 들어 사람들은 일반적으로 탐색 패턴은 왼쪽, 알림 패턴은 오른쪽에 있을 것으로 기대해요.

Anatomy (구성)

드로어는 세 부분으로 구성된다고 생각하세요: 헤더, 본문, 푸터.

Header (헤더) (필수) — 설명적인 드로어 제목, 선택적 닫기 버튼, 그리고 뒤로 가기나 새로 고침 같은 최상위 빠른 액션을 포함해요.
Body (본문) (필수) — 드로어의 주요 정보나 액션을 포함해요. 드로어 본문은 사용자가 작업을 완수하도록 돕는 다양한 콘텐츠 유형(목록, 데이터 시각화, 체크박스·라디오 그룹 등)에 맞게 유연해요.
Footer (푸터) (선택) — 두드러지는 버튼 액션을 포함해요. 기본(primary) 버튼은 다른 버튼의 왼쪽에 배치하세요.

콘텐츠가 긴 드로어에서는 헤더와 푸터를 고정(sticky)해서 드로어의 상단과 하단에 유지할 수 있어요. 스크롤 상태에서 헤더와 푸터는 떠오르고 본문 콘텐츠는 그 뒤에서 스크롤돼요. 400% 확대와 작은 뷰포트에서는 헤더와 푸터가 비고정(non-sticky)이 되어 메인 콘텐츠를 부각시켜요.

Size (크기)

기본 제공되는 드로어 크기는 small, medium, large, full(전체 폭)이에요. 기본 폭은 small이에요.

모달 오버레이 드로어처럼 전체 폭 드로어도 뒤의 콘텐츠를 가려요. 사람들이 메인 페이지의 정보를 참조하는 것이 유용하다면 사용하지 마세요.

Responsive drawers (반응형 드로어)

일부 인라인 드로어는 제품 팀이 정의한 브레이크포인트에 따라 나타나거나 사라져요. 흔히 이런 드로어는 접을 수 있는 옵션 없이 항상 펼쳐져 있어요. 하지만 레이아웃이 특정 브레이크포인트에 도달하면 드로어가 접혀요. 접힌 상태에서는 호버나 포커스 시 다시 호출할 수 있어요.

Content (콘텐츠)

Summarize the drawer's contents in the title (제목에 드로어 내용을 요약하세요)

제목을 간결하되 정보성 있게 작성하세요. 제목은 사람들이 드로어에서 무엇을 찾을 수 있는지, 무엇을 완수하는 데 도움이 되는지 알려줘야 해요.

문장형 대문자 표기(sentence style capitalization)를 사용하고 끝 문장 부호를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

Communicate the main message in the body (본문에 핵심 메시지를 담으세요)

본문을 사용해 빠르게 요점에 도달하세요. 드로어는 주 작업에서 주의를 분산시키지 않도록 훑어보기(scannable)가 쉬워야 해요. 개인정보 처리방침이나 이용약관처럼 긴 텍스트 블록에는 사용하지 마세요.

폼 필드를 포함할 때는 라벨, 도움말 텍스트, 플레이스홀더 텍스트를 사용해 정보 입력을 쉽게 해 주세요. 자세한 내용은 Field 콘텐츠 가이드를 참고하세요.

Button labels should respond to the title (버튼 라벨은 제목에 응답해야 해요)

버튼은 다음에 일어날 일을 명확히 전달하는 간결하고 능동적인 언어를 사용해야 해요. 보통 단일 동사가 가장 좋지만, 명확성을 돕는다면 한두 단어를 더 포함하세요. 가능하면 푸터의 버튼은 제목에 대한 응답이어야 해요.

더 알아보기 (Learn more)

Drawer 스토리북 및 React/Web Components 가이드 확인
짧은 부가 정보에는 tooltip·popover, 액션 확인에는 dialog를 함께 고려하세요
Microsoft Writing Style Guide: Periods