Popup
사용자의 즉각적인 주의와 응답이 필요한 상황에서 사용하는 모달 요소입니다. 사용자의 현재 작업을 중단 시키고 팝업 내용에 집중하도록 하며, 필수적인 결정이나 확인이 필요한 경우에 사용합니다.
모든 사이즈의 Popup은 두가지 타입을 쓸 수 있습니다. 사용자가 원하는 높이로 고정하여 콘텐츠를 보여주고 싶을 때는 고정을, 시스템에서 제공하는 기본 높이를 사용할 때에는 변동 타입을 사용합니다.
- 높이 고정(Fixed)타입: 400*480px, 콘텐츠가 영역을 초과할 시 스크롤이 발생합니다.
- 높이 변동(Hug)타입: 400*760px, 콘텐츠가 최대 높이까지 늘어나다 스크롤이 발생합니다.
- Padding: 20px
- 높이 고정(Fixed)타입: 480*560px, 콘텐츠가 영역을 초과할 시 스크롤이 발생합니다.
- 높이 변동(Hug)타입: 480*760px, 콘텐츠가 최대 높이까지 늘어나다 스크롤이 발생합니다.
- Padding: 24px
- Strong: 버튼이 상하로 배치되어 Main action을 강조하는 타입으로 Xlarge 이상의 Popup에서는 사용을 지양합니다.
- Neutral: 버튼이 양옆으로 배치되어 메인행동과 보조행동의 선택을 대등하게 제공하는 UX를 의도할 때 사용하는 타입입니다. 너비 960px 이상의 Popup에서는 사용을 지양합니다.
- Compact: 버튼이 오른쪽으로 배치되어 너비 560px 이상의 Popup에서 시선을 분산시키지 않고 행동에 집중할 수 있도록하는 타입입니다. 560px 이하의 Popup에서는 사용을 지양합니다.
- Cancel: 너비 960px 미만의 타입에서 취소, 확인 등 단순 Popup을 종료하는 용도로 사용하는 버튼입니다.
화이트 스페이스의 활용을 극대화 할 수 있는 배치로 콘텐츠의 주목도가 좋은 배치입니다. 사용자에게 중요한 알림, 주요 상태를 표현할 때 시용하면 효과를 극대화 할 수 있습니다. 짧은 텍스트와 작은 모달에서 더 나은 균형을 제공할 수 있습니다.
일반적인 시선의 흐름을 따른(Left -> Right / Top -> Bottom) 가독성이 좋은 배치로 비교적 긴 컨텐츠에서 조화롭게 사용 될 수 있으며 사용자에게 보다 긴 정보의 내용을 효과적으로 전달하기 위해 사용합니다.
