List

아이콘 사용 규칙과 아이콘 세트 고르기

#웹가이드

Web Guide아이콘아이콘 세트픽토그램
아이콘 사용 규칙과 아이콘 세트 고르기
아이콘만 있으면 무슨 뜻인지 모르는 경우가 많습니다.
보편적으로 통하는 아이콘은 생각보다 적습니다. 글자를 함께 두는 편이 안전합니다.
아이콘 사용 규칙과 아이콘 세트 고르기 관련 사진
01통하는 아이콘은 몇 개뿐이다
돋보기는 검색, 집은 홈, 장바구니는 구매. 이 정도는 설명 없이 통합니다. 그러나 그 외의 아이콘은 사람마다 다르게 해석합니다.
특히 추상적인 개념을 아이콘으로 표현하면 거의 전달되지 않습니다.
설명 없이 통하는 것
검색(돋보기) · 홈(집) · 닫기(X) · 메뉴(줄 세 개) · 장바구니 · 전화 · 위치(핀) · 다운로드(화살표)
설명이 필요한 것
'품질', '혁신', '신뢰' 같은 추상 개념 · 업종 특화 기능 · 회사만의 서비스 · 대부분의 커스텀 아이콘
02글자를 함께 둔다
아이콘만 두면 공간은 절약되지만 이해도가 떨어집니다. 특히 나이가 있는 방문자나 그 서비스에 익숙하지 않은 사람에게 그렇습니다.
아이콘 + 글자 조합이 가장 안전합니다. 공간이 정말 부족할 때만 아이콘만 쓰세요.
01
아이콘 + 글자
기본. 이해도가 가장 높습니다.
02
아이콘만
공간이 부족한 모바일 상단 등. 보편적인 아이콘에 한정.
03
글자만
아이콘이 애매하면 차라리 글자만 쓰는 편이 낫습니다.
04
툴팁
아이콘만 쓴다면 마우스를 올렸을 때 설명이 뜨게 합니다.
05
대체 텍스트
스크린리더를 위해 반드시 넣습니다.
03세트를 통일한다
여기저기서 아이콘을 가져오면 선 굵기와 스타일이 제각각이 됩니다. 하나의 세트를 정하고 거기서만 쓰는 것이 원칙입니다.
없는 아이콘이 필요하면 같은 스타일로 만들거나, 그 아이콘을 쓰지 않는 쪽을 검토하세요.
선 굵기
한 세트 안에서 동일해야 합니다. 섞이면 티가 납니다.
스타일
선형인지 면형인지. 하나로 통일합니다.
모서리
둥근지 각진지도 통일 요소입니다.
크기 체계
16, 24, 32처럼 정해진 크기만 씁니다.
라이선스
무료 세트도 사용 조건이 있습니다. 상업적 이용 가능 여부를 확인합니다.
04장식용 아이콘은 절제한다
내용을 돕지 않는 아이콘은 시각적 소음입니다. 특히 모든 항목 앞에 의미 없는 아이콘을 붙이면 오히려 읽기 어려워집니다.
아이콘을 넣기 전에 '이것이 이해를 돕는가'를 물어보세요.
기능 아이콘
행동이나 상태를 나타냅니다. 필요합니다.
분류 아이콘
유형을 구분합니다. 종류가 적으면 유용합니다.
장식 아이콘
내용과 무관한 것. 대부분 없는 편이 낫습니다.
확인 방법
아이콘을 다 지워 보고 이해에 문제가 없으면 없어도 되는 것입니다.
CHECK POINT
□  아이콘에 글자를 함께 두었는가
□  아이콘만 쓴다면 보편적으로 통하는 것인가
□  하나의 아이콘 세트로 통일했는가
□  선 굵기와 스타일이 일관된가
□  크기 체계가 정해져 있는가
□  라이선스 조건을 확인했는가
□  대체 텍스트를 넣었는가
□  장식용 아이콘을 걷어냈는가
설명 없이 통하는 아이콘은 여덟 개 정도뿐입니다.
아이콘을 다 지워 봤을 때 이해에 문제가 없다면, 없어도 되는 것입니다.
#아이콘#아이콘 세트#픽토그램#일관성#라이선스#접근성#사용성#홈페이지 디자인#웹비스타#홈페이지 제작
목록보기