부제 : 크롤링 - 네이버지도 리뷰 요약하기
안녕하세요. 18기 n8n자동화 수업에 참여하고 있는 디디 입니다.
지난번 국립공원 생태탐방원 잔여 생활관 현황을 스크래핑 하는 워크플로우를 만들어봤는데요. https://www.gpters.org/nocode/post/create-simple-web-croquar-A7jwmS502qfBKoW
제가 골랐던 사이트가 Http Request (post) 만으로 쉽게 내용을 확인 할 수 있는 사이트였던지라 간단하게 진행할 수 있었습니다.
그 다음 n8n으로 뭘 자동화 해볼까 찾는 중 에, 회사에서 저희 팀의 slack 채널 중 ‘점심’ 제안 하는 채널이 있어, 이곳에 네이버지도 url이 올라오는 경우 리뷰를 요약해서 알려주는 봇을 만들어 보기로 합니다.
그리고 데이터 수집 과정 중 마주한 벽들과 그 해결 과정을 여기에서 다시 되짚어 보겠습니다.
사용툴
채널/UI: Slack
오케스트레이션/에이전트 런타임: n8n
LLM/검색 백엔드: Gemini 2.5 Flash, Perplexity Sonar Pro
진행과정
slack app 만들기
우선 https://api.slack.com/apps 에서 앱을 만들고, n8n에서 슬랙 노드 활용을 위한 크레덴셜 설정과 만든 앱과의 연결과정이 필요합니다. slack api 앱설정의 Event Subscriptions 에서 Request URL등록을 통해 웹훅이 정상 작동하여야 하는데, 셀프호스팅 n8n의 경우 SSL구성 등 조금 복잡한 과정이 필요해 cloudflare를 이용하는 방법으로 해결하였습니다.
특정 채널에 메세지가 포스트되면, 메세지를 보낼 수 있게 됩니다.
슬랙 트리거는 메시지를 슬랙 채널로 보냅니다
네이버 지도 주소 찾기
네이버 지도에서 공유하기를 하면 https://naver.me/xzxmWCre 이와 같은 단축 url을 받을 수 있는데요. HTTP Request 노드로 주소를 날려 봅니다만, 나오는게 없습니다.
텍스트 편집기가있는 웹 페이지의 스크린 샷
많은 웹사이트들이 헤더 없이 온 요청을 데이터 수집 차단 목적으로 막게 되는데, 봇이 아닌 브라우저 처럼 보이기 위해 헤더 정보를 넣어 줘 봅니다.
노란색 점이 많은 웹 페이지의 스크린 샷
뭔가 지도 관련한게 나온거 같은데 알아 볼 수 없으니, https://codebeautify.org/htmlviewer 에 html을 붙여 넣어 봅니다. 아하.. 그냥 지도앱을 설치하라는 화면 입니다.
지도와 검색 엔진이있는 웹 사이트의 스크린 샷
HTTP Request 노드에서 Follow Redirects 옵션을 사용하라는 Chatgpt의 가이드가 있었으나 작동하지 않았고, 단축 URL의 원래 URL에 대한 구글 검색을 하다 https://www.virustotal.com/gui/home/url 이라는 사이트에 대한 정보를 확인 합니다. 사이트 위험도에 대한 검사와 더불어 최종 목적지에 대한 정보를 알 수 있습니다.
Avast Internet Security 대시 보드의 스크린 샷
Final URL 혹은 location이라는 항목으로 원래 URL을 보여주는데, 둘러보니 API를 제공하네요 무료로! 게다가 하루에 500번이라니 좋네요.
링크가있는 페이지에 대한 링크가있는 페이지 링크가있는 페이지 링크
다시, API를 어떻게 사용해야 하는지 한 참 씨름하다, 아래의 노드를 구성해냅니다.
한국 웹 사이트의 과정을 보여주는 다이어그램
slack에서 입려된 텍스트에서, 네이버 URL을 분석 요청 API를 통해 날리고 (여긴 결과를 주지 않고, 분석 요청을 실행하는 API) 잠시 기다리고 있던 다른 분기의 노드에서는 URL에대한 BASE64 인코딩을 진행 후 virustotal 리포트 API에게 전달해 결과를 받아냅니다.
그리고 결과에서, 각 네이버지도 장소에 대한 고유번호 번호인 PlaceId를 뽑아냅니다.
네이버 지도 리뷰 요약 하기
PlaceId를 추출한 이유는, 네이버지도 PC와 모바일에서 같은 장소라도 다른 단축URL이 생성되었고, PlaceId를 기준으로 주소 가 정형화 되어 있었기 때문에, 조금 더 구성이 단순한 모바일페이지로 접근하기 위함 이었습니다.
한국의 Google 검색 페이지의 스크린 샷
https://m.place.naver.com/restaurant/1899758262/review/visitor
네이버지도 모바일 페이지에서 리뷰를 눌렀을 때 리뷰가 우선 10개 보여집니다.
중국 식당 웹 사이트의 스크린 샷
HTTP Request 노드로 해당 html을 수집하고, 내용을 살펴 봅니다.
텍스트 상자와 버튼이있는 웹 페이지의 스크린 샷
여러 페이지를 보여주는 웹 페이지의 스크린 샷
html이 보여지는 모습대로 제대로 들어오고 있습니다.
다음으로 CODE 노드에서 받아온 html의 리뷰 텍스트 부분만을 파싱합니다.
전화에 한국 코딩 앱의 스크린 샷
기본 HTTP Request에서는 파라미터를 변경 적용해도 10개만 출력되고 다음 리뷰를 얻어 낼 수 없습니다.
대부분의 많은 웹사이트는 동적사이트로 만들어져 있는데, html이 로딩되었다고 내용이 보이지 않고 자바스크립트가 나중에 데이터를 가져와서 채워주고 그것이 보여지게 됩니다.
네이버지도에서도 리뷰를 더 보려면 ‘펼처서 더보기’를 클릭 하는 액션이 있어야 하고, 웹브라우저의 개발자도구 Network 탭의 Fetch/XHR에서 해당 액션으로 graphql 이라는 API가 호출되는 것을 볼 수 있습니다.
전화에 한국 코딩 앱의 스크린 샷
그런데, n8n의 노드 중에 GrapgQL 이라는 노드가 있네요.
GraphQL에서 다음은 어떻게됩니까?
해당 노드를 사용하여 20개의 리뷰를 더 가져와서 텍스트를 파싱 합니다.
다양한 유형의 정보를 보여주는 웹 페이지의 스크린 샷
앞선 별도 API호출 없이 얻은 10개의 리뷰와 합쳐서 30개 리뷰의 텍스트가 만들어 집니다.