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

오늘 소개할 서비스 역시 이런 불편을 해결하기 위해 시작되었습니다. ‘Shape’은 매번 다른 곳에서, 비슷한 맥락의 아이콘을 찾기 어려운 상황과 입맛에 맞게 수정하기 위해 많은 시간을 투자해야 하는 환경을 개선하기 위해 시작된 서비스입니다. 현재는 애플은 물론 페이스북, 에어비앤비, 구글 등에서도 사용하는 웹서비스가 되었습니다. ‘Shape’에서는 상황 별 아이콘과 일러스트(GIF 포함)를 원하는 컬러 조합, 크기, 움직임 등에 따라 편집해 동일한 스타일의 여러 결과물을 동시에 내려받을 수 있습니다.

(1) 자주 쓰이는 디자인 요소를 한 곳에서 확인하고 편집

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

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

(2) 스타일, 컬러, 사이즈, 선 굵기 등으로 편집 가능한 아이콘

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

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

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

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

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

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

(3) 아이콘과 같은 방법으로 편집할 수 있는 일러스트

아이콘과 같은 방법으로, 일러스트 또한 편집할 수 있습니다. 제공되는 종류가 다양하다는 것은 물론, 편집 방법이 동일하게 적용되어 있다는 점 역시 마음에 드는 내용입니다. 방법이 다르다면, 비슷한 맥락의 작업을 하는 데 있어 각기 다른 학습 과정을 거쳐야 하기 때문입니다.

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

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

처음에는 아이콘을 주로 편집해 일러스트의 수를 제대로 살펴보지 못했는데, 일러스트도 카테고리 별 다채롭게 제공되고 있습니다. 위 일러스트는 ‘사람’ 카테고리에 포함된 것으로, 여러 상황을 포함하고 있습니다. 계절 속 사람이나 행동에 따른 사람 모습 등이 담겨 있습니다. 일러스트는 상황을 더 구체적이고 넓은 범위에서 보여줄 수 있기에, 이렇게 많은 수가 제공된다면 서비스 성격에 따라 사용할 수 있는 범위 역시 다양해질 수 있습니다.

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

(4) 정리

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

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

더 자세한 내용은 ‘이곳’을 참고해주세요!

함께 활용해보세요!