NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

문서나 화면을 설계할 때, 아이콘만큼 자주 활용하는 것도 없습니다. 특정 사용자를 대상으로 하는 화면에서는 텍스트로 모두 전하지 못하는 메시지를 아이콘과 함께 전달할 수 있으며, 문서 작업 과정에서는 텍스트 사용을 줄이고 요약 또는 강조를 하는데 활용할 수 있기 때문입니다. 활용도에 비해 하나씩 원하는 아이콘을 제작하기란 그리 쉬운 일이 아니며, 일관성 있는 모습을 유지하기도 어렵습니다. 그래서 오늘은 무료로 특정 주제에 따라 다채로운 아이콘을 제공해주는 서비스 3개를 소개하고자 합니다.

 

5가지 주제의 3D 아이콘을 제공하는: Shapefest

3D 아이콘 Shapefest

'Shapefest'는 요즘 제가 가장 많이 드나드는 곳입니다. 플랫 아이콘이 아닌, 3D로 구성된 다섯 가지 주제의 아이콘을 무료로 활용할 수 있기 때문입니다. 게다가 개인 프로젝트는 물론, 상업적 프로젝트에도 무료로 활용할 수 있어 사용 범위가 자유롭다는 장점이 있습니다. (다만, 재판매 및 공유, 양도, 재배포 등은 금지)

 

'Shapefest'에서는 (1) Clay and Plastic (2) Glass (3) Metal (4) Textile (5) Ceramic 등 표현 형태에 따른 다섯 가지 카테고리가 제공됩니다. 각 카테고리는 다시 모양, 아이콘, 사물, 텍스트 표현 등 네 가지 구분에 따라 확인할 수 있습니다. 제공되는 아이콘의 수가 많아 어떤 카테고리를 선택해도 여러 아이콘을 리스트 형태로 확인하고 비교할 수 있는 환경을 제공합니다.

 

3D 아이콘 Shapefest

첫 번째로 확인할 수 있는 (1) Clay and Plastic 카테고리 내 포함 아이콘 리스트입니다. 소셜 아이콘, 손 모양 아이콘, 애플 디바이스 아이콘 등 여러 종류를 확인할 수 있는 모습입니다. 보통은 아이콘을 동일한 스타일에 따라 제공하는 경우가 많은데, 이곳은 같은 아이콘이라 하더라도 표현 형태(위 이미지는 점토와 플라스틱)에 따라 다르게 활용할 수 있어 더 매력적으로 다가옵니다.

 

3D 아이콘 Shapefest

리스트의 맨 앞에 위치한 플라스틱 형태의 '아이콘'을 선택해봤습니다. 리스트에서 특정 아이콘을 클릭하면 상세 화면으로 이동하게 되며, 아이콘에 대한 자세한 내용을 확인할 수 있습니다. 67개 아이콘, 2개의 각도, 총 134개 아이콘을 확인할 수 있다는 내용이 보입니다. 내용 확인 후 '무료 다운로드' 버튼을 클릭해 아이콘을 내려받을 수 있는데, 이메일 주소를 꼭 입력해야 합니다.

 

3D 아이콘 Shapefest

화면을 조금 내리면 포함된 아이콘을 자세히 확인할 수 있습니다. 같은 아이콘이 2가지 각도에 따라 제공되는 모습입니다. PNG 포맷으로 제공되기 때문에 이렇게 각도를 다르게 내려받을 수 있다면 원하는 문서나 화면 등에 더 쉽게 적용할 수 있습니다. 직접 각도 등을 수정하지 않아도 되기 때문입니다.

 

3D 아이콘 Shapefest

저는 뉴스레터 등을 제작할 때 이 아이콘을 정말 많이 활용했습니다. 손으로 표현하는 3,000여 개가 넘는 제스처를 아이콘처럼 활용할 수 있기 때문입니다. 각도 역시 20개 이상으로 제공되어 PNG로 내려받아도 콘텐츠 제작, 웹사이트 작업 시 특정 내용을 강조할 때 유용하게 활용할 수 있습니다.

 

3D 아이콘 Shapefest

그 외에도 다양한 질감으로 표현된 아이콘을 탐색하는 즐거움이 가득합니다. 다른 곳에서 쉽게 만날 수 없는 아이콘이 잔뜩 모여있는데, 몇 명의 디자이너가 아이콘을 직접 제작해 제공하기에 더 값진 공간입니다. 조금 더 특별한 아이콘을 찾고 있다면, 당장 이곳만큼 매력적인 곳은 없다고 생각합니다.


여러 언어의 코드로 아이콘을 확인할 수 있는: Tabler

언어 코드 아이콘 Tabler

두 번째 아이콘 제공 서비스는'Tabler'입니다. 6가지 사이즈, 5가지 굵기, 30개 카테고리에 따라 1,388개의 픽셀 아이콘을 내려받을 수 있습니다. 아이콘을 키워드로 입력해 검색할 수 있으며, 원하는 카테고리에 따라 탐색하는 것도 가능합니다. 아이콘을 활용함에 있어 가장 중요한 건, '일관성'이라고 생각하는데 이곳은 동일 스타일의 아이콘을 라인 두께나 크기에 따라 확인할 수 있다는 점이 좋습니다.

 

언어 코드 아이콘 Tabler

우리가 앱, 웹서비스를 구성하는데 필요한 아이콘이 대부분 포함되어 있어 기본 아이콘을 찾고 활용하는데 무리가 없습니다. 앞서 소개한 3D 아이콘이 밋밋한 공간을 조금 더 특별하게 만들어주는 역할을 한다면, 이곳은 기본적인 아이콘을 찾고 코드를 복사해 바로 적용할 수 있게 도와주는 역할을 해줍니다.

 

언어 코드 아이콘 Tabler

제공되는 아이콘 중 하나를 클릭하면 상세 모습과 함께 활용 가능한 방법을 한눈에 살펴볼 수 있습니다. SVG 코드를 복사하거나 내려받을 수 있으며 PNG 포맷도 함께 지원합니다. 리액트 등 다른 언어도 제공하기 때문에 조건에 따라 빠르게 적용할 수 있다는 장점이 있습니다.

 

언어 코드 아이콘 Tabler

화면을 조금 더 아래로 내리면 선택한 아이콘의 '데모' 역시 확인할 수 있습니다. 제공되는 사이즈에 따른 모습과 버튼 등에 적용된 모습을 볼 수 있어 어떤 조건을 선택, 어떻게 활용하면 좋은지에 대한 힌트를 얻을 수 있습니다.

 

언어 코드 아이콘 Tabler

아이콘은 일괄 다운로드가 가능하며, 피그마 플러그인도 제공하기 때문에 디자인 작업 시 유용하게 활용할 수 있습니다.


원하는 컬러에 따라 아이콘을 확인할 수 있는: Ikonate

컬러 아이콘 Ikonate

오늘 마지막으로 소개할 아이콘 제공 서비스는 'Ikonate'입니다. Tabler와 유사한 모습이지만, 크기나 라인 두께를 더 넓은 범위 내 지정할 수 있으며 원하는 컬러에 따라(컬러 값은 직접 입력해야 함) 아이콘을 확인할 수 있습니다. 무엇보다 컬러를 입력, 특정 컬러가 적용된 아이콘을 웹상에서 확인할 수 있다는 점이 좋습니다. 웹사이트 구성 방법에 따라 컬러가 충분히 다르게 적용될 수 있기 때문입니다.

 

컬러 아이콘 Ikonate

왼쪽 편집 도구를 통해 각각 두께, 크기, 컬러 등을 선택할 수 있습니다. 위 이미지는 제가 다른 조건은 동일하게 두고, 컬러 값만 변경해 아이콘을 확인하는 모습입니다. 밝은 컬러를 확인할 경우, 라이트 모드에서 잘 보이지 않을 가능성이 있는데 이를 위해 다크 모드 또한 지원하고 있습니다.

 

컬러 아이콘 Ikonate

이번에는 컬러와 함께 두께, 아이콘 크기를 함께 변경한 모습입니다. 앞서 확인한 아이콘과 확연히 다른 스타일을 볼 수 있습니다. 컬러를 변경할 수 있어 더 다양한 조건에 따라 아이콘을 활용할 수 있습니다.

 

컬러 아이콘 Ikonate

원하는 스타일이 완성되면, 아이콘을 하나씩 클릭해 원하는 것만 내려받을 수 있습니다. 아이콘은 기본 SVG 포맷으로 내려받을 수 있으며 압축파일로 제공됩니다. 몇 가지 상황에 맞는 아이콘을 찾고 싶다면, 왼쪽 편집 도구를 통해 스타일을 설정한 뒤 상단 '검색 기능'을 활용할 수 있습니다.

 

 

<참고 자료>

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

당신의 ‘선’ 작업을 돕는 2가지 서비스

프로덕트

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.