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

디자인

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

 

정적인 이미지나 일러스트보다 일정한 패턴의 움직임이 포함된 동적인 대상에 시선이 더 오래 머물게 됩니다. 아무래도 우리의 눈은 움직임이 포함된 대상을 더 집중해서 보게 되는 하나의 자극으로 느끼기 때문입니다. 모션이나 영상 등을 랜딩 페이지에 자주 포함하는 이유도 같은 맥락에서 이해할 수 있습니다.

 

오늘은 정적인 SVG 파일을 일정한 패턴에 따라 ‘움직임'이 포함된 대상으로 변경할 수 있는 웹 서비스를 소개하고자 합니다. 디테일한 작업은 어렵지만, 직접 제작한 SVG 파일이나 이곳에서 직접 편집할 수 있는 일러스트 파일을 활용해 가벼운 애니메이션을 추가할 수 있어 급할 때 많은 도움을 받을 수 있습니다.

 

생동감 있는 일러스트를 손쉽게 생성

일러스트 편집 생성
<출처: Designstripe 홈페이지>

 

‘Designstripe’는 움직임이 없는 SVG 파일을 움직임이 있는 파일로 쉽게 생성할 수 있는 서비스입니다. 애니메이션이 포함된 파일로 직접 편집할 수 있으며, 정적인 파일 그대로를 편집 도구를 활용해 다른 스타일로 만드는 것도 가능합니다. 단순 이미지 편집을 도와주는 사이트는 많지만, 움직이는 이미지를 만드는 건 별도의 툴을 사용하지 않으면 쉽지 않아서 더 유용하게 활용할 수 있습니다.

 

파일을 업로드하는 방법은 크게 세 가지입니다. 하나는 샘플로 제공하는 파일을 활용하는 방법, 또 하나는 보유하고 있는 파일을 직접 등록하는 방법 그리고 ‘Designstripe’에서 사용할 수 있는 또 하나의 기능인 일러스트 편집 기능을 활용해 제작 후 등록하는 방법입니다.

 

Designstripe 메뉴
<출처: Designstripe 홈페이지>

 

편집 기능은 종류가 많지는 않지만, 꼭 필요하다고 생각되는 도구로 구성되어 있습니다. ① 파일을 직접 등록할 수 있는 버튼으로 시작합니다. 지금 화면은 이미 특정 ‘SVG 파일'을 선택한 후의 모습이지만, 앞서 말씀드린 것처럼 이곳에서 제공하는 샘플 이미지를 통해 먼저 편집 과정을 경험할 수도 있습니다. ② 선택한 파일에 애니메이션을 추가할 것인지 정적인 느낌 그대로 스타일만 변경할 것인지 선택하는 단계입니다.

 

③ 애니메이션을 선택한 경우 사용 가능한 도구입니다. 애니메이션의 ‘속도'를 지정할 수 있으며, 선택한 값에 따라 선택한 파일의 애니메이션 속도를 실시간으로 확인할 수 있습니다. ④ 스타일을 선택할 수 있는 도구입니다. ⑤ 스타일에 따라 왜곡 정도나 선의 두께 정도를 정할 수 있습니다. ⑥ 마지막으로 편집이 완료된 이미지를 내보낼 수 있습니다.

 

애니메이션 스타일 편집
<출처: Designstripe 홈페이지>

 

두 가지 스타일을 한눈에 볼 수 있는 이미지입니다. 클릭 한 번으로 별도의 작업 과정 없이 스타일을 두 가지로 확인하고 변경할 수 있습니다. 지원하는 스타일이 적어 아쉽지만, Designstripe에서 일러스트를 직접 다양한 방법에 따라 편집할 수도 있기 때문에 함께 활용하면 아쉬운 부분을 채울 수 있습니다.

 

일러스트 편집
<출처: Designstripe 홈페이지>

 

왜곡 정도와 선의 두께를 확인할 수 있으며, 왼쪽은 최소/오른쪽은 최대로 설정한 모습입니다. 왜곡과 선의 두께에 따라 같은 이미지(일러스트)라 하더라도 전혀 다른 분위기를 표현할 수 있기에 꼭 필요한 도구입니다. 특히 애니메이션을 포함하는 경우 더 큰 영향을 줄 수 있습니다.

 

애니메이션 편집
<출처: Designstripe 홈페이지>

 

애니메이션이 적용된 ‘SVG 파일'은 2가지 포맷으로 받을 수 있습니다. 눈에 띄는 점은 ‘Lottie’를 지원하는 것입니다. ‘Lottie’는 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력해서 실제 코드로 웹과 앱에서 적용되게 해주는 기술입니다. 에펙으로 작업한 애니메이션을 웹, 앱에 적용할 수 있습니다. 디자인의 퀄리티를 높여주는 요소입니다. 간단한 구성이지만, 이곳을 통해 작업한 결과를 ‘Lottie’로 내보낼 수 있다는 점은 또 하나의 매력이라고 할 수 있습니다.

 

 

선택의 가짓수를 늘려주는 무료 제공 일러스트

무료 제공 일러스트
<출처: Designstripe 홈페이지>

 

‘Designstripe’가 매력적인 또 하나의 이유는, 애니메이션을 추가할 일러스트를 직접 선택하고 편집할 수 있는 기능을 제공한다는 점입니다. 물론 모두 무료로 사용하는 건 어렵지만, ‘Free’ 라벨이 붙은 일러스트가 꽤 많아 선택의 폭이 넓은 편입니다. 마음에 드는 SVG 파일이 없다면, 무료 일러스트 중 하나를 선택해 편집 과정을 거쳐 다시 애니메이션을 추가하는 과정을 한 곳에서 해결할 수 있습니다.

 

일러스트 편집 화면
<출처: Designstripe 홈페이지>

 

일러스트 편집 화면의 모습입니다. 무료로 제공되는 일러스트는 로그인이나 회원가입 등 별도 과정 없이 바로 편집할 수 있습니다. 기본 컬러를 ‘세트' 단위로 변경할 수 있으며, 로그인 후 자주 사용하는 컬러를 저장 후 관리할 수 있게 구성했습니다. 하나의 일러스트에 포함되는 여러 오브젝트의 수를 변경할 수 있으며, (예를 들어 최초 일러스트에 10개의 대상이 있는데 이를 3개로 변경하는 등) 스타일 역시 바꿀 수 있습니다. 무엇보다 매력적인 건 특정 오브젝트를 하나씩 추가해 나만의 일러스트를 구성하기 편한 환경이라는 점입니다.

 

trending illustrations
<출처: Designstripe 홈페이지>

 

작업 스타일에 따라 다양한 일러스트를 확인할 수 있으며, 특정 일러스트를 편집해 저장한 뒤 앞서 소개한 ‘애니메이션' 편집을 이어가기에 정말 좋은 환경을 제공합니다. 스타일별 일러스트 종류도 많아 고르는 즐거움도 함께 느낄 수 있습니다.

 

 

한 번은 꼭 써봐야 하는 이유

마음에 드는 일러스트를 찾고, 입맛에 따라 편집한 뒤, 애니메이션 적용에 ‘Lottie’ 포맷으로 받을 수 있는 환경을 제공하는 곳은 거의 없습니다. 게다가 학습 시간을 많이 필요로 하지 않는, 쉬운 사용성을 가진 곳은 더 찾기 어렵다고 생각합니다. 저도 여러 툴을 자주 사용하고 있지만 이런 환경을 제공하는 곳은 쉽게 떠오르지 않을 만큼 매력적인 곳입니다.

 

물론, 웹서비스로 제공되는 만큼 아주 디테일한 편집이나 애니메이션 적용은 불가능합니다. 그럼에도 불구하고 애니메이션이 적용된 파일을 가볍게 적용해야 하거나 분위기에 맞는 일러스트를 직접 편집하고 꾸며야 하는 상황이라면 더 자주 떠올리게 될 서비스가 아닐까 싶습니다.

 

<참고자료>

Designstripe

 

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

댓글 0

지금 써보러 갑니다

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

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

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