아이콘을 새로 그리기 전에 확인하는 것

아이콘이 전달할 뜻을 문장으로 씁니다

아이콘을 고르기 전에 사용자가 무엇을 이해해야 하는지 짧게 적어 봅니다. 화면으로 이동하는지, 현재 항목을 삭제하는지, 선택 상태를 바꾸는지에 따라 같은 그림도 다른 기대를 만들 수 있습니다. 장식인지 정보를 전달하는 요소인지도 구분합니다.

예를 들어 별 모양을 즐겨찾기와 추천 표시 두 용도로 함께 쓰면 누를 수 있는지와 무슨 뜻인지 혼동할 수 있습니다. 화면 안에서 같은 모양이 같은 의미를 가지는지 먼저 살펴보세요. 이미 쓰는 아이콘과 이름을 목록으로 정리하면 새로 만들 필요가 있는지도 판단할 수 있습니다.

새 개념이라면 그림만 보고 뜻을 알 수 있을 것이라고 가정하지 않습니다. 짧은 문구를 함께 제시하는 편이 이해하기 쉬울 수 있습니다. 아이콘을 추가하는 목적은 글자를 없애는 것보다 행동과 정보를 쉽게 찾게 하는 데 있습니다.

기존 묶음에서 모양과 사용 조건을 확인합니다

새 아이콘 하나만 완성도가 높아도 주변과 선 굵기, 모서리, 채움 방식이 다르면 화면에서 튀어 보일 수 있습니다. 사용 중인 아이콘 묶음에서 비슷한 의미를 찾고, 같은 크기에서 시각적 무게가 맞는지 비교합니다.

공용 라이브러리나 외부 자료를 사용할 때는 출처와 사용 조건을 확인하고 프로젝트에서 사용하는 버전을 기록합니다. 내려받을 수 있다는 사실만으로 수정이나 재배포 범위를 추정하지 않습니다. 실제 적용할 자료의 조건을 기준으로 판단해야 합니다.

직접 그려야 한다면 필요한 차이가 무엇인지 남깁니다. 브랜드 고유 표현인지, 기존 아이콘으로 전달하기 어려운 업무 개념인지 설명할 수 있어야 유지보수할 이유도 분명해집니다. 같은 의미의 변형이 여러 개 생기지 않도록 이름도 함께 정합니다.

그림의 크기와 누를 수 있는 영역을 구분합니다

아이콘 그림이 작다고 버튼의 클릭 영역까지 작을 필요는 없습니다. 실제로 누를 수 있는 영역을 확보하고, 주변 행동과 충분히 구분되는지 확인합니다. 삭제와 더 보기처럼 결과가 다른 버튼이 붙어 있다면 잘못 누를 가능성도 살펴야 합니다.

아이콘만 있는 버튼에는 기능을 설명하는 접근성 이름이 필요합니다. 툴팁이 있더라도 터치와 키보드에서 같은 정보를 얻을 수 있는지 검토합니다. 글자 옆의 장식 아이콘은 의미를 중복 전달하지 않도록 사용 방식에 맞게 처리합니다.

방향을 나타내는 화살표와 브랜드 마크는 같은 방식으로 뒤집을 수 없습니다. 언어의 읽는 방향이나 화면 문맥에 따라 어떤 아이콘이 바뀌어야 하는지 정하고 실제 번역 화면에서 확인합니다.

실제 크기와 상태 조합에서 검토합니다

확대한 도형에서 좋아 보이는 선도 실제 크기에서는 뭉개지거나 약해질 수 있습니다. 메뉴, 버튼, 목록처럼 사용할 위치에 넣고 라이트·다크, 선택·비활성 상태를 함께 확인합니다. 긴 문구 옆에서도 아이콘이 밀리거나 잘리지 않는지 봅니다.

검토자는 그림의 이름을 알려 주기 전에 어떤 동작을 기대하는지 설명해 볼 수 있습니다. 의미를 자주 다르게 해석한다면 모양을 조금 다듬는 것보다 문구를 추가하거나 다른 표현을 고르는 편이 나을 수 있습니다.

최종 자산에는 이름, 용도, 원본 위치, 허용한 크기와 사용 예를 남깁니다. 새 아이콘이 들어간 화면뿐 아니라 같은 행동을 표현하는 다른 위치도 맞춰야 사용자가 배운 의미를 계속 재사용할 수 있습니다.