[프로젝트] (1) 👾 네이버 지도 크롤링하기

✅ 크롤링 목적

한끼모아에서는 식당 추천 기능을 위해 아래와 같은 식당 정보가 필요하다.

• 식당에 대한 최소한의 정보를 제공해주기 위해 주소, 영업 시간, 메뉴와 같은 데이터가 필요하다.
• 남은 예산 내에서 적절한 식당을 추천해주어야 하므로 평균 음식 가격이라는 중요한 정보도 제공해주어야 한다.

가장 먼저 공공데이터를 찾아보았으나 충분한 정보를 제공해주지 않았다. 따라서 네이버 지도에서 크롤링을 통해 식당 정보를 가져와 활용하기로 했다.

✅ 크롤링할 데이터

가게 상세 정보

• 가게명
• 음식 종류
• 가게 주소
• 대표 이미지
• 영업시간
  • 요일
  • 시간
• 평균 가격
• 메뉴들
  • 메뉴 이름
  • 메뉴 소개
  • 메뉴 이미지
  • 가격
  • 대표 여부

✅ 크롤링 도구 선택 : Selenium

크롤링에는 정적 크롤링과 동적 크롤링이 있다. 네이버 지도에서 식당 정보를 상세히 보기 위해서는 검색한 식당을 “클릭”하고, 메뉴를 보려면 메뉴 버튼을 “클릭”해야 한다. 이렇듯 네이버 지도는 하나의 페이지에 모든 정보가 나와있는 것이 아니라 동적으로 페이지를 렌더링하기 때문에 동적 크롤링이 필요하다. 이때 Selenium을 이용하면 웹 브라우저를 자동으로 제어하여 동적으로 실행되는 페이지 정보를 가져올 수 있다.

✅ 네이버 지도 Iframe 분석

Iframe : 웹 페이지 안에 또 다른 웹 페이지를 삽입하는 기능을 제공하는 HTML 요소

“충무로 음식점”을 검색하면 식당 정보들이 주르륵 나열되고, 각각의 식당을 눌러 식당에 대한 세부 정보를 확인할 수 있다. 이들은 각각 searchIframe, entryIframe이라는 서로 다른 Iframe 내에 위치한다.

원하는 정보를 추출하기 위해 어떤 태그에 어떤 HTML 구조로 구성되어 있는지 파악해보자.

• searchIframe : 가게 리스트 데이터 구조 파악

  

  항목	설명
  가게 리스트	<div class = “Ryr1F”>
  가게 리스트 상세 정보	<div class = “place_bluelink.N_KDL>
  가게 이름	<div class="TYaxT">
  카테고리	<div class=”KCMnt”>

• entryIframe : 각각의 가게 상세 정보 구조 파악

  

  항목	설명
  주소	<span class = “LDgIH”>
  영업 시간	<div class = “gKP9i RMgN0">
  영업 시간 상세 정보	<span class="i8cJw"> , <div class=”H3ua4”>
  가게 이미지	<div class = “CB8aP”>
  가게 이미지 상세 정보	<div class = “uDR4i>
  메뉴 상세 정보	<span class = “lPzHi”>, <span class = “kPogF”>, <em>, <img src = “https://”>

✅ Selenium 활용한 동적 크롤링 진행

크롤링은 다음과 같은 흐름으로 진행된다.

1. 웹 브라우저 띄우기
2. 충무로 음식점 검색
3. searchIframe 진입 및 스크롤 조작
4. 가게 리스트 수집
5. 식당 클릭 및 entryIframe 전환
6. 가게 상세 정보 수집

아래는 크롤링을 하면서 어려웠던 부분들을 정리해본다.

☑️ 스크롤 조작

네이버 지도는 스크롤을 내릴 때마다 동적으로 지연 로딩되는 방식으로 구현되어 있다. lazyload-wrapper 안에 식당 정보가 숨겨져 있다. 크롤링을 하면서 만난 첫 난관이었다 🫠

Selenium의 driver.execute_script() 함수를 사용해 높이를 조절해줌으로써 직접 스크롤하는 것과 동일한 효과를 낼 수 있다. 페이지의 맨 아래까지 스크롤하여 식당 정보가 HTML에 채워지게 한다.

def scroll(driver, scroll_container, px):
    last_height = driver.execute_script("return arguments[0].scrollHeight", scroll_container)
    while True:
        driver.execute_script("arguments[0].scrollTop += arguments[1]", scroll_container, px)
        time.sleep(0.5)
        current_height = driver.execute_script("return arguments[0].scrollTop", scroll_container)
        if current_height == last_height:
            break
        last_height = current_height

☑️ NoSuchElementException

driver.find_element(By.ID, "searchIframe") // 🧨
WebDriverWait(driver, 60).until(EC.frame_to_be_available_and_switch_to_it((By.ID, "searchIframe"))) // 👍

생각했던 것보다 로딩 속도가 굉장히 느렸다. 페이지의 요소를 찾기도 전에 find_element 함수를 호출하면 위의 에러가 발생할 수 있으므로 WebDriverWait을 사용하자. WebDriverWait은 특정 시간까지 브라우저의 요소를 찾을 수 있도록 기다린다.

☑️ 식당 클릭

식당 별로 세부 정보를 가져오기 위해서는 click()을 발생시켜 새로운 페이지를 열어야 한다. 또한 식당 세부 정보는 entryIframe에 있기 때문에 searchIframe에서 나와서 새로운 entryIframe으로 진입해야 한다. Selenium은 한 번에 하나의 문서만 조작할 수 있다고 한다.

driver.execute_script("arguments[0].click();", restaurant)
            
driver.switch_to.default_content()

WebDriverWait(driver, 60).until(EC.presence_of_element_located((By.XPATH, '//*[@id="entryIframe"]')))
iframe = driver.find_element(By.XPATH, '//*[@id="entryIframe"]')
driver.switch_to.frame(iframe)

Iframe 전환할 때 WebDriverWait 걸어주는 것 잊지 말자

☑️ 여러 예외 케이스

포장 가능한 식당	일반 식당

계속해서 82올리언즈에서 에러가 발생해서 왜 그런지 봤더니 메뉴가 다른 식당들과 좀 다르게 구성되어 있다. 포장 주문이 가능한 매장으로, 다른 식당들과 메뉴의 구조와 태그 이름이 다르다. 또한 lazy 로딩이 걸려있어 스크롤 작업이 필요하다. 식당마다 다른 부분을 따로 분기처리해주어야 한다.

Traceback (most recent call last):
  File "/app/crawling_restaurnats_detail.py", line 28, in crawling_restaurant_info
    iframe_src = iframe.get_attribute("src")
  File "/usr/local/lib/python3.10/site-packages/selenium/webdriver/remote/webelement.py", line 231, in get_attribute
    attribute_value = self.parent.execute_script(
  File "/usr/local/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py", line 528, in execute_script
    return self.execute(command, {"script": script, "args": converted_args})["value"]
  File "/usr/local/lib/python3.10/site-packages/selenium/webdriver/remote/webdriver.py", line 429, in execute
    self.error_handler.check_response(response)
  File "/usr/local/lib/python3.10/site-packages/selenium/webdriver/remote/errorhandler.py", line 232, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.TimeoutException: Message: script timeout
  (Session info: chrome=136.0.7103.59)

예외 처리를 해주지 않으면 다음과 같이 WebDriverWait이 해당 태그들을 찾을 수 없어 TimeoutException이 발생한다.

☑️ 서버 에러 🧨

식당 정보를 주기적으로 크롤링하여 최신 정보를 유지하기 위해 크롤링 서버를 구축했다. 프리티어로 사용할 수 있는 스펙이 micro였는데 설마 고작 70개 가져오는데 죽겠어? 하는 생각으로 돌렸는데, 바로 죽어버렸다.

코드도 고쳐보고 서버를 여러 번 껐다 켜도 문제가 해결되지 않아 결국 small로 올렸다. 비용이 문제이긴하나 이제 최종발표까지 1달 조금 넘게밖에 안 남았으니 그 정도는 감수하기로 했다. (이 문제는 다음 글에서 해결한다.)

☑️ 도커 이미지

저번 프로젝트때 도커를 사용할 타이밍을 놓쳐 사용하지 못했다. 모니터링 서버 구축할때나 서버 다시 생성할때나 굉장히 힘들었기 때문에 이번에는 도커를 적극 활용해보기로 했다.

서버에 크롤링 코드를 배포하려고보니 python, selenium, webdriver 등등 .. 설치할게 한가득이다. 도커 이미지로 빌드해서 필요한 환경을 한 번에 구성하고, 손쉽게 실행/배포할 수 있도록 관리했다.

// Python 3.10을 기반으로 하는 리눅스 이미지 사용
FROM python:3.10-slim

// 크롬 설치 및 인증서 검증을 위해 필수적인 리눅스 패키지 설치
RUN apt-get update && apt-get install -y \
    wget curl unzip gnupg ca-certificates fonts-nanum apt-transport-https \
    && rm -rf /var/lib/apt/lists/*

// Google Chrome의 공식 리포지토리 키를 추가하고, 최신 크롬 브라우저 설치
RUN mkdir -p /usr/share/keyrings && \
    curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/google-chrome.gpg && \
    echo "deb [arch=amd64 signed-by=/usr/share/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main" \
    > /etc/apt/sources.list.d/google-chrome.list && \
    apt-get update && apt-get install -y google-chrome-stable && \
    rm -rf /var/lib/apt/lists/*

WORKDIR /app
COPY . .

// pip 최신화 및 프로젝트 의존성 설치
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

---

✅ 크롤링 결과

검색 키워드	충무로 음식점
최종 수집 식당 수	65개
소요 시간	278초
반환 데이터	식당 이름, 주소, 식당이미지, 영업 시간, 메뉴 정보

📚 남은 숙제

• 식당 데이터가 많아지면 어떻게 처리하지?
  • 지금은 주기적으로 크롤링해온 식당 정보를 반영하기 위해 DB의 모든 식당 데이터를 delete하고 새롭게 insert하고 있다. 원래는 네이버 식당 고유 ID값을 활용해 DB에 식당 정보가 존재하면 update, 없다면 insert하려고 했지만 생각보다 구현이 쉽지 않아 지금은 시간관계상 패스하기로 했다.
  • 그리고 식당 정보가 많아지면 트랜잭션 오래 잡고 있는데 어떻게 더 빠르게 처리할 수 있을까 … ?!
• 카테고리 → 우리 서비스의 카테고리로 변환하는 작업 처리
  • ex) 네이버 지도에 표기된 식당 카테고리 : 곰탕 → 한식 카테고리로 매핑