지금 사용하시는 컴퓨터 윈도우에 아이콘이 사라진다면 어떨까요?
아이콘 대신 빼곡하게 글자로 설명하는 내용이 있다면 어떤 느낌을 받게 될까요? 예전 도스를 이용하던 시절로 돌아가는 듯한 느낌을 받을 것 같아요. 아이콘을 클릭하는 것 만으로 어렵고 복잡한 컴퓨터 이용을 간편하게 이용할 수 있죠. 이렇듯 아이콘은 표현하고자 하는 내용을 함축적이고 효과적으로 전달해줘요.
디지털 마케팅을 하는 우리도 아이콘을 자주 사용합니다. 디스플레이를 통해 마케터는 광고 메시지를 고객에게 전달하는 일을 하고 있기 때문인데요. 고객의 눈길을 사로잡고 스쳐 지나가는 짧은 시간에 메시지를 인식시켜야 해요. 홈페이지는 물론 상세페이지나 광고 소재에서 이해를 도와주는 역할을 하죠.
업무를 하실 때 이런 아이콘이 필요한 경우가 많은데요. 마케터가 사용하기 좋은 아이콘 사이트를 오늘 알아볼게요! 🤗
아이콘이 뭔가요?
우선 아이콘에 대해서 간단하게 먼저 알아볼게요! 아이콘이란 대상의 특징을 강조해 만든 기호의 일종으로, 보편적으로 이해할 수 있는 시각 언어예요. 디자인 평론가 스티븐 헬러가 '아이콘은 언어다'라고 말했듯, 아이콘만 가지고도 어느 정도 대화가 가능할 정도로 직관적이고 정보의 내용을 함축하고 있어요.
예를 하나 들어볼게요.
위 아이콘을 보면 어떤 기능이 생각나시나요? 아이콘의 배치에 따라 다소 차이가 있을 수는 있지만, 사용자들은 대부분 '검색' 또는 '확대'의 기능을 생각할 거예요. 검색창에 'SEARCH' 혹은 '검색'이라고 쓰여 있는 것보단 돋보기 모양의 아이콘이 하나 배치되어 있는 것이 더 깔끔해 보이지 않을까요?
이렇듯 아이콘은 웹이나 모바일과 같은 디지털상에서 특히 중요한 요소예요. 제한된 규격 안에서 자칫 복잡해질 수 있는 화면을 심플하게 만들어 주고, 아이콘의 디자인과 배치 등으로 톤 앤 매너가 정해지기도 해요. 사이트의 아이콘이 각이 져 있다면 절제되고 시크한 이미지를, 아이콘이 둥글둥글하다면 부드럽고 친근한 이미지를 받을 수 있듯 말이에요. 또, 사용자의 언어가 달라도 이해가 가능한 편의를 제공해요.
하지만 그만큼 아이콘을 쓸 때는 심혈을 기울여야 할 때도 있어요. 😅 아이콘을 마구잡이로 사용하고 배치한다면 글로 쓰는 것보다도 난잡해 보일 수 있거든요. 또, 전체적인 디자인과 맞지 않는 아이콘을 사용한다면 이질적인 느낌이 나기도 하고요.
아이콘은 어떻게 쓰나요?
일상생활 속 곳곳에서 찾을 수 있는 아이콘이지만, 온라인 환경에서 특히 더 자주 사용되고 있어요. 검색을 뜻하는 '돋보기' 모양이라든지 이전 페이지, 다음 페이지를 의미하는 '< >'와 같은 아이콘도 있고요. 새로운 알림 메시지를 의미하는 '종' 모양의 아이콘도 있죠.
아이콘을 사용하는 방법은 간단해요. 아이콘을 제공해 주는 웹사이트에서 jpg, gif, png 등의 형태로 된 이미지를 다운로드하여서 사용하실 수 있어요. 배경 없이 아이콘만 있는 png 파일이라면 더 유용하게 사용할 수 있고요.
다른 방법도 있는데요. SVG라는 형식의 파일을 다운로드하여서 이용하거나 '아이콘 폰트' 방식으로 사용할 수 있어요. 아이콘을 사용하는 방법이 조금 어려울 수 있는데요. 이미지와 다른 점은 크기를 늘리거나 줄여도 화질에 문제가 없고, html과 css를 이용해 쉽게 색상, 크기 등을 변경할 수 있어요.
그래서 아이콘 사이트는 뭐가 있어요?
아이콘의 정의에 대한 이야기는 여기서 각설하고, 지금 바로 사용할 수 있는 아이콘 사이트를 큐레터가 열심히 취합해 보았어요! 짧고 간단하게 특징만 콕콕 집어드릴게요. 😀 팔로팔로미~
플랫아이콘(Flaticon)
- 아이콘 외에도 일러스트용 스티커를 다운로드할 수 있어요.
- 사용 시 출처 표기가 필요하며, 무료 회원일 경우 png 파일만 다운로드할 수 있어요.
- 정기권 결제 시 사이트 내 모든 이미지를 제한 없이 상업용으로 사용할 수 있어요.
구글 폰트 아이콘
- 구글에서 제공하는 폰트/아이콘 사이트로 신뢰도가 높아요.
- 웹, 안드로이드/iOS 버전에 맞는 코드 확인 및 다운로드가 가능해요.
- SIL/Apache 라이센스를 사용하고 있어 무료로 개인 및 상업용으로 사용할 수 있어요.
폰트 어썸
- 다양한 그래픽 디자인 아이콘을 svg 파일로 다운받을 수 있고, 스크립트를 통해 폰트를 웹에 직접 설치할 수 있어요.
- 유/무료 구분이 명확하지 않기 때문에 사용 시 반드시 'Free' 탭을 체크하여 사용해야 해요.
- 아이콘 스타일, 모션, 회전 등을 설정하여 다운로드하거나 웹에 직접 설치할 수 있어요.
더나운프로젝트
- 국내외 그래픽 디자이너들이 업로드한 아이콘, 사진을 다운받을 수 있어요.
- 단순 그래픽 형태의 아이콘부터 일러스트 형식까지 다양한 아이콘이 있어요.
- 무료로 다운받을 수 있지만 회원가입 및 사용 시 출처 표기가 필요해요.
png 트리
- 여러 가지 아이콘 세트 및 이미지 파일 다운로드가 가능해요.
- 일반 회원은 하루 2개까지, 멤버십 가입자는 제한 없이 다운로드하실 수 있어요.
- 일부 상업적 이용이 불가능한 파일도 있어서 확인이 꼭 필요해요.
아이콘즈8
- 1,303,100개의 그래픽 및 일러스트 형태 아이콘을 다운받을 수 있어요.
- 플러그인을 통해 어도비 포토샵, 일러스트레이터, 피그마 등에서 사용할 수 있어요.
- 개인 및 상업용 목적으로 사용할 수 있지만, 무료 버전의 경우 출처 표기가 필요해요.
(또, 무료로 다운로드 가능한 아이콘은 크기/유형 등에 제한이 있어요.)
아이콘파인더
- 아이콘 외에도 스티커 등 다양한 이미지 파일을 제공해요.
- 아이콘에 호버링 시 Free라고 뜨는 경우 대부분 상업용으로 쓸 수 있지만, 아닌 경우도 있어서 꼼꼼하게 확인이 필요해요.
- 선택한 아이콘이 팩으로 있는 경우, 우측 프로필의 'pack'을 클릭해서 다운로드할 수 있어요.
부트스트랩
- 1,800여 개의 다양한 디자인의 아이콘을 찾아볼 수 있어요.
- 소스 코드 삽입 / cdn / svg 등 다양한 방법으로 사용할 수 있어요.
- 플러그인을 통해 피그마에서 사용할 수 있어요.
- 무료이며 개인 및 상업용으로 사용할 수 있지만 출처 표기가 필요해요.
아이콘 아카이브
- 그래픽 아이콘부터 일러스트 아이콘까지 다양한 아이콘이 있어요.
- 제공하는 아이콘 디자인이 다소 올드해요.
- 'commercial usage'에서 상업용으로 사용 가능한지 확인할 수 있어요.
이온 아이콘
- 아이콘 소스 코드를 제공하며, svg 파일로도 다운로드가 가능해요. (png 파일은 제공하지 않아요)
- MIT라이센스를 따르고 있어 상업용으로 사용 가능하지만 저작권 표시가 필요해요.
- 하나하나씩 고르기 어렵다면 상단에 전체 아이콘 팩을 다운받을 수 있어요.
페더아이콘
- 287개의 심플하면서도 유용한 아이콘을 확인할 수 있어요.
- 아이콘을 클릭하면 자동으로 svg 파일로 다운되며, 아이콘을 커스터마이징 후 전체 아이콘을 다운받을 수 있어요.
- 무료이며 개인 및 상업용으로 사용할 수 있지만 출처 표기가 필요해요.
아이콘몬스터
- 흑백 벡터 아이콘 모음집이에요.
- 영문 사이트이지만 직관적이고 깔끔해서 쉽게 이용이 가능해요.
- 사이트에서 아이콘 크기, 색 등을 수정하여 다운로드가 가능해요.
- 무료이며 상업용으로 사용할 수 있어요.
리믹스 아이콘
- 2,469개의 깔끔하고 심플한 디자인의 아이콘들로 구성되어 있으며 소스 코드를 제공하고, svg/png 파일로도 다운받을 수 있어요.
- 무료로 개인 및 상업용으로 사용 가능해요.
포스포어 아이콘즈
- 비행기, 닻, 에일리언 등 다양한 형태의 아이콘을 png, svg 파일로 다운받거나 코드를 삽입할 수 있어요.
- 무료로 개인 및 상업용으로 사용할 수 있어요.
1001 프리다운로드
- 다양한 일러스트 형식 디자인의 아이콘 팩 모음집을 확인할 수 있어요. (개별 확인은 어려워요 😢)
- 아이콘 디자인이 다소 올드한 편이에요.
- 상업용으로 사용 가능한 아이콘은 많지 않으며, 라이선스를 꼭 확인해야 해요.
폰텔로
- 이미 준비된 아이콘 모음집에서 원하는 것들만 선택하여 다운로드할 수 있어요.
- 사용하던 svg 파일이 있다면 별도로 추가해서 아이콘 폰트로 사용할 수 있어요.
엔드레스아이콘
- 다양한 디자인의 아이콘을 개별 또는 세트 모음집으로 다운받을 수 있어요.
- 사이트와 제공하는 아이콘이 다소 올드해요.
- 무료이며 개인 및 상업용으로 사용할 수 있어요.
엑스이 아이콘
- 네이버에서 제공하는 아이콘 사이트로 한글화가 되어있어요.
- 상업적 무료로 사용 가능해요.
- 소스코드 삽입 / cdn / bower 등 다양한 방법으로 사용할 수 있어요.
iconsvg
- 페더 아이콘(feather icon)을 수정 및 가공하여 제공하는 아이콘 사이트예요.
- 기존의 폰트를 리디자인한 후 svg 코드 복사/파일 다운로드할 수 있어요.
- 무료이며 개인 및 상업용으로 사용할 수 있어요.
s-ings
- 벡터 형태의 그래픽 아이콘 모음집과 폰트를 같이 제공해요.
- 상단의 깃허브 사이트에서 아이콘 svg 파일과 코드를 다운받을 수 있어요.
- 라이선스 고지를 하면 상업용으로 사용할 수 있어요.
굿스터프노넌센스
goodstuffnononsense.com/hand-drawn-icons
- 손 그림 형식의 디자인 아이콘, 일러스트를 다양한 소스 파일로 다운받을 수 있어요.
- 상업용으로 사용 가능하지만 출처 표기가 필요해요.
- 무료도 있지만 유료가 많아요.
와! 아이콘을 모아볼 수 있는 사이트가 정말 많지 않나요? 필요한 상황에 맞게 아이콘 사이트를 찾아보실 수 있도록 정리해드릴게요.
✅ 웹/앱 기획에 사용할 그래픽 디자인의 아이콘이 필요하다면?
✅ 이미지 배너 등에 사용할 아이콘이 필요하다면?
✅ 그래픽/일러스트 디자인 아이콘을 한 번에 찾고 싶다면?
이 중 큐레터는 아래의 사이트를 추천해 드려요. 👇🏻
제가 직접 써보니 아이콘몬스터, 리믹스아이콘, 포스포어 아이콘즈는 웹사이트와 아이콘이 심플하고 깔끔한 디자인으로 되어 있어서 쉽게 이용할 수 있었어요. 더나운프로젝트는 단순한 형태의 아이콘뿐만 아니라 복잡한 형태의 일러스트 아이콘이 많아서 배너 소재를 제작 업무에 활용하기 좋았어요.
또, 아이콘즈8과 부트스트랩, 포스포어 아이콘즈, 폰트 어썸과 같은 곳은 웹 기획, 디자인 등에 널리 활용되는 피그마(Figma)에 플러그인으로 제공하고 있어요. 덕분에 피그마에서 바로 검색해 사용할 수 있어 피그마를 자주 사용하시는 분은 유용하게 사용하실 수 있을 것 같아요!
아이콘을 제공하는 사이트마다 장단점이 있기 때문에 아이콘의 목적, 용도 등에 따라 입맛에 맞는 사이트를 찾아 사용해 보시면 좋아요. 또한, 앞서 미리 말씀드렸듯이 너무 많은 아이콘은 오히려 심미성을 해치기도 하니 적절하게 사용하세요! 😉
여기에 나와 있지 않지만 유용하고 좋은 아이콘 사이트가 있다면 댓글로 많이 많이 알려주세요!
다음에도 알찬 리뷰로 찾아뵙겠습니다. 🌸
🍀 큐-리뷰인의 또 다른 리뷰 시리즈를 만나보세요
- 요즘은 디스코드에서 커뮤니티하고 소통한다며?
- 누가 더 잘 썼을까? AI vs 사람이 만든 카피 문구
- AI 카피라이팅 툴, 제가 사용해봤습니다!
- 마케터의 업무 생산성 높여주는 이것 list 4
- 고객과의 직접적인 소통 채널, 서베이 툴 4가지
herego님 외 56명이 좋아합니다.
