1.1 크롤링 기초 개념

키워드 : 데이터, 데이터 분석, 문제 정의, 데이터 수집, SQL, 크롤링, API, 데이터 정제,

데이터 전처리, 데이터 사이언티스트, AI, tableau, 파이썬, 머신러닝, 딥러닝, 빅데이터, 데이터 마이닝, 데이터 시각화

01. 크롤링(crawling)이란??

크롤링(crawling) 이란 Web 상에 존재하는 데이터를 수집하는 작업입니다. ‘기어다니다’ 라는 뜻의 영어 단어 ‘crawl’ 에서 비롯된 표현으로 페이지를 찾아다니며 정보를 수집하는 과정을 의미합니다. 사람이 직접 웹페이지에 접속하여 정보를 읽어오는 것과 유사하다고 생각하면 간단합니다. 다만 이 과정이 사람이 아닌 프로그램을 통해 자동으로 이루어지는 것이 크롤링입니다.

1.1 크롤링(crawling) vs 스크래핑(scraping)

크롤링을 이야기하다보면 함께 언급되는 개념이 있습니다. 바로 스크래핑(scraping) 입니다. 스크래핑(scraping) 은 크롤링과 유사한 개념입니다. 크롤링과 마찬가지로 웹 페이지에서 데이터를 추출하는 것을 의미하며 ‘긁다’ 라는 뜻의 scrape 에서 비롯된 표현입니다. 비롯된 영어 단어에서 미묘한 어감 차이가 느껴지시나요?

크롤링과 스크래핑의 차이를 살펴보면 다음과 같습니다.

- 크롤링은 특정 페이지만을 목표로 하지 않고 (1) 탐색(서핑)을 하고 (2) 정보를 가져옵니다. 스크래핑은 일반적으로 목표로 하는 웹페이지가 분명합니다. 가져올 정보의 타겟이 명확하고 해당 데이터를 추출합니다.

- 크롤링은 일반적으로 데이터 중복을 제거하는 경우가 많습니다. 또한 다양한 페이지를 크롤링하는 경우 이를 인덱싱 하는 과정을 거치기도 합니다. 반면 스크래핑은 데이터 중복 제거가 꼭 필수적이지는 않습니다.

쉽게 정리하면 크롤링은 다수의 웹 페이지에서 정보를 확인하고 다수의 데이터를 추출해오는 개념이고 스크래핑은 특정 타겟 웹 페이지에서 목표로 한 타겟 데이터만을 추출하는 개념으로 설명할 수 있습니다. 하지만 두 개념 모두 웹 페이지에서 데이터를 추출해온다는 개념은 동일하기에 일반적으로는 큰 구분 없이 사용되기도 합니다. (크롤링의 표현이 더 자주 쓰입니다)

02. 크롤링을 위해 알고 가야 할 개념들

이제 크롤링이 무엇인지 그 개념을 이해하셨나요? 본격적으로 크롤링 과정을 살펴보기에 앞서 알고 가야 할 개념들이 있습니다. 해당 개념들을 알면 크롤링을 이해하는 데 많은 도움이 됩니다.

2.1 HTML

a. HTML의 개념

HTML은 쉽게 말해 웹페이지를 이루고 있는 구성요소입니다. HTML(Hyper Text Markup Language)을 직역하면 ‘하이퍼 텍스트’를 ‘마크업’ 하는 언어라는 뜻입니다.

‘Hyper Text(하이퍼 텍스트)’ : 웹페이지를 다른 페이지로 연결하는 링크
‘Mark up(마크업)’ : 태그(tag)를 사용해 문서에서 제목, 본문, 이미지 등을 표시

즉 자유롭게 오갈 수 있는 **웹페이지를 만들기 위한 ‘표준 마크업 언어’**로 설명할 수 있습니다. Mark up(마크업) 이 태그를 사용하는 것이라고 언급했으니 태그를 활용한 언어라고 볼 수 있습니다.

b. HTML 구조

HTML은 기본적으로 다음과 같은 구조를 가집니다. 내용들을 태그로 감싼 형태입니다.

c. HTML 구성요소

ㄱ. 태그 (tag)

- 표시를 하기 위한 일종의 꼬리표이자 웹문서를 구성하는 명령어

- 시작 태그와 종료 태그의 형식으로 이루어지며 태그 사이에 콘텐츠가 위치합니다.

- 종류가 매우 다양하며 태그마다 의미하는 바가 달라집니다.

💡 크롤링에서 자주 볼 수 있는 태그(tag)들

h1~h6 : 제목 입력시 사용, 숫자가 커질수록 작은 제목

ex) <h1>제일 큰 제목<h/1>
p : 하나의 문장을 입력할 때 사용 ex) <p>문장</p>
div : 박스 형태의 구역 설정
ex) <div> (사이에 제목이나 문장 등 포함) </div>
span : 줄 형태의 구역 설정 ex) <p><span style =”border”></span></p>

ㄴ. 속성 (attribute)과 속성값(attribute value)

- 속성은 크게 속성(명)과 속성값으로 구분됩니다.

- 속성(attribute)은 태그를 보조하는 명령어로 태그 내부에서 작동합니다. 태그의 문법 명령어가 다루지 못하는 명령을 보조적으로 담당합니다. ex) style, width, height, alt 등

- 속성값(attribute value) 은 속성이 가지는 실질적인 값이나 특성을 나타냅니다. 속성명 뒤 쌍따옴표 안에 표시합니다.

💡 크롤링과 관련하여 알아두면 좋은 속성명, ID와 CLASS

ID : 하나의 웹페이지에 하나만 쓸 수 있는 고유한 이름
ex) <태그이름 id=”속성값”> 으로 쓰임
CLASS : 비슷한 형태를 가진 요소에 여러 번 사용할 수 있는 이름 ex) <태그이름 class = “속성값”>으로 쓰임

ㄷ. 내용 (element)

- 태그 안에 담긴 콘텐츠를 나타냅니다.

- 시작태그/닫는태그, 콘텐츠를 포함한 전체를 내용 혹은 요소라고 부르기도 합니다.

d. HTML 전체 구조 예시

<html>

<head>

<title>다,타에 오신걸 환영합니다. </title>

</head>

<body>

<h1 style=background:yello>다,타의 메인컨텐츠 크롤링의 개념입니다.</h1>

</body>

</html>

우리가 이 마케터 A양이라는 가정 하에 문제를 정의해봅시다. 우리의 비즈니스는 도서를 판매하는 것이며, 현재 당면한 문제는 마케팅 비용 대비 매출 성과를 최대화 하는 것입니다. 그렇다면 데이터 분석을 통해 달성하고자 하는 목표는 ‘효과적인 마케팅 전략 구축’일 것입니다. 이를 위해서는 고객의 니즈와 도서의 특성을 객관적인 데이터를 기반으로 정확히 파악하는 것이 필요하기 때문에 데이터 분석이 필요합니다.

그렇다면 우리는 데이터를 기반으로 ‘고객들이 구매할만한, 관심있어 하는 도서’를 알아내서 해당 도서에 마케팅 예산을 집중적으로 사용할 수 있을 것입니다. 즉 ‘고객들이 좋아할만한 도서를 알아내는 것’을 문제로 정의할 수 있습니다.

2.2 CSS

a. CSS 개념

CSS(Cascading Style Sheets)란 쉽게 말하면 문서의 스타일을 꾸밀 때 사용하는 ‘스타일 시트 언어’ 입니다. HTML로 문서의 뼈대를 만들었다면 CSS는 이 문서를 어떻게 보여지게 할 지를 결정합니다. 문서를 꾸며준다는 말로도 설명할 수 있겠습니다.

CSS는 구조와 디자인의 역할을 분리하기 위한 언어이기도 합니다. HTML에서 글자색 크기 등을 변경할 수도 있지만 코드가 길어지는 문제가 생깁니다. 이때 CSS 언어를 사용하여 구조와 디자인을 분리하면 더욱 다양한 디자인의 적용이 가능합니다.

b. CSS 구조

CSS 구조는 다음과 같이 나타낼 수 있습니다.

CSS는 규칙 기반 언어로 웹페이지의 특정 요소에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다. 구조는 크게 셀렉터(selector)와 선언부(declaratives)로 구성됩니다.

먼저 셀렉터로 스타일을 지정할 HTML 요소 혹은 ID, CLASS 등을 선택한 뒤 그에 대한 스타일을 선언부 {중괄호} 사이에 지정하는 방식입니다.
각각의 스타일 속성은 세미콜론;으로 구분합니다.

2.3 HTML과 CSS

HTML로 문서의 구조를 형성하고 CSS로 이 문서를 꾸밀 수 있다는 점을 알았습니다. 그렇다면 이제 HTML과 CSS를 연결할 차례입니다. 연결 방법은 크게 3가지로 나누어집니다.

a. 인라인 스타일 (Inline Style)

HTML 태그의 style 속성에 CSS 코드를 넣는 방법

<p style="color: red">Lorem ipsum dolor.</p>

해당 태그(p)가 셀렉터가 되고, CSS 코드에는 속성(color)과 값(red)만 들어갑니다.

해당 방법은 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있습니다.

b. 내부 스타일 시트(Internal Stylesheet)

HTML 문서 안의 <style>과 </style>안에 CSS 코드를 넣는 방법

<style>

h1 {

color: blue;

}

</style>

위 코드를 HTML 문서에 추가하면 문서 안의 모든 h1 요소의 글자가 파란색이 됩니다.

HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있지만 또다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.

c. 외부 스타일 시트(External Stylesheet)

별도의 CSS 파일을 만들어 HTML 문서와 연결하는 방법

- 아래와 같이 변경할 내용이 담긴 CSS 파일(ex. style.css)을 만든다.

#HTML 파일과 CSS 파일이 같은 폴더에 있는 경우

- 적용을 원하는 HTML 문서에 CSS 파일명이 담긴 코드를 추가한다 (경로설정주의)

#HTML 파일이 있는 폴더에 abc폴더가 있고그 안에 style.css 파일이 있는 경우 <link rel="stylesheet" href="abc/style.css">

이 방법은 여러 HTML 문서에 사용할 수 있다는 장점이 있습니다. 해당 CSS 파일을 적용시키고 싶은 문서에 위와 같이 <link> 태그로 연결하면 여러 문서에 적용이 가능합니다.

그렇다면 왜 크롤링을 위해 HTML과 CSS를 알아야 할까요?

크롤링 과정을 생각해보면 HTML과 CSS의 중요성을 알 수 있습니다.

아래 그림은 페이지에 접속하여 F12 버튼을 통한 개발자모드를 나타내고 있습니다.

개발자모드는 우측 화면을 통해 페이지의 구조를 나타내고 있고 웹크롤링을 위해 가장 기초적인 것이 바로 이 페이지의 구조를 이해하는 것입니다.

우측 화면을 확대하면 다음과 같은 모습입니다.

우리가 앞서 배웠던 HTML 구조를 확인할 수 있습니다. HTML을 알고 페이지의 구조를 이해해야 우리가 원하는 크롤링을 제대로 진행할 수 있겠죠?

또한 크롤링에서 가장 기초적인 것이 CSS SELECTOR를 COPY하는 과정입니다.

CSS SELECTOR를 통해 내가 원하는 데이터를 선별하여 크롤링 할 수 있습니다. (구체적인 크롤링 과정은 다음 콘텐츠에서 확인하실 수 있습니다)

이런 과정들을 이해하고 또 실제로 크롤링을 수행하기 위해 HTML과 CSS 를 먼저 알아보았다고 생각하시면 됩니다 🙂

03. 크롤링 시 고려사항

마지막으로 크롤링 시 고려사항을 살펴봅시다. 수많은 데이터를 손쉽게 확보할 수 있는 크롤링임에도 주의해야 할 사항들이 있습니다.

a. 크롤링 권한 확인(robots.txt)

최근 숙박 플랫폼 ‘야놀자’와 ‘여기어때’가 크롤링을 둘러싼 소송을 진행한 바 있습니다. 결국 크롤링으로 정보를 얻은 ‘여기어때’가 무죄를 선고 받긴 했지만 크롤링과 관련한 법적 분쟁이 이어지고 있습니다. 이러한 점을 염두하고 크롤링 권한을 확인하는 것이 중요합니다.

robots.txt 라는 텍스트 파일에 각각의 웹사이트 별 자동화 프로그램(크롤러)에 대한 규제 내용을 명시되어 있습니다.
접근하고자 하는 웹 사이트 URL 뒤에 ‘/robots.txt’를 덧붙여 접속을 시도하면 robots.txt에 접근이 가능합니다.
robots.txt의 내용은 무조건적인 제약이 아닌 권고안의 의미를 담고 있습니다. 그럼에도 크롤링의 제약을 명시하고 있다면 주의해야 할 필요가 있습니다.

robots.txt에서 권한 확인하기

-User-agent : 크롤링 규칙 적용 대상 지정 (*인 경우 모든 봇)

-Disallow : 모든 봇들에 대해 접근 차단

-Allow : 모든 봇들에 대해 모든 페이지 접근 가능

b. 서버 부하

잦은 Request 요청으로 서버 부하가 발생하지 않도록 고려할 필요가 있습니다.
일반적으로 제공되는 data api를 활용하면 부하를 줄일 수 있습니다.

c. 페이지 구조 변경 가능성

일부 페이지의 경우 페이지 구조나 위치가 주기적으로 변경되기도 합니다. 페이지 구조나 위치가 변경되면 크롤링이 제대로 이루어지지 않을 수 있습니다. 따라서 페이지 구조에 맞춰 코드 등을 수정해나가야 합니다.

04. 크롤링의 종류

이제 크롤링에 필요한 중요 개념들을 알게 되었으니 본격적으로 크롤링을 살펴보겠습니다.

웹사이트에서 정보를 추출하는 크롤링은 ‘어떤 데이터’를 크롤링하는지에 따라 두 종류로 구분할 수 있습니다.

정적 크롤링 (static crawling)
동적 크롤링 (dynamic crawling)

4.1 정적 크롤링

정적 크롤링(static crawling)이란 정적 데이터를 추출하는 크롤링 과정을 의미합니다.

💡 정적 데이터 : 변하지 않는 데이터를 의미합니다. 즉 한 페이지 안에서 원하는 정보가 모두 드러나 있는 경우 이를 정적 데이터라고

할 수 있습니다.

정적 크롤링에서는 주로 request, urlib, beautifulsoup 패키지를 사용합니다.
한 페이지에 원하는 정보가 들어있기 때문에 별도의 페이지 조작이 필요하지 않아 수집 속도가 빠른 편입니다.

4.2 동적 크롤링

반대로 동적 크롤링(static crawling)이란 동적 데이터를 추출하는 크롤링 과정을 말합니다.

💡 동적 데이터 :

입력, 클릭, 로그인 등과 같이 페이지 이동이 있어야 보이는 데이터를 의미합니다.

동적 크롤링에서는 주로 selenium 패키지, playwright가 쓰이며 beautiful soup이 함께 쓰이기도 합니다.
페이지 조작이 필요하기에 수집 속도는 느린 편이지만 동적 데이터 수집으로 정적 크롤링에 비해 훨씬 넓은 범위의 데이터를 수집할 수 있습니다.

05. 컨텐츠 제작 참고 자료

CSS / CSS를 HTML에 적용시키는 방법

https://www.codingfactory.net/10529

HTML, CSS 기초 입문부터 HTML CSS 적용 방법, 예제까지

https://www.codestates.com/blog/content/html-css-%EA%B8%B0%EC%B4%88

[Python/웹 크롤링] 파이썬 웹 크롤링을 위한 속성 HTML, CSS 요약 정리

https://coding-kindergarten.tistory.com/26