love-trip 프로젝트 리뷰 - 커플 맞춤 여행 서비스 개발기

프로젝트 개요

프로젝트명: love-trip
기간: 2025.08
기술 스택: Next.js, TypeScript, Supabase, Tour API, Naver Maps API, pnpm
상태: 🔨 개발중
목적: 연인과의 여행을 위해 교통편, 숙소, 데이트 장소, 경비를 한 번에 추천해주는 서비스

love-trip은 제가 "연인과 여행을 가려고 하는데, 어디서 정보를 찾아야 할지 모르겠다"는 생각에서 시작한 프로젝트입니다. 여러 사이트를 왔다 갔다 하는 것이 불편해서, 한 곳에서 모든 정보를 얻을 수 있는 서비스를 만들고 싶었습니다.

프로젝트를 시작한 이유

연인과 여행을 계획하면서 여러 사이트를 왔다 갔다 하는 것이 정말 불편했습니다. "여기 좋은 카페가 어디 있지?", "이 코스는 어떻게 가야 하지?", "예산은 얼마나 필요하지?" 같은 질문에 답하기 위해 여러 사이트를 찾아봐야 했습니다.

그래서 "출발지, 목적지, 예산만 입력하면 최적의 여행 코스를 추천해주는 서비스"를 만들고 싶었습니다.

주요 기능 구현

1. 모노레포 구조 설계

이 프로젝트에서 처음으로 모노레포 구조를 사용했습니다.

구조:

love-trip/
├── web/          # Next.js 프론트엔드
├── crawler/      # 데이터 크롤러
└── shared/       # 공통 유틸리티

처음 접했을 때:

• "모노레포가 뭐지?"라는 생각부터 시작했습니다.
• 여러 패키지를 어떻게 관리해야 할지 어려웠습니다.
• pnpm을 처음 사용해서 workspace 개념이 어려웠습니다.

배운 점:

• 모노레포를 사용하면 코드 재사용이 쉬워집니다.
• 공통 로직을 shared 패키지에 모아서 관리할 수 있습니다.
• 각 패키지가 독립적으로 개발 가능합니다.

설정:

json복사
// pnpm-workspace.yaml
packages:
  - 'web'
  - 'crawler'
  - 'shared'

2. Tour API 연동

한국관광공사 Tour API를 활용하여 관광 정보를 가져왔습니다.

처음 접했을 때:

• API 문서를 읽는 것이 처음에는 어려웠습니다.
• 어떤 API를 사용해야 할지 고민이 많았습니다.
• API 응답 데이터를 어떻게 가공해야 할지 어려웠습니다.

구현:

typescript복사
// Tour API 호출
const fetchTouristSpots = async (areaCode: string) => {
  const response = await fetch(
    `http://apis.data.go.kr/B551011/KorService1/areaBasedList1?serviceKey=${API_KEY}&numOfRows=10&pageNo=1&MobileOS=ETC&MobileApp=love-trip&arrange=A&areaCode=${areaCode}&contentTypeId=12`
  );

  const data = await response.json();
  return processTourData(data);
};

배운 점:

• API 키 관리가 중요합니다. 환경 변수로 관리해야 합니다.
• API 호출 제한을 고려해야 합니다.
• 데이터를 사용하기 좋은 형태로 가공하는 것이 중요합니다.

3. 네이버 지도 통합

네이버 지도 API를 활용하여 여행 코스를 시각적으로 표시했습니다.

처음 접했을 때:

• 지도 API를 사용하는 것이 처음이었습니다.
• 마커를 표시하고 경로를 그리는 것이 어려웠습니다.
• 지도 스타일을 커스터마이징하는 것이 까다로웠습니다.

구현:

typescript복사
// 네이버 지도 초기화
useEffect(() => {
  const map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5665, 126.978),
    zoom: 13
  });

  // 마커 추가
  spots.forEach((spot) => {
    const marker = new naver.maps.Marker({
      position: new naver.maps.LatLng(spot.lat, spot.lng),
      map: map
    });
  });
}, []);

배운 점:

• 지도 API는 문서를 꼼꼼히 읽는 것이 중요합니다.
• 마커와 경로를 효율적으로 관리해야 합니다.
• 모바일에서도 잘 작동하도록 반응형으로 구현해야 합니다.

4. 크롤러 패키지 개발

데이터를 수집하기 위한 크롤러 패키지를 개발했습니다.

구현 과정:

• Puppeteer를 활용하여 웹 크롤링
• 데이터를 정제하여 데이터베이스에 저장
• 정기적으로 실행되도록 스케줄링

어려웠던 점:

• 크롤링이 차단되는 경우가 있었습니다.
• 데이터 구조가 변경되면 크롤러도 수정해야 했습니다.
• 에러 처리가 중요했습니다.

배운 점:

• 크롤링은 법적, 윤리적 문제를 고려해야 합니다.
• 데이터 검증이 중요합니다.
• 에러가 발생해도 서비스가 중단되지 않도록 해야 합니다.

5. 예산 관리 및 1/N 정산

여행 예산을 관리하고 1/N 정산하는 기능을 구현했습니다.

구현:

• 예산 입력 및 항목별 분류
• 실시간 예산 계산
• 1/N 정산 기능

배운 점:

• 금액 계산은 정확성이 중요합니다.
• 사용자가 쉽게 이해할 수 있는 UI가 중요합니다.
• 예산 초과 알림 등 사용자 경험을 고려해야 합니다.

어려웠던 점

1. 외부 API 의존성

여러 외부 API에 의존하다 보니 문제가 발생할 수 있었습니다.

문제점:

• API가 변경되면 서비스에 영향을 줍니다.
• API 호출이 실패하면 대체 방안이 필요합니다.
• API 호출 제한을 고려해야 합니다.

해결 방법:

• 에러 처리를 철저히 했습니다.
• 캐싱을 활용하여 API 호출을 최소화했습니다.
• 대체 데이터 소스를 준비했습니다.

2. 데이터 동기화

여러 소스에서 데이터를 가져오다 보니 동기화 문제가 발생했습니다.

문제점:

• 데이터가 일관되지 않았습니다.
• 업데이트 주기가 달라서 최신 정보를 유지하기 어려웠습니다.

해결 방법:

• 정기적으로 데이터를 업데이트하도록 스케줄링했습니다.
• 데이터 검증 로직을 추가했습니다.
• 사용자에게 데이터 출처를 명시했습니다.

3. 복잡한 로직

여행 코스를 자동으로 생성하는 로직이 생각보다 복잡했습니다.

고려사항:

• 출발지와 목적지 간 거리
• 교통편 및 소요 시간
• 예산 범위 내 장소 선택
• 사용자 선호도

해결 방법:

• 단계별로 로직을 분리했습니다.
• 점수 기반 추천 시스템을 구현했습니다.
• 사용자 피드백을 수집하여 개선했습니다.

개선하고 싶은 점

1. AI 기반 추천

현재는 규칙 기반 추천인데, AI를 활용하여 더 정확한 추천을 하고 싶습니다.

2. 실시간 정보

실시간 교통 정보나 날씨 정보를 연동하여 더 정확한 코스를 추천하고 싶습니다.

3. 사용자 리뷰

실제 사용자 리뷰를 수집하여 더 신뢰할 수 있는 정보를 제공하고 싶습니다.

총평

love-trip은 제가 가장 오래 개발하고 있는 프로젝트입니다. 모노레포 구조를 처음 사용해보고, 여러 외부 API를 연동하며, 복잡한 로직을 구현하는 경험을 할 수 있었습니다.

특히 Tour API와 네이버 지도 API를 연동하면서 외부 API를 활용하는 방법을 배울 수 있었고, 크롤러를 개발하면서 데이터 수집과 처리에 대한 이해도 높일 수 있었습니다.

아직 개발 중이지만, 실제로 사용할 수 있는 서비스를 만들 수 있어서 뿌듯합니다. 앞으로도 계속 개선하고 싶습니다.

링크

• GitHub 저장소
• 서비스 사이트