아이콘 원칙

아이콘 원칙

개요

아이콘은 간결하고 명확해야하며 의미전달이 뚜렷해야 합니다. 아이콘은 직관적이고 언어적인 특성을 갖고 있습니다.

아이콘은 익숙한 이미지들로 다양한 기능이나 개념들을 직관적으로 보여주기 때문에 텍스트보다 정보를 더욱 빠르고 명확하게 의미를 전달해 줄 수 있습니다. 모든 사물을 가장 쉽고 단순하게 표현할 수 있는 방법이면서 사용용이성(usability)을 강화시킬 수 있는 도구입니다.

그렇기 때문에 이용자가 한 눈에 인식할 수 있는 이미지(보편성)를 사용하는 것을 추천하고, 추상적이거나 낯선 아이콘일 경우 설명 문구와 함께 사용하여 부여하는 의미에 대한 혼동이 없게 하는 것을 권장합니다.
단순한 도식 형태로 제작하여 사이즈가 작아져도 가독성이 떨어지지 않게 하고, 퀄리티는 깨지지 않고 명료한 상태로 이용해야 합니다.

아이콘 제작 규칙

모양

publ 아이콘은 이용자들에게 딱딱한 느낌보다는 인간적으로 다가가고 신뢰할 수 있는 가이드처럼 친근한 느낌을 주기 위해, 모서리를 둥근 형태로 가져갑니다. 날카롭고 딱딱해 보일 수 있는 모서리는 사용하지 않습니다.
모서리 반경은 반복적으로 비슷한 형태를 가져가는 경우 통일성을 위해 값을 맞춰줍니다.

선의 끝 모양 처리 역시 일관적인 형태를 위해 둥글게 적용합니다.

굵기

기본 아이콘 사이즈 24px 기준에서 1.5px 굵기로 제작됩니다.
경우에 따라, 강조를 위해 더 굵은 굵기(2px)를 적용할 수 있습니다.

사이즈 변화는 24px 기준으로 제작한 후 해당 사이즈로 늘리거나 줄입니다.
따라서 24px 기준으로 작아지면 라인 굵기가 가늘어지고, 커지면 라인 굵기가 굵어집니다.

색상

아이콘은 단색을 사용하며 텍스트와 함께 쓰일 경우 텍스트의 컬러를 따라가도록 합니다.

아이콘 종류

Line 타입과 Fill 타입이 있습니다. 모든 아이콘은 반드시 line 유형을 기본으로 제작합니다.
fill 형태가 있다면 되도록 line도 쌍으로 제작할 것을 권장합니다.

이미지는 참고용입니다.

사이즈별 사용 예시 (업데이트 중)

하단 표는 모든 경우를 담은 것이 아니며, 주로 사용된 곳을 예시로 적은 것입니다. (기획자 참고)

문서 작성 정보