Travel Point - 기획부터 개발까지 1

이번 프로젝트는 프론트엔드 개발자인 저와 백엔드 개발자 두 명이 함께 진행하게 되었습니다.

기획서 작성하기

1. 주제 정하기

처음에는 여행지 추천 서비스라는 넓은 주제로 시작하여 활용 가능한 데이터를 조사했습니다.

이 과정에서 공공데이터 포털 사이트에서 제공하는 국내 여행지 정보를 활용할 수 있는 OPEN API를 발견하게 되었고,

이를 바탕으로 필요한 데이터를 db(mySQL)에 넣고, 이를 활용하여 맞춤형 국내 여행 추천 서비스를 기획하기로 결정했습니다.

2. 기획의 목적, 기대효과, 서비스채널 정하기

3. 주요 기능 정하기

OPEN API로 제공되는 데이터 구성을 꼼꼼히 검토한 결과, 사이트의 기본 기능을 다음과 같이 설정하였습니다:

• 로그인: 사용자의 편의를 위해 소셜 로그인(Oauth)만으로 구성
• 지역별 여행지 추천: 사용자가 선택한 지역에 기반한 여행지 추천
• 테마별 여행지 추천: 다양한 테마(예: 역사, 액티비티, 휴식)에 따른 여행지 추천
• 인기 있는 여행지 추천: 사용자 리뷰와 평가를 기반으로 한 인기 여행지 추천
• 여행지 리뷰: 사용자가 경험한 여행지에 대한 리뷰 작성 및 공유
• 지역별 날씨: 지역 페이지에서 현재 날씨 정보 제공
• 여행지 이용 정보: 여행지의 상세 정보 및 이용 팁 제공

추가 기능으로는 다음을 계획하고 있습니다, 여력이 허락하는 대로 순차적으로 개발할 예정입니다:

• 블로그 작성 섹션 제공 혹은 네이버 블로그 썸네일 또는 키워드 기반 링크로 불러오기: 여행지에 대한 후기를 제공
• 가계부 공유 기능(카카오톡으로 정산 및 공유): 여행 경비를 친구들과 공유하고 정산
• 사용자가 추천한 맛집 및 좋아요 수에 따른 추천 순위 결정: 커뮤니티 기반의 맛집 추천 시스템
• 일정 만들기(지역 선택, 동행자 선택, 여행 스타일 및 태그 지정): 사용자 맞춤 여행 일정 계획 도구
• 무작위 여행지 추천: 예상치 못한 여행지를 제안하여 새로운 경험 제공

서비스 개요를 구체화하기 위해 다음과 같은 기획서을 작성했습니다:

기획서 항목	내용
사이트 이름	트레블 포인트
서비스 유형	국내 여행 추천 사이트
주요 고객	MZ세대 - 새로운 경험과 가성비를 중시하는 젊은 세대
기획 배경	많은 사람들이 여행지 선택에 어려움을 겪고 있습니다. '트레블 포인트'는 이를 해결하고자, 가성비 높은 여행지와 맛집을 추천하여 사용자의 여행 계획을 돕습니다.
기획 목적	국내 여행 비용이 해외 여행과 비교하여 비싸다는 인식을 바꾸고자 합니다. 검증된 리뷰와 데이터를 통해 좋은 국내 여행지와 맛집 정보를 제공하여 비용 효율적인 여행 계획을 가능하게 합니다.
기대 효과	국내 여행지와 맛집에 대한 인식 개선 및 수요 증가, 사용자 기반의 실시간 정보 업데이트를 통한 최신 여행 정보 제공, 여행 계획과 실행에 있어 시간 및 비용 절약, 사용자 간 커뮤니티 형성을 통한 정보 공유 및 소통 활성화
주요 기능	개발 우선 순위에 따라 다양한 기능을 개발. 여행지 추천, 맛집 추천, 일정 계획기 등을 포함합니다.
서비스 채널	PC(반응형) 웹 - 모든 기기에서 최적의 사용자 경험을 제공하기 위해 반응형 디자인을 적용했습니다.

Sitemap 작성하기

Sitemap은 Relume이라는 sitemap 작성을 도와주는 사이트를 이용하여 제작하였고, figma와 연동이 잘되있어서 선택하였습니다.

작선한 사이트 맵은 아래와 같습니다.

명세서

사이트맵을 확정한 후, 요구사항 명세서와 기능 명세서를 작성할 예정이었습니다.

하지만 프로젝트의 규모가 크지 않아 요구사항 명세서와 기능 명세서 사이에 중복되는 내용이 많았습니다.

이에 따라, 기능 명세서만을 작성하기로 결정했습니다.

또한, 기능 명세서를 작성할때 기준점이 모호하였기 때문에 페이지 별로 필요한 기능을 정리해 보았습니다.

사진으로는 텍스트가 흐릿하여 생략하였습니다.

I.A

I.A, 화면 정의서를 작성하였습니다. (화면 정의서는 사진 생략)

요구 API 요청서

API Name	Data Type	Parameters
관광 데이터	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode	areaName, count, page, filter (후기순)
관광지 상세 데이터	destinationId, location, areaCode, cat1, cat2, cat3, firstImage, firstImage2, firstImage3, firstImage4, firstImage5, locationNumber, contentId, contentTypeId, title, mapX, mapY, homepage, parking, use_time, tel, destinationDescription	contentId, contentTypeId
축제 데이터	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode, festivalStart, festivalEnd	areaName, page, count, filter (후기순)
테마 데이터	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode	areaName, page, count, filter (후기순), cat1, cat2, cat3
주간 인기 여행지	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode	count
주변 여행지	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode	latitude (위도), longitude (경도), count
연관 여행지	location, title, firstimage, destinationDescription, contentId, contentTypeId, areaCode	cat3, count

디자인 시안

• 모든 페이지를 제작하였으나 메인페이지만 올립니다.

팀원들과 기획 단계를 마치고, 디자인 시안을 혼자서 작성하였습니다.

디자인 시안은 여러 사이트를 참고하여 Figma로 작성하였고, 이 과정에서 사람들이 왜 Figma를 사용하는지 알게 되었습니다.

UI와 색상 및 글꼴을 컴포넌트화하여 재사용이 가능하여 적응된 이후로는 정말 편리하게 UI를 그릴 수 있었습니다.

Webflow 등과 같은 서드 파티 도구를 이용하여 직접 코드를 생성할 수도 있지만, 저는 직접 코딩하는 것이 더 편해서 직접 코딩을 하였습니다.

개발

디자인 시안 작성 과정을 마치고, 본격적인 프로젝트에 들어가기 전에 환경 설정을 미리 완료하였습니다.

먼저 Next.js 14 앱 라우터, TypeScript, Zustand, React-Query, Kakao-map, Shadcn-ui를 기본으로 설치하였습니다.

추후 유지보수를 위해 디렉토리 구조를 미리 일관성 있게 분배하였습니다.

그리고 UI를 페이크 데이터를 이용하여 최대한 디자인 시안과 유사하게 반응형으로 구현하였습니다.

히어로 섹션이 디자인에서 가장 중요한 부분이라 생각되어, 많은 시간을 투자하여 색상과 사진을 찾아 배치하였습니다.

또한, 로고 디자인과 favicon을 디바이스에 맞춰 분배하였습니다.

기능들은 우선 구현한 후, 백엔드 데이터를 받아 테스트하고 기능을 보완해 나갔습니다.