[데이터 분석 심화 개념] 웹 자동화 개념 정리 1️⃣ (웹의 기본 요소)

이번 글은 코드잇 강의를 수강하면서 배운 내용을 주로 하여 정리되어 있습니다. (코드잇 스프린트 데이터 애널리스트 트랙 1기 훈련생)

---

웹의 기본 요소

---

웹

웹(Web)은 월드 와이드 웹(World Wide Web)의 약자로, 인터넷을 통해 전 세계의 정보를 연결하고 접근할 수 있게 해주는 시스템입니다.

 

웹은 다음과 같은 주요 요소들로 구성됩니다.

1. 웹 브라우저: 사용자가 웹 페이지를 볼 수 있게 해주는 소프트웨어입니다. 예를 들어, 크롬(Chrome), 사파리(Safari), 파이어폭스(Firefox) 등이 있습니다. 웹 브라우저는 사용자가 입력한 URL(웹 주소)을 통해 해당 웹 페이지를 불러와 화면에 보여줍니다.
2. 웹 서버: 웹 페이지를 저장하고 사용자에게 제공하는 컴퓨터 시스템입니다. 웹 브라우저가 서버에 요청을 보내면, 서버는 요청된 웹 페이지를 반환합니다.
3. 웹 페이지: HTML, CSS, JavaScript 등으로 구성된 문서입니다. 웹 페이지는 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 포함할 수 있으며, 사용자가 상호작용할 수 있는 요소들을 제공합니다.
   • CSS (Cascading Style Sheets): 웹 페이지의 스타일(레이아웃, 색상, 글꼴 등)을 정의하는 언어입니다. HTML과 분리되어 페이지의 외관을 꾸며줍니다.
   • JavaScript: 웹 페이지에 동적 기능을 추가하는 스크립트 언어입니다. 사용자와의 상호작용(버튼 클릭, 폼 제출 등)을 처리하고, 실시간으로 페이지 내용을 변경할 수 있습니다.
4. 웹사이트(Web Site): 웹 페이지들의 모음입니다. 예를 들어, "example.com"이라는 도메인 이름 아래 여러 개의 웹 페이지가 있을 수 있습니다.
5. URL(Uniform Resource Locator): 웹에서 특정 자원을 식별하기 위한 주소입니다. 예를 들어, https://www.example.com은 특정 웹사이트의 URL입니다.
6. HTTP/HTTPS(하이퍼텍스트): 웹 브라우저와 웹 서버 간에 정보를 주고받는 데 사용되는 프로토콜입니다. HTTPS는 보안이 강화된 HTTP입니다.

웹은 이러한 요소들이 결합되어 사용자에게 정보를 제공하고, 상호작용할 수 있는 환경을 제공합니다. 인터넷을 통해 웹 페이지를 검색하고, 쇼핑을 하거나, 소셜 미디어에 참여하는 등의 활동은 모두 웹을 통해 이루어집니다.

---

웹 자동화란?

웹 자동화는 사람이 웹 브라우저에서 수행하는 반복적인 작업을 프로그램이나 스크립트를 통해 자동으로 처리하는 기술입니다. 이를 통해 시간과 노력을 절약하고, 정확성을 높일 수 있습니다.

 

웹 자동화는 다음과 같은 작업을 포함할 수 있습니다.

1. 웹 스크래핑: 웹 페이지에서 데이터를 추출하는 작업입니다. 이를 통해 대량의 데이터를 수동으로 수집할 필요 없이 자동으로 수집할 수 있습니다.
2. 폼 제출: 로그인, 데이터 입력, 폼 제출 등 사용자가 직접 입력하는 작업을 자동으로 처리할 수 있습니다.
3. 테스트 자동화: 웹 애플리케이션의 기능을 자동으로 테스트하여 문제를 식별하고 수정하는 데 사용됩니다.
4. 웹사이트 관리: 웹사이트의 콘텐츠 업데이트, 파일 업로드, 데이터베이스 관리 등 다양한 관리 작업을 자동화할 수 있습니다.

이러한 자동화 작업을 수행하기 위해 Python의 Selenium, BeautifulSoup, Scrapy와 같은 라이브러리나 도구를 주로 사용합니다. 이러한 도구들은 웹 페이지를 직접 제어하거나 데이터를 수집하는 데 도움을 줍니다.

---

하이퍼텍스트란?

하이퍼텍스트(Hypertext)는 웹의 핵심 개념으로, 문서 내에서 다른 텍스트, 문서, 이미지, 비디오 등으로 연결되는 링크를 포함하는 텍스트를 말합니다. 하이퍼텍스트 덕분에 웹 사용자들은 한 문서에서 다른 문서로, 또는 다양한 온라인 자원으로 쉽게 이동할 수 있습니다. 이때 사용되는 링크를 하이퍼링크(Hyperlink)라고 부릅니다. 하이퍼링크는 특정 단어나 문구에 숨겨진 URL을 통해 클릭하면 연결된 페이지로 이동하게 해줍니다.

 

이러한 하이퍼텍스트와 하이퍼링크는 웹 페이지가 서로 연결되고, 정보를 자유롭게 탐색할 수 있는 웹의 기본 기능을 제공합니다. 웹 브라우저는 사용자가 하이퍼링크를 클릭할 때, 그 링크가 가리키는 웹 페이지를 요청하기 위해 HTTP(Hypertext Transfer Protocol) 또는 HTTPS(Hypertext Transfer Protocol Secure) 프로토콜을 사용합니다.

 

HTTP는 웹 브라우저와 웹 서버 간에 데이터를 주고받는 프로토콜로, 하이퍼텍스트를 포함한 웹 페이지를 전송하는 데 사용됩니다. HTTP는 데이터를 암호화하지 않고 전송하기 때문에, 네트워크 상에서 쉽게 가로채거나 도청될 수 있습니다.

반면에 HTTPS는 HTTP에 보안 기능을 더한 프로토콜로, SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 기술을 사용해 데이터를 암호화하여 전송합니다. 이를 통해 사용자와 웹 서버 간의 통신이 보호되며, 민감한 정보를 안전하게 주고받을 수 있습니다. 따라서 HTTPS는 보안이 중요한 웹사이트, 예를 들어 온라인 쇼핑몰이나 은행 사이트에서 필수적으로 사용됩니다. 브라우저 주소창에 나타나는 자물쇠 아이콘이 HTTPS가 사용되고 있음을 나타내며, 안전한 연결이 이루어지고 있음을 의미합니다.

---

하이퍼텍스트 구현

하이퍼텍스트는 웹에서 정보를 쉽게 탐색할 수 있게 해주는 중요한 개념입니다.

이를 구현하기 위해서는 두 가지 주요 요소가 필요합니다. 하이퍼텍스트를 보여줄 수 있는 전용 소프트웨어와 하이퍼텍스트를 만들 수 있는 방법입니다.

이 두 가지 요소를 통해 하이퍼텍스트가 실제로 작동하게 됩니다.

하이퍼텍스트를 보여줄 수 있는 전용 소프트웨어: 웹 브라우저

하이퍼텍스트는 웹 브라우저라는 소프트웨어를 통해 사용자가 볼 수 있습니다. 웹 브라우저는 우리가 흔히 사용하는 인터넷 탐색 도구로, 하이퍼텍스트를 포함한 HTML 문서를 화면에 렌더링해 줍니다. 예를 들어, Chrome, Firefox, Safari, Edge 등이 대표적인 웹 브라우저입니다.

웹 브라우저는 하이퍼텍스트를 통해 사용자가 클릭한 링크에 따라 다른 페이지로 이동하거나, 같은 페이지 내에서 다른 위치로 스크롤하는 등의 기능을 제공합니다. 웹 브라우저는 사용자가 하이퍼텍스트를 직관적으로 사용할 수 있게 하여, 웹을 탐색하는 경험을 더욱 편리하게 만들어줍니다.

하이퍼텍스트를 만들 수 있는 방법: HTML

하이퍼텍스트를 만들기 위해서는 HTML(HyperText Markup Language)을 사용합니다. HTML은 웹 페이지의 구조와 내용을 정의하는 언어로, 하이퍼텍스트를 구현하는 데 필수적인 도구입니다.

HTML에서는 <a> 태그를 사용하여 하이퍼텍스트를 생성합니다. 이 태그를 사용하여 특정 텍스트에 링크를 추가하고, 사용자가 이 텍스트를 클릭했을 때 다른 페이지로 이동하거나, 같은 페이지 내에서 특정 위치로 이동하게 할 수 있습니다.

 

예시 :

<a href="<https://www.example.com>">Example 사이트로 이동</a>

 

위의 코드는 "Example 사이트로 이동"이라는 텍스트에 하이퍼링크를 추가하여, 사용자가 이 텍스트를 클릭하면 "https://www.example.com"으로 이동하게 합니다.

HTML을 통해 하이퍼텍스트를 생성함으로써, 웹 페이지는 서로 연결되고 사용자는 다양한 정보를 손쉽게 탐색할 수 있게 됩니다. 하이퍼텍스트는 웹을 사용하는데 있어 매우 중요한 기능이며, HTML은 이를 구현하는 기본적인 방법입니다.

---

웹의 확장

웹은 하이퍼텍스트와 함께 다양한 기술과 개념을 통해 계속 확장되고 발전해 왔습니다. 이 중 URL과 검색엔진은 웹 사용자가 필요한 정보를 쉽게 찾고 접근할 수 있게 해주는 중요한 요소들입니다. 이 두 가지는 웹이 지금처럼 거대한 정보의 네트워크로 성장할 수 있게 한 핵심적인 역할을 담당하고 있습니다.

URL: 웹 자원의 주소

URL(Uniform Resource Locator)은 웹에서 특정 자원을 식별하고 접근할 수 있게 해주는 주소입니다.

웹 페이지, 이미지, 파일 등 모든 웹 자원은 고유한 URL을 가집니다.

URL은 우리가 인터넷 브라우저에서 입력하는 주소창에 입력하는 텍스트이며, 이를 통해 원하는 웹 페이지나 자원으로 직접 이동할 수 있습니다.

 

URL의 구성:

• 프로토콜: http:// 또는 https://와 같이, 웹 브라우저가 서버와 통신하는 방법을 지정합니다.
• 도메인 이름: www.example.com처럼, 웹사이트의 이름이나 IP 주소를 나타냅니다.
• 경로(Path): 특정 웹 페이지나 파일을 가리키는 추가 경로입니다. 예를 들어, www.example.com/page1은 Example 사이트의 특정 페이지를 가리킵니다.

URL은 웹 상에서 자원의 위치를 정확하게 가리키기 때문에, 사용자는 특정 페이지나 파일에 빠르게 접근할 수 있습니다. 웹이 확장되면서 URL은 전 세계의 수많은 웹 페이지를 연결하는 중요한 역할을 하게 되었습니다.

검색엔진: 웹의 정보 탐색 도구

검색엔진은 웹에서 필요한 정보를 쉽게 찾을 수 있게 해주는 도구입니다. 검색엔진은 인터넷에 존재하는 수십억 개의 웹 페이지를 색인(Index)하고, 사용자가 특정 키워드로 검색할 때 가장 관련성 높은 결과를 보여줍니다. Google, Bing, Yahoo 등이 대표적인 검색엔진입니다.

 

검색엔진의 작동 방식:

1. 크롤링(Crawling): 검색엔진은 웹 크롤러(또는 스파이더)라는 프로그램을 사용하여 웹 페이지를 자동으로 탐색합니다. 크롤러는 각 웹 페이지의 URL을 방문하고, 해당 페이지의 콘텐츠를 분석합니다.
2. 색인(Indexing): 크롤러가 수집한 정보를 바탕으로 검색엔진은 각 웹 페이지를 데이터베이스에 저장하고 색인화합니다. 이 과정에서 페이지의 텍스트, 제목, 메타 태그 등을 분석하여 사용자가 검색할 때 빠르게 결과를 제공할 수 있도록 준비합니다.
3. 검색 알고리즘: 사용자가 키워드를 입력하면, 검색엔진은 자신이 구축한 데이터베이스에서 가장 관련성 높은 페이지를 찾아 보여줍니다. 이 과정은 복잡한 알고리즘에 의해 수행되며, 페이지의 품질, 관련성, 사용자 피드백 등을 고려합니다.

검색엔진은 웹의 방대한 정보를 구조화하고 쉽게 접근할 수 있게 해줌으로써, 사용자들이 필요한 정보를 빠르게 찾을 수 있도록 돕습니다. 이는 웹의 확장과 발전에 있어서 필수적인 역할을 하며, 전 세계 어디서나 다양한 정보를 탐색할 수 있게 해줍니다.

---

웹 크롤링과 웹 스크래핑

웹 크롤링과 웹 스크래핑은 웹 자동화에서 자주 언급되는 두 가지 개념입니다.

이 둘은 비슷해 보일 수 있지만, 그 목적과 사용 방식이 다릅니다. 각각의 역할을 이해하면, 웹 데이터를 수집하고 활용하는 데 큰 도움이 됩니다.

웹 크롤링: 웹의 지도 그리기

웹 크롤링(Web Crawling)은 체계적으로 웹사이트를 탐색하며 데이터를 수집하는 과정입니다. 이 작업은 주로 검색 엔진에서 사용되며, 웹이라는 거대한 공간을 거미가 돌아다니듯이 모든 페이지를 연결하고 탐색하는 것을 의미합니다.

예를 들어, 구글이나 네이버 같은 검색 엔진들은 웹 크롤러(종종 스파이더라고도 불림)를 사용하여 수많은 웹 페이지를 자동으로 탐색합니다. 크롤러는 각 페이지의 URL과 키워드 정보를 수집하고, 이를 인덱싱하여 검색할 수 있도록 데이터베이스에 저장합니다. 사용자가 특정 키워드를 검색할 때, 이 데이터베이스에서 가장 관련성 높은 결과를 빠르게 찾아 제공합니다.

웹 스크래핑: 필요한 정보 추출하기

웹 스크래핑(Web Scraping)은 특정 웹 페이지에서 원하는 정보를 추출하는 작업입니다. 웹 스크래핑은 크롤링과 달리, 웹의 모든 페이지를 탐색하는 것이 아니라, 특정 데이터에 집중하여 필요한 정보를 수집합니다.

예를 들어, 특정 온라인 쇼핑몰에서 상품 가격과 설명을 수집하거나, 유튜브 영상의 댓글을 모으는 작업이 웹 스크래핑의 대표적인 예입니다. 스크래핑 도구를 사용하면 웹 페이지에서 원하는 데이터를 자동으로 긁어와 저장할 수 있습니다.

이 과정은 웹 크롤링과 다르게, 전체 사이트를 탐색하는 것이 아니라, 특정 정보에 초점을 맞춰 데이터를 선택적으로 수집하는 데 중점을 둡니다.

용어의 구분: 혼동하지 말아야 할 부분

웹 크롤링과 웹 스크래핑은 비슷한 도구와 기술을 사용할 수 있지만, 그 목적과 적용 범위에서 차이가 있습니다.

• 웹 크롤링은 웹 페이지를 탐색하고 구조화된 데이터를 수집하여 검색 엔진에 도움이 되도록 전체적인 그림을 그리는 작업입니다.
• 웹 스크래핑은 특정 웹 페이지에서 필요한 정보를 추출하여 수집하는 더 구체적이고 목적 지향적인 작업입니다.

법적 이슈와 윤리적 고려

이 두 작업을 수행할 때는 법적 이슈와 윤리적 고려도 중요합니다. 많은 웹사이트는 크롤링이나 스크래핑을 허용하지 않거나, 특정 규칙을 적용해 이를 제한합니다. 예를 들어, robots.txt 파일을 통해 크롤링 허용 범위를 지정할 수 있습니다. 무단으로 데이터를 수집하는 경우, 저작권 침해나 서비스 약관 위반 등 법적 문제가 발생할 수 있으므로 주의가 필요합니다.

---

웹의 발전

웹이 처음 등장했을 때는 단순한 하이퍼텍스트로 구성된 정적인 문서들이 주를 이루었습니다. 하지만 시간이 지나면서 웹은 훨씬 더 풍부하고, 상호작용할 수 있는 공간으로 발전했습니다. 이 발전의 중심에는 JavaScript, CSS, 그리고 웹 브라우저가 있었습니다.

JavaScript: 웹 페이지에 생명을 불어넣다

JavaScript는 웹 페이지에 동적인 기능을 추가해 줍니다. 예를 들어, 버튼을 클릭하면 내용이 바뀌거나, 사용자가 입력한 데이터를 처리하는 등, 웹 페이지가 사용자와 상호작용할 수 있게 만들어줍니다. 이 덕분에 웹 페이지는 단순히 읽기만 하는 것이 아니라, 사용자와 소통할 수 있는 살아있는 공간이 되었습니다.

CSS: 웹 페이지를 아름답게 꾸미다

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하며, 하이퍼텍스트에 디자인적 요소를 넣는 역할을 할 수 있습니다.

CSS 덕분에 웹 페이지는 단순한 텍스트와 이미지를 넘어서, 색깔, 글꼴, 여백 등을 자유롭게 조정하여 더욱 보기 좋고, 사용하기 편리한 형태로 만들어질 수 있습니다. 쉽게 말해, CSS는 웹 페이지를 더 아름답고 멋지게 꾸며주는 도구입니다.

웹 브라우저: 모든 것을 가능하게 하는 도구

웹 브라우저는 우리가 인터넷을 사용할 때 웹 페이지를 보여주는 소프트웨어입니다. Chrome, Firefox, Safari 같은 웹 브라우저는 JavaScript와 CSS를 실행하여 우리가 보는 웹 페이지를 완성된 모습으로 화면에 보여줍니다. 브라우저가 없다면, 웹 페이지는 단순한 코드 덩어리에 불과할 것입니다. 브라우저는 이 모든 기술이 제대로 작동하도록 돕는 중요한 역할을 합니다.

---

HTML의 개념 및 구조 참고 사이트

https://developer.mozilla.org/ko/docs/Web/HTML/Element/

<abbr> - HTML: Hypertext Markup Language | MDN

---

 

이번 글에서는 코드잇 강의를 통해 배운 웹의 기본 요소와 웹 자동화, 하이퍼텍스트의 개념을 정리해보았습니다. 웹의 발전과 함께 이러한 기본 개념들을 잘 이해하는 것은 더욱 복잡하고 동적인 웹 환경에서 효과적으로 작업할 수 있는 능력을 키우는 데 중요합니다. 지속적인 학습을 통해 더 깊은 이해와 응용 능력을 갖추길 바랍니다.

---

출처 및 참고자료 : 코드잇 사이트 강의 '웹 자동화' https://www.codeit.kr/topics/web-automation