[Toy Project] google-maps-my-places-crawler 개발기 #01

---

개요

저는 평소에 지도 서비스를 즐겨 사용합니다. 식당이나 장소 중 가고 싶은 곳이나, 인상깊었던 곳 등 카테고리화 해서 목록을 만들어 저장하곤 합니다.

시간이 지날수록 저장해둔 목록이 점점 늘어나기 시작했습니다. 개발자가 이전에 작성한 코드를 리팩토링 하듯, 지도의 목록도 수정 및 유지보수가 필요한데, 점점 관리가 어려워 졌습니다. 때로는 카테고리화가 잘 안되어 섞이기도 하고, 복잡해졌습니다.

J의 일상 국내 ver.

 

그래서 구글 지도에 저장되어 있는 "내 장소"를 csv나 json으로 추출하여, 정리를 하고 싶었습니다. 어떠한 방법으로 해당 작업을 수행 하였는지에 대해 글에 작성해보려고 합니다.

---

Google Maps API 확인

Google Maps Platform  |  Google for Developers

구글 지도에서 내 장소를 가져오기 위해 우선 구글 지도 API를 찾아 보았습니다. API가 내 장소를 가져오는 기능을 지원하면 바로 해결이였습니다.

구글 지도 API는 다양한 API를 제공하고 있었습니다. 지도 표시, 장소 검색, 경로 검색 등등 하지만 내가 저장 해놓은 내 장소 가져오기 기능은 존재하지 않았습니다.

 

Obtain list of My Places from Google Maps

찾아보니 공식적인 API 지원은 수년 전 부터 존재 하지 않았습니다. 스스로 해결 방법을 찾아야 했습니다.

---

Selenium

구글 지도의 내 장소는 링크만 있으면 접근할 수 있습니다. 

웹 페이지를 자동으로 탐색하고, 원하는 정보를 추출할 수 있는 웹 크롤러를 사용하기로 결정 하였습니다.

 

Selenium automates browsers. That's it!

제가 선택한 도구는 Selenium 입니다.

Selenium은 웹 브라우저를 자동화하는 프레임워크입니다. 웹 브라우저를 제어하여 웹 페이지를 탐색하고, 원하는 정보를 추출할 수 있습니다. 주로 웹 스크래퍼, 크롤러를 개발하거나, 프론트엔드 테스트 자동화 등에 사용됩니다.
 

Python, Java, JavaScript 등 다양한 언어로 개발할 수 있으며, 저는 Node와 JavaScript 기술을 사용하였습니다.

 

참고로 유사한 도구로는 Playwright, Cypress, Puppeteer 등 이 있습니다.

---

Selenium Get Started

Selenium의 간단한 예제를 따라 해 보겠습니다.

 

사전에 node 프로젝트를 생성해 줍니다. 생성된 node 프로젝트에서 selenium library를 설치해 줍니다.

console

 

우선 세션을 시작하는 코드를 작성해줍니다. node의 실행은 node index.js 커맨드로 실행 해줍니다.

index.js

자동화된 Chrome 브라우저

세션을 실행하면, 자동화된 Chrome 브라우저가 켜집니다.

 

원하는 웹 사이트에 접근을 해봅니다. 제가 사용할 링크는 selenium turotial 웹사이트 입니다.

index.js

Selenium turotial website

여러 Form이 있는 페이지에 진입합니다.

 

원하는 Element를 찾아서 선택해 줍니다. Text input의 input 태그와 Submit Button 태그를 선택해줍니다.

index.js

 

선택한 input태그에 text를 입력시켜 주고, Submit 버튼을 클릭합니다.

Submit 버튼을 누르면 바로 제출 페이지로 넘어가게 됩니다.

index.js

Submit 버튼을 클릭하기 전 input 태그에 text가 입력된 모습

 

Submit 페이지에서 Heading 태그를 선택하고, 태그의 text값을 가져옵니다.

index.js

제출 페이지

 

console에 가져온 h1 태그의 text가 출력된다.

 

예제를 통해, 세션 시작, URL 접근, 원하는 Element 선택, 액션, 정보 가져오기 등의 기본적인 기능들을 시연 해 보았습니다.

해당 기능을 가지고 다양한 웹 자동화를 만들 수 있습니다.

 

첫번째 글에서는 제가 구현하고 싶은 기능과 Selenium을 이용하는 방법 등을 소개해 드렸습니다.

 

아직 프로젝트를 구현중이라, 조만간 구현 완료 후 결과를 공유 드리겠습니다.

 

 

전체 예제 코드입니다.

index.js

---