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

디자인

웹 페이지 구성 도우미 ‘Shuffle’

웹 페이지를 기획, 디자인할 때 많은 시간 고민해야 하는 건 ‘구성(레이아웃)’입니다. 각 화면 단위 어떤 내용을, 어떻게 배치하고 구성해야 방문한 사람들을 서비스가 원하는 행동으로 이끌 수 있는지 결정되기 때문입니다. 저도 얼마 전 서비스 소개 웹사이트를 다섯 가지 화면에 따라 기획한 적 있는데요. 어떤 내용을 포함시킬지 정리하고도 구성 방법을 쉽게 떠올리지 못해 고생했던 기억이 있습니다. 그래서 오늘은 랜딩, 소개, 가격 정책 등 화면 단위에 따라 다양한 레이아웃을 미리 확인, 필요한 구성을 빠르게 찾을 수 있도록 도와주는 서비스 ‘Shuffle’을 소개하고자 합니다.

 

서비스 기본 구성

‘Shuffle’은 웹사이트를 쉽게 제작할 수 있도록 도와주는 빌더입니다. 다만, 아무리 쉽게 페이지를 구성하고 제작할 수 있다 하더라도 구성에 대한 재료가 없다면 쉽게 시작할 수 없다는 점에서 착안, 사용 언어(Tailwind CSS, Bootstrap, Bulma, Material-UI - React)와 화면 단위에 따라 레이아웃을 먼저 확인한 뒤 제작할 수 있는 환경을 제공하고 있습니다. 이런 방법은 미로, 피그마 등이 각각 템플릿과 플러그인을 활용해 서비스 이용을 더 쉽게 할 수 있도록 도와주는 것과 같은 맥락이라고 할 수 있습니다.

 

사용 언어

사용 언어

 

① 우리가 먼저 선택할 수 있는 건 사용할 언어입니다. 앞서 말씀드린 것처럼 4개의 언어를 선택할 수 있습니다. 언어를 선택하는 이유는 레이아웃 확인에 이어 웹사이트를 직접 제작해 코드를 생성, 확인할 수 있는 과정까지 연결되기 때문입니다. ② 이어서 각 언어로 제작된 샘플 구성을 선택할 수 있습니다. 임의의 서비스 이름으로 만들어진 사례를 드롭다운으로 선택할 수 있습니다.

 

③ 랜덤하게 제공되는 화면 구성이 마음에 들지 않을 경우 페이지 내 포함된 구성 요소를 더 잘게 나눠 확인할 수도 있습니다. (이 내용은 뒤에서 더 자세하 설명할 예정입니다) ④ 마지막으로 화면 구성에 필요한 컬러를 다섯 가지 중 선택할 수 있습니다. 언어, 서비스, 컬러를 선택하고 나면 아래로 화면 구성 사례를 바로 확인할 수 있습니다.

 

구성 사례

구성 사례

구성 사례는 ‘화면 종류 및 단위'에 따라 확인할 수 있습니다. ① 가장 앞에 위치한 화면은 ‘랜딩 페이지'로 소개, 가격 정책, 리뷰, 앱 등의 화면이 기본 제공됩니다. ② 페이지 추가 버튼을 통해 더 다양한 사례를 확인할 수 있습니다. ③ 화면을 선택하면 사례를 바로 볼 수 있지만, ‘Shuffle Layout!’ 버튼을 클릭해 다른 모습을 계속 확인할 수 있습니다. ④ 사례는 데스크톱, 태블릿, 모바일 등 3가지 해상도에 따라 확인할 수 있는데, 개인적으로 웹 기준이 아니라 이렇게 주요 디바이스에 따른 모습을 한눈에 볼 수 있다는 점이 좋았습니다.

 

화면 구성

화면 구성

저도 ① ‘Shuffle Layout!’ 버튼을 자주 활용했는데, 같은 화면 단위라 하더라도 구성 방법을 여럿 확인할 수 있어 원하는 내용을 더 빠르게 찾을 수 있었습니다. 앞서 본 것과 동일한 ‘랜딩 화면'이지만 구성은 전혀 다른 모습입니다. 이렇게 특정 화면 단위, 해상도에 따른 구성 방법을 달리해 확인할 수 있다는 점이 이곳의 가장 큰 매력입니다.

 

② 마음에 드는 레이아웃을 찾았다면 바로 '편집' 화면으로 이동할 수 있습니다. 편집 화면이 존재하는 이유는 사례를 확인하는 것에 그치지 않고 실제 에디터를 통해 구성할 수 있는 환경을 갖추고 있기 때문입니다. 이 글의 마지막 ‘활용 방법'에서 다시 설명드릴 예정이지만, 편집 모드에서는 더 다양한 구성 요소를 추가, 확인할 수 있으며 코드를 획득할 수 있어 필요에 따라 사용하실 수 있습니다.

 

다른 화면 사례

다른 화면 사례

 

① 다른 화면 구성 사례도 이어서 볼 수 있습니다. 기본적으로 6개 화면을 제공하기에 원하는 화면을 클릭해 ② 구성 방법을 확인할 수 있습니다. ‘Shuffle Layout!’ 버튼은 화면과 상관없이 사용할 수 있고 마지막에 확인한 화면은 계속 유지됩니다. 마지막 화면까지 확인 후 다시 랜딩 화면으로 이동해 원하는 구성을 하나씩 재확인하는 과정을 거칠 수 있습니다.

 

구성 요소

구성 요소

 

랜덤하게 제공되는 화면 구성이 마음에 들지 않을 경우 페이지 내 포함된 구성 요소를 더 잘게 나눠 확인할 수도 있다는 점을 앞서 설명드렸는데요. 블로그, 블로그 콘텐츠, CTA, 쿠키 안내, 자주 묻는 질문, 기능 소개, 푸터, 헤더, 사용 방법 안내 등 앞 단계에서 제공하는 화면보다 더 다양한 모습을 확인할 수 있습니다. ① 원하는 대상을 사이드 메뉴를 통해 선택하면 ② 오른쪽으로 구성 사례를 확인할 수 있습니다. 가장 먼저 확인할 수 있는 사례는 ‘애플리케이션'으로 앱 소개 화면에 해당됩니다.

 

레퍼런스 수집

레퍼런스 수집

 

제공되는 사례 범위가 많아, 필요한 내용을 발견하면 이미지를 복사하는 등의 방법으로 레퍼런스를 수집해 활용할 수 있습니다. 앞 단계가 ‘하나의 페이지 단위’로 이뤄졌다면 이 공간은 하나의 화면을 구성하는 단위에 따라 확인할 수 있다는 점에서 차이가 있습니다. 선택한 언어와, 서비스는 그대로 유지되어 있어 더 세부적인 내용을 확인하고 싶을 때 활용하시면 도움을 받을 수 있습니다.

 

 

활용 방법

사례 찾기

사례 찾기

 

구성 방법, 디자인 사례 등을 찾을 때 보통 북마크 해둔 여러 웹 페이지를 둘러보거나 기존에 저장해둔 레퍼런스를 참고하는 경우가 많습니다. 이 과정에서 딱 필요한 내용을 발견할 수 있으면 좋겠지만, 그때그때 필요한 사례를 찾기는 생각보다 어렵습니다. 이런 상황에서 ‘Shuffle’는 화면 단위로 컬러와 언어에 따라 전체 페이지는 물론 각 화면을 구성하는 세부 단위의 사례를 빠르게 확인하는데 많은 도움을 받을 수 있습니다.

 

소스 편집

소스 편집

 

게다가 ‘Shuffle’은 구성 내용을 직접 변경, 확인할 수 있는 기능을 제공하기 때문에 마음에 드는 사례를 찾아 더 자세한 작업을 진행할 수 있습니다. 사례를 탐색하는 것은 물론, 페이지 단위 편집할 수 있는 기회가 제공되어 소스를 받아서 활용하기 편리합니다. 편집 시 라이트 모드와 다크 모드를 선택할 수 있으며 회원가입 없이, 사례 탐색과 편집이 가능하다는 점도(프로젝트 내보내기 시 회원가입 요청) 좋습니다.

 

유료 결제

유료 결제

 

다만 편집의 경우 더 많은 구성 요소를 활용하기 위해서는 ‘유료 결제'가 필요하기 때문에 우선 원하는 사례를 화면 단위로 찾아보고, 필요한 텍스트나 이미지 등의 콘텐츠를 채워 미리 보기 과정을 진행한 뒤 결제 여부를 선택하시는 편이 좋을 것 같습니다. 그전 과정으로도 사례 확인과 구성에 대해 충분히 참고할 수 있는 기회가 제공되기 때문입니다.

 

<참고자료>

Shuffle

 

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

댓글 0

지금 써보러 갑니다

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

당신의 ‘선’ 작업을 돕는 2가지 서비스

프로덕트

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

디자인 시스템에 필요한 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 이야기를 전달해드려요.

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