[기술] [New Template] 시원함과 깔끔한 템플릿, Vinyasa

2020-03-31

logo

https://vinyasa.imweb.me

안녕하세요. 아임웹 UX팀 디자이너 강진현입니다.
Vinyasa 템플릿을 작업하게 된 계기와 디자인 방향에 대해 소개합니다.

말끔하게 정돈된 템플릿

‘셀프케어’라는 키워드가 유난히 많이 보이고 있는 요즘입니다. 스스로를 돌보는 것을 뜻하는 이 단어는 자신만의 흐름과 밸런스에 맞춰 생활하며 나에게 맞는 방식으로 몸과 마음을 케어하는 과정을 통해 ‘보다 나은 나’를 추구하는 것이라고 볼 수 있습니다. ‘셀프케어’라는 단어를 처음 보았을 때 어쩐지 낯설지 않고 가깝게 느껴졌는데요. 아임웹 UX팀도 ‘다양한 개인이 자신의 본질에 집중하면서 보다 쉽게 웹사이트를 제작할 수 있는 방법’에 대해 지속적으로 고민하고 있기에 그런 느낌이 들지 않았나 싶습니다.

‘셀프케어’에서 파생된 라이프스타일 관련 단어들이 많지만 이번 템플릿에서 아임웹이 주목한 것들은 홈트레이닝, 요가, 마인드풀러닝과 같은 나의 호흡을 관찰하며 하는 운동이었습니다. 선생님의 입장과 수강생의 입장을 모두 고려하면서도 나의 밸런스를 찾기 위해 방문하는 웹사이트인 만큼 단정하고 파악하기 쉬운 사이트를 구성하여 웹사이트 제작이 처음이신 분들도 편하게 시작하실 수 있는 템플릿을 만들었습니다.

꼭 필요한 텍스트를 위해

웹사이트의 필요성을 절감해도 막상 제작을 시작하면 막막해지는 이유는 ‘무엇을 넣어야 하는가’의 문제가 있습니다. 특히 메인(Home)에서는 웹사이트를 전반적으로 소개하면서도 ‘구매’와 같은 핵심적인 목표로 갈 수 있는 길을 만들어야 하죠.
Vinyasa의 메인은 크게 [비주얼 → 브랜드 소개 → 클래스 안내(구매) → 고객센터]의 기본적인 흐름을 가지고 있습니다. 가지고 계신 시각적 자산을 최대한 이용하실 수 있도록 이미지가 주가 되도록 구성하되, 텍스트는 간략한 브랜드 소개, 클래스 안내 정도로 꼭 필요한 만큼만 사용했습니다.
텍스트의 양이 적은 메인이기 때문에 보통의 웹사이트의 기본 폰트(14~15px)보다 약간 크게(16px) 설정하고 넓은 여백과 함께 사용하여 주목도를 높였습니다. 이러한 레이아웃은 시각적으로 사이즈가 큰 이미지들과 잘 어울려 단정하면서도 탁 트인 느낌을 전달합니다.

방문자를 구매자로 안내하는 길

아임웹을 처음 사용하시는 분들이라고 해도 대체로 개별 위젯의 사용법은 쉽게 알 수 있습니다. 하지만 여러 가지 위젯을 조합하는 방식이나 웹사이트 내에서 흐름을 만들어가는 부분(디자인)은 단시간에 습득하기 어려운 부분이 있습니다. Class 메뉴는 그런 분들에게 힌트가 되었으면 하는 바람이 담겨 있습니다. Class 페이지는 수업 예약(구매)으로 이어질 수 있는 다양한 콘텐츠로 구성되었습니다. 각 수업의 대표 이미지 아래의 버튼을 클릭하면 모달을 통해 해당 수업의 상세한 내용을 확인할 수 있고, 모달 내부의 버튼을 클릭하면 구매로 이어집니다. 또한 그 아래 섹션에는 캘린더가 있어서 원하는 날짜의 수업을 클릭할 수 있고, 이 역시 구매로 이어질 수 있게 되어있습니다.
아임웹은 오픈마켓이나 스마트스토어처럼 주어진 틀에 상품을 올리는 것 외에도 자유롭게 구성할 수 있기 때문에 상품을 단순 나열하는 방식뿐만 아니라 다양한 디자인 위젯을 조합하여 구매로 이어지는 길을 만들어 볼 수 있습니다.

[참고] 모달 기능 사용 가이드

gif-img gif-img
컬러

화이트, 진한 그레이, 블루 컬러가 웹사이트에 주로 적용되었습니다. 폰트 컬러는 타이틀 진한 그레이 컬러(#212121)를 기준으로 어우러진 블루(#7A92A5)의 컬러로 톤을 맞추었습니다.

gif-img gif-imggif-img
폰트

제목 폰트: 굵지만 선이 잘 정돈되어 가독성이 높은 Aharoni를 사용하여 제목의 주목도를 높였습니다.
본문 폰트: 크기가 작고, 얇게 사용 되는 경우가 많아 가독성이 높은 노토 산스(Noto Sans)를 선택 하였습니다.

gif-img gif-img
그 외 주의사항
  • 모바일 화면 비율에 맞게 비주얼 이미지 편집 및 모바일 전용 섹션으로 디자인
  • 기본 하단은 숨기고 하단고정을 사용
  • 그 외 위젯 여백들이 모바일 편집에서 재조정

마치며

Vinyasa 템플릿은 요가에 관한 것으로 이미지를 구성했지만, 이미지만 교체하면 업종에 상관없이 간략한 소개를 겸하면서 판매까지 한 번에 소화할 수 있는 템플릿입니다. Vinyasa가 웹사이트 제작을 처음 시작하시는 분들에게 좋은 가이드가 될 수 있기를 바랍니다.

Vinyasa 템플릿 살펴보기

gif-img
gif-img

by. 강진현 매니저

Imweb Corp.

(주) 아임웹  l  대표: 이수모  l  본사: 서울특별시 서대문구 성산로7길 89-8 아임웹  l  사업자등록번호: 105-87-83592  l  개인정보책임자: 박재완

이용약관  l  개인정보처리방침  l  제휴문의  l  특허/인증서

ⓒ IMWEB CORP.

(주) 아임웹  l  대표: 이수모  l 본사: 서울특별시 서대문구 성산로7길 89-8 아임웹
사업자등록번호: 105-87-83592 l  개인정보책임자: 박재완