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

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

손쉽게 만드는 패턴

배경은 여러 목적으로 사용하기 좋은 콘텐츠 중 하나입니다. 문서 제작 시 활용이 가능하고, 웹사이트 특정 화면 내 사용할 수도 있어요. 다만 사용 빈도는 높지만, 빠르게 제작하기 어려운 콘텐츠 이기도 합니다. 그래서 오늘은 웹상에서 '물결' 패턴을 기본으로 한 다양한 스타일의 배경을 만들고, 내려받을 수 있는 서비스를 소개하고자 합니다.

 

'Wicked Backgrounds'는 컬러, 컬러 모드, 패턴 각도, 패턴 수 등을 선택해 배경을 생성할 수 있는 서비스입니다. 패턴은 물결 모양을 기본으로 하고 있어요. 편집 화면은 왼쪽으로 간단한 편집 도구가, 오른쪽에는 편집 도구 내 선택한 내용(배경)을 확인할 수 있도록 구성되어 있습니다.

 

Wicked Backgrounds

편집 도구는 배경 생성에 꼭 필요한 것으로 이뤄져 있어요.

  • 다운로드 버튼 (생성한 배경을 SVG 포맷으로 내려받을 수 있음)
  • SVG 복사 버튼 (생성한 배경을 복사할 수 있음)
  • 재생성 버튼 (선택한 조건에 따라 새로운 배경을 생성할 수 있음)
  • 컬러 선택 (원하는 컬러를 1개 선택할 수 있음)
  • 컬러 모드 선택 (옅게, 짙게 등 컬러 모드를 선택할 수 있음)
  • 패턴 각도 선택 (8가지 각도 중 하나를 선택할 수 있음)
  • 패턴 개수 선택 (물결 패턴의 개수를 선택할 수 있음)

 

Wicked Backgrounds

편집 도구를 자세히 들여다봤으니, 실제 선택한 값에 따라 어떻게 변경되는지 살펴볼게요. 먼저 컬러를 하나 지정한 뒤, 컬러 모드 중 'Lighten'을 선택했어요. 전반적으로 부드럽고, 옅은 컬러로 구성된 모습입니다.

 

Wicked Backgrounds

이번에는 컬러 모드 중 'Darken'을 선택했어요. 'Lighten'에 비해 강하고 짙은 컬러로 구성된 모습입니다. 동일한 컬러임에도 모드에 따라 다른 결과를 확인할 수 있습니다. 컬러 강도가 중요한 이유는, 배경을 적용하고자 하는 공간의 상황을 충분히 고려할 수 있기 때문이에요. 

 

Wicked Backgrounds

동일한 컬러를 지정한 뒤, 세 가지 컬러 모드를 각각 선택했을 때의 구성입니다. 컬러 + 컬러 모드 조합으로 벌써 세 가지 배경을 확인할 수 있었으며, 여기에 패턴 각도나 수 등으로 더 다양하고 구체적인 배경을 설정할 수 있습니다.

 

Wicked Backgrounds

다시 컬러 모드를 'Lighten'로 변경한 뒤 물결 패턴의 각도를 변경해봤어요. 기본 '0'으로 설정된 것을 '90'으로 바꾼 모습입니다.

 

Wicked Backgrounds

'Darken' 컬러 모드에서 45도 각도를 선택한 모습이에요. 8개 각도가 제공되고 있으니, 하나씩 확인 후 필요한 내용을 선택하시면 될 것 같아요. 각도는 컬러만큼 다양한 분위기를 적용할 수 있다는 장점이 있습니다. 

 

Wicked Backgrounds

'Waves' 메뉴를 통해 패턴 개수도 변경할 수 있어요. 앞서 살펴본 배경은 패턴이 여럿 적용되어 있었는데, 개수를 줄여 위와 같이 단순하게 표현된 배경도 확인할 수 있습니다.

 

Wicked Backgrounds

물결 패턴을 기본으로 하지만, 직선으로 변경하는 것도 가능해요. 기본 각도에서 'Randomize'를 가장 낮게 설정할 경우 위와 같이 직선으로 적용된 배경을 확인할 수 있습니다. 

 

일부러 컬러를 하나만 설정해 다양한 조건을 추가하는 방법으로 서비스를 이용해봤는데요. 한 가지 컬러로 다채로운 배경을 설정해 다운로드하거나 복사할 수 있다는 점이 매력적으로 다가왔습니다. 상황에 맞는 배경을 빠르게 생성하는데 많은 도움을 받을 수 있으리라 생각해요.

 

 

*이렇게 활용해보세요!

Wicked Backgrounds
Wicked Backgrounds
Wicked Backgrounds

차례대로 Type and Pixel, Mariano Pascual, Friendlyprojects 웹사이트 메인 화면 모습이에요. 패턴 디자인이 적용된 곳이기도 합니다. 서비스 고유 패턴을 적용하면, 랜딩 시 주목도를 높여 쉽게 몰입할 수 있는 환경을 만들어 줄 수 있어요. 웹사이트 배경뿐만 아니라 파워포인트 등 문서 표지 및 간지 배경, 소셜미디어 커버 이미지, 노션 커버 이미지 등 다양한 목적으로 사용할 수 있습니다.


참고 자료

  1. Wicked Backgrounds : https://wickedbackgrounds.com/backgrounds.html
  2. Typepixel : https://www.typeandpixel.com.au/
  3. Mariano Pascual : http://www.marianopascual.me/#project22
  4. Friendlyprojects : http://friendlyprojects.com/
댓글 0

지금 써보러 갑니다

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

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘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

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

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

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

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