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

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

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

주요 기능 살펴보기

1) 헥사곤 패턴 제작

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

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

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

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

2) 몬드리안 패턴 제작

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

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

3) 기하학 패턴 제작

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

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

한 번은 꼭 써봐야 하는 이유

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

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

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

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