다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

 

저는 사이드 프로젝트나 문서 작성을 위해 아이콘 제공 서비스, 플러그인 등을 즐겨찾기 하거나 미리 설치해놓고 자주 활용하는 편입니다. 아이콘을 직접 제작할 여유가 없는 상황에서 원하는 아이콘을 빠르게 찾아 적용하기 좋은 방법이기 때문입니다. 그래서 무료로 사용 가능한 조건이 있어도 좀 더 세부적인 설정을 적용해 아이콘을 다운로드하거나, 작성 중인 화면이나 문서에 입력할 수 있으면 좋겠다고 생각했습니다. 그러다 얼마 전, 웹상에서 기본 아이콘을 바탕으로 배경 컬러나 다양한 효과를 적용해 아이콘을 제작할 수 있는 ‘Iconray서비스를 발견해, 오늘 소개하고자 합니다.

 

다양한 도구를 활용해 나만의 아이콘 제작이 가능한 곳

아이콘 서비스 Iconray
<출처: Iconray>

 

보통 아이콘은 일정한 디자인을 바탕으로 선택 후 내려받거나, 두께나 컬러 등 제한된 편집을 진행한 뒤 활용하는 경우가 많습니다. 부가 기능을 덧붙인다면 원하는 아이콘을 검색하거나, 피그마 등에서도 활용할 수 있는 플러그인 정도로 생각할 수 있습니다. 하지만 오늘 소개할 ‘Iconray’는 편집 기능을 폭넓게 제공해, 우리가 별도의 디자인 툴을 사용하지 않고도 꽤 그럴듯한 아이콘을 활용할 수 있도록 도와줍니다. 

 

아이콘 서비스 Iconray
<출처: Iconray>

 

편집 가능한 아이콘 리스트와 검색 기능이 포함된 기본 편집화면의 모습입니다. 왼쪽으로 선택 가능한 다양한 종류의 아이콘을 확인할 수 있고, 특정 아이콘을 선택하면 오른쪽 화면에 아이콘이 적용된 것을 알 수 있는 구성입니다. 원하는 아이콘을 검색할 수 있으며, 검색창 옆 셔플 버튼을 클릭해 임의로 아이콘을 불러올 수 있습니다. 작업해야 할 아이콘이 명확하다면 검색 기능을, 일단 아무 아이콘이나 적용해 편집을 해보고 싶다면 셔플 기능을 유용하게 사용할 수 있습니다.

 

아이콘 서비스 Iconray
<출처: Iconray>

 

이번엔 선택한 아이콘을 편집할 수 있는 상세 도구를 살펴보겠습니다. 크게 2개의 영역으로 나뉘며, 가장 먼저 확인할 수 있는 도구는 컬러입니다. 기본 제공되는 16개 컬러 프리셋이 있는데, 이중 하나를 선택하면 아이콘 배경 컬러와 구성이 바로 변경됩니다. 프리셋은 최근에도 자주 보이는 컬러로 구성되어 있어, 특정 컬러를 선택하기 어렵다면 더 편리한 사용이 가능합니다. 

 

컬러 구성은 크게 두 가지로 나뉘는데, 2가지 컬러를 조합해 사용하는 방법이 하나 있고 하나의 컬러를 강조해 사용하는 방법이 있습니다. 기본 설정은 2가지 컬러 조합이며, 하나의 컬러를 사용하고 싶다면 ‘Fill Type’에서 ‘Linear가 아닌 Solid’를 선택해 주시면 됩니다. ‘Solid’를 선택하면 하나의 컬러만 선택할 수 있도록 도구 모음이 변경됩니다. 

 

컬러 외, 배경을 어떤 타입으로 지정할 것인지 선택할 수 있으며 반경을 선택해 완전한 사각이나 원형으로 편집할 수 있습니다. 1px 단위로 설정할 수 있어 같은 원형이라 하더라도, 스쿼클(모서리가 둥근 정사각형)과 같은 모습을 빠르게 지정할 수 있다는 장점이 있습니다. 또한 아이콘에 선을 추가해 두께나 색을 변경할 수 있고, 아이콘 자체의 컬러나 사이즈를 바꾸는 도구도 제공합니다. 전반적으로 아이콘 편집에 필요한 핵심 도구가 포함된 모습이며, 덕분에 원하는 아이콘을 선택한 뒤 우리의 상황에 맞는 편집이 가능합니다. 

 

아이콘 서비스 Iconray
<출처: Iconray>

 

도구를 하나씩 살펴본 다음 바로 아이콘 편집을 해봤는데요. 같은 모양의 아이콘을 두고 편집 도구를 통해 얼마나 다른 모습을 만들어낼 수 있을지가 가장 궁금했습니다. 2개의 컬러를 조합해 사용한다고 했을 때, 컬러를 직접 선택할 수 있어 단순 모양으로는 꽤 많은 수의 아이콘 생성이 가능합니다. 아이콘 제작은 보통 아이콘 자체를 설계하는데 많은 시간을 필요로 하기에, 이미 완성된 아이콘을 두고 편집을 할 수 있어 많은 시간을 줄일 수 있습니다. 

 

아이콘 서비스 Iconray
<출처: Iconray>

 

컬러에 또 다른 조건을 추가하면 더 많은 조합을 만들어낼 수 있습니다. 우선 같은 컬러라 하더라도 노이즈 등을 적용하는 2가지 효과를 활용할 수 있습니다. 빈티지한 느낌 등을 아이콘에 그대로 녹여내고 싶을 때 유용하게 활용할 수 있습니다. 또한 앞서 편집 도구 설명 시 살펴본 것처럼 테두리 모양을 자유롭게 조절할 수 있어, 다채로운 모양을 만들어낼 수 있습니다. 원형, 스쿼클, 사각형 등 모두 적용이 가능합니다. 

 

아이콘 서비스 Iconray
<출처: Iconray>

 

자주 쓰는 단위에 맞게 크기를 선택하는 옵션이 있으면 더 좋았을 것 같은데, 대신 숫자를 입력해 직접 변경할 수 있습니다. 아이콘의 컬러도 컬러 값을 입력해 변경할 수 있는데요. 앞서 살펴본 도구들과 함께 활용한다면 정해진 범위는 존재하지만, 취향에는 더 잘 맞는 아이콘을 제작, 활용할 수 있습니다. 

 

아이콘 서비스 Iconray
<출처: Iconray>

 

아이콘을 제작하면서 도구의 유용성도 좋았지만, 단축키를 활용할 수 있다는 점 역시 매력적이었습니다. 방금 작업한 내용을 취소하는 등의 기본적인 내용이지만, 별도 안내를 제공하는 것은 물론 검색창으로 바로 이동하는 등의 행동이 가능해 작업에 유용합니다.

 

 

한 번은 꼭 써봐야 하는 이유

아이콘 서비스 Iconray
<출처: Iconray>

 

Iconray는 어렵지 않게 누구나 쉽게 접근할 수 있으며, 웹상에서 별도의 프로그램 등을 설치하지 않고 입맛에 맞는 아이콘을 제작할 수 있다는 점이 가장 큰 장점입니다. 아이콘 세트를 요즘엔 쉽게 구할 수 있다고 하지만, 직접 편집 권한을 제공하는 경우는 많지 않습니다. 만약 편집이 가능하다 하더라도 컬러 등 제한적인 범위에서만 가능하기 때문입니다. 물론 아이콘을 직접 만드는 것만큼의 품질은 아니지만, 기본적으로 자주 사용하는 아이콘을 기준으로 다양한 조건을 추가해 편집할 수 있다는 것만으로도 즐겨찾기를 해 둘 가치는 충분해 보입니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

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

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 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 이야기를 전달해드려요.

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