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

디자인

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

 

more.graphics
<출처: more.graphics>

 

패턴은 웹사이트 주요 화면 배경으로 활용하는 것도 가능하며, 문서의 표지나 레이아웃 제작 등에 쓸 수 있어, 활용도가 상당히 높습니다. 다만 직접 제작하려면 번거로운 과정을 거쳐야 하며, 별도의 툴을 학습하거나 사용해야 한다는 문제가 있습니다. 

 

오늘 소개할 ‘more.graphics’는 몇 번의 클릭으로 조건에 맞는 디자인 패턴을 생성할 수 있는 서비스로, 하나의 패턴이 아니라 여러 종류의 다채로운 패턴 생성이 가능해, 상황에 따라 유용하게 쓸 수 있는 곳입니다. 우리가 제작할 수 있는 패턴의 종류는 헥사곤, 지오메트릭, 몬드리안, 바우하우스, 브랜딩 등 총 다섯 가지이며, 추가로 두 가지 그라데이션 조합을 생성할 수 있는 기능을 제공합니다.

 

주요 기능 살펴보기

1) 헥사곤 패턴 제작

헥사곤 패턴 제작
<출처: more.graphics>

 

메인 화면에서 원하는 패턴을 선택하면 바로 편집 화면으로 이동할 수 있습니다. 위 이미지는 첫 번째 자리에 위치한 헥사곤 패턴으로, 상세 화면으로 진입하면 기본 설정된 사이즈와 컬러, 배경, 모양 등에 따라 만들어진 패턴을 살펴볼 수 있습니다. 생성된 각각의 패턴을 직접 만든다고 생각하면 아찔하지만, 다행히 조건을 설정한 뒤 생성 버튼을 누르면 바로 반영되어 손쉬운 활용이 가능합니다. 

 

헥사곤 패턴 제작
<출처: more.graphics>

 

변경하거나 적용할 수 있는 조건을 하나씩 살펴보면, 먼저 사이즈가 있습니다. 사이즈는 가로와 세로 길이를 각각 입력할 수 있으며, 기본은 1000 X 1000입니다. 정방형의 패턴도 자주 쓰이지만, 사용하는 공간이나 목적에 따라 세로 또는 가로가 강조된 패턴도 필요하기 때문에 사이즈가 첫 번째 위치에 반영되어 있습니다. 이어서 컬러를 설정할 수 있는데, 다섯 가지 컬러를 하나씩 직접 입력하거나 제공되는 컬러 조합을 선택할 수 있습니다. 

 

개인적으로 컬러를 직접 선택하기보다는 다양한 조건으로 구성된 조합을 활용하는 것이 훨씬 유용하게 느껴집니다. 레이어 개수도 설정할 수 있는데, 최소 1개에서 최대 10개까지 슬라이드로 선택할 수 있습니다. 심플한 패턴을 원한다면 수를 줄여 적용하는 것이 좋습니다. 마지막으로 모양을 정할 수 있는데, 기본은 모든 모양이 선택된 상태로, 커스텀 탭을 통해 원하는 모양만 다시 선택할 수 있습니다. 안이 채워진 사각형 등의 모양을 11개 범위 내 선택할 수 있어, 이 조건들만 잘 활용해도 훨씬 다채로운 패턴을 만들어낼 수 있는 구성입니다.

 

헥사곤 패턴 제작
<출처: more.graphics>

 

또한 조건에 따라 생성된 패턴 중 마음에 드는 것이 있다면, 클릭을 통해 다음 행동을 이어갈 수 있습니다. 패턴의 상세 모습을 확인할 수 있으며, PNG 또는 JPEG로 내려받거나 이미지 URL을 복사할 수 있는 모습입니다. 가입하면 마음에 드는 패턴을 ‘좋아요'하고 언제든 다시 확인할 수 있습니다. 

 

2) 몬드리안 패턴 제작

몬드리안 패턴 제작
<출처: more.graphics>

 

앞서 언급한 것처럼 이곳은 하나의 디자인 패턴이 아니라, 여러 종류의 패턴을 제작할 수 있다는 것이 가장 큰 장점입니다. 헥사곤에 이어 사용할 수 있는 기능은 패턴을 이야기할 때 빠질 수 없는 네덜란드 추상 예술의 거장 피에트 몬드리안입니다. 

 

몬드리안 패턴 제작
<출처: more.graphics>

 

몬드리안의 경우 패턴 스타일이 고정되어 있어, 헥사곤과 같이 스타일을 선택하진 못합니다. 대신 사이즈와 패턴의 컬러를 선택해 변경할 수 있으며, 배경 컬러 또한 별도로 입력할 수 있습니다. 위 이미지는 기본 랜덤으로 설정된 배경 컬러를 파란색으로 바꾼 모습으로, 원하는 값을 입력한 뒤 아래 ‘생성’ 버튼을 눌러 결과를 볼 수 있습니다. 

 

3) 기하학 패턴 제작

기하학 패턴 제작
<출처: more.graphics>

 

헥사곤, 몬드리안에 이은 다음 패턴은 기하학입니다. 기하학 패턴은 직접 제작한다고 했을 때, 난이도가 가장 높은 패턴인데요. 몬드리안 패턴처럼 스타일을 직접 커스텀할 순 없지만, 사이즈와 컬러, 배경을 취향에 맞게 설정해 원하는 결과를 확인할 수 있습니다.

 

기하학 패턴 제작
<출처: more.graphics>

 

다양한 타입을 제공하여 스타일을 직접 지정하지 못해도, 컬러와 사이즈 변경만으로 위와 같이 다채로운 패턴을 확인할 수 있습니다. 기본 제공되는 컬러 조합이 패턴에 맞게 잘 짜여있다는 점 역시 매력적입니다.

 

 

한 번은 꼭 써봐야 하는 이유

more.graphics
<출처: more.graphics>

 

앞서 소개한 세 가지 패턴 외에도 바우하우스 스타일 등 다섯 가지의 패턴을 한 곳에서 제작하고, 내려받을 수 있다는 점은 이 서비스를 꼭 써봐야 할 이유 중 하나입니다. 패턴은 선 하나만 달리 적용해도 결과가 달라지기에 수천 가지 조합을 클릭 몇 번으로 만들 수 있다는 점 역시 매력적입니다.

 

more.graphics
<출처: more.graphics>

 

또한 디자인 패턴 외에도 그라데이션 생성 기능을 함께 활용할 수 있습니다. 그라데이션은 다섯 가지 컬러를 중심으로 사이즈에 맞는 결과를 패턴과 같이 손쉽게 확인할 수 있습니다.

 

more.graphics
<출처: more.graphics>

 

더불어 CSS로 적용할 수 있는 내용을 바로 복사하는 환경이 제공되며, PNG, SVG, JPEG로 다운로드할 수 있어 생성은 물론 활용하기에도 간편합니다. 디자인 작업 중 패턴의 활용이 잦거나, 빠르게 활용해야 하는 상황이라면 다섯 가지 스타일로 손쉽게 패턴을 제작할 수 있는 more.graphics를 먼저 고려해봐도 좋겠습니다. 또한 같은 맥락에서 사용하기 좋은 그라데이션 등의 기능도 함께 사용할 수 있어, 한 번 알아두면 유용하게 활용할 수 있을 것입니다.

 

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

댓글 0

지금 써보러 갑니다

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

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

디자인

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

디자인

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

디자인

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘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 이야기를 전달해드려요.

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