예쁜 UI로 업그레이드! 공공데이터 API로 전국 캠핑장 조회 서비스 만들기 2탄

소개

안녕하세요!
지난 일요일에, 캠핑장 공공데이터 API를 활용해서 전국 캠핑장 조회 서비스를 만들었었는데요.
처음 시도해본 Apps script였고, 오류도 없이 웹사이트가 뚝딱 나오는게 너무 신기했었습니다.
하지만 그럼에도 이게 웹서비스야? 싶은 비주얼이었죠.

그래서 이번에는 서비스의 형태를 갖춘 모양새로 다듬어보자! 싶었습니다. 열심히 회사를 다니고 있는 직장인이지만, 빨리 완성하고 싶어서 드릉드릉 하더군요.

퇴근하고 짬내서 만든 캠핑가자! 서비스를 소개합니다.

진행 방법

1. 고도화할 기획 내용 구조화하기

  • 서비스다운 서비스이려면, 유저의 니즈를 충족시켜주어야 합니다.

  • 제 경우, 캠핑장을 까다롭게 고르는지라 저의 몇몇 기준들을 뽑았습니다. 여기에 네이버 캠핑 카페 글을 과거에 분석했던 적이 있어서 그 기준들도 포함했습니다.

    한국어로 된 문자 메시지의 스크린샷
    지난 챗 GPT 스레드에 이어서 적었습니다.
  • 기준은 "이동 시간"과 "캠핑 유형"!

    • 보통 거주지로부터 3시간 이상 걸리는 지역은 캠핑 가기 꺼리는 경향이 있었습니다. 그리고 캠핑 유형은 혼자 가는 "솔캠", 애인과 단둘이 가는 "커플캠", 아이들을 데리고 가는 "가족캠", 엄마가 아이를 데리고 가는 "미즈캠" 등이 있습니다. 각각의 유형에 따라 선호하는 시설이나 분위기가 극명하게 갈리곤 하기 때문에 중요합니다.

돌아온 지피티의 기획


1. 홈 메인 화면 사용자 입력란

사용자 입력 필드

  1. 현재 지역 입력란:

    • 질문: "현재 지역은 어디인가요?"

    • 입력 방식: 텍스트 입력.

    • 사용 목적: 사용자의 현재 위치를 기반으로 가까운 캠핑장을 추천.

  2. 이동 가능 시간 입력란:

    • 질문: "캠핑을 위해 몇 시간까지 이동 가능하신가요?"

    • 입력 방식: 숫자 입력.

    • 사용 목적: 상세주소 데이터에서 이동 가능 범위에 포함된 캠핑장을 필터링.

  3. 캠핑 유형 선택 드롭다운:

    • 질문: "캠핑 유형은 다음 중 어떤 건가요?"

    • 선택 항목: 솔캠, 가족캠, 미즈캠, 커플캠, 친구캠.

    • 사용 목적: 사용자가 선택한 유형에 맞는 캠핑장 추천.

    • 데이터 처리: 리뷰 데이터를 기반으로 유형별로 라벨링된 캠핑장을 매칭.


2. 리뷰 데이터 수집 및 캠핑 유형 라벨링

리뷰 데이터 수집

  1. 새로운 시트 생성:

    • 시트 이름: Reviews.

    • 목적: 사용자 리뷰 데이터를 저장하고 캠핑 유형 라벨링에 활용.

  2. 리뷰 데이터 구성

    • 필드 예시:

      • 캠핑장명 (캠핑Data 시트와 연결)

      • 리뷰 내용

      • 별점

      • 캠핑 유형 (예: 솔캠, 가족캠 등)

  3. 데이터 수집 방법

    • 방법 1: 기존 캠핑장 리뷰 데이터를 수집하여 수동 또는 자동으로 적재.

    • 방법 2: 사용자가 직접 리뷰를 입력하고 제출할 수 있는 기능 구현.

캠핑 유형 라벨링

  1. 라벨링 열 추가:

    • CampingData 시트에 캠핑 유형 열 추가.

    • 리뷰 데이터를 기반으로 솔캠, 가족캠, 미즈캠, 커플캠, 친구캠 중 적합한 유형으로 태그 지정.

  2. 라벨링 방식:

    • 리뷰 데이터에서 키워드 분석(예: 가족, 솔로, 친구 등) 또는 평균 별점 기반으로 유형 결정.

    • 라벨링 자동화를 위해 간단한 AI 모델이나 키워드 매칭 알고리즘 활용 가능.


3. 상세주소 기반 필터링

목표

  • 사용자가 입력한 이동 가능 시간 내에 포함되는 캠핑장을 추천.

구현 방식

  1. 거리 계산 기준:

    • 상세주소 데이터를 기반으로 사용자의 입력값과 비교.

    • 이동 가능한 범위를 km 단위로 변환하여 필터링.

  2. 데이터 처리 흐름:

    • 사용자 입력: "몇 시간까지 이동 가능하신가요?" (입력값: x)

    • 이동 거리 계산:

      • 기본 가정: 평균 이동 속도 60km/h.

      • 계산식: 이동 거리(km) = x * 60.

    • 상세주소에서 이동 가능 거리 내 캠핑장 검색:

      • 상세주소 데이터를 거리 단위로 변환(지오코딩 API 활용 가능).

      • x * 60km 범위 내에 포함된 캠핑장만 필터링.

  3. 결과 출력:

    • 사용자가 입력한 지역에서 특정 거리 내 캠핑장 리스트 제공.

    • 필터링된 결과를 테이블 형식으로 표시.


4. 데이터 흐름 요약

1) 사용자 입력 데이터

필드

입력 방식

데이터 활용

현재 지역

텍스트 입력

상세주소와 비교하여 근처 캠핑장 추천.

이동 가능 시간

숫자 입력

상세주소 데이터를 필터링하여 결과 제공.

캠핑 유형

드롭다운

리뷰 데이터를 기반으로 맞춤 추천 제공.

2) 리뷰 데이터

필드

설명

캠핑장명

리뷰가 작성된 캠핑장의 이름.

리뷰 내용

사용자가 작성한 리뷰 텍스트.

별점

사용자가 매긴 캠핑장 별점.

캠핑 유형

솔캠, 가족캠, 미즈캠, 커플캠, 친구캠.


5. 예상 기능 흐름

  1. 사용자 입력란에서 정보를 입력.

  2. 입력값 기반 필터링:

    • 현재 지역 + 이동 가능 시간 → 상세주소 데이터를 기준으로 거리 필터링.

    • 캠핑 유형 → 리뷰 데이터를 기반으로 유형 필터링.

  3. 결과를 테이블 형식으로 출력:

    • 캠핑장명, 상세주소, 캠핑 유형, 홈페이지 URL, 전화번호 등.

2. 클로드로 코딩하기

한국어 앱 스크린샷
  • 그대로 복붙합니다.

  • 클로드가 준 코드를 Apps Script에 넣고, 실행을 반복합니다.

    중국어가 포함된 웹페이지의 스크린샷

    하지만...

한국어로 된 문자 메시지의 스크린샷
한국어 문자 메시지 스크린샷
한국어로 된 문자 메시지의 스크린샷

하다보니.. 욕심이 생기더라구요.ㅎㅎ

한국어로 된 문자 메시지의 스크린샷
한국어 앱 스크린샷

칭찬도 해주면서 디버깅을 반복합니다..!

이렇게 한 시간 정도를 반복한 후 드디어 완성된 사이트를 공개합니다.

https://script.google.com/macros/s/AKfycbwSczVjPSTkx7hUjQ8l8h323irvKmwRkL9PXyGHlLYxeUvbWA8DQvFE5-ixERADss7Vnw/exec

  1. 홈 화면

    한국어로 된 캠핑 웹사이트의 스크린샷
중국어 텍스트가 있는 앱의 스크린샷

-> 새롭게 추가된 출발지와 이동 시간, 캠핑 유형

  1. 검색 결과 페이지

    여러 텐트 사진이 포함된 웹사이트의 스크린샷

+ver1의 UI 및 기능과의 비교

  • ver 1

    • UI

      한국어 웹사이트 스크린샷
    • 기능

      • 시/도, 시/군/구 필터링, 시설 유형 선택(카라반, 오토캠핑장 등 선택)

      • 검색하면 나오는 리스트 카드, "캠핑장명", "주소","전화번호","캠핑장유형","웹사이트링크"

      • 중복 제거도 못했던.. 약간 모자랐던 아이..

  • ver 2

    • UI 기능

      한국 캠핑사이트 홈페이지
    • 기능

      • 검색하면 나오는 리스트 카드와 이미지, "주소","전화번호", "반려동물 가능여부","홈페이지 링크", "캠핑 유형 태그(이미지상 솔캠)"

      • 검색 입력 항목 추가 "출발지", "이동 시간", "캠핑 유형"

      • 쓰면서 알게된 것..!얼마나 멀리갈 수 있으신가요? -> 몇시간 이동 가능한지로 바꿔야겠네요..

    • 추후 추가 기능

      • 가장 캠핑장이 많은 지역 혹은 지역별 캠핑장 분포 정도

      • 리뷰가 가장 좋은 캠핑장 TOP 3

      • 안전점수가 가장 높은 캠핑장 TOP3

      • 운영자 Pick 캠핑장 3

결과와 배운 점

  • 배운 점 ?

    • 기획을 좀 더 꼼꼼히 해야 한다는 점을 배웠습니다. 확실히 세부적으로 기획할 수록 구현이 잘 되는 것 같습니다.

    • 정말 클로드가 디자인을 잘한다는 점이요...ㅎㅎ

  • 과정 중에 어떤 시행착오를 겪었나요?

    • 리뷰 데이터를 기반으로 캠핑 유형을 분류해달라고 했는데, 계속 오류가 나고 불러와지지 않는 경우가 발생했습니다. 여러번의 디버깅 과정을 수행했습니다.

    • 이 부분은 어떻게 구체화해야 하는지 제대로 기획을 전달하지 않아서 오류가 계속 났던 것 같습니다.

  • 앞으로의 계획이 있다면 들려주세요.

    • 앞으로의 계획은 앞서 적어둔 추가 기능들을 무사히 반영하는 것입니다!

도움 받은 글 (옵션)

기획에 대해서 @김이언 님의 사례를 보고, 이렇게 구체적으로 기획해야 하는구나 깨달았습니다 감사합니다!

https://www.gpters.org/nocode/post/why-very-easy-reading-D5CgMTOUs4Sr8fj

15
8개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요