NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

 

디자인 패턴을 구성하는 일은 난이도가 가장 높은 작업 중 하나입니다. 그래서 가능한 컬러와 모양 등을 쉽게 변경해 사용할 수 있는 툴이나 피그마 파일 등을 자주 사용하고 있습니다. 아무래도 패턴은 학습으로 만들어낼 수 없고, 무엇보다 서비스와 관련된 분위기를 녹이기 어렵기 때문입니다. 오늘은 웹에서 여섯 가지 스타일에 따라 다양한 디자인 패턴을 쉽게 생성하고, SVG, PNG, 코드 등으로 활용할 수 있는 서비스를 소개하고자 합니다.

 

여섯 가지 스타일과 그에 따른 편집 도구를 제공

Heazy 기본 편집 화면
<출처: Heazy Studio 홈페이지>

 

‘Heazy Studio’ 기본 편집 화면입니다. ① 왼쪽에는 6개의 스타일을 직관적으로 확인할 수 있습니다. 원하는 스타일을 선택해 오른쪽에 위치한 편집 도구를 활용, 입맛에 따라 편집을 시작하고 파일을 받을 수 있습니다. ② 가운데는 편집 중인 스타일을 확인할 수 있는 공간입니다. 편집 도구를 통해 하나씩 조건을 변경하면 실시간으로 어떻게 반영되는지 확인할 수 있어 편리합니다. ③ 마지막으로 편집 도구입니다. 편집 도구는 세세하게 다시 살펴볼 예정이며, 스타일에 따라 조금씩 달라집니다.

 

편집 스타일 6개
<출처: Heazy Studio 홈페이지>

 

제공되는 스타일은 총 여섯 가지입니다. 여섯 가지 모두 각기 다른 모습과 개성을 갖고 있어 목적에 따라 출발 기준으로 삼기 좋습니다. ‘Waves’ 스타일이 기본 선택되어 있으며, 다른 스타일을 클릭하면 기본 모습을 확인함과 동시에 최적화된 편집 도구를 확인할 수 있습니다. 패턴이라는 기준으로 보면 여섯 가지 스타일이 대부분 포함되고, 편집 과정에 따라 전혀 다른 모습을 볼 수 있습니다.

 

heazy 편집 도구
<출처: Heazy Studio 홈페이지>

 

여섯 가지 스타일에 이어, 편집 도구를 자세히 살펴보겠습니다. ① 가장 먼저 선택할 수 있는 조건은 ‘크기'입니다. 기존 4:3 비율(800x600)로 설정되어 있으며, 해상도를 직접 지정하거나 기본 제공되는 옵션 중 하나를 선택해 반영할 수 있습니다. 눈에 띄는 건, 디바이스별 조건으로 아이폰 13, 갤럭시 S10 등을 선택할 수 있습니다. 모바일 환경에 맞는 패턴을 확인하고자 할 때 유용하게 사용할 수 있는 조건 중 하나입니다.

 

② 여섯 가지 스타일에 따라 편집 도구가 조금씩 달라지는데, 기본 스타일인 ‘Waves’를 기준으로 하면 포함된 각 선에 컬러를 채울지, 선으로만 둘지 등을 선택할 수 있습니다. ③ 각 스타일에 최적화된 추가 편집 도구를 사용할 수 있습니다. 선의 종류, 레이어 수, 선의 두께 등이 포함됩니다. ④ 컬러도 직접 지정할 수 있으며 ⑤ 그림자와 블러 효과를 적용하는 것도 가능합니다. 마지막으로 완성된 패턴을 SVG, PNG 등의 조건에 따라 받을 수 있는 버튼이 자리 잡고 있습니다.

 

Flare 스타일
<출처: Heazy Studio 홈페이지>

 

기본 선택된 ‘Waves’ 스타일이 아닌 ‘Flare’를 선택한 모습입니다. 아무것도 편집하지 않은 모습으로 편집 도구를 보면 앞서 살펴본 조건과 다른 것을 확인할 수 있습니다. 어떻게 생각하면 당연한 조건일 수 있지만, 각 스타일에 최적화된 편집 도구를 제공하는 점은 제한된 환경에서 최대한의 작업을 할 수 있다는 장점으로 다가옵니다.

 

편집 도구 활용
<출처: Heazy Studio 홈페이지>

 

‘Flare’에 제공되는 편집 도구를 활용해 비율(16:9)과 컬러 등을 변경한 모습입니다. 앞의 이미지와 함께 보면 같은 스타일임에도 완전히 다른 분위기를 가진 걸 알 수 있습니다. 이처럼 기본 스타일에 따라 원하는 조건을 하나, 둘 추가해 입맛에 맞는 결과를 만들 수 있는 점이 이 서비스의 가장 큰 장점입니다.

 

랜덤 생성 버튼
<출처: Heazy Studio 홈페이지>

 

갤럭시 S10 비율에 맞춰 랜덤 생성 버튼을 활용한 모습입니다. 편집 중인 작업물을 볼 수 있는 공간 오른쪽 아래에 ‘주사위' 버튼을 누르면 컬러나 비율 등을 바탕으로 조금씩 다른 모습을 랜덤하게 생성할 수 있습니다. 그래서 저는 서비스와 잘 맞는, 원하는 컬러(배경, 시작, 끝)를 지정하고 랜덤 버튼을 즐겨 활용하고 있습니다. 직접 생성하기 어려운 패턴을 알아서 생성해주는 역할을 잘하기 때문입니다.

 

Bubble 스타일
<출처: Heazy Studio 홈페이지>

 

‘Bubble’ 스타일도 있습니다. 이처럼 같은 패턴이라 하더라도 몇 번의 클릭으로 스타일마다 다채로운 결과물을 확인할 수 있습니다.

 

 

한 번은 꼭 써봐야 하는 이유

스타일 제작 Heazy
<출처: Heazy Studio 홈페이지>

 

하나의 스타일을 피그마 등에 직접 생성한 뒤 다른 모습을 만들기 위해선 많은 시간을 투자할 수밖에 없습니다. ‘Heazy Studio’의 가장 중요한 가치는 역시 시간을 절약해준다는 점에 있습니다. 직접 생성하는 것 대비 훨씬 적은 노력과 시간으로 더 많은 결과를 확인할 수 있기 때문입니다. 물론 마음에 드는 작업물을 만들기 위해서는 이런 툴을 사용한다 하더라도 노력이 필요하지만, 학습 등에 필요한 시간을 줄여 투자할 수 있는 환경을 제공하기에 총 투자 시간을 아낄 수 있습니다.

 

여섯 가지 스타일 모두 직접 만들기 쉽지 않은 구성을 취하고 있습니다. 덕분에 좋은 출발점이자 기준으로 삼을 수 있으며, 스타일에 따라 맞춤형 편집 도구를 제공하는 점 역시 매력적입니다. 컬러나 포함된 패턴 등만 공통으로 제한된 형태로 옮기거나 편집할 수 있다면 소개하기 어려웠을 거로 생각합니다.

 

리액트 복사
<출처: Heazy Studio 홈페이지>

 

특히 PNG와 SVG를 포함한 리액트 등의 코드를 카피해 그대로 활용할 수 있는 점도 눈에 띕니다. 서비스에 직접 녹여보거나, 바로 적용하기에 좋은 환경을 제공한다고 생각합니다. 디자인 패턴을 직접 제작해야 하는 상황이라면 로그인 마저 필요하지 않은 ‘Heazy Studio’가 좋은 선택지가 될 수 있습니다.

 

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

댓글 0

지금 써보러 갑니다

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

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, 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 이야기를 전달해드려요.

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