[Camping info] 캠핑 정보 서비스 개발

최근 회사 업무를 위한 툴 개발을 위해 folium을 공부 했었는데, 본격 업무에 들어가기에 앞서 토이 프로젝트를 진행 해보았다. 본인은 캠핑 가는 것을 좋아하는데, 이와 관련해서 지도에 캠핑장 위치를 보여주고, 캠핑장 정보를 보여주는 서비스를 개발하기로 결정했다.

 

회사에서 사용할 툴을 웹 서비스로 개발할 예정이기 때문에, 웹을 통해 캠핑장 정보를 제공하는 서비스를 개발하며 선행 학습을 진행 할 생각이다.

 

1. 화면 설계

캠핑 정보 서비스 제공을 위한 웹 화면 설계는 아래와 같이 진행 하였다.

Navigation bar - 서비스 이름 및 search를 지원하는 text box 및 필터를 걸 수 있도록 한다.

Map - 캠핑장 정보를 지도에 표시하는 지도를 표시한다.

Camping information - 캠핑장 세부 정보를 표시한다.

2. 구현 방안 수립

웹 서버는 직접 구현 하지 않고, 깃허브 웹 호스팅을 이용한다. 직접 구현 하지 않는 이유와 깃허브를 이용한 웹 호스팅 방법은 아래 페이지에 정리 하였다.

[ETC] Github를 이용한 웹 호스팅 방법

캠핑장 데이터를 가지고 folium을 사용해 웹 화면에 지도와 마커를 띄우고, 생성된 웹 페이지를 가지고 웹 화면을 구성하는 작업을 한다.

생성된 지도를 이용해 상세 데이터를 화면 오른쪽에 띄운다.

위와 같이 방안을 수립 하고 구현을 시작 했다.

 

3. 데이터 수집

우선 캠핑장 데이터는 공공데이터포털에서 다운로드 받았다.

한국관광공사 전국 야영장 등록 현황_20190717

전국 단위 야영장 등록 현황과 좌표정보들이 포함된 자료가 흔치 않아 위 자료를 사용 하였으며, 야영장별 홈페이지 주소가 명시되어 있지 않아 데이터에 야영장 별 홈페이지 링크를 찾아 입력 하는데 시간이 좀 걸렸다.

4. 구현

수집된 데이터를 지도에 시각화 하고, 시각화 한 데이터를 웹으로 저장하도록 python 코드를 작성하였다.

import pandas as pd
import folium

from folium.plugins import MarkerCluster

if __name__ == "__main__":
    camping_sites_csv_data = pd.read_csv('camping_sites_url.csv', encoding='cp949')
    
    # Folium map initialize & display
    m = folium.Map(
    location=[36.344362, 127.948878] # Default location = 36.344362, 127.948878
    , zoom_start=7
    )

    # Marker cluster insert into the folium map
    marker_cluster = MarkerCluster().add_to(m)

    # Add campsites into the map with the detailed information.
    for i in range(camping_sites_csv_data.shape[0]):
        latitude = float(camping_sites_csv_data.iloc[i]['Latitude'])
        longitude = float(camping_sites_csv_data.iloc[i]['Longitude'])
        urlAdd = camping_sites_csv_data.iloc[i]['Homepage']
        if 'nan' == str(urlAdd):
            urlAdd = "https://chuuu-devcamp.tistory.com/"

        folium.Marker(
        [latitude, longitude],
            popup = f'<div style="width:400px">\
                <img width="400px" src="camping_image.jpg"><br>\
                <strong>{camping_sites_csv_data.iloc[i]["Name"]}</strong><br>\
                구분: {camping_sites_csv_data.iloc[i]["Divisions"]}<br>\
                주소: {camping_sites_csv_data.iloc[i]["Address"]}<br>\
                일반사이트: {camping_sites_csv_data.iloc[i]["Normal_site"]}<br>\
                오토캠핑 사이트: {camping_sites_csv_data.iloc[i]["Normal_site"]}<br>\
                글램핑: {camping_sites_csv_data.iloc[i]["Glamping"]}<br>\
                카라반: {camping_sites_csv_data.iloc[i]["Caravan"]}<br>\
                <a href="{urlAdd}">상세 페이지 이동</a>\
                </div>',
            tooltip = 'Click!'
        ).add_to(marker_cluster)

    # Save folium map as html file.
    m.save('index.html')

위와 같이 구현 할 경우 아래와 같이 페이지에는 지도와 캠핑장 위치별 마커만 표시된다.

이제 생성된 페이지에서 지도 panel과 상세 정보 panel, navigation bar를 넣어 주고, 상세 정보 panel에 정보를 띄우기 위한 작업을 시작하려고 하였다. 

그런데.. 문제가 발생했다.

Folium으로 생성된 웹 페이지의 상태를 보니 코드 상태가 처참했었다. 각각의 마커 별로, popup및 동작별로 변수처리가 되어 있었고, 줄도 제대로 맞지 않은 상태였다.

 

데이터 양이 많아 이런 코드가 몇만줄씩 있었다...

 

또한, 아래 같이 생성된 HTML 코드가 어떻게 화면을 띄워 주는지 파악하기 어려워 별도로 HTML이 화면을 띄우기까지 실행 순서에 대해서 공부하였다.

[Camping Info] HTML 파일에서 자바스크립트 코드 위치 선정과 실행 순서

Folium의 용도에 대해서 제대로 이해하지 않고 작업을 진행 하다 뒤늦게 알게 되었다.

웹에 지도 정보를 표시하기 위한 자바스크립트 라이브러리 leaflet.js와 folium에 대한 차이점과 용도에 대한 조사 결과는 아래 페이지에 작성하였다.

 

[Camping info] Folium과 Leaflet.js의 차이점과 용도 파악

우선 생성된 웹 페이지를 최대한 사용해서 구현 해보기로 하고, 웹 페이지 구성을 설계와 같이 하도록 html 작업을 진행 하고, 오른쪽 Camping information panel에 캠핑장 상세 정보를 표시하기 위해 위와 같이 생성된 marker에 일일이 on click 이벤트를 다는 작업을 했다. 이 작업에 상당한 시간과 노력이 들었다. 

 

그 결과, 다음과 같이 캠핑 정보를 표시해 주는 페이지까지 만들 수 있게 되었다.

검색 및 필터 등 부가 기능들을 개발 하기 전 leaflet.js을 사용해 유지 보수 웹 서비스 추가 개발에 용이하도록 변경하는 것이 먼저 진행 되어야 할 것 같다.

https://chu-in-seon.github.io/Camping-Navigator/

https://chu-in-seon.github.io/Camping-Navigator/

 

위 페이지까지 작업하면서 용도에 맞게 라이브러리를 사용하는 것이 중요하다는 것을 알게 되었다.

위와 같은 시행 착오를 겪어봄으로써, 회사에서 사용할 툴을 개발할 때는 좀더 빠르고 쉽게 업무 진행을 할 수 있을 것 같다.