Dialog
Dialog (다이얼로그)
Dialog는 보조적인 서피스(surface)로, 유용한 상호작용을 제공하거나 삭제 확인처럼 계속 진행하기 전에 특정 행동을 하도록 요구할 때 사용해요. 마치 잠깐 화면 위에 나타나는 작은 창이라고 생각하면 쉬워요.
Dialog는 종종 사용자의 흐름을 끊는 요소라서, 정말 중요한 액션에만 사용해야 해요. 방금 진행한 액션에 대한 업데이트만 전달하고 별다른 조치가 필요 없는 경우에는 toast를 쓰는 편이 좋아요. 현재 작업 흐름에 영향을 주지 않는 부가적인 맥락을 전달해야 한다면 popover를 고려해 보세요.
출처: Dialog 문서
본문
Types (유형)
Modal (모달) — 모달 다이얼로그는 뒤에 있는 페이지 콘텐츠를 비활성화하고, 보통 그 내용을 흐리게(dim) 처리해 다이얼로그 콘텐츠를 부각시켜요. 앱에 로그인하기처럼 집중이 필요한 작업을 수행할 때 사용하세요.
Non-modal (비모달) — 비모달 다이얼로그는 뒤에 있는 페이지 콘텐츠와 계속 상호작용할 수 있게 해 주고, 찾기 및 바꾸기(find and replace)처럼 작업 흐름을 도와줘요. 작업 중에 보조 도구로 사용하세요.
Alert (알림) — 알림 다이얼로그는 사용자가 결정을 내리도록 요구하는 모달이에요. 알림 다이얼로그는 특별한 role을 가져서 보조 기술(assistive technology)이 다른 다이얼로그보다 더 긴급하게 다루도록 해 줘요(예: 시스템 알림음 재생). 알림 다이얼로그는 강제적인 중단 요소라서, 저장되지 않은 변경사항이나 파괴적인 액션 확인처럼 잠재적 손실이 있는 경우에만 사용하세요.
Behavior (동작)
Dismissal (닫기)
누구나 컨테이너 바깥 영역을 선택하거나 Esc 키를 누르거나 푸터 버튼을 선택해서 모달 다이얼로그를 닫을 수 있어요. 다이얼로그를 닫을 Cancel 버튼이 없다면 우측 상단에 Close 버튼을 넣을 수 있어요.
비모달 다이얼로그는 기본적으로 우측 상단에 Close 버튼이 있어요. Close 버튼을 선택하거나 Esc 키를 누르거나 푸터 버튼을 선택해서 닫을 수 있어요. 비모달 다이얼로그는 뒤의 콘텐츠와의 상호작용을 허용하므로, 다이얼로그 바깥 영역을 선택해서는 닫을 수 없어요.
알림 다이얼로그는 푸터에 있는 버튼 중 하나를 선택해야만 닫을 수 있어요.
필요한 액션만 유지하세요 — 최상의 사용성을 위해, 모달 다이얼로그를 나가는 데 필요한 추가 키 입력 횟수를 줄이세요.
중복 옵션은 넣지 마세요 — 액션이 너무 많으면 인지 부하(cognitive load)가 늘어나요. 다이얼로그는 사람들이 액션을 취하도록 돕는 것이므로 옵션을 단순하게 유지하세요. 액션이 너무 많으면 결정을 내리기 어려워지고 다이얼로그를 나가는 데 추가 키 입력이 필요할 수 있어요.
Scrolling (스크롤)
기본적으로 헤더(다이얼로그 제목과 닫기 아이콘 포함)와 푸터(버튼 액션 포함)는 스크롤이 발생해도 다이얼로그 컨테이너의 상단과 하단에 고정 유지돼요. 넘치는 본문 콘텐츠는 그 뒤에서 스크롤돼요.
Forms in dialogs (다이얼로그 안의 폼)
현재 작업과 관련된 정보를 요청하기 위해 다이얼로그에 필드를 배치할 수 있어요. 다이얼로그 안의 폼은 핵심 목표에 집중하고 관련성 있게 유지하세요. 다이얼로그 폼이 너무 길면 사람들이 처음 작업의 맥락을 잊어버릴 수 있어요.
다이얼로그 안에 폼을 구현하려면 <DialogSurface>와 <DialogBody> 사이에 <Form> 요소를 넣으세요. 그러면 푸터의 버튼이 제출(submit) 액션으로 올바르게 동작해요.
다이얼로그에서 폼 검증에 대한 자세한 내용은 field 컴포넌트를 참고하세요.
Layout (레이아웃)
다이얼로그는 세 부분으로 나뉘어요:
- 헤더 (Header) — 제목과 닫기 아이콘을 포함할 수 있어요.
- 본문 (Body) — 선택적 본문 콘텐츠.
- 푸터 (Footer) — 선택적 푸터로 최대 세 개의 액션을 포함할 수 있어요. 푸터 없이 다이얼로그를 사용한다면 컨테이너 하단에 24픽셀의 여분 패딩을 추가하세요.
Accessibility (접근성)
Nesting dialogs (다이얼로그 중첩)
다이얼로그를 중첩하지 마세요. 다이얼로그에서 액션을 선택하면 작업 흐름에서 앞으로 나아가야 해요. 다이얼로그가 너무 많으면 원래 맥락에서 주의가 분산되고, 인지 장애가 있거나 확대 보기를 사용하는 사람들이 콘텐츠와 상호작용하기 어려워져요.
Dialog focus (다이얼로그 포커스)
다이얼로그가 열리면 키보드 포커스는 컨테이너 안의 첫 번째 상호작용 요소로 이동해야 해요. 모달 및 알림 다이얼로그는 키보드 포커스를 가둬요(trap). 키보드로 탐색하는 사람들도 Tab으로 브라우저 안팎을 오가며 상호작용할 수 있지만, 페이지의 다른 포커스 가능 요소에는 접근할 수 없어요.
다이얼로그에는 Esc 키를 누르거나 다이얼로그 바깥 영역을 선택하지 않고도 나갈 수 있도록 최소한 하나의 상호작용 요소가 있어야 해요.
다이얼로그가 닫히면 키보드 포커스를 다이얼로그를 연 컴포넌트로 되돌려야 해요.
Content (콘텐츠)
Communicate the main message in the title (제목에 핵심 메시지를 담으세요)
다이얼로그 제목은 필수이며, 핵심 정보를 명확하고 간결하며 구체적인 문장이나 질문으로 설명해야 해요. 제목은 본문 콘텐츠를 설명하는 것이면 안 돼요. 예를 들어 "Error"를 제목으로 쓰지 말고, "Your session ended." 같은 정보성 문장을 쓰세요.
문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 첫 단어만 대문자로 써요. 제목이 질문이 아니라면 끝 문장 부호를 쓰지 마세요.
Give additional context in the body (본문에서 추가 맥락을 제공하세요)
필요하다면 본문 콘텐츠 영역을 추가 정보나 지침에 사용하세요. 본문에서 제목을 반복하지 마세요. 본문 콘텐츠는 실행 가능해야 하며, 가장 중요한 정보를 앞에 배치하세요. 액션에 어떤 결과가 따른다면 그것을 먼저 제시하세요.
Buttons labels should respond to the title text (버튼 라벨은 제목 텍스트에 응답해야 해요)
제목의 핵심 정보에 대한 구체적인 응답이 되도록 버튼 라벨을 작성하세요. "Delete this file"이라는 제목에는 "Delete"와 "Cancel" 버튼이 적합해요. 간결하게 작성하고 라벨은 한두 단어로 제한하세요. 보통 단일 동사가 가장 좋아요. 동사의 의미에 해석의 여지가 있다면 명사를 포함하세요. 예를 들어 "Delete" 또는 "Delete file"처럼요.
문장형 대문자 표기를 사용하고(첫 단어만 대문자) 끝 문장 부호를 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization와 Periods를 참고하세요.
더 알아보기 (Learn more)
- Dialog 스토리북 및 React/Web Components 가이드 확인
- 데이터 손실 위험이 있는 액션 확인에는 dialog, 부가 맥락 전달에는 popover·toast를 함께 고려하세요
- Microsoft Writing Style Guide: Capitalization, Periods