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

디자인

디자인 패턴 제작 시 유용한 서비스들

저는 개인적으로 ‘패턴’을 좋아합니다. 이미지나 일러스트로 채울 수 없는 단조롭게 느껴지는 화면을 조금 더 특별하게 만들어 줄 수 있으며, 슬라이드 등 문서 작업 시 내용에 따라 각기 다른 매력적인 장표를 만들 수 있기 때문입니다. 다만, 상황에 따라 필요한 패턴을 직접 만드는 건 또 다른 작업으로 느껴지기에 보통 '패턴 제작' 또는 '제공' 서비스를 활용하고 있습니다. 오늘은 디자인 패턴을 웹상에서 간단하게 만들고, 내려받아 다양한 목적에 따라 사용할 수 있는 서비스 3개를 소개하고자 합니다.

 

1. 11가지 패턴을 컬러, 구성 수에 따라 생성할 수 있는: Tabbied

Tabbied

'Make your art'라는 메시지로 우릴 안내하는 ‘Tabbied‘는 11가지 패턴을 기본 제공합니다. 패턴도 다양한 '종류'를 지니고 있어, 처음부터 만들기엔 일정한 구성을 만들기가 쉽지 않습니다. 이곳에서는 갤러라는 이름으로 총 11개 기본 패턴을 제공하며, 마음에 드는 패턴을 하나 선택해 편집 화면으로 이동할 수 있습니다. 

 

Tabbied

11가지 패턴 중 하나를 선택, 편집 화면으로 이동한 모습입니다. 정해진 패턴 종류 내, 기본 다섯 가지 컬러를 선택할 수 있으며 최대 10x15 구성으로 패턴을 편집할 수 있습니다. 촘촘히 엮인 패턴을 원한다면 'Frequency' 값을 높여 여백 없이 생성할 수 있으며, 그림자 역시 별도 버튼을 통해 추가/적용할 수 있습니다. 만약 컬러나 그림자, 개체 수 등을 직접 설정하기 어렵다면, 오른쪽 위에 적용된 'Redraw' 버튼을 클릭해 랜덤하게 생성되는 패턴을 확인할 수 있습니다. 

 

Tabbied

위 이미지는 왼쪽 위부터 차례대로 2x3, 4x6, 6x9, 8x12, 10x15를 선택해 같은 컬러로 패턴을 생성한 모습입니다. 같은 패턴임에도 이렇게 조금씩 선택 값을 달리해 원하는 결과를 확인할 수 있습니다.

 

Tabbied

같은 방법으로 다른 패턴을 선택해 컬럼 수를 하나씩 변경한 모습입니다. 이렇게 생성된 개별 패턴은 편집 화면 오른쪽 위 'Export' 버튼을 클릭해 'PNG' 파일로 내려받을 수 있습니다. 별도 회원가입이나 로그인 과정 없이 바로 다운로드하여 활용할 수 있습니다. 패턴을 실제 생성해 내려받는 과정까지는 아니더라도, 어떤 패턴을 활용하면 좋을지 간단히 확인하는 역할로 활용하기에 더없이 좋은 서비스라고 생각합니다.

 

 

2. 21개 스타일과 직접 편집 모드를 제공하는: Patternpad

Patternpad

‘Patternpad’ 역시 별도 회원가입과 로그인 없이 바로 편집 화면으로 진입해 패턴을 생성할 수 있습니다. 편집 화면 왼쪽으로는 컬러 등 우리가 선택한 내용에 따른 결과를 확인할 수 있으며, 오른쪽에는 간단한 편집 도구와 패턴 스타일 리스트를 볼 수 있습니다.

 

Patternpad

편집 도구에는 컬러(패턴에 적용되는 컬러와 배경 컬러로 구분)와 사이즈(세로와 가로 열)가 포함되어 있으며, 이 두 가지 조건을 패턴 생성 및 편집에 주로 활용하게 됩니다. 선택한 값은 편집 도구 왼쪽으로 바로 확인할 수 있으며, 상단 'Refresh' 버튼을 클릭해 선택한 조건에 따른 패턴을 랜덤으로 생성할 수 있습니다.

 

Patternpad

편집 도구와 별개로 21개 패턴 스타일이 제공되는데, 리스트 내 미리보기가 가능해 원하는 스타일을 빠르게 선택할 수 있습니다. 만약, 정해진 스타일에 따른 패턴 생성이 아닌 원하는 모양이나 기타 조건에 따라 패턴을 생성하고 싶다면 'Customize' 탭을 선택할 수 있습니다. 스타일에 포함된 여러 모양을 하나씩 직접 선택할 수 있어 조금 더 원하는 스타일에 가까운 패턴을 제작할 수 있습니다. 

 

Patternpad

패턴 스타일이 다양하게 제공되기 때문에 저는 주로 상황에 맞는 스타일을 찾아 컬러와 가로, 세로 열 정도만 변경해 패턴 제작 시 활용하고 있습니다. 위 패턴은 'Stripes' 스타일을 선택해 제작한 모습입니다. 

 

Patternpad

위 패턴은 'Arcs Fade' 패턴을 선택, 컬러를 변경해 제작한 모습입니다. 이처럼 패턴 스타일과 컬러를 변경하는 것만으로도 다양한 스타일을 생성할 수 있어 더욱 유용하게 느껴지는 서비스입니다. 

 

Patternpad

완성된 패턴은 SVG, JPEG, PNG 포맷으로 내려받을 수 있으며 가로(Width) 해상도 1000부터 100 단위로 설정할 수 있습니다. 정해진 해상도로 한정된 것이 아니라 조금 더 상황에 적합한 패턴으로 활용할 수 있어 좋습니다. 

 

 

3. 22개 패턴을 편집, CSS 코드로 복사할 수 있는: Magic Pattern

Magic Pattern

세 번째 패턴 제작 서비스는 'CSS'와 깊게 연관되어 있습니다. 앞선 두 서비스와 달리 이미지로 내려받는 것이 아니라 22개 패턴을 일괄 편집해 원하는 패턴의 CSS 코드를 복사할 수 있도록 도와주기 때문입니다. 위 이미지는 'Magic Pattern'의 기본 편집 도구로, 화면 상단에 고정되어 있습니다. 기본적으로 배경 및 패턴 컬러, 투명도와 간격 등을 조절할 수 있으며 미리 보기 옵션을 온/오프 할 수 있습니다. (미리 보기를 설정할 경우 리스트에서 특정 패턴 미리 보기를 선택하면 웹페이지에 바로 적용됩니다.)

 

Magic Pattern

편집 도구를 통해 컬러나 투명도 등을 설정하면 아래 22개 리스트에 설정값이 개별 패턴에 자동 적용된 모습을 확인할 수 있습니다. 제공되는 패턴은 오늘 소개하는 서비스 중 가장 많기에 동일한 조건을 설정, 어떤 패턴이 더 좋은지 리스트 내 확인 후 원하는 CSS 코드를 복사해 바로 활용할 수 있다는 점이 이 서비스의 가장 큰 장점입니다. 

 

Magic Pattern

편집 도구가 고정되어 있어 패턴 리스트를 끝까지 내리더라도 어떤 값이 적용되어 있는지 쉽게 확인할 수 있으며, 변경된 내용 역시 실시간으로 확인할 수 있습니다. 각 패턴 오른쪽 위에는 CSS 코드 복사 버튼과 미리 보기 버튼이 함께 위치하고 있으며, 편집 도구 내 미리 보기가 활성화되어 있는 경우 배경에 바로 적용되어 실제 웹페이지에 어떻게 적용되는지 살펴볼 수 있습니다. 

 

Magic Pattern

패턴 스타일에 따라 편집 화면 내 조건을 개별 확인하지 않아도, 변경된 내용을 바로 확인할 수 있는 모습입니다. 컬러 등은 이미 정해진 기준이 있는 경우가 많기에, 조건에 따라 한눈에 다양한 스타일의 패턴을 확인해야 할 때 유용하게 쓰일 수 있습니다.

 

Magic Pattern

설정한 값에 따라 마음에 드는 패턴이 있다면, CSS 복사 버튼을 클릭해 바로 원하는 곳에 적용할 수 있습니다. 컬러 등 조건 설정 - 마음에 드는 패턴 확인 - 웹 페이지 내 미리 보기 - CSS 코드 복사, 와 같은 과정을 통해 우리 서비스 또는 웹페이지 내 적합한 패턴을 쉽게 찾을 수 있다는 점에서 활용도가 높은 서비스라고 생각합니다. 

 

<참고 자료>

댓글 0

지금 써보러 갑니다

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

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 이야기를 전달해드려요.

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