Dialog
다이얼로그(Dialog)는 기본 페이지 위에 오버레이 되어 뜨는 모달로, 사용자의 특정 동작에 대한 중요한 피드백을 제공하거나 사용자 확인을 받는 데 사용되는 구성 요소입니다.
Type
사용자는 다이얼로그가 닫힐 때까지 페이지와 상호작용할 수 없으므로 사용자의 흐름을 방해하지 않기 위해 신중하게 사용해야 합니다.
Dialog Main Title
Lorem ipsum dolor sit amet consectetur. Sem potenti accumsan erat pretium. Eu neque feugiat amet fringilla velit tellus et nisi pellentesque.
기본 모달
Anatomy
- Header : 제목, 서브 제목(선택)
- 닫기 버튼
- Body : 영역 내엔 Form, Text 등 다양한 콘텐츠가 들어갈 수 있습니다.
- Footer(선택) : 단순 내용 전달 모달엔 상단 닫기 버튼만 사용합니다.
Size
다이얼로그 사이즈는 width를 기준으로 3가지로 구분됩니다.
Dialog Size: sm (500px)
width: 500px
Dialog Size: md (800px)
width: 800px
Dialog Size: lg (1000px)
width: 1000px
Scrim
적용되는 화면에 따라 다이얼로그가 나올때 스크림을 사용 여부를 결정합니다.
scrim { background : black; opacity : 0.5; }
scrim { background : black; opacity : 0.5; }
사용 가이드
이중 모달
모달 위에 이중 모달 사용을 지양합니다. 상황에 따라 일련의 과정이 필요한 경우 다른 디자인 패턴을 고려 하세요.
종료 시 확인 모달은 본 가이드에 제외 대상입니다.
종료 시 확인 모달은 본 가이드에 제외 대상입니다.
Don’t
구분선을 과도하게 사용하면 화면의 복잡성이 가중되어 사용자의 인식이 복잡한 화면처럼 보일 수 있으므로 적절히 사용합니다.
Header 타이틀
Header에 타이틀을 필수로 사용해야 합니다.
Do
Don’t
Footer 버튼 그룹
Footer에 3개의 버튼이 필요할 때 한 쪽에 몰아 넣지 말고 적절히 분배하여 사용합니다.
Do
Don’t