몇 초 만에 SVG 파일을 여러 개 만들 수 있다면?

‘BLOBMAKER’

‘SVG’의 가장 큰 장점은 이미지가 깨지지 않는다는 점입니다. 보통 이미지들은 ‘bitmap’형식, 점으로 구성되어 있어 기준 이상의 해상도에서는 깨지는 현상이 있는데요! SVG와 같이 ‘vector’로 저장된 이미지, 포맷은 이미지가 깨지지 않습니다. 

가장 쉽게 이해할 수 있는 이미지!

특히 디바이스의 해상도가 점점 높아짐과 동시에 반응형에 대한 이슈가 점점 커지는 상황 속, 아이콘, 로고 등을 SVG로 활용하는 경우가 많아지고 있죠. ‘SVG’는 이미지가 깨지지 않는다는 장점 외, 마크업 언어로 이뤄져 있기에 직접 수정 또는 JavaScript, CSS로 접근하여 사용 가능, 작은 파일 사이즈, 특정 사이즈에 구애 받지 않는 다는 장점을 지니고 있습니다. 이런 장점들로 인해 스케치는 물론 다양한 그래픽, 디자인 툴에서도 ‘SVG’로 내보내기를 대부분 지원하고 있죠. (함께보세요 : 왜 SVG로 갈아탔는가?)

그래서 저도 최근에 ‘SVG’에 (뒤늦게지만..) 많은 관심을 갖게 되었고 아이콘 등을 다운로드 받을 때 PNG 포맷이 아닌 SVG 형태로 내려받아 한 번씩 자세히 뜯어보는 습관을 가지려 노력하고 있습니다. ‘SVG’얘기로 서론이 조금 길어졌는데요! 그래서 오늘은 별다른 툴을 사용하지 않더라도 다양한 모양을 웹상에서 손쉽게 제작해 ‘SVG’로 내려받을 수 있는 서비스를 소개해보려고 합니다. 

그럼 시작해볼까요? 오늘 소개드릴 서비스는 ‘Blobmaker’입니다. 스스로를 ‘Create organic svg shapes in just a few seconds’라고 소개하고 있는 곳! 딱 한 페이지로 구성된, 웹 기반의 서비스입니다. ‘Color’, ‘Complexity’, ‘Contrast’ 등 세 가지 조건으로 모양을 만들어 ‘SVG’ 포맷으로 다운로드 받을 수 있죠. 

같은 모양이라 하더라도 ‘컬러’에 따라 다르게 느껴지네요!

가장 먼저 선택할 수 있는 옵션은 ‘컬러’입니다. 기본적으로 10개의 컬러를 바로 선택할 수 있으며 컬러값을 직접 입력해 반영하는 것도 가능합니다. 원하는 컬러가 있다면 컬러값을 활용하는게 더 빠른 작업으로 이어지겠죠! 

두 번째 옵션은 ‘Complexity’ 입니다. 단어의 뜻은 복잡함 그 자체지만, 이 곳에서는 우리가 흔히 알고 있는 ‘꼭짓점’을 몇 개로 가져갈 것인지를 뜻합니다. 곡선으로 구성되어 있지만, 꼭짓점과 같은 맥락으로 3-5개 사이의 접점을 선택할 수 있네요. 

세 번째 옵션은 ‘Contrast’ 인데요! 이미지로 보면 이해가 쉽게 되지만, 말로 풀어 설명하기가 조금 애매한 옵션이기도 합니다. 원형과 그렇지 않은 도형으로 설명해놓은 것을 통해, 그리고 실제로 한 단계씩 선택하며 변하는 모양들을 통해 원형에 얼마나 가까운지, 먼 지를 확인하는 용도로 저는 활용할 수 있었습니다. 

랜덤 생성 옵션도 있지요!

앞선 세 가지 옵션도 모두 귀찮다면! 다운로드 버튼 왼쪽에 있는 버튼을 클릭해보세요! 자동으로 모양을 잡아줍니다. 계속 클릭하다가 마음에 드는 모양이 나오면 바로 다운로드를!

이렇게 완성된 모양들은 모두 ‘SVG’로 조건없는 다운로드가 가능합니다. 이를 앞서 ‘SVG’를 소개하며 말씀드렸던 것처럼 CSS에서 활용하는 등의 추가 작업이 가능해지는 것이죠. 기존 작업 방식에 비해 더 빠르고 간편하게 기초 모양을 잡아낼 수 있다는 점이 가장 큰 매력이었습니다.

지금 바로 모양을 만들고 싶으시다면, ‘이 곳’을 확인해주세요! 

한성규님의  ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.