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

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

다음

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

확인

디자인

차트 생성 및 디자인 툴을 무료로 제공하는 ‘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

지금 써보러 갑니다

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

디자인 영감을 직관적으로 수집할 수 있는 'SAVEE'

디자인

캡처와 동시에 이미지를 편집할 수 있는 ‘Xnapper’

디자인

몇 번의 클릭으로 디자인 패턴을 만드는 ‘more.graphics’

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

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