11번가

Design System

Dialog

다이얼로그(Dialog)는 유용한 상호 작용을 제공하거나 삭제 확인과 같은 작업을 사용자에게 요구하거나 알릴 경우 사용합니다.
중요한 정보를 제공하거나 결정을 요청하기 위해 앱 콘텐츠 앞에 나타나는 일종의 모달 창입니다.

Types

Dialog는 사용성에 따라 Component Type이 구분됩니다.
사용자가 수행해야 하는 단기 작업을 표시하며 사용자는 대화 상자가 닫힐 때까지 페이지와 상호 작용할 수 없으므로 사용자의 흐름을 방해하지 않기 위해 신중하게 사용해야 합니다.

Alert Dialog Component Type
  1. Alert Dialog : 사용자가 필수적으로 수행해야 할 경우 사용합니다.
  2. Simple Dialog : 컨텐츠의 힌트 텍스트와 같은 정보를 제공 시 사용하며, ⓘ와 같은 아이콘을 클릭후 정보를 노출하고 X버튼으로 창을 닫습니다.
  3. Confirmation Dialog : 사용자가 선택하거나 입력하는 기능을 제공하며 예(아니오)/확인(취소)로 창을 닫습니다.

Anatomy

  1. Title : 모달 제목을 포함합니다.
  2. Body Text : 모달의 목적에 대한 개요를 제공하고 선택적으로 작업을 완료하기 위한 컨트롤을 제공합니다.
  3. Button : 최소 1개에서 최대 2개까지 사용 가능하며 우선순위가 높은 버튼은 Text 컬러 11STREET_Red를 적용합니다.

Scrolling

기본적으로 Title(대화 상자 제목 및 닫기 아이콘 포함) 및 바닥글(버튼 작업 포함)은 스크롤하더라도 대화 상자 컨테이너의 위쪽과 아래쪽에 영구적으로 유지됩니다.

Spec

Color

사용자가 필수적으로 수행해야 하는 경우 응답 버튼명에는 Primary Color(11STREET_Red)를 사용하여 사용자가 명확하게 행동할 수 있게 사용합니다.

Content

타이틀(제목)은 필수이며 명확하고 간결하게 주요 전달메시지를 사용하며 버튼은 제목에 응답할 수 있는 버튼명을 제공합니다.

Placement

중앙 정렬을 기본으로, 좌측 마진은 16으로 고정이며 Contents 영역 상하 여백은 24이며 Title과 Body text 간의 마진은 16입니다. 버튼의 높이는 48고정입니다.

Usage

Dialog 제목은 필수이며 명확하고 간결하며 구체적인 진술이나 질문으로 주요 정보를 설명해야 합니다. 대화는 사용자가 조치를 취하는 데 도움이 되어야 하므로 옵션을 단순하게 유지합니다.

Do

버튼명은 제목 텍스트에 응답인 버튼명을 작성합니다.

Don't

Dialog를 중첩하지 마십시오. Dialog가 많으면 원래 컨텍스트에서 주의가 분산되어 사용자가 어려움을 겪을 수 있습니다.