What are Hosting & Browser?
What is Hosting?
Hosting은 웹사이트나 데이터를 인터넷에 올려두어, 전 세계 사용자들이 언제든지 접속할 수 있도록 해주는 서비스다.
간단한 비유를 하자면, 우리가 멋진 건물을 지었다고 생각해보자. 이 건물은 웹사이트 파일(HTML, CSS, Image, Video, …) 에 해당한다. 그런데 이 건물을 아무도 모르는 외딴 곳에 지어놓으면 방문객이 아무도 없을 것이다. Hosting은 이 건물을 사람들이 쉽게 찾아올 수 있는 번화가에 위치한 대형 컴퓨터 건물에 입주시키는 것과 같다.
호스팅 서비스 제공 업체는 24시간 내내 켜져 있고 인터넷에 연결되어있는 강력한 컴퓨터, 즉 서버(Server) 를 운영한다. 이 서버의 일정 공간을 빌려서 우리가 호스팅하고자 하는 웹사이트의 파일들을 저장해두면, 전 세계 사용자들이 우리 도메인 이름을 통해 접속할 수 있게 된다.
호스팅의 핵심 구성 요소
호스팅 서비스를 이해하려면 3가지 주요 구성 요소의 관계를 알아야 한다.
- 웹사이트 파일: HTML, CSS, JavaScript, 이미지 등 웹사이트를 구성하는 모든 파일이다.
- 호스팅 서버: 웹사이트 파일을 저장하고, 방문자의 요청에 따라 이 파일을 전송해주는 컴퓨터이다. 이는 호스팅 업체가 관리하는 강력한 물리적 or 가상 컴퓨터이다.
- 도메인 이름: 사용자가 웹사이트를 찾아오기 위한 주소이다. 이 도메인 이름은 DNS 설정을 통해 서버의 IP 주소와 연결된다.
호스팅의 작동 원리
사용자가 웹 브라우저에 도메인 이름(Ex. www.mywebsite.com)을 입력하면, 다음과 같은 과정이 일어난다.
- DNS 조회: 웹 브라우저는 먼저 DNS를 통해 www.mywebsite.com에 연결된 호스팅 서버의 IP 주소를 알아낸다. 이 과정은 What are Domain Name & DNS 에 잘 나와있다.
- 요청 전송: 브라우저는 이 IP 주소로 호스팅 서버에 “웹사이트 파일을 보내주세요” 라는 HTTP 요청을 보낸다.
- 파일 전송: 호스팅 서버는 요청을 받아 미리 저장해두었던 웹사이트 파일을 찾아 사용자에게 다시 보낸다.
- 웹페이지 로딩: 사용자의 브라우저는 받은 파일을 해석하여 웹사이트 화면을 보여준다.
호스팅의 종류
호스팅 서비스는 사용 목적과 규모에 따라 다양한 종류가 있다.
웹 호스팅 (Shared Hosting)
- 특징: 하나의 서버를 여러 사용자가 함께 사용하는 방식이다. 마치 아파트의 한 세대를 빌려 쓰는 것과 같다. 서버의 자원(CPU, 메모리, 트래픽 등)을 다른 사용자들과 나눠 쓴다.
- 장점: 비용이 매우 저렴하다. 웹사이트 관리에 대한 전문적인 지식이 없어도 쉽게 사용할 수 있다.
- 단점: 다른 사용자의 트래픽이 많아지면 내 웹사이트의 속도가 느려질 수 있다. 서버에 대한 제어 권한이 제한적일 수 밖에 없다.
VPS 호스팅 (Virtual Private Server Hosting)
- 특징: 물리적인 서버 한 대를 여러 개의 독립적인 가상 서버로 나누어 사용하는 방식이다. 각 사용자는 자신만의 가상 서버를 가지며, 지정된 자원을 단독으로 사용한다.
- 장점: 웹 호스팅보다 안정적이고 성능이 좋다. 서버를 자유롭게 설정할 수 있어 유연성이 높다.
- 단점: 웹 호스팅보다 비용이 비싸고, 어느 정도의 서버 관리 지식이 필요하다.
서버 호스팅 (Dedicated Hosting)
- 특징: 물리적인 서버 한 대 전체를 한 사용자가 단독으로 사용하는 방식이다. 건물 전체를 임대하는 것과 같다.
- 장점: 서버의 모든 자원을 혼자 사용하므로 성능이 가장 뛰어나고 안정적이다. 보안과 제어 권한이 완벽하게 보장된다.
- 단점: 비용이 매우 비싸고, 서버에 대한 전문적인 관리 지식이 필수적이다. 대형 웹사이트나 온라인 게임 서버 등에 주로 사용된다.
클라우드 호스팅 (Cloud Hosting)
- 특징: 여러 서버를 가상으로 연결하여 거대한 서버 네트워크를 구축하는 방식이다. 사용한 만큼만 비용을 지불한다.
- 장점: 트래픽이 폭증해도 자동으로 서버 자원을 확장(Scalability)하여 안정적으로 서비스를 제공할 수 있다.
- 단점: 비용 예측이 어렵고, 복잡한 설정이 필요할 수 있다.
What is Browser?
웹 브라우저는 웹 서버와 통신하여 웹 페이지를 검색, 접근, 표시하는 Software Application이다. 우리가 사용하는 크롬(Chrome), 사파리(Safari), 파이어폭스(Firefox), 엣지(Edge) 등이 모두 웹 브라우저이다.
간단히 말해, 웹 브라우저는 사용자와 인터넷 사이의 통역사이자, 시각화 도구이다. 웹 서버가 보내주는 복잡한 코드(HTML, CSS, JavaScript)를 해석하여 우리가 눈으로 볼 수 있는 아름다운 웹페이지로 만들어주는 역할을 한다.
웹 브라우저의 작동 원리
웹 브라우저가 웹페이지를 화면에 표시하기까지의 과정은 여러 단계로 나뉘어진다. 이 과정은 크게 요청(Request), 파싱(Parsing), 렌더링(Rendering) 의 세 가지 주요 단계로 이루어진다.
요청(Request)
사용자가 웹 브라우저의 주소창에 www.naver.com을 입력하고 엔터키를 누르면, 웹 브라우저는 다음과 같은 과정을 거친다.
- URL 분석: 브라우저는 입력된 URL을 분석하여 프로토콜(HTTP/HTTPS), 도메인 이름, 포트 번호 등을 파악한다.
- DNS 조회: DNS를 통해 www.naver.com에 해당하는 서버의 IP 주소를 찾는다.
- HTTP/HTTPS 요청: 찾은 IP 주소로 웹 서버에 HTTP/HTTPS 요청 패킷을 보낸다. 이 요청은 “네이버 메인 페이지를 주세요!” 라는 내용이 담겨져 있다.
파싱(Parsing)
요청을 받은 웹 서버는 HTML, CSS, JavaScript 파일 등을 패킷 형태로 클라이언트(Browser)에게 보낸다. 이제 브라우저는 이 파일들을 분석(Parsing) 하기 시작한다.
- DOM(Document Object Model) 트리 생성: 브라우저는 HTML 파일을 위에서 아래로 읽으며, 태그(tag)와 속성(attribute)를 기반으로 DOM 트리 라는 데이터 구조를 만든다. 이 트리는 웹페이지의 계층적 구조를 나타내며, 개발자가 자바스크립트를 통해 페이지 요소를 조작할 수 있게 해준다.
- CSSOM(CSS Object Model) 트리 생성: HTML을 파싱하는 동안 <link> 태그나 <style> 태그를 만나면, 브라우저는 CSS 파일도 파싱하여 CSSOM 트리 를 만든다. 이 트리는 모든 HTML 요소의 스타일 정보를 담고 있다.
렌더링(Rendering)
파싱 과정을 통해 DOM 트리와 CSSOM 트리가 완성되면, 브라우저는 이 두 트리를 합쳐서 최종적인 화면을 그린다.
- 렌더 트리(Render Tree) 생성: 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 Render Tree 라는 새로운 트리를 만든다. 이 트리는 화면에 실제로 표시될 요소들(텍스트, 이미지 등) 만을 포함하며, 각 요소의 스타일 정보까지 포함한다.
- 레이아웃(Layout) or 리플로우(Reflow): Render Tree를 기반으로 각 요소의 정확한 위치와 크기를 계산한다.
- 페인팅(Painting): Layout 단계에서 계산된 위치와 크기를 사용하여, 실제 픽셀(pixel)을 화면에 그린다. 이 단계에서 텍스트, 색상, 이미지, 그림자 등이 화면에 나타나게 된다.
만약 JavaScript가 실행되어 DOM을 변경하거나 애니메이션이 작동하면, 브라우저는 이 과정을 다시 반복하여 화면을 업데이트 한다.
웹 브라우저의 주요 구성 요소
웹 브라우저는 단순히 웹페이지를 보여주는 것 이상의 복잡한 기능들을 수행한다.
사용자 인터페이스 (User Interface)
주소창, 뒤로 가기/앞으로 가기 버튼, 즐겨찾기 바 등 우리가 직접 보고 조작하는 영역이다.
렌더링 엔진 (Rendering Engine)
웹 브라우저의 핵심 부품이다. HTML, CSS 파일을 파싱하고 Render Tree를 생성하여 화면에 표시하는 역할을 한다. (Chrome의 Blink, Safari의 Webkit 등)
자바스크립트 엔진 (JavaScript Engine)
자바스크립트 코드를 해석하고 실행한다. (Chrome의 V8, FireFox의 SpiderMonkey 등)
네트워크 (Networking)
HTTP/HTTPS 요청을 주고받고, DNS 조회를 처리하는 역할을 한다.
UI 백엔드
운영체제의 UI 요소를 사용하여 윈도우(창), 버튼 등을 그리는 역할을 한다.
자료 저장소 (Data Storage)
쿠키, 로컬 스토리지, 세션 스토리지 등 클라이언트 측에서 데이터를 저장하는 공간을 관리한다.