웹사이트·앱 아이콘 세트 계획하는 법

아이콘은 어디를 누르면 되는지 알려 주는 작은 그림입니다. 홈, 장바구니, 배송, 고객 지원, 프로필. 아이콘을 여러 무료 팩에서 가져오면 굵은 선 옆에 가는 선, 둥근 모서리 옆에 각진 모서리가 놓여 사이트가 짜깁기한 것처럼 보입니다. 통일된 세트는 이 문제를 해결하고 단순한 사이트도 완성도 있어 보이게 합니다. 세트를 계획하는 방법을 알려 드립니다.

웹사이트와 앱을 위한 통일된 아이콘 세트

무엇보다 먼저 목록을 만드세요

사이트나 앱을 훑어보며 아이콘이 도움이 될 곳을 모두 적으세요.

메인 메뉴: 홈, 카탈로그, 검색, 장바구니, 계정.
기능이나 장점: 빠른 배송, 안전한 결제, 반품, 고객 지원.
연락처와 동작: 전화, 이메일, 위치, 공유, 다운로드.

각 아이콘을 몇 단어로 설명하세요. 예를 들어 “배송: 작은 화물차”, “반품: 화살표가 있는 상자”. 목록이 분명할수록 나중에 수정할 일이 줄어듭니다.

아이콘은 몇 개가 필요할까

약 4개: 장점이 서너 가지인 랜딩 페이지나 짧은 프레젠테이션.
약 8개: 작은 사이트의 주요 섹션과 기능.
약 16개: 앱이나 섹션이 많은 큰 사이트를 위한 전체 세트.

보통은 지금 필요한 것보다 조금 더 주문하는 편이 낫습니다. 나중에 따로 주문해서 그린 아이콘은 정확히 맞추기 어렵습니다.

스타일은 하나로

스타일 하나를 골라 세트 전체에 유지하세요.

라인: 가는 선, 가볍고 모던하며 깔끔한 인터페이스에 좋습니다.
채움: 꽉 찬 도형, 아주 작은 크기에서도 잘 보입니다.
듀오톤: 한 색상의 두 가지 톤, 조금 더 개성이 있습니다.
3D: 부드러운 입체감과 그림자, 화사한 랜딩 페이지에 좋습니다.

마음에 드는 아이콘이 이미 몇 개 있다면 링크를 공유해 새 아이콘이 같은 느낌을 따르게 하세요.

색상

브랜드 색상을 쓰고, 있다면 #1A73E8 같은 헥스 코드로 알려 주세요. 보통은 메인 색상 하나와 포인트 색상 하나면 충분합니다. 아직 브랜드 색상이 없다면 중립적인 팔레트가 어떤 배경에서나 잘 어울립니다.

작은 크기가 모든 것을 결정합니다

메뉴의 아이콘은 너비가 24픽셀에 불과한 경우가 많습니다. 이 크기에서는 디테일이 사라지므로 단순한 형태가 이깁니다.

아이콘 하나에 아이디어 하나. 배송이라면 화물차만. 도로, 시계, 상자까지 넣지 마세요.
안에 글자를 넣지 마세요. 아이콘이 작아지면 글자는 읽을 수 없습니다.
익숙한 기호. 검색에는 돋보기, 쇼핑에는 장바구니가 어디서나 통합니다.

받는 것과 활용법

일반적인 세트는 투명 배경의 개별 PNG 파일로 제공되므로 각 아이콘을 어떤 색 위에든 놓을 수 있습니다. PNG는 래스터 형식이라 웹사이트, 앱, 슬라이드에는 충분하지만 한없이 키울 수 있는 벡터 파일은 아닙니다. 파비콘이 필요하다면 무료 온라인 변환기로 1분 만에 PNG를 ICO 파일로 바꿀 수 있습니다.

정리

분명한 목록, 알맞은 개수, 하나의 스타일, 브랜드 색상. 이렇게 하면 어느 화면에서나 세트가 일관되어 보입니다. 세트를 그려 줄 곳이 필요하다면 아이콘 세트를 주문하세요. 아이콘 목록, 스타일, 색상을 보내면 통일된 아이콘 4개, 8개 또는 16개를 투명 배경의 개별 PNG 파일로 받을 수 있습니다. 대금은 작업을 승인한 후에만 지급됩니다.