Header

1. 싱글라인 헤더

한 줄의 타이틀로 구성된 헤더입니다.

2. 멀티라인 헤더

타이틀과 하나 이상의 보조 타이틀로 조합된 헤더입니다.

1. 컨테이너

헤더의 모든 구성요소를 담은 영역입니다.

2. 타이틀 

콘텐츠 영역의 특징이나 목적을 짧고 명확한 제목으로 표현합니다. 타이틀은 항상 마침표를 생략합니다.

상품 및 서비스를 추천 · 제안 · 광고할 때는 고객의 눈길을 끌고 콘텐츠를 돋보이게 만드는 적극적인 표현을 활용합니다.

3. 보조 타이틀

타이틀만으로 콘텐츠 영역의 특징을 충분히 전달하기 어려울 때 추가 설명이나 문구를 전달합니다. 
타이틀과 큰 차이가 없거나 중복되는 문구를 쓰지 않도록 유의하며, 항상 마침표를 생략합니다.  보조 타이틀은 전달하는 내용의 특성에 따라 위치가 달라집니다.

• 상단 보조 타이틀: 서비스, 브랜드, 콘텐츠 테마와 같이 타이틀보다 상위 개념의 정보를 전달할 때
• 하단 보조 타이틀: 부가 설명, 구매 조건과 같이 타이틀보다 하위 개념의 정보를 전달할 때

상단 보조 타이틀로 콘텐츠 테마를 강조

하단 보조 타이틀로 콘텐츠 영역의 부가 설명을 제공

4. 로고 및 배지

쿠팡 브랜드 또는 와우회원 전용 상품이 포함된 콘텐츠 영역임을 강조할 때 사용합니다.
로고나 배지는 상단 보조 타이틀에만 사용하며 타이틀 또는 하단 보조 타이틀 영역에는 사용하지 않습니다.

타이틀 영역에 배지 사용

하단 보조 타이틀 영역에 배지 사용

쿠팡 브랜드의 배지나 로고는 텍스트 앞 또는 뒤에 모두 배치할 수 있습니다. 단, 3줄 멀티라인 헤더에서는 로고나 배지를 텍스트와 함께 사용하지 않습니다.

2줄 멀티라인 헤더의 상단 보조 타이틀 영역에 로고와 텍스트 함께 사용

3줄 멀티라인 헤더의 상단 보조 타이틀 영역에 로고와 텍스트 함께 사용

와우 배지는 항상 타이틀 오른쪽 끝 부분에 배치합니다.

5. 버튼

콘텐츠 영역과 관련한 행동을 유도할 때 사용합니다. 헤더 영역 우측 끝에 배치합니다. 주로 ‘더보기’ · ‘전체보기’ · ‘카테고리 설정’ 등의 버튼을 활용합니다.

6. 아이콘

콘텐츠 영역과 연관된 아이콘을 사용하여 주목도를 높입니다.
타이틀의 왼쪽에는 타이틀의 특징을 강조하는 아이콘을, 오른쪽에는 새로운 콘텐츠임을 알리는 ‘N’ 아이콘을 추가할 수 있습니다.

아이콘은 타이틀 높이와 맞추어 정렬하며 보조 타이틀 혹은 헤더 전체 높이에 맞추어 배치하지 않습니다.

아이콘을 타이틀 왼쪽에 맞추어 정렬

아이콘을 헤더 전체 높이에 맞추어 정렬

7. 애드마커

광고 노출 구좌를 구매한 판매자의 상품을 노출할 때 사용합니다. 컨테이너 안 오른쪽 끝에 배치합니다.

헤더 타이틀에 컬러를 적용할 때

타이틀 문구 중 강조가 필요한 부분에 컬러를 적용하면 콘텐츠에 대한 주목도를 높일 수 있습니다.
이때, RDS 컬러 팔레트에서 웹 콘텐츠 접근성 지침(WCAG 2.0) 기준 AA 레벨 이상의 컬러를 선별하여 활용합니다.

• 헤더가 가리키는 상품 브랜드 및 카테고리와 연관된 컬러를 활용합니다.
• 컬러는 타이틀에만 사용하며 보조 타이틀에는 사용하지 않습니다.

헤더 및 콘텐츠의 맥락과 연관된 컬러 사용

보조 타이틀에 컬러 사용

• 로고나 배지가 포함된 헤더의 타이틀은 컬러를 적용하지 않는 것이 좋습니다.
• 하나의 헤더 안에서는 기본 텍스트 컬러 이외 1가지 컬러만 사용합니다. 단, 고객이 하이퍼링크로 오해할 수 있는 Blue는 사용하지 않습니다.

로고나 배지가 포함된 헤더에 컬러 사용 지양

하이퍼링크로 오해할 수 있는 Blue 사용

스펙

아래는 Android DP M 사이즈 기준의 규칙입니다. 사이즈별 상세 규칙은 스펙 가이드에서 확인하세요.

연관 컴포넌트

Product List

리소스

Figma spec guide

스펙 가이드를 확인할 수 있습니다.

Developer Guideline

개발 가이드라인을 확인할 수 있습니다