세부·방콕·파타야 맞춤 투어를 한눈에 보여주는 여행 웹사이트
Design Concept
설레는 여행을 가볍게 시작
여행 일정을 알아보는 고객이 상품 비교와 문의 사이에서 느끼는 번거로움을 줄이는 것을 디자인의 출발점으로 삼았습니다.
인디고 블루를 중심 컬러로 삼고 현지에서 촬영한 여행 사진을 크게 배치해 가볍고 활기찬 여행의 분위기를 전달했으며, 흰 바탕의 카드형 구성으로 상품 정보가 또렷하게 읽히도록 했습니다.
또한 투어상품을 세부와 태국으로 나누고 각 상품에 일정 요약과 후기 링크를 붙여, 사용자가 상품을 고르고 카카오톡 상담까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
지역별로 나눈 투어상품 구성
세부와 태국으로 투어상품을 나누고 상품마다 제목과 일정 요약, 후기 링크를 같은 형식으로 정리했습니다.
원하는 지역의 상품을 빠르게 찾고 비교할 수 있습니다. -
02
브랜드 스토리와 4가지 특징
소개 영역에서 “시간절약 여행”, “합리적인 가격”, “명예의 전당 제도”, “신나는 놀거리”를 해시태그로 요약했습니다.
트립포유를 고르는 이유를 짧게 전달합니다. -
03
갤러리와 실제 후기 섹션
현지 스팟 사진을 갤러리로, 이용 고객의 후기를 날짜와 출처와 함께 슬라이드로 보여줍니다.
상품 선택 전 신뢰를 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#EB5757
- Ink Black#070707
- Charcoal Gray#4D4D4D
- Mid Gray#949494
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gmarket Sans
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
소개·상품·갤러리·소식 페이지가 같은 헤더와 레이아웃 규칙을 공유하도록 설계했습니다.
모든 서브 페이지는 상단 고정 헤더와 페이지 제목, 본문 영역의 순서를 동일하게 유지합니다. 게시판형 페이지는 카테고리 탭과 목록 형식을 통일해 상품이 늘어나도 같은 규칙으로 확장할 수 있습니다.
- Grid
- 투어상품은 카드형 목록으로 정렬해 지역과 상품 정보를 같은 위치에서 비교하도록 했습니다.
- Header
- 반투명 고정 헤더에 메뉴와 “투어 상담하기” 버튼을 두어 어느 화면에서든 상담에 접근할 수 있습니다.
- CTA
- 카카오톡 채널 상담 버튼과 인스타그램 버튼으로 문의와 소통을 바로 이어주도록 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 가로 메뉴와 상담 버튼
MOMenu · 슬라이드형 전체 메뉴
-
Layout
PCLayout · 다열 상품 카드와 후기 슬라이드
MOLayout · 한 열 카드 정렬
-
Typography
PCTypography · 큰 제목과 짧은 설명 중심
MOTypography · 제목·본문 크기 단계별 축소
-
Image
PCImage · 풀와이드 여행 사진
MOImage · 화면 폭에 맞춘 이미지 비율 유지
