버튼은 최소 1개에서 최대 3개까지 사용 가능하며 우선순위가 높은 버튼은 Text 컬러 Blue-500을 적용하여 가장 위치 해야 합니다. 이전으로 돌아갈 수 있는 버튼을 반드시 포함해야 합니다.

Do : 스마일박스 정보 한정하여 텍스트 크기 변경 가능

스마일박스 정보에 한정하여 텍스트 크기를 변경하여 사용 가능합니다. (Library 사용 시 레이어에서 Smilebox Info 눈을 켜서 사용해 주세요.)

Don’t : 닫기 아이콘 버튼은 사용 불가능

Dialog는 이전 화면으로 돌아갈 수 있는 텍스트 버튼을 반드시 포함하여야 하며 닫기 아이콘 버튼은 중복 기능이므로 사용하지 않습니다.

Do : Title은 생략 가능

Title은 생략 가능하며 Body text만으로 Dialog의 메세지를 전달할 수 있습니다.

Don’t : Title은 서술형으로 사용 불가능

Title은 Dialog의 목적으로 빠르게 파악할 수 있도록 명사형으로 간략하게 사용해야 하며 Body text와 구분하여 사용해야 합니다.

Dialog의 가로폭은 280 사이즈 고정이며 높이는 최대 360 사이즈까지 가변 가능합니다. Contents 영역은 상하 32, 좌우 마진 16 고정이며 Title과 Body 텍스트간의 마진은 8 입니다. 버튼의 높이는 1개당 44 고정입니다.

스마일박스 정보 안내에 한정하여 인증번호는 Gmarket sans-Regular / 22 / Blue-500, 배송지점은 System font-Regular / 14 / Gray-600 으로 폰트 크기 및 컬러 변경이 가능합니다.

Dimmed는 배경과 Dialog를 구분시키는 투명한 표면 요소입니다. 화면의 나머지 부분에 접근 할 수 없음을 표현하고 주의를 집중시키기 위해 Dialog 뒤에 Dimmed를 사용합니다. Overlay는 컬러 Black, Opacity 50%를 사용합니다.

이전글

Chips

다음글

Dropdowns