작업 목표
- 대구 여행 정보를 한눈에 확인할 수 있는 메인 화면 구성
- 관광명소, 숙박, 맛집, 축제 등 주요 메뉴로 빠르게 이동할 수 있는 구조 설계
- 추천 코스 영역에 지도와 장소 정보를 함께 배치해 여행 동선 시각화
- PC와 모바일 환경 모두에서 자연스럽게 탐색 가능한 반응형 화면 구현
대구트립로드 웹사이트 리디자인 (진행중)
대구의 관광명소, 추천 코스, 맛집, 숙박 정보를 한눈에 탐색할 수 있도록 정보 구조와 화면 흐름을 재정리한 관광 웹사이트 리디자인 작업입니다.
Overview
대구트립로드는 대구 여행 정보를 제공하는 관광 웹사이트를 가정해 제작한 리디자인 프로젝트입니다. 기존 관광 정보 사이트가 가진 딱딱한 인상을 줄이고, 사용자가 대구의 주요 관광명소와 추천 코스, 맛집, 숙박 정보를 더 쉽고 빠르게 탐색할 수 있도록 메인 화면의 정보 구조를 재정리했습니다. 메인 비주얼, 검색 영역, 빠른 메뉴, 추천 코스, 관광지 카드, 푸터 정보가 자연스럽게 이어지도록 구성했습니다.
개선 포인트
- 상단 비주얼에 검색창과 추천 키워드를 배치해 사용자의 첫 행동 유도
- 빠른 메뉴 아이콘을 활용해 주요 관광 정보의 접근성 개선
- 추천 코스 섹션을 탭 형식으로 구성해 코스별 정보를 명확하게 분리
- 밝은 색감과 일러스트 요소를 활용해 관광 사이트의 친근한 분위기 강화
Page Detail
메인 화면은 “오늘의 대구를 여행하세요”라는 문구를 중심으로 대구 여행의 설렘을 전달하도록 구성했습니다. 검색창과 추천 키워드를 상단에 배치해 사용자가 원하는 여행 정보를 바로 찾을 수 있도록 했고, 관광명소, 숙박, 맛집, 축제, 대구지도, 관광안내 등 자주 찾는 메뉴는 아이콘형 빠른 메뉴로 정리했습니다. 이후 추천 코스 영역에서는 지도 이미지와 장소 카드를 함께 보여주어 실제 여행 경로를 상상할 수 있도록 설계했습니다.
Before
기존 관광 정보 사이트는 다양한 정보가 한 화면에 많게 배치되어 있어 사용자가 원하는 메뉴를 빠르게 찾기 어렵고, 여행지의 분위기보다 정보 전달 중심의 딱딱한 인상이 강했습니다.
After
리디자인 후에는 검색, 빠른 메뉴, 추천 코스, 관광지 정보가 단계적으로 이어지도록 정리해 사용자가 대구 여행 정보를 자연스럽게 탐색할 수 있는 구조로 개선했습니다.
Design Direction
전체 디자인은 대구 여행의 활기와 편안함이 함께 느껴지도록 구성했습니다. 메인 비주얼에는 여행을 떠나는 듯한 이미지를 사용하고, 파란색 계열의 포인트 컬러를 활용해 청량하고 신뢰감 있는 인상을 전달했습니다. 카드형 레이아웃과 둥근 요소를 반복적으로 사용해 많은 정보를 부담 없이 읽을 수 있도록 정리했습니다.
Visual Mood
밝은 배경, 둥근 카드, 부드러운 일러스트 요소를 사용해 관광 정보 사이트 특유의 딱딱함을 줄이고 친근하고 산뜻한 분위기를 만들었습니다.
Information Structure
메인 비주얼, 검색, 빠른 메뉴, 추천 코스, 관광 정보 순서로 콘텐츠를 배치해 사용자가 필요한 정보를 자연스럽게 따라가며 확인할 수 있도록 구성했습니다.
Publishing Point
HTML 구조는 섹션별 역할이 명확히 드러나도록 나누고, CSS는 공통 스타일과 반응형 스타일을 분리해 관리했습니다. PC 헤더와 모바일 헤더를 각각 구성했으며, 모바일에서는 햄버거 메뉴를 통해 내비게이션을 열고 닫을 수 있도록 구현했습니다. 또한 언어 선택 메뉴, 추천 코스 탭, 슬라이드형 콘텐츠 등 실제 관광 사이트에서 자주 사용되는 인터랙션 요소를 추가했습니다.
Responsive Layout
PC에서는 넓은 화면을 활용해 관광 정보를 풍부하게 보여주고, 모바일에서는 콘텐츠가 세로 흐름으로 자연스럽게 정리되도록 반응형 구조를 적용했습니다.
Interactive UI
햄버거 메뉴, 언어 선택, 코스 선택, 슬라이드 컨트롤 등 사용자가 직접 조작하는 요소를 구현해 정적인 페이지보다 실제 서비스에 가까운 사용 경험을 만들었습니다.