Icon
아이콘은 서비스, 기능, 메시지 등의 특성을 함축적으로 나타내는 시각적 메타포입니다.
가리키는 대상에 관한 주의를 끌어내고 정보를 더 직관적이고 빠르게 이해할 수 있게 도와줍니다.
아이콘과 일러스트레이션의 차이
아이콘과 일러스트레이션은 시각적인 메타포를 활용해 특정 대상을 설명하는 시각 요소라는 점에서 비슷합니다.
단, 쿠팡 서비스 안에서는 두 요소를 정의하는 개념과, 각 활용 상황을 명확히 구분하여 정의합니다. 아래 내용을 확인한 뒤 각 특성과 목적에 맞게 활용하세요.
아이콘
가리키는 대상의 형태나 의미를 최대한 단순하게 묘사한 시각 요소입니다.
특징 및 활용 상황
- 서비스나 기능의 특성을 직관적으로 이해하도록 도와야 합니다.
- 되도록 여러 상황에서 범용적으로 사용할 수 있는 형태나 특성을 표현하는 것이 좋습니다.
- 주로 버튼, 탭, 메시지 박스와 같은 컴포넌트 안에 넣어 사용할 수 있습니다.
컴포넌트와 같은 UI 요소 안에서는 항상 아이콘을 사용하며, 아이콘 대신 일러스트레이션을 사용하지 않도록 유의합니다.
컴포넌트에 RDS 아이콘을 사용
컴포넌트에 일러스트레이션을 사용
일러스트레이션
가리키는 대상의 형태나 특성을 아이콘보다 더 상세하게 묘사하는 시각 요소입니다.
특징 및 활용 상황
- 브랜드, 이벤트 등의 특성을 강조할 때 주로 사용합니다.
- 의미나 맥락을 더 구체적으로 드러내기 위해, 여러 시각적 메타포를 합쳐 표현할 수 있습니다.
- 가리키는 대상의 핵심 특징이나 브랜드 정체성을 컬러로 표현해야 합니다.
- 아이콘보다 복잡성이 높기 때문에 너무 작은 사이즈로 사용하지 않습니다.
일러스트레이션은 주로 이벤트나 기능 설명을 위한 단독 페이지 혹은 게이트웨이(GW) 숏컷 영역에서 활용합니다.
특히, GW 숏컷 영역과 같이 기능을 더 구체적으로 설명할 필요가 있을 때, 가리키는 대상을 너무 단순하게 표현하는 아이콘은 활용하지 않는 것이 좋습니다.
숏컷 영역에서 서비스나 카테고리를 일러스트레이션으로 표현
숏컷 영역에서 서비스나 카테고리를 아이콘으로 표현
제작 및 활용 가이드
RDS는 기본적으로 제공하는 시스템 아이콘을 활용하는 방법과 새로운 아이콘을 디자인하는 방법을 함께 안내합니다.
자세한 내용은 각 가이드 문서에서 확인하세요.
