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

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

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

다음

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

확인

디자인

몇 번의 클릭으로 디자인 패턴을 만드는 ‘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
작가
469
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

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

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