Snackbar

1. 컨테이너

스낵바의 모든 구성 요소를 담은 영역입니다.

스낵바는 고객에게 피드백을 전달하기 위해 사용하기로 약속된 컴포넌트입니다. 고객이 쿠팡 서비스를 이용하는 동안 스낵바가 피드백을 받을 수 있음을 알고, 피드백 내용을 빠르게 인지할 수 있도록 어떠한 상황에서나 기본 컨테이너 컬러를 사용합니다.

스낵바 컨테이너의 기본 컬러를 유지

스낵바 컨테이너에 기본 컬러가 아닌 다른 컬러를 사용

2. 본문

고객의 행동에 관한 피드백을 글로 안내합니다. 스낵바는 일시적으로 노출되기 때문에 한 눈에 내용을 이해할 수 있도록 2줄 이하의 간결한 문장을 사용합니다. 기본적으로 모든 문장 끝에 마침표를 붙입니다. 단, 명사 또는 명사형 종결 어미로 끝나는 문구는 마침표를 생략합니다.

2줄 이하의 간결한 문장을 사용

여러 내용을 포함한 3줄 이상의 문장을 사용

3. 아이콘

스낵바의 내용과 연관된 아이콘을 텍스트 왼쪽에 배치합니다.

본문 내용과 관련된 아이콘을 사용

본문 내용과 관련되지 않은 아이콘을 사용

4. 버튼

스낵바의 내용과 연관된 후속 행동을 유도하거나 진행된 작업을 취소할 때 활용합니다. 피드백 내용과 버튼이 명확히 구분되도록 Blue 텍스트 버튼을 사용합니다.

버튼 레이블에 본문과 동일한 컬러를 사용

간단한 피드백을 안내할 때

일반적인 행동에 관한 피드백을 알리는 상황입니다. 고객의 쇼핑을 방해하지 않도록 화면의 가장 윗부분에 스낵바를 배치합니다.

부차적인 행동을 유도할 때

피드백 내용과 관련한 부차적인 행동을 유도하는 상황입니다. 고객이 버튼을 쉽게 누를 수 있도록 화면의 가장 아랫부분에 스낵바를 배치합니다.
단, 화면 맨 아랫부분에 하단 네비게이션 바(GNB)가 있을 때는 스낵바를 GNB 영역 바로 위에 배치합니다.

진행 중인 작업과 연관된 유의사항을 안내할 때

유의사항과 같이 쇼핑을 하는 동안 반드시 확인해야 하는 피드백을 알리는 상황입니다. 피드백을 확실하게 인지할 수 있도록 고객이 보고 있는 영역과 가깝게 스낵바를 배치합니다.
단, 중요한 정보를 가리거나 고객의 다음 행동을 방해하지 않도록 배치에 유의합니다.

스낵바를 연속으로 노출할 때

기본적으로 스낵바는 한 화면 안에서 하나만 노출됩니다. 짧은 시간 안에 스낵바를 연속적으로 노출해야 할 경우, 새로운 스낵바를 기존 스낵바와 동일한 위치에 배치합니다.

노출 유지 시간

스낵바는 기본적으로 일정 시간이 지나면 자동으로 화면에서 사라집니다. 

화면에 노출되는 시간은 스낵바를 활용하는 상황이나 피드백 메시지의 길이에 따라 다르게 적용할 수 있습니다.
단, 고객이 스낵바를 나타난 방향과 반대로 스와이프하면 노출 유지 시간과 상관없이 바로 사라집니다.

짧은 유지 시간

간단한 피드백을 전달하거나 짧은 문구를 안내할 때 활용합니다.
화면에 노출된 후 1.75초 동안 유지됩니다.

긴 유지 시간

버튼을 활용하여 고객의 행동을 유도할 때 주로 활용합니다.
화면에 노출된 후 3.15초 동안 유지됩니다.