Icon 활용하기

아웃라인 아이콘

가리키는 대상의 특성을 선으로 표현한 아이콘입니다. 다른 타입의 아이콘보다 시각적인 우선순위가 낮으므로 주로 정보가 많고 복잡한 화면에서 활용합니다.

필 아이콘

가리키는 대상의 특성을 면으로 표현한 아이콘입니다. 아웃라인 아이콘보다 시각적인 강조가 필요한 상황, 기능이 실행된 결과나 작업이 완료된 상태 등을 나타낼 때 사용합니다.

컬러 아이콘

가리키는 대상을 지정된 면 또는 선의 컬러로 표현한 아이콘입니다. 컬러를 통해 가리키는 대상을 더 직관적으로 표현할 수 있기 때문에, 아웃라인 또는 필 아이콘으로 설명하기 어려운 서비스나 복잡도가 높은 메타포를 표현할 때 주로 사용합니다.

컴포넌트 안에서 아이콘을 버튼으로 활용할 때는 아이콘을 더 쉽게 누를 수 있도록, 컴포넌트 컨테이너 전체를 터치 타깃으로 지정할 수 있습니다.

닫기 아이콘 버튼에 최소 사이즈 터치 타깃을 적용

컴포넌트 컨테이너 전체를 터치 타깃으로 지정

2개 이상의 아이콘을 함께 나열할 때는 각 아이콘의 터치 타깃이 겹치지 않도록 유의합니다.

각 아이콘의 터치 타깃이 겹치지 않게 배치

각 아이콘의 터치 타깃이 겹치게 배치

아이콘을 다른 요소와 함께 배치할 때는 항상 두 요소를 가로축 중앙 기준선에 맞추어 정렬합니다.

아이콘와 텍스트를 가로축 중앙 기준선에 맞추어 정렬

아이콘과 텍스트를 가로축 상단 기준선에 맞추어 정렬

아이콘에 컬러를 적용할 때

필요에 따라 아웃라인 아이콘 또는 필 아이콘에 컬러를 적용할 수 있습니다. 이때, 아이콘의 의미와 활용 상황에 맞는 단일 컬러를 선별해 활용해야 합니다.

‘완료’를 뜻하는 아이콘 성격에 맞게 컬러를 적용

‘완료’와 어울리지 않는 컬러를 적용

컬러 아이콘의 지정된 기본 컬러를 임의로 바꾸어 사용하지 않도록 유의합니다.

컬러 아이콘의 기본 컬러를 유지하여 사용

컬러 아이콘의 기본 컬러를 임의로 바꾸어 사용

아이콘을 버튼으로 사용할 때

복잡성이 높거나 좁은 영역에서는 텍스트 없이 아이콘만으로도 기능을 실행하는 버튼으로 활용할 수 있습니다. 단 이때, 부차적인 설명 없이도 기능을 쉽게 연상할 수 있는 직관적인 아이콘을 사용해야 합니다. 또한, 필요에 따라 버튼을 누른 후의 결과를 아이콘으로 충분히 드러낼 수 있어야 합니다.

‘찜하기’ 버튼을 누르기 전과 누른 후 상태를 다른 아이콘 타입으로 표현

단, 기능이 실행된 결과나 작업이 완료된 상태를 나타낼 때는 컬러 아이콘 대신 필 아이콘 을 사용해야 합니다.

‘찜하기’ 버튼을 누른 상태를 필 아이콘으로 표현

‘찜하기’ 버튼을 누른 상태를 컬러 아이콘으로 표현

텍스트와 함께 배치할 때

메시지 박스, 위젯 타이틀과 같이 고객의 눈길을 끌어야 하는 문구 근처에 아이콘을 추가하면, 주목도를 높이고 내용을 더 쉽게 유추하도록 도울 수 있습니다. 이때, 아이콘은 전달하려는 콘텐츠의 역할이나 맥락에 알맞게 사용합니다.

유의 사항을 전달하는 상황에 알맞은 Attention 아이콘 사용

유의 사항을 전달하는 상황과 어울리지 않는 Help 아이콘 사용

텍스트와 아이콘을 함께 배치할 때는 항상 RDS 아이콘만을 활용하며, 이모지와 같은 다른 요소를 대신 사용하지 않습니다.

아이콘으로 위젯 타이틀 내용을 표현

아이콘이 아닌 이모지로 위젯 타이틀 내용을 표현

메뉴 리스트와 같이 여러 텍스트가 나열되는 상황에서 아이콘을 활용하면, 고객이 모든 레이블을 읽지 않고도 각 항목의 역할을 빠르게 파악할 수 있습니다.

각 메뉴 레이블을 더 빠르게 이해할 수 있도록 아이콘을 배치타입으로 표현

좁은 영역에서 많은 정보를 나열할 때는 텍스트를 아이콘으로 대체할 수 있습니다.
단, 이때 부차적인 설명 없이도 무엇을 뜻하는지 고객이 충분히 이해할 수 있는 아이콘을 사용해야 합니다.

‘조리 시간’, ‘난이도’, ‘용량’과 같은 문구를 아이콘으로 대체

새로운 상품, 콘텐츠, 기능 등이 새롭게 추가된 상황을 안내할 때는 텍스트 레이블의 오른쪽에 N 아이콘을 배치합니다.
이때, N 아이콘은 항상 기본 사이즈와 컬러를 유지해 사용합니다.

새로운 카테고리를 강조하기 위해 탭 레이블 오른쪽에 N 아이콘을 배치

단, 주목도를 높이기 위해 한 화면에서 너무 많은 N 아이콘이 연속으로 노출되지 않도록 유의합니다.

모든 메뉴에 N 아이콘을 배치

이미지와 N 아이콘을 함께 배치할 때

섬네일이나 상품 사진과 같이 상품이나 카테고리를 파악하는 데 중요한 이미지를 가리지 않도록 배치에 유의합니다.

섬네일 주변부에 N 아이콘을 배치

섬네일 중앙에 N 아이콘을 배치

플랫폼별 기본 아이콘이 있을 때

아이콘은 기본적으로 특정 플랫폼과 상관없이 동일하게 사용합니다.
단, 플랫폼별로 오랜 시간 유지되어 온 컨벤션이 있다면 각 플랫폼의 특성에 맞춰 다른 아이콘을 활용할 수 있습니다.

Share 아이콘을 각 플랫폼 컨벤션에 맞추어 사용

아이콘에 애니메이션을 추가할 때

정적인 상태의 아이콘만으로 가리키는 대상의 특성이나 의미를 설명하기 어려울 때는, 애니메이션을 추가해 고객의 이해를 도울 수 있습니다.

‘공유하고 캐시 받기’ 기능의 특징을 더 명확하게 설명하기 위해 아이콘에 애니메이션 적용