[캡스톤디자인 - Adultree] 크롤링해서 얻은 텍스트, 이미지를 파일로 저장하여 google drive api를 이용해 drive에 업로드하기

💬 왜 이러한 일을 하게 되었는지

  먼저 졸업 프로젝트에서 가장 중요한 기능은 자립준비청년이 텍스트로 궁금한 점에 대해 물어보았을 때, 챗봇이 사용자에게 필요한 정보를 제공하는 기능이다. 우리는 이러한 챗봇이 정보를 제공해줄 때의 정확성을 높이기 위해서 RAG를 이용하기로 하였다. RAG 구축하는 과정에서 chroma DB로 벡터 DB를 구축하고 이 벡터 DB에 자립준비청년에게 도움이 되는 정보(주거 정보, 취업 정보, 조례 등)를 크롤링하여 넣어주기로 하였다.

 

🍥 selenium으로 크롤링을 해보자!

https://wikidocs.net/137914

6) 동적 웹크롤링 - selenium 소개 및 기초사용법

위의 링크를 참고하여 진행하게 되었다.

 

 

---

selenium은 동적 크롤링에 적합해서 선택하게 되었다. 먼저 우리는 자립정보ON이라는 홈페이지 상의 자립 지원 사업에 대한 txt와 이미지 파일을 가져오기로 했다. 

 

먼저 selenium을 사용하기 위해서는 관련 패키지를 설치해야 한다. 나는 아나콘다로 가상환경을 세팅해주었다.

pip install selenium

 

성공적으로 설치가 되면, 이제 본격적으로 웹사이트에 접속할 수 있다.

 

아래와 같이 파이썬 코드 상에서 import를 작성해줍니다.

import os
import requests
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
import random
from selenium import webdriver

 

from selenium.webdriver.common.by import By

html 상에서 class나 id 이름을 가지고 오기 위해서 필요하다

 

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

웹페이지 상에서 어떤 요소가 로드될 때까지 기다리기 위해서 필요하다.

 

from selenium import webdriver

브라우저 자동 제어를 위해 필요하다.

 

# 메인 페이지로 이동
driver.get("https://jaripon.ncrc.or.kr/home/kor/main.do")

# 경고창 처리
try:
    WebDriverWait(driver, 5).until(EC.alert_is_present())
    alert = driver.switch_to.alert
    alert.accept()
    print("Alert accepted.")
except Exception as e:
    print(f"No alert found or error occurred: {e}")

# 자립정보 조회 페이지로 이동
script = "fn_menu_move('/home/kor/support/projectMng/index.do', '3');"
driver.execute_script(script)

 

메인 페이지로 이동한 후, 자립정보 지원사업이 존재하는 페이지로 이동하게끔 request를 보내는 코드를 만들어준다.

이 때에 바로 자립정보 지원사업이 존재하는 페이지로 이동하지 않은 이유가 있다!

 

바로 해당페이지로 접근한 경우에는 "비정상적 접근입니다"와 같은 에러 메시지가 표시되는 것을 볼 수 있기 때문이다.

그래서 이러한 에러를 방지하기 위해서 자바스크립트를 이용해준다. 

driver.execute_script(자바스크립트 코드)

 

이런 식으로 작성하게 되면 자바스크립트 코드를 이용하여 동작을 제어할 수 있다.

script = "fn_menu_move('/home/kor/support/projectMng/index.do', '3');"

이 부분에서 fn_menu_move는 정의되지 않은 함수인데 어떻게 작동할 수 있냐고 할 수도 있냐고 물을 수도 있다!

<a href="javascript:void(0);" onclick="fn_menu_move('/home/kor/servic/login/index.do','25');">
	<span class="text">로그인</span>
</a>

 

이런 식으로 이미 홈페이지 내에 있는 함수이기 때문에 갖다 쓸 수 있는 것이었다.

다만 다른 홈페이지에서는 이러한 함수가 없을 수 있기 때문에 다른 곳에 적용할 때는 유의해야한다.

# 페이지 로딩 및 div.gallery_list > ul.list 요소 확인
try:
    gallery_list = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, "div.gallery_list ul.list"))
    )
    print("gallery_list found.")

    # 각 li > a 요소 탐색 및 텍스트/이미지 저장 반복
    for idx in range(10):  #10개의 항목 처리
        try:
            # 현재 li > a 요소들 로드
            li_elements = gallery_list.find_elements(By.CSS_SELECTOR, "li > a")

            # a 태그 클릭하여 새 페이지로 이동
            a_tag = li_elements[idx]
            driver.execute_script("arguments[0].click();", a_tag)

            # 새 페이지가 로드될 때까지 대기
            WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.TAG_NAME, "body"))
            )

            # <div class="editor_view">에서 텍스트 및 이미지 URL 가져오기
            editor_view = WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "div.editor_view"))
            )

            # 텍스트 내용 가져와서 저장
            text_content = editor_view.text
            text_filename = f"content_{idx + 1}.txt"
            with open(text_filename, "w", encoding="utf-8") as file:
                file.write(text_content)
            print(f"Saved text content to {text_filename}.")

            # 이미지 다운로드 및 저장
            image_elements = editor_view.find_elements(By.TAG_NAME, "img")
            for img_idx, img in enumerate(image_elements):
                img_url = img.get_attribute("src")
                if img_url:
                    img_data = requests.get(img_url).content
                    image_filename = f"content_{idx + 1}_image_{img_idx + 1}.jpg"
                    with open(image_filename, "wb") as img_file:
                        img_file.write(img_data)
                    print(f"Saved image to {image_filename}.")

            # 원래 페이지로 돌아가기
            driver.back()

            # 자립정보 조회 페이지로 재진입 (JavaScript 사용)
            driver.execute_script(script)
            gallery_list = WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "div.gallery_list ul.list"))
            )

            # 사람처럼 보이게 대기
            time.sleep(random.uniform(1, 3))

        except Exception as e:
            print(f"Error processing link {idx + 1}: {e}")
            break

except Exception as e:
    print(f"Error finding gallery_list or list items: {e}")

# 브라우저 종료
driver.quit()

 

사실 위의 코드가 중점적인 내용이다. 찬찬히 살펴보겠다...!

gallery_list = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, "div.gallery_list ul.list"))
    )
print("gallery_list found.")

webDriverWait을 통해서 로드될 때까지 기다려주고 css_selector을 통해 해당 html 내의 class이름이 galley_list인 div 태그 안에 list라는 class 이름을 가진 list 태그가 있는지 찾아준다.

 

 

이제 반복문 내에 코드를 살펴보겠다.

 

반복문 내에서는 각각의 사업에 해당하는 페이지에 접속한 후

해당 사업의 텍스트와 이미지 파일을 로컬에 저장하는 내용이다.

# 현재 li > a 요소들 로드
            li_elements = gallery_list.find_elements(By.CSS_SELECTOR, "li > a")

            # a 태그 클릭하여 새 페이지로 이동
            a_tag = li_elements[idx]
            driver.execute_script("arguments[0].click();", a_tag)

            # 새 페이지가 로드될 때까지 대기
            WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.TAG_NAME, "body"))
            )

            # <div class="editor_view">에서 텍스트 및 이미지 URL 가져오기
            editor_view = WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "div.editor_view"))
            )

위와 같이 각각의 태그를 찾는 과정이 첫 단계이고

# 텍스트 내용 가져와서 저장
            text_content = editor_view.text
            text_filename = f"content_{idx + 1}.txt"
            with open(text_filename, "w", encoding="utf-8") as file:
                file.write(text_content)
            print(f"Saved text content to {text_filename}.")

            # 이미지 다운로드 및 저장
            image_elements = editor_view.find_elements(By.TAG_NAME, "img")
            for img_idx, img in enumerate(image_elements):
                img_url = img.get_attribute("src")
                if img_url:
                    img_data = requests.get(img_url).content
                    image_filename = f"content_{idx + 1}_image_{img_idx + 1}.jpg"
                    with open(image_filename, "wb") as img_file:
                        img_file.write(img_data)
                    print(f"Saved image to {image_filename}.")

 

해당 태그의 text, img를 저장해준다.

text의 경우에는 editor_view.text와 같이 별다른 과정 없이 text를 가져올 수 있다.

다만 우리는 한국어를 사용하므로 인코딩 과정에서 utf-8로 설정해야 글자가 안 깨질 수 있다. 

파이썬 내장 함수인 open을 이용하면 txt 파일을 저장할 수 있다.

with as file을 이용하면 open 후 close해야 하는 수고를 덜 수 있어서 이렇게 작성하는 게 편하다.

 

with open(text_filename, "w", encoding="utf-8") as file:
                file.write(text_content)

이거를 with ~ as file을 사용하고 싶지 않으면 

file = open(text_filename, "w", encoding="utf-8")

file.write(text_content)

file.close

로 작성하면 된다.

 

참고로 "w"는 write, "r"는 read여서 우리는 여기서 write를 하고 싶어서 open의 두번째 파라미터로 w를 작성해준 것이다.

 

이미지의 경우에는 텍스트와 달리 번거로운 과정을 거쳐야 한다.

img 태그 -> img 태그 안의 src 요소 가지고 오기 -> src 요소가 있으면, 가지고 와서 저장.

여기서 open의 두 번째 파라미터로 wb를 작성했는데 이는 바이너리 모드로 쓰기를 해주기 위함이다.

이미지 객체를 바이너리 형태로 다루기 위해서는 pickle 모듈을 사용하게 된다.

 

그 다음에는 해당 페이지에서 작업을 완료하였으므로 다시 지원 사업 페이지로 이동하게 된다.

이후에는 브라우저를 닫아준다.

 

만약에 google colab에서 해당 작업을 진행하게 될 경우에는, head-less 모드를 꼭 적용해야 코드가 작동가능하다.

 

🍥 selenium으로 크롤링한 파일을 google drive에 저장해보자

현재까지는 로컬에 저장하는 경우고 파일들 google drive에 저장하는 작업이 필요하다.

이때는 google drive api를 사용하여야 한다.

 

https://console.cloud.google.com

Google 클라우드 플랫폼

 

해당 페이지에 접속해준다.

 

 

나는 이미 storage를 만들어둔 상태라 이런 페이지가 뜨는데 처음인 경우에는 프로젝트를 만들라고 하는 내용이 뜰 거다.

어쨌든 처음부터 시작해보면

"새 프로젝트"를 클릭해준다.

그러면 이런 식으로 프로젝트 이름을 지정할 수 있게 된다.

조직이 없으면 생성이 안되는데 나는 학교 이메일이라 학교를 조직으로 선택해주었다.

메뉴바 > API 및 서비스 > 사용 설정된 API 및 서비스를 클릭한다.

이런 화면이 나오는데 이때 "+ API 및 사비스 사용 설정"을 누른다.

해당 화면이 나오는데 검색창에 google drive api를 검색한다.

여기서 제일 상단에 나오는 Google Drive API를 선택한다.

사용 버튼을 눌러준다.

오른쪽 상단의 사용자 인증 정보 만들기를 선택한다.

애플리케이션 데이터를 선택하고 다음을 눌러준다.

그러면 위와 같은 창이 나오고 이 창에서 service 아이디만 적어주면 된다.

 

이제 OAuth 동의 화면에 들어가서

User Type을 선택해준다. 조직 내 사용자만 사용할 거면 내부를 해도 되고 외부 사용자도 허용할거면 외부를 선택해도 된다. 나는 일단 외부를 선택해주었다.

앱 이름이랑 사용자 지원 이메일을 적어주었다. 이건 예시라 앱 이름은 아무렇게나 지었는데 이렇게 지으면 안된다!!!

스크롤을 내려 개발자 연락처 정보 입력 후 저장 후 계속을 누른다.

나머지는 그냥 저장 후 계속 눌러주면

완료된다!!

 

이제 여기서 사용자 인증 정보로 돌아가 작업에 있는 다운로드 아이콘을 누른다.

여기서 JSON 다운로드를 하면 된다.

해당 JSON의 이름을 credentials.json으로 변경해준다!

모자이크 처리된 이메이 부분을 눌러준다.

여기서 키 추가 > 새 키 만들기

JSON 선택 후 만들기를 누르면 json이 다운로드 되고 해당 파일 이름을 service_accout.json으로 변경해준다.

기존의 크롤링 파이썬 파일과 같은 경로에 앞서 다운로드한 credential.json과 service_accout.json을 넣어준다.

 

그리고 google drive에서 폴더를 하나 생성 후

오른쪽에 액세스 관리를 눌러

앞서 만들었던 서비스 계정의 이메일을 편집자로 추가하면 된다. 

그리고 해당 폴더의 주소 https://drive.google.com/drive/folders/~~~~~ 에서 물결 부분에 해당되는 부분을 복사한다.

 

기존 파이썬 파일에 아래 코드를 작성해준다.

# 서비스 계정 키 파일 경로
SERVICE_ACCOUNT_FILE = 'service_account.json'

# Google Drive API 인증 (서비스 계정)
def authenticate_google_drive():
    credentials = Credentials.from_service_account_file(
        SERVICE_ACCOUNT_FILE,
        scopes=['https://www.googleapis.com/auth/drive']
    )
    return build('drive', 'v3', credentials=credentials)

# Google Drive 공유 폴더 ID
FOLDER_ID = '아까 복사한 부분 넣기!!'

# 파일 업로드 함수
def upload_to_drive(service, file_name, file_data, mime_type):
    file_metadata = {
        'name': file_name,
        'parents': [FOLDER_ID]
    }
    media = MediaIoBaseUpload(io.BytesIO(file_data), mimetype=mime_type)
    file = service.files().create(body=file_metadata, media_body=media, fields='id').execute()
    print(f"Uploaded {file_name} to shared folder with ID: {file.get('id')}")
    
    # Google Drive API 인증
drive_service = authenticate_google_drive()

 

그리고 저장되는 부분에서도 기존의 코드 file.write 대신 아래와 같이 작성해준다.

 upload_to_drive(drive_service, text_file_name, text_data, "text/plain")

 

그러면 코드 실행 시 google drive에 알아서 올라가는 걸 볼 수 있다!

 

🍥 전체 코드

import os
import requests
import random
import time
import io
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium import webdriver
from googleapiclient.discovery import build
from googleapiclient.http import MediaIoBaseUpload
from google.oauth2.service_account import Credentials

# 서비스 계정 키 파일 경로
SERVICE_ACCOUNT_FILE = 'service_account.json'

# Google Drive API 인증 (서비스 계정)
def authenticate_google_drive():
    credentials = Credentials.from_service_account_file(
        SERVICE_ACCOUNT_FILE,
        scopes=['https://www.googleapis.com/auth/drive']
    )
    return build('drive', 'v3', credentials=credentials)

# Google Drive 공유 폴더 ID
FOLDER_ID = ''

# 파일 업로드 함수
def upload_to_drive(service, file_name, file_data, mime_type):
    file_metadata = {
        'name': file_name,
        'parents': [FOLDER_ID]
    }
    media = MediaIoBaseUpload(io.BytesIO(file_data), mimetype=mime_type)
    file = service.files().create(body=file_metadata, media_body=media, fields='id').execute()
    print(f"Uploaded {file_name} to shared folder with ID: {file.get('id')}")

# WebDriver 설정
driver = webdriver.Chrome()

# 메인 페이지로 이동
driver.get("https://jaripon.ncrc.or.kr/home/kor/main.do")

# 경고창 처리
try:
    WebDriverWait(driver, 5).until(EC.alert_is_present())
    alert = driver.switch_to.alert
    alert.accept()
except Exception:
    pass

# JavaScript로 페이지 이동
script = "fn_menu_move('/home/kor/support/projectMng/index.do', '3');"
driver.execute_script(script)

# Google Drive API 인증
drive_service = authenticate_google_drive()

try:
    gallery_list = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, "div.gallery_list ul.list"))
    )

    for idx in range(10):
        try:
            li_elements = gallery_list.find_elements(By.CSS_SELECTOR, "li > a")
            a_tag = li_elements[idx]
            driver.execute_script("arguments[0].click();", a_tag)

            WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.TAG_NAME, "body"))
            )

            editor_view = WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "div.editor_view"))
            )

            # 텍스트 업로드
            text_content = editor_view.text
            if text_content:
                text_data = text_content.encode('utf-8')
                text_file_name = f"content_{idx + 1}.txt"
                upload_to_drive(drive_service, text_file_name, text_data, "text/plain")

            # 이미지 업로드
            image_elements = editor_view.find_elements(By.TAG_NAME, "img")
            for img_idx, img in enumerate(image_elements):
                img_url = img.get_attribute("src")
                if img_url:
                    img_data = requests.get(img_url).content
                    image_file_name = f"content_{idx + 1}_image_{img_idx + 1}.jpg"
                    upload_to_drive(drive_service, image_file_name, img_data, "image/jpeg")

            driver.back()
            driver.execute_script(script)
            gallery_list = WebDriverWait(driver, 10).until(
                EC.presence_of_element_located((By.CSS_SELECTOR, "div.gallery_list ul.list"))
            )
            time.sleep(random.uniform(1, 3))

        except Exception as e:
            print(f"Error processing link {idx + 1}: {e}")
            break

except Exception as e:
    print(f"Error finding gallery_list or list items: {e}")

driver.quit()

 

🍥 github에 올릴 때는 json 파일을 .gitignore에 추가하는 걸 잊지 말자!