요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

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

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

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

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인

 

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

 

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

 

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

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

 

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

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

MagicPattern
<출처: MagicPattern>

 

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

 

 

한 번은 꼭 써봐야 하는 이유

MagicPattern
<출처: MagicPattern>

 

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

 

<참고자료>

1. MagicPattern SVG CHART GENERATOR

2. MagicPattern SVG MESH GRADIENTS

 

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

좋아요

댓글

공유

공유

댓글 0
작가
392
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
요즘IT의 멤버가 되어주세요! 요즘IT의 멤버가 되어주세요!
요즘IT의 멤버가 되어주세요!
모든 콘텐츠를 편하게 보고 스크랩해요.
모든 콘텐츠를 편하게 보고 스크랩 하기
매주 PICK한 콘텐츠를 뉴스레터로 받아요.
매주 PICK한 콘텐츠를 뉴스레터로 받기
로그인하고 무료로 사용하기