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

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

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

다음

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

확인

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, 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
작가
398
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

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

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