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

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인한 내용을 퍼블리싱 했을 때 발생하는 문제를 우리는 자주 접하게 됩니다. 아무래도 디자인 작업 시 해상도 등 모든 상황을 고려할 수 없기 때문입니다. 폰트 사이즈, 영역 간 여백, 전체 레이아웃이 의도한 대로 적용되지 않는 상황에서 잦은 수정 사항이 발생하기도 합니다. 그래서 오늘은 이런 불편을 상대적으로 덜 겪을 수 있는, 퍼블리싱 전 화면 구성 내용을 미리 확인하고 살펴볼 수 있는 서비스 ‘셰이퍼(Shaper)’를 소개하고자 합니다.

 

셰이퍼 서비스 기본 구성

디자인 셰이퍼
(출처 : 셰이퍼 홈페이지)

 

‘셰이퍼(Shaper)’는 타이포, 여백, 컬러, 레이어 등을 기본 제공되는 레이아웃에 따라 하나씩 설정하고 웹상에서 미리 확인해 볼 수 있는 서비스입니다. 위 이미지를 보면 ‘Shaper’에서 우리가 직접 설정할 수 있는 값으로 변경한 내용이 바로 아래 연결되는 화면을 통해 실시간으로 적용되는 걸 확인할 수 있습니다. 예를 들어 ‘Typography’의 ‘Text increment(사이즈)’를 변경하면 아래 적용된 텍스트 사이즈가 변경되어 선택한 설정값에 따라 실제 화면에 어떻게 적용되는지 확인할 수 있습니다.

 

Interpolation Time
(출처 : 셰이퍼 홈페이지)

 

위 이미지는 기본 제공되는 화면이자 레이아웃으로 우리가 설정한 값에 따라 내용이 변경됩니다. 폰트 종류에 따른 사이즈와 여백 그리고 컬러 등을 아주 작은 단위로 설정할 수 있으며, 설정한 내용이 실제 어떻게 반영되는지 바로 확인할 수 있다는 점이 ‘Shaper’의 가장 큰 장점이라고 생각합니다.

 

 

서비스 사용 방법

Randomize 버튼
(출처 : 셰이퍼 홈페이지)

 

제공되는 기능을 본격적으로 사용하기에 앞서, 설정 도구 아래로 제공되는 ‘화면 구성-레이아웃'을 원하는 모습으로 변경할 수 있습니다. 설정 도구 오른쪽 ‘Randomize’ 버튼을 활용하는 방법입니다. 버튼을 클릭하면 폰트 종류와 사이즈, 사용되는 컬러가 자동으로 변경되는데 이를 통해 원하는 구성 내용에 가까운 출발점을 찾고 상세 설정을 이어 진행할 수 있습니다.

 

Typography Color
(출처 : 셰이퍼 홈페이지)

 

원하는 모습에 가까운 구성을 찾았다면, 이제 세부 설정을 진행할 차례입니다. 크게 네 가지 내용을 직접 수정할 수 있으며 (1) 타이포 (2) 여백 (3) 컬러 (4) 레이어 등으로 구성되어 있습니다. 타이포는 크기와 종류 등을 변경할 수 있고, 여백은 구성요소의 크기와 여백을 각각 지정할 수 있습니다. 컬러는 컬러 값으로 시작, 채도와 밝기를 설정할 수 있으며 레이어는 필드에 포함된 선 두께와 버튼 모양 등을 변경할 수 있습니다.

 

타이포 사이즈
(출처 : 셰이퍼 홈페이지)

 

타이포 영역에서 사이즈를 먼저 변경한 모습입니다. 위 이미지가 기본 설정된 값이며, 아래 이미지가 크기 값을 변경해 확인한 모습입니다. 앞서 말씀드린 것처럼 특정 설정값을 변경하면 바로 반영, 확인할 수 있어 어떤 내용을 어떻게 적용하면 좋을지에 대한 내용을 빠르게 확인할 수 있습니다.

 

타이포 컬러값
(출처 : 셰이퍼 홈페이지)

 

같은 방법으로 컬러 값을 변경한 모습입니다. 컬러는 버튼과 강조 표기에 사용되는 구성인데, 각 컬러가 동일한 값을 변경되는 것을 확인할 수 있습니다. 컬러 값을 변경하면 그에 따라 채도와 밝기 역시 변경할 수 있어 같은 컬러라도 다양하게 적용되는 모습을 살펴볼 수 있습니다.

 

타이포 레이어
(출처 : 셰이퍼 홈페이지)

 

레이어 설정을 통해 영역의 ‘Radius’ 값을 변경, 확인할 수 있습니다. 저는 최소 - 최댓 값을 적용해 확인했는데 직각으로 구성된 모습이 많이 부드러워진 것을 알 수 있습니다. 이처럼 원하는 설정값을 하나씩 적용, 실제 어떻게 구성되는지 확인하는 과정을 거쳐 원하는 모습에 가깝게 적용해 볼 수 있습니다.

 

셰이퍼 랜덤
(출처 : 셰이퍼 홈페이지)

 

위 이미지는 제가 ‘랜덤' 버튼으로 찾은 최초 구성입니다.

 

타이포 컬러 여백
(출처 : 셰이퍼 홈페이지)

 

타이포, 컬러, 여백 등을 설정해 최종 변경된 모습입니다. 꽤 많은 변화가 있었다는 사실을 알 수 있으며, 그만큼 다양한, 입맛에 맞는 구성을 찾아가는데 많은 도움을 받을 수 있습니다.

 

타이포 다크모드
(출처 : 셰이퍼 홈페이지)

 

다크 모드를 적용했을 때의 모습도 함께 확인할 수 있습니다. 일부 컬러, 밝기 등은 다크 모드에서 구분이 어려운 경우가 있어 다크 모드 환경에서 설정한 값이 잘 적용되는지 확인하는 것도 중요하다고 생각합니다.

 

 

활용 방안

타이포 사용자값
(출처 : 셰이퍼 홈페이지)

 

만약 기본 제공되는 템플릿에 따른 설정 내용만 확인할 수 있었다면 활용도가 크게 낮아졌을 거라 생각합니다. 만들고자 하는 서비스나 준비하는 화면에 적용할 방법이 마땅치 않기 때문입니다. 하지만 ‘Shaper’는 타이포, 여백, 텍스트 프레임, 컬러 등 사용자가 직접 설정한 값을 쉽게 적용할 수 있는 방법을 함께 제공합니다.

 

Dark mode styles
(출처 : 셰이퍼 홈페이지)

 

선택한 컬러는 어떻게 적용할 수 있는지, 다크 모드를 적용하기 위해 참고해야 하는 내용은 무엇인지 등 최종적으로 적용한 설정값을 별도로 확인할 수 있습니다. 이 서비스를 만든 이유 역시, 단순히 컬러 등이 어떻게 적용되는지 확인하는 것에서 머무는 것이 아니라 실제 서비스에 반영할 수 있는, 최대한 유사한 값을 생성하는 것이기에 더 유용하게 느껴지는 내용이라고 생각합니다.

 

셰이퍼 CSS
(출처 : 셰이퍼 홈페이지)

 

전체 내용을 한 번에 보여주지 않고, 설정한 영역 그대로 보여주는 것 역시 활용도가 높은 이유 중 하나입니다. 컬러 또는 여백 정보만 복사해 활용할 수 있고, 다크 모드에 필요한 정보만 가져갈 수도 있기 때문입니다.

 

기본 제공되는 구성(레이아웃)에 따라 디자인 구성에 참고할만한 컬러, 여백, 타이포, 레이어 등의 정보를 미리 확인한 뒤 CSS로 적용할 수 있는 코드를 복사해 활용하시면 많은 도움을 받으실 수 있지 않을까 싶습니다.

 

<참고자료>

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

댓글 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 컴포넌트 모음

디자인

보다 쉬운 웹 접근성을 위한 도우미 : 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 이야기를 전달해드려요.

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