Color
정보의 특징이나 상태를 시각적으로 표현하기 위해 사용할 수 있는 컬러 팔레트와 활용 방법을 제공합니다.
Version 1.0기본 원칙
- 중요한 정보를 전달하는 요소는 항상 접근성 지침에 따라 컬러를 적용합니다.
- 컬러마다 정해진 쓰임과 목적에 맞게 사용합니다.
접근성 Accessibility
접근성은 신체적 제약, 인지 능력, 환경적 특성과 상관없이 누구나 정보나 기능을 불편함 없이 이용할 수 있는 정도를 뜻합니다. 접근성이 높으면 더 많은 고객이 서비스를 쉽고 편리하게 이용할 수 있고, 전반적인 사용자 경험이 좋아집니다. 여러 접근성 고려 요소 중 컬러는 가독성에 큰 영향을 미치므로 가장 주의 깊게 다루어야 합니다. 명확한 컬러 대비를 통해 텍스트와 다른 요소가 쉽게 구분될 수 있도록 가급적 웹 접근성 지침(WCAG) AA 기준에 맞는 컬러를 활용하세요.
WCAG 2.1
WCAG는 W3C가 제시하는 웹 접근성 지침(Web Content Accessibility Guidelines)을 뜻합니다.
WCAG의 레벨은 A, AA, AAA 3가지로 나뉘며 쿠팡 서비스 안에서는 AA 레벨 이상을 준수하기를 권장합니다.
AA Standard
- 텍스트는 최소 4.5:1 대비를 갖추어야 합니다.
- 텍스트 사이즈가 18pt(약 24px) 이상이거나, 14pt(약 18.5px) 이상의 텍스트를 Bold로 표현할 때는 최소 3:1 대비까지 허용합니다.
- 가능하다면 아이콘이나 브랜드 로고 등의 요소도 접근성 기준을 준수하는 것이 좋습니다.
접근성을 높이기 위한 적절한 컬러 대비 값
테마 Theme
테마는 하나의 서비스에서 사용하는 여러 컬러의 집합입니다. 필요에 따라 특정 서비스에 맞추어 새로운 테마를 설계할 수도 있고, 하나의 테마를 여러 서비스에 걸쳐 활용할 수도 있습니다. 단, 특정 서비스를 위해 새로운 테마를 추가로 만들 때는 RDS 팀과의 사전 검토를 거친 뒤 사용하세요.
Core theme
쿠팡 코어 서비스에서 사용되는 기본 테마입니다. 코어 테마는 다음과 같은 컬러 팔레트로 이루어져 있습니다.
1. 프라이머리 컬러 Primary Colors
UI에 가장 빈번하게 사용되는 컬러입니다. 주로 버튼과 같이 고객의 주요 행동과 관련한 컴포넌트를 표현할 때 사용합니다.
2. 뉴트럴 컬러 Neutral Colors
텍스트, 아이콘, 백그라운드 등에 사용되는 컬러입니다. 주로 일반적인 정보 전달, UI의 비활성 상태, 영역의 시각적 구분 등을 위해 사용합니다.
3. 익스텐디드 컬러 Extended Colors
기본 컬러 외에 사용할 수 있는 컬러입니다. 고객에게 메시지를 더 직접적이고 분명하게 전달하기 위해 사용합니다.
위계 구분 Hierarchy
위계는 중요도에 따라 콘텐츠나 요소를 구분하는 개념입니다. 컬러를 활용해 위계를 표현하면, 고객이 콘텐츠의 중요도를 더 직관적으로 유추할 수 있습니다. 한 화면 안에서 고객의 행동과 관련한 가장 중요한 UI는 항상 프라이머리 컬러로 표현하고, 나머지 콘텐츠를 뉴트럴 컬러나 익스텐디드 컬러로 표현하면, 고객이 각 요소 간의 중요도를 더 쉽고 빠르게 구분할 수 있습니다.
프라이머리 컬러 Primary Colors
프라이머리 컬러는 화면에서 가장 돋보여야 할 요소나 고객과의 상호작용을 나타내는 UI에 사용됩니다. 쿠팡 코어 서비스는 프라이머리 컬러로 Blue를 활용해 활성화된 상태나 누를 수 있는 영역임을 표현합니다.
프라이머리 컬러는 Alpha 50을 포함하여 50부터 900까지 11단계의 팔레트로 이루어져 있으며, UI에는 주로 다음과 같은 키 컬러를 활용합니다.
1. 텍스트, 아이콘, 아웃라인
백그라운드/컨테이너 컬러가 없거나 White일 때는 텍스트, 아이콘, 아웃라인에 Blue 600을 사용합니다.
2. 컨테이너
Blue 600을 사용합니다.
3. 온 컨테이너
Blue600로 채운 컨테이너 속 텍스트, 아이콘 등의 요소는 White를 사용합니다.
4. 틴트 컨테이너
Blue 50을 사용합니다.
5. 온 틴트 컨테이너
틴트 컨테이너 속 텍스트, 아이콘 등의 요소는 Blue 600을 사용합니다.
사용 Usage
고객의 행동을 유도하는 컴포넌트나 활성화된 상태의 컴포넌트를 나타낼 때 사용합니다.
프라이머리 컬러로 고객이 누를 수 있는 요소임을 표현
프라이머리 컬러로 아이콘의 활성화된 상태를 표현
단순히 강조의 목적으로 프라이머리 컬러를 사용하면, 컬러의 약속된 의미가 퇴색되어 고객의 오해를 일으킬 수 있습니다. 따라서 행동을 유도하는 UI, 하이퍼링크, 활성화 상태의 컴포넌트가 아닌 텍스트나 아이콘 등은 프라이머리 컬러 대신 익스텐디드 컬러를 활용해 강조해야 합니다.
하이퍼링크가 아닌 텍스트를 강조하기 위해 프라이머리 컬러를 사용
뉴트럴 컬러 Neutral Colors
뉴트럴 컬러는 주로 텍스트, 아이콘, 컴포넌트의 아웃라인이나 상태를 표현할 때 사용합니다. 뉴트럴 컬러를 적절하게 활용하면 다른 컬러와의 시각적 대비를 높일 수 있습니다. 이를 위해 가급적이면 모든 페이지의 백그라운드 컬러는 항상 White를 유지하는 것이 좋습니다.
뉴트럴 컬러는 50부터 900까지 11단계의 팔레트로 이루어져 있으며, UI에는 주로 다음과 같은 키 컬러를 활용합니다.
텍스트 및 아이콘
1~3. 텍스트, 아이콘
가시성을 높이기 위해 최소 Bluegray 700 이상을 사용합니다.
단, 백그라운드 컬러가 White가 아닐 때는 접근성 기준에 적합한 다른 컬러를 사용해야 합니다.
4. 플레이스홀더
Bluegray 400을 사용합니다.
아웃라인 및 디바이더
1. 아웃라인
Bluegray 300을 사용합니다.
2. S 사이즈 디바이더
Bluegray 200을 사용합니다.
3. M 사이즈 디바이더
Bluegray 100을 기본으로 사용합니다.
컴포넌트의 비활성 상태
1. 비활성 상태의 텍스트 및 아이콘
Bluegray 400을 사용합니다.
2. 비활성 상태의 아웃라인
Bluegray 200을 사용합니다.
컴포넌트의 컨테이너
1. 컨테이너
Bluegray 100을 사용합니다.
2. 컨테이너 (더 옅은 컬러가 필요할 때)
다른 요소와 더 강한 대비를 만들어야 할 때는 Bluegray 100 대신 Bluegray 50을 사용할 수 있습니다.
사용 Usage
상품의 품절 상태를 나타낼 때
옅은 뉴트럴 컬러로 주요 컴포넌트나 상품 정보를 표현하여, 상품을 구매할 수 없는 상황을 안내할 수 있습니다.
품절 상품의 SDP에서 상품 가격과 ‘구매하기’ 버튼을 뉴트럴 컬러로 표현
SRP에서 품절 상품의 상품 가격을 뉴트럴 컬러로 표현
백그라운드 컬러
백그라운드 컬러는 다른 요소와의 대비가 명확하도록 되도록 White를 유지하며, 특정 영역을 시각적으로 구분할 때는 디바이더와 같은 컴포넌트를 사용합니다. 특히, 상품 사진의 배경으로 인해 화면의 복잡성이 높은 상품 목록 페이지(PLP)나 캐러셀 위젯 등의 영역은 백그라운드 컬러를 임의로 바꾸지 않는 것이 좋습니다.
특정 영역을 구분하기 위해 백그라운드 컬러는 유지하되 디바이더를 추가
특정 영역을 구분하기 위해 백그라운드 컬러를 임의로 변경
익스텐디드 컬러 Extended Colors
익스텐디드 컬러는 11단계로 만들어진 컬러로 구성됩니다. 프라이머리 컬러나 뉴트럴 컬러로 표현하기 어려운 시멘틱 컬러가 주를 이루며, 메시지 전달하는 상황이나 목적을 더 직관적으로 표현하기 위해 사용합니다. 익스텐디드 컬러를 활용할 때는 항상 다음과 같은 유의 사항을 준수해야 합니다.
- 서비스 안에서 약속된 규칙이나 사용 맥락에 따라 활용합니다.
- 피로감을 유발할 정도로 한 화면에서 너무 많이 사용하지 않습니다.
- 특정 브랜드, 서비스, 카테고리를 대표하는 컬러로 사용하지 않습니다.
Red
Red는 다른 컬러에 비해 시인성이 높은 컬러로 고객의 주목도를 높이기에 용이합니다. 쿠팡 서비스 안에서는 주로 다음과 같은 상황에 활용합니다.
- 고객이 꼭 확인해야 하는 심각한 문제 상황을 안내할 때
- 수정이 필요한 입력 오류를 안내할 때
- 특정 프로세스가 중단되거나 실패한 상태를 표현할 때
- 상품 가격, 할인율 등 금전적 혜택이 두드러지는 가격 정보를 표현할 때
- 임박한 시간이나 수량을 안내하는 정보를 표현할 때
Red는 Alpha 50을 포함하여 50부터 900까지 11단계의 팔레트로 이루어져 있으며, UI에는 주로 다음과 같은 키 컬러를 활용합니다.
1. 텍스트, 아이콘, 아웃라인
Red 600을 사용합니다.
2. 컨테이너
Red 600을 사용합니다.
3. 온 컨테이너
Red 600으로 채운 컨테이너 속 텍스트, 아이콘 등의 요소는 White를 사용합니다.
4. 틴트 컨테이너
Red 50을 사용합니다.
5. 온 틴트 컨테이너
틴트 컨테이너 속 텍스트, 아이콘 등의 요소는 Red 600을 사용합니다.
사용 Usage
오류나 심각한 문제 상황을 안내할 때
비스 및 결제 오류나 고객의 수정이 필요한 입력 오류 등과 같이 고객이 반드시 확인해야 하는 중요한 정보를 안내할 때 사용합니다.
결제 실패로 인한 주문 취소와 같이 중요한 정보를 Red 아이콘으로 표현
입력 필드의 값이 잘못되었거나 필요한 값이 입력되지 않은 상황을 Red로 표현
서비스 이용에 심각한 문제가 발생하여 고객 행동에 큰 제약이 생겼을 때도 사용합니다.
단, Red를 사용해야 하는 상황이나 요소에 상대적으로 심각성이 약해 보일 수 있는 Yellow를 대신 사용하지 않도록 유의합니다.
서비스 이용에 큰 제약이 생겼음을 안내하는 메시지를 Red로 표현
심각한 문제를 안내하는 메시지를 Yellow로 표현
가격, 할인, 수량/시간의 제약을 표현할 때
할인가, 할인율 등 고객이 금전적 혜택을 인지할 수 있는 중요한 가격 정보나 상품의 수량이나 구매 가능 시간이 제한된 상황을 나타낼 때는 Red 700을 사용합니다.
상품 가격, 할인율 등을 Red로 표현
품절 임박 및 잔여 수량 정보를 Red로 표현
잘못된 사용
심각한 오류, 고객의 확실한 조치가 필요한 영역, 가격이나 구매 유도를 위한 중요 정보가 아닌 요소를 강조하기 위한 목적으로 Red를 사용하지 않습니다.
심각한 문제가 아닌 정보를 Red로 강조
메시지 특성에 맞는 컬러를 사용
쿠폰은 금전적 혜택과 관련된 정보를 전달하지만, 세부 조건을 안내하는 문구나 행동을 유도하는 버튼과 함께 쓰일 때가 많습니다. 따라서 쿠폰을 시각적으로 강조할 때도 모든 요소를 Red로 표현하기보다는, 정보의 특성과 컴포넌트 원칙에 맞게 컬러를 활용하는 것이 좋습니다.
쿠폰을 강조하기 위해 텍스트와 버튼을 모두 Red로 표현
정보의 특성과 컴포넌트 특징에 맞는 컬러를 사용
Yellow
쿠팡 서비스 안에서는 주로 다음과 같은 상황에 활용합니다.
- 서비스 이용 중 미리 알아야 할 유의 사항을 소개할 때
- Red로 표현할 정보보다 상대적으로 덜 심각한 경고 메시지를 안내할 때
- 일시적인 제약이나 제한된 조건을 표현할 때
Yellow는 Alpha 50을 포함하여 50부터 900까지 11단계의 팔레트로 이루어져 있으며, UI에는 주로 다음과 같은 키 컬러를 활용합니다.
1. 컨테이너
Yellow 400을 사용합니다.
2. 온 컨테이너
Yellow 400으로 채운 컨테이너 속 텍스트, 아이콘 등의 요소는 Bluegray 900을 사용합니다.
3. 틴트 컨테이너
Yellow 50을 사용합니다.
4. 온 틴트 컨테이너
틴트 컨테이너 속 텍스트, 아이콘 등의 요소는 Yellow 900을 사용합니다.
사용 Usage
유의 사항, 일시적 제약을 안내할 때
구매에 앞서 미리 알아야 할 유의 사항이나 심각성이 크지 않은 일시적인 서비스 제약을 안내할 때 사용합니다.
구매에 앞서 고객이 알아야 할 내용을 담은 메시지 박스를 Yellow로 표현
일시적인 서비스 제약 사항을 담은 메시지 박스를 Yellow로 표현
잘못된 사용
접근성을 높이기 위해 텍스트, 아이콘 등의 요소는 항상 백그라운드 컬러와 명확히 대비되는 Yellow 800 이상의 컬러로 표현합니다.
접근성 기준에 부합하지 않는 Yellow 700 이하의 컬러를 텍스트나 아이콘에 사용
Green
Green은 일반적으로 긍정적인 메시지를 나타낼 때 사용합니다. 쿠팡 서비스 안에서는 주로 다음과 같은 상황에 활용합니다.
- 특정한 프로세스의 완료나 성공 상태를 표현할 때
- 쿠팡이 보장하는 배송 일정이나 배송 진행 상황을 안내할 때
Green은 Alpha 50을 포함하여 50부터 900까지 11단계의 팔레트로 이루어져 있으며, UI에는 주로 다음과 같은 키 컬러를 활용합니다.
1. 텍스트, 아이콘, 아웃라인
Green 700을 사용합니다.
2. 컨테이너
Green 600을 사용합니다.
3. 온 컨테이너
Green 600으로 채운 컨테이너 속 텍스트, 아이콘 등의 요소는 White를 사용합니다.
4. 틴트 컨테이너
Green 50을 사용합니다.
5. 온 틴트 컨테이너
틴트 컨테이너 속 텍스트, 아이콘 등의 요소는 Green 700을 사용합니다.
사용 Usage
배송 일정, 배송 진행 상황을 안내할 때
쿠팡이 보장하는 배송일(PDD)이나 배송 진행 상황을 안내하는 데 사용합니다.
프로덕트 리스트에 포함된 도착 예정일(PDD)을 Green으로 표현
마이쿠팡 페이지에 노출되는 배송 진행 상황을 Green으로 표현
작업이 완료된 상태를 표현할 때
어떠한 행동이나 프로세스의 진행이 완료된 상태를 나타내는 데 사용합니다. 이때, Green 대신 프라이머리 컬러인 Blue를 사용하지 않도록 유의합니다.
특정 프로세스가 완료된 상태를 뜻하는 아이콘을 Green으로 표현
특정 프로세스가 완료된 상태를 뜻하는 아이콘을 Blue로 표현
공통 활용 원칙
RDS 컬러 시스템에서 제공하는 컬러만 사용합니다
RDS 컬러가 아닌 컬러를 활용하거나 별도의 HEX 코드값으로 컬러를 표현하면, 사용되는 컬러 팔레트가 무분별하게 확장되어 체계적인 관리가 어려워질 수 있습니다. 따라서 컬러 시스템을 효율적으로 운영할 수 있도록 쿠팡 서비스 안에서는 RDS 컬러만을 사용합니다.
RDS 컬러 대신 별도의 HEX 코드값으로 컬러를 표현
텍스트에 투명도를 적용하지 않습니다
품절 상태나 비활성화 상태를 나타낼 때는 임의로 텍스트 컬러의 투명도(Opacity)를 조절하지 않고, 낮은 단계의 뉴트럴 컬러로 바꾸어 적용합니다. 단, 컬러를 바꿀 수 없는 로고나 배지 등의 요소는 투명도를 40%로 조절해 표현합니다.
흐리게 표현해야 하는 텍스트에 투명도 대신 Bluegray 300을 적용
흐리게 표현해야 하는 텍스트에 임의로 투명도를 적용
컴포넌트별로 약속된 규칙이나 원칙에 따라 사용합니다
RDS의 컴포넌트는 각 컬러의 의미를 일관성 있게 유지하기 위해 약속된 컬러 규칙을 제공하며, 항상 이 규칙에 따라 활용해야 합니다. 예를 들어 메시지 박스는 새로운 서비스를 소개할 때 Bluegray, Blue 등의 컨테이너 컬러를 사용해야 합니다. 따라서 특정 브랜드나 서비스를 강조해야 할 때도 메시지 박스의 컨테이너 컬러는 컬러 원칙에 따라 적용하되, 로고와 같은 다른 요소를 활용해 브랜드를 강조해야 합니다.
컴포넌트 컬러 원칙은 지키면서 브랜드는 로고를 활용해 강조
메시지 박스 컨테이너에 원칙과 맞지 않는 임의의 브랜드 컬러 적용
임의의 브랜드 컬러를 주요 UI 요소에 사용하면 여러 정보가 복합적으로 노출되는 화면이 더 복잡해질 수 있습니다. 따라서 사용자 행동에 큰 영향을 미치는 UI 요소는 브랜드 컬러를 사용하지 않도록 특히 유의해야 합니다.
칩의 컨테이너를 임의의 브랜드 컬러로 표현
컬러 외 다른 요소를 함께 활용해 전달력을 높입니다
컬러를 유일한 커뮤니케이션 수단으로 활용하면 색약 등의 신체적 제약이 있는 고객에게 정보를 정확하게 전달하기 어려울 수 있습니다. 따라서 고객이 확인해야 하는 주요 피드백을 표현할 때는 컬러와 함께 메시지나 아이콘 등을 활용해 정보의 전달력을 높여야 합니다.
컬러, 아이콘, 메시지 등을 함께 활용해 고객에게 피드백 전달
아이콘이나 메시지 없이 컬러만으로 고객에게 피드백 전달
리소스
스펙 가이드를 확인할 수 있습니다.