아이콘은 일러스트와 달리 그 자체로 뜻을 전하는 기호입니다. 나란히 놓았을 때 하나만 선이 굵거나 하나만 면으로 채워져 있으면, 그것만으로 그 항목이 강조된 것처럼 읽힙니다. 출처가 다른 아이콘을 섞었을 때 생기기 쉬운 어긋남과 피하는 방법을 정리합니다.
채운 아이콘과 윤곽 아이콘을 섞지 않기
먼저 정할 것은 채운 아이콘을 쓸지, 윤곽만 있는 아이콘을 쓸지입니다. 이 둘은 다른 기호 체계라서, 섞이면 채운 쪽이 "선택됨", "사용 중" 같은 상태를 나타내는 것처럼 보입니다. 내비게이션이나 체크리스트에서는 이 오독이 그대로 조작 실수가 됩니다.
같은 모양에 채운 것과 윤곽만 있는 것이 함께 준비되어 있는 경우는 드물지 않습니다. 한쪽으로 정하고 자료 끝까지 밀고 나가세요. 바꾸는 것은 상태의 차이를 나타낼 때로 한정합니다.
선의 굵기는 자료 하나에 한 종류로
윤곽 아이콘을 쓸 때 인상을 가장 크게 좌우하는 것은 색도 모양도 아닌 선의 굵기입니다. 가는 선은 정밀하고 절제되어 보이고, 굵은 선은 명쾌하고 강해 보입니다. 문제는 이 차이가 뜻의 차이로 읽힌다는 점입니다.
절차 목록에 가는 선과 굵은 선이 섞여 있으면, 굵은 쪽이 더 중요한 공정으로 받아들여집니다. 실제로는 소재의 출처가 다를 뿐이어도 읽는 사람에게는 그렇게 보입니다. 굵기는 한 종류로 고정하고, 강조는 색이나 배치로 하는 편이 안전합니다.
가장 작은 쪽을 기준으로 크기를 고르기
같은 아이콘이라도 작게 놓았을 때와 크게 놓았을 때는 보이는 방식이 달라집니다. 줄이면 세부가 뭉개져 덩어리로 보이고, 키우면 선이 가늘고 힘없어 보입니다.
하나의 자료에서 여러 크기로 돌려 쓸 거라면 가장 작은 쪽을 기준으로 고르세요. 작아도 뜻이 읽히는 아이콘은 키워도 무너지지 않지만, 그 반대는 성립하지 않습니다. 망설여지면 실제로 놓을 크기까지 줄여서 한 번 확인합니다.
색은 뜻을 담을 때만 바꾸기
아이콘에 색을 넣는 것은 그 색이 무언가를 나타낼 때만으로 합니다. 빨강은 경고, 초록은 완료 — 이런 대응이 자료 안에서 일관되면 색은 정보로 작동합니다. 장식으로 하나씩 다른 색을 입히면, 읽는 사람은 존재하지 않는 차이를 찾게 됩니다.
주위의 여백을 깎지 않기
아이콘 주위의 여백은 형태의 일부입니다. 틀에 딱 맞추려고 여백을 깎으면 옆 요소와 간섭해 읽기 어려워집니다. 글자와 나란히 놓을 때는 아이콘 높이를 글자 높이보다 살짝 작게 잡으면 안정됩니다.
Visual Hub의 아이콘에 대해
본 사이트의 아이콘은 단색 면으로 그려져 있어 선의 굵기라는 속성을 갖지 않습니다. 윤곽처럼 보이는 것도 안쪽을 도려낸 면으로 만들어져 있습니다. 소재끼리 굵기가 어긋날 걱정이 없는 만큼, 위의 "선의 굵기를 맞추기"는 다른 곳의 소재와 섞을 때의 이야기가 됩니다.
색과 크기는 내려받을 때 지정하는 방식이라 색깔별・크기별 파일을 따로 두지 않습니다. 자료에 맞춰 나중에 정할 수 있습니다. SVG와 PNG 모두 내보낼 수 있습니다.
※같은 모양이라도 면과 윤곽을 각각 다른 소재로 제공하는 것이 있습니다. 나란히 쓸 때는 한쪽으로 맞춰 고르세요.