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

디자인

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

처음 와이어 프레임을 제작할 때, 가장 어려웠던 것은 일관성 있는 아이콘을 삽입하는 일이었습니다. 피그마나 스케치 같은 툴도 없었고, 아이콘도 검색을 통해 하나씩 찾아내야 하는 과정이 많았습니다. 다행히 와이어 프레임의 역할은 실제 사용자를 만나는 것이 아니기에 조금씩 다른 모습이어도 큰 문제는 없었지만, 와이어 프레임을 실제 화면으로 구성할 당시는 달랐습니다. 디자이너가 포토샵으로 아이콘을 하나씩 수정하여 제작하는 과정은 꽤 복잡하고 어려워 보였기 때문입니다. 물론 지금은 환경이 많이 달라졌지만, 원하는 아이콘이나 일러스트를 상황에 따라 찾고 이를 원하는 수준으로 맞추는 일은 특정 툴의 도움을 받아야 합니다.

 
아이콘 서비스 Shape

 

오늘 소개할 'Shape'은 매번 다른 곳에서 비슷한 맥락의 아이콘을 찾기 어려운 상황, 취향에 맞게 수정하기 위해 많은 시간을 투자하는 것을 개선하고자 만든 서비스입니다. 현재는 애플은 물론 페이스북, 에어비앤비, 구글 등에서도 사용하는 웹서비스입니다. 'Shape'에서는 상황 별 아이콘과 일러스트(GIF 포함)를 원하는 컬러 조합, 크기, 움직임 등에 따라 편집해, 동일한 스타일의 여러 결과물을 동시에 내려받을 수 있습니다. 지금부터 관련 기능을 하나씩 살펴보겠습니다.

 

 

자주 쓰이는 디자인 요소를 확인 후 편집

아이콘 서비스 Shape

 

'Shape'에서 제공하는 편집 대상은 크게 4가지로 나뉩니다. 기본적으로 아이콘과 일러스트가 있으며, 이 둘을 각각 동적인 형태로 확인, 편집할 수 있는 기회도 얻을 수 있습니다. 즉, 아이콘과 일러스트를 다양한 카테고리에 따라 기본 제공하며 이는 다시 움직이는 모습으로 확인, 편집해 활용할 수 있습니다. 앱/웹 화면에서는 로딩 애니메이션 등 동적인 요소가 자주 쓰이는데, 정적인 아이콘 대비 찾거나 제작하기가 훨씬 까다로울 수밖에 없는데요. 이곳에서는 같은 스타일로 완성된 정적이고, 동적인 아이콘과 일러스트를 함께 편집할 수 있다는 장점이 있습니다. 이 부분이 'Shape'의 가장 큰 차별점이기도 합니다.

 

아이콘과 일러스트는 각각 10개 이상의 카테고리로 구분되어 있으며, 각 카테고리에는 다양한 종류의 내용이 포함되어 있어 서비스에 사용할 경우, 대부분의 상황에 해당하는 내용을 어렵지 않게 찾을 수 있습니다. 편집 기능이 잘 갖춰져 있어도 제공되는 아이콘이나 일러스트가 부족할 경우, 계속 사용할 이유가 없어지지만 이곳은 기본 제공되는 수가 많고, 계속 업데이트된다는 점이 매력적입니다.

 

 

스타일 편집이 가능한 아이콘

아이콘 서비스 Shape

 

먼저 아이콘 전체를 기준으로 편집 화면을 살펴보겠습니다. 편집 화면 구성은 위 이미지에서는 빠졌지만 왼쪽에 아이콘, 일러스트 등 원하는 편집 대상을 선택할 수 있는 메뉴가 위치하며, 가운데는 선택한 편집 대상(아이콘 - 전체, 아이콘 - 커뮤니케이션 등) 리스트가 있습니다. 마지막으로 오른쪽에 스타일, 사이즈, 선 굵기, 컬러 구성, 내보내기 등의 도구가 자리 잡고 있습니다. 편집 대상을 고르고, 실제 모습을 확인한 뒤, 원하는 조건을 추가하는 흐름에 따라 화면이 구성된 것을 알 수 있으며, 컬러 등을 변경할 때마다 적용 모습을 바로 확인할 수 있습니다.

 

아이콘 서비스 Shape

 

편집 조건은 다양하지만, 실제 편집 과정은 크게 어렵지 않습니다. 우리가 유사한 툴을 사용하며 학습하거나, 경험한 내용을 바탕으로 충분히 진행할 수 있기 때문입니다. (1) 먼저 아이콘 스타일을 선택할 수 있습니다. 스타일은 아웃라인만 강조, 한 가지 컬러만 사용, 여러 컬러를 사용 등 아이콘을 어떤 스타일에 따라 구성할지 선택하는 과정입니다. (2) 사이즈와 선 두께도 숫자 단위로 변경할 수 있습니다. (4) 그리고 3개 이상의 컬러를 각각 선택할 수 있습니다. 컬러는 프리셋으로 제공되는 컬러 조합을 선택할 수도 있고, 직접 세 가지 이상의 컬러를 선택해 적용할 수도 있습니다. 조건을 변경하거나 추가하면, 바로 그 모습을 확인할 수 있습니다. 

 

아이콘 서비스 Shape

 

앞서 살펴본 편집 과정이 아이콘 '전체'에 해당하는 작업이라면, 특정 아이콘을 선택해 팝업 상태로 편집을 진행하는 것도 가능합니다. 이때 제공되는 편집 도구는 동일하지만, 스타일을 더 직관적인 모습으로 팝업 하단에서 확인하며 작업할 수 있습니다. 아무래도 컬러보다 '스타일'이 중요한 기준이 되기 때문에, 저는 필요한 아이콘을 몇 개 찾은 뒤 하나의 아이콘을 기준으로 편집 작업 후 전체 아이콘에 적용하는 방법을 활용하고 있습니다. 

 

아이콘 서비스 Shape

 

편집 방법부터 소개했지만, 사실 편집 전 아이콘 탐색 과정이 재밌습니다. 그만큼 다양한 종류의 아이콘이 제공되기 때문입니다. '커뮤니케이션'에 해당하는 아이콘만 해도 위의 이미지와 같이 여러 상황에 맞춰 제공됩니다. 사각형 메시지에 해당하는 아이콘을 기준으로 보면 최소 20개 이상이 제공됩니다. 덕분에 상황을 아주 작게 나눠도 이곳을 통해 맞춤형 아이콘 확인 및 편집, 활용이 가능합니다. 

 

아이콘 서비스 Shape

 

정적인 아이콘은 물론 동적인 아이콘 역시 편집할 수 있습니다. 각 아이콘에 마우스를 가져가면 어떻게 움직이는지 모습을 상세히 확인할 수 있습니다. 일반 아이콘에 비해 개수는 적지만, 일반적으로 서비스를 사용하는데 필요한 내용은 대부분 포함되어 있습니다.

 

아이콘 서비스 Shape

 

다만 움직임이 포함된 아이콘은 편집 방법에도 약간의 차이가 존재합니다. 일반 아이콘은 주로 스타일에 초점이 맞춰져 있었는데, 동적인 아이콘은 움직이는 '속도'에 집중하기 때문입니다. 그래서 가장 먼저 'GIF Speed' 설정이 자리 잡고 있으며, 1X, 2X 등으로 속도를 늘리거나 줄일 수 있습니다. 이 설정값이 변경되면 왼쪽으로 아이콘의 움직임이 어떻게 달라지는지 바로 확인할 수 있습니다. 그 외 컬러는 동일한 방법으로 설정합니다.

 

 

같은 방법으로 편집하는 일러스트

아이콘 서비스 Shape

 

위에서 살펴본 아이콘과 같은 방법으로 일러스트를 편집할 수 있습니다. 제공되는 종류가 다양함은 물론, 편집 방법이 동일하게 적용되어 있어 편리합니다. 방법이 달랐다면 비슷한 맥락의 작업을 하는 데 있어 각기 다른 학습 과정을 거쳐야 하기 때문입니다.

 

일러스트도 스타일과 사이즈 및 선 두께 그리고 컬러 구성에 따라 편집 도구를 사용할 수 있습니다. 다만 아이콘에 비해 구성이 복잡한 경우가 있어, 스타일과 컬러를 잘못 선택하면 대상을 명확하게 알아보지 못할 수 있으니 조금 더 자세히 들여다볼 필요가 있습니다. 실제로 위 이미지를 보면 스타일과 컬러를 잘못 지정해, 같은 일러스트임에도 전혀 다른 모습처럼 보이는 것을 확인할 수 있습니다

아이콘 서비스 Shape

 

개별 편집 기능도 제공됩니다. 개인적으로 일러스트는 개별 편집 화면을 더 자주 활용하게 됩니다. 큰 사이즈로 변경된 모습을 볼 수 있으며, 안쪽으로 작게 들어간 '선' 단위가 더 명확하게 구분되기 때문입니다. 전체 일러스트를 보면서 컬러 등을 변경하기보다, 가능하다면 하나의 일러스트를 선택한 뒤 원하는 조건을 하나씩 추가하는 것이 더 좋은 방법입니다.

 

아이콘 서비스 Shape

 

카테고리를 살펴보니 역시 다채롭게 제공되고 있습니다. 위 일러스트는 '사람' 카테고리에 포함된 것으로, 여러 상황을 포함하고 있습니다. 계절 속 사람이나, 행동에 따른 사람 모습 등이 담겨 있습니다. 일러스트는 상황을 더 구체적이고 넓은 범위에서 보여줄 수 있어, 이렇게 많은 수가 제공된다면 서비스 성격에 따라 사용할 수 있는 범위가 다양해집니다.

 

아이콘 서비스 Shape

앞부분의 설명을 통해 이미 눈치챈 분들도 있겠지만, 일러스트도 '움직임'이 포함된 내용을 따로 보고 편집할 수 있습니다. 로딩, 상황 별 장면 등 여러 카테고리에 따라 확인이 가능합니다. 특히 로딩에 해당하는 일러스트만 20개 이상 확인할 수 있어 편리합니다. 보통은 로딩 애니메이션에 필요한 대상을 찾기가 쉽지 않기 때문입니다.

 

 

정리

개인적으론 아이콘과 일러스트를 정적인 것과 동적인 것으로 나눠 다양하게 확인할 수 있다는 점이 가장 마음에 듭니다. 그만큼 다양한 상황과 맥락을 커버할 수 있다는 것을 의미하기 때문입니다. 또한 보편적으로 크게 다르지 않은 편집 도구를 제공해, 별다른 학습을 필요로 하지 않아 누구나 쉽게 상황에 맞는 아이콘이나 일러스트를 편집할 수 있다는 것도 장점입니다. 특정 스타일에 따라 잘 정리된 아이콘과 일러스트가 필요하다면 이곳을 추천합니다.

 

다만 무료 버전은 개인적인 용도로만 사용할 수 있으니 제공되는 아이콘이나 일러스트를 편집해 미리 테스트해 본 후, 필요한 경우 유료 버전을 고려해 보세요. 유료 버전에는 다양한 포맷으로 다운로드하거나 더 많은 아이콘과 일러스트 확인, 상업적 목적으로의 이용 범위가 포함됩니다.

 

<참고 자료>

Shape: https://shape.so/

 

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

댓글 0

지금 써보러 갑니다

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

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

디자인

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

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

프로덕트

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

디자인

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

디자인

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

디자인

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

프로덕트

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

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

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

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

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

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