차트 생성 및 디자인 툴을 무료로 제공하는 ‘MagicPattern’

보통 문서 제작 툴에는 기본적으로 차트 기능이 포함되어 있습니다. 워드나 엑셀은 물론이고, 구글 문서나 피그마에서도 플러그인을 적절히 활용하여 차트를 제작할 수 있습니다. 오늘 소개할 ‘MagicPattern’은 SVG 형식의 차트를 생성할 수 있는데요. SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷으로, 웹사이트에 2D 그래픽, 차트, 일러스트레이션을 표현하는 데 널리 사용되며, 벡터 파일이므로 확대하거나 축소해도 해상도가 낮아지지 않는다는 장점이 있습니다.

MagicPattern은 이러한 SVG 차트를 제공하여, 문서, SNS 등에서 간략한 현황을 보여줄 때 유용하게 쓸 수 있습니다. 더불어 다양한 무료 디자인 툴을 제공하기 때문에, 그라데이션 배경 등을 쉽게 생성할 수 있습니다.

템플릿에 맞춰 제작할 수 있는 차트

먼저 MagicPattern의 기능을 소개하기 앞서, 이 서비스의 핵심은 복잡한 편집 과정 없이 누구나 쉽게 디자인 작업을 진행할 수 있도록 도와준다는 점입니다. 이전에 디자인 패턴 제작 시 유용한 서비스에서 간단히 소개했는데, 그 후로도 다양한 툴이 계속 추가되고 있습니다. 저도 문서 배경으로 쓸 디자인 패턴을 제작하거나, 특정 차트를 생성할 때 자주 활용하고 있습니다.

위 이미지는 기본 편집화면의 모습입니다. 왼쪽에 차트를 생성하고 편집하는데 필요한 도구(크게 차트 모양과 스타일, 컬러 등)가 있고, 오른쪽에선 실제 차트를 확인할 수 있습니다. 화면의 오른쪽 상단에는 데이터를 가져오거나, 이미지로 저장하는 버튼이 있습니다. (참고로 위 이미지에서 가운데 버튼을 클릭하면, 다른 툴을 선택해 이동할 수 있습니다.)

차트 타입은 크게 선과 막대로 구성되어 있습니다. 기본값은 선으로 설정되어 있어, 막대를 선택하면 위 이미지와 같이 변경됩니다. 두 차트는 타입과 상관없이 3가지 경사를 선택할 수 있는데, 우상향, 우하향, 이 둘이 섞인 버전이 있습니다. 다만 이 경사도는 데이터를 직접 입력하지 않고, 주로 단순히 그래프 이미지가 필요할 때 활용합니다. 또한 선 타입에서는 한 가지 편집 도구를 더 사용할 수 있는데, 포인트 적용 여부에 대해 설정할 수 있습니다. 위 이미지를 보면 선 그래프에 포인트가 적용되어 있습니다. 

차트 타입을 정했다면, 이제 컬러와 디테일을 선택할 차례입니다. 컬러는 값을 직접 입력하거나 팔레트를 통해 선택할 수 있습니다. 만약 컬러가 없다면 그래프를 적용할 문서나 SNS의 톤을 맞추기 어렵기 때문에, 자주 사용할 수밖에 없는 기능입니다. 또한 컬러의 강도에 따라, 더 세부적으로 선택할 수 있어 그래프별 컬러 활용도를 높여줍니다.

컬러 다음에는 그래프 사이즈와 그래프별 디자인을 편집할 수 있습니다. 막대그래프는 끝 모양을 원형 또는 직각으로 설정할 수 있고, 선 그래프는 포인트 크기, 선 두께 등을 슬라이드로 세세하게 설정할 수 있습니다. 다만 그래프 하단에 있는 새로고침 버튼은 랜덤으로 생성할 때 쓰는 것으로 편집 중에는 쓰지 않는 것이 좋습니다.

사실 실제 데이터를 쓰지 못하면 그래프의 활용도도 높지 않은데요. 그래서 MagicPattern은 데이터를 바탕으로 그래프를 생성하는 기능(실제 데이터 가져오기)을 지원합니다. 한 가지 아쉬운 점은 CSV 파일 등을 업로드하는 것은 불가능하고, 숫자를 콤마로 구분해 넣을 수 있습니다. 복잡한 차트가 아니라, 단순한 형태의 표를 빠르게 만드는 것이 목적이라면 그 과정에서 큰 불편함은 없을 것입니다.

이렇게 그래프가 완성되면 내보내기 기능을 활용할 수 있습니다. 포맷은 크게 세 가지로 PNG, JPEG, SVG가 있습니다. 여기서 또 하나 유용한 기능이 있는데, 바로 페이스북, 인스타그램, 트위터, 링크드인 등 SNS에 최적화된 사이즈에 맞춰 저장할 수 있습니다. 이미지를 내려받은 후, 사이즈 편집을 진행하지 않아도 되니 편리합니다.

컬러와 필터를 활용한 그라데이션

두 번째로 살펴볼 MagicPattern 기능은 ‘그라데이션 생성'에 도움을 주는 핵심 툴입니다. 그라데이션은 문서, 페이지, 카드 등의 배경에 자주 쓰이는데, 여기서 가장 먼저 선택할 수 있는 것은 컬러 조합입니다.

컬러는 기본으로 설정된 팔레트 중에서 선택하거나, 직접 하나씩 골라 구성할 수도 있습니다. 저는 직접 컬러를 조합하면 어려움이 있어, 3~5개로 구성된 팔레트를 자주 활용하고 있습니다. 기본으로 제공되는 컬러 조합도 많아서 원하는 조건에 쉽게 맞출 수 있습니다. 또한 랜덤으로 컬러를 적용할 수 있는 버튼도 있어, 선택한 컬러를 드래그해 순서를 변경하는 것도 가능합니다.

다음으로 컬러 이외에 직접 설정할 수 있는 도구(필터)의 구성입니다. 대조, 밝기 등을 슬라이드로 설정할 수 있으며, 이를 초기화할 수 있는 버튼도 있습니다. 컬러를 잘 골랐어도 필터에 따라 전혀 다른 느낌의 그라데이션도 완성할 수 있어 한 번씩 활용해 보는 것도 좋습니다.

한 번은 꼭 써봐야 하는 이유

MagicPattern의 가장 큰 장점은 차트와 그라데이션을 기본 제공되는 편집 툴을 활용해, 쉽게 제작할 수 있다는 점과 소셜 미디어에 최적화된 사이즈로 저장해 활용할 수 있다는 점입니다. 이뿐만 아니라 더 많은 디자인 제작 툴을 무료로 사용할 수 있다는 점에서도 충분히 매력적입니다. 디자인 툴은 계속 추가되고 있으니, 새로운 툴을 발견하는 재미도 있습니다. 평소 그래프를 자주 활용한다면 한 번쯤 꼭 사용해 보셔도 좋겠습니다.

<참고자료>

1. MagicPattern SVG CHART GENERATOR

2. MagicPattern SVG MESH GRADIENTS

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