전원을 켜서 웹사이트에 접속하기까지 무슨 일이 일어날까
시작하기 전에
컴퓨터 전원 버튼을 누르는 순간부터 브라우저에 웹페이지가 나타나기까지, 그 사이에 어떤 일이 벌어지는지 궁금해한 적이 있나요?
이 과정은 마치 릴레이 경기와 같습니다. 하드웨어에 전기가 공급되면 펌웨어가 깨어나고, 펌웨어가 점검을 마치면 운영체제에게 바통을 넘기고, 운영체제가 환경을 준비해야 브라우저를 실행할 수 있으며, 브라우저는 다시 네트워크를 통해 먼 곳의 서버에서 웹페이지를 가져옵니다. 모든 단계는 이전 단계의 성공적인 완료에 의존하며, 어느 한 바통이라도 놓치면 그다음 단계는 진행될 수 없습니다.
이 완전한 연결 고리를 이해하면 컴퓨터 시스템에 대한 전체적인 인식을 갖출 수 있으며, 풀스택 엔지니어로 성장하는 필수 과정이기도 합니다.
무엇을 배우게 될까요?
이 글은 실제 발생 순서에 따라, 전원을 켜서 웹페이지를 보기까지의 다섯 단계를 안내합니다:
- 하드웨어 부팅（1장）→ 전류가 CPU를 어떻게 깨우는가
- 펌웨어 자체 점검（2장）→ BIOS/UEFI가 하드웨어 상태를 확인하고 부팅 장치를 찾는 방법
- 운영체제 부팅（3장）→ 커널이 로드되고 데스크톱이 나타나는 과정
- 브라우저 실행（4장）→ 응용 프로그램이 운영체제에 의해 어떻게 실행되는가
- 네트워크 요청（5장）→ URL 입력부터 페이지 렌더링까지의 완전한 네트워크 여정
각 단계는 이전 단계 위에 쌓여 있으며, 하나라도 빠질 수 없습니다.
1. 전원 버튼을 누르다: 하드웨어의 각성
1.1 전원 공급
전원 버튼을 누르면 파워 서플라이 유닛（PSU）이 작동하기 시작해 교류 전원（220V）을 직류 전원（12V, 5V, 3.3V 등）으로 변환하여 각 하드웨어 부품에 전력을 공급합니다.
전원 버튼 → 파워 서플라이 유닛(PSU) → 직류 출력 → 메인보드 각 부품에 공급1.2 메인보드 칩셋 기동
전원이 안정화되면 메인보드 칩셋이 작동을 시작합니다. 칩셋은 컴퓨터의 "총괄 조정자" 역할로, 각 하드웨어 부품을 조정합니다.
1.3 CPU 리셋
CPU는 리셋 신호를 받으면 내부의 모든 레지스터와 캐시를 0으로 초기화하고, 미리 정해진 주소에서 명령어 실행을 시작합니다. 이 주소는 일반적으로 BIOS/UEFI 칩을 가리킵니다.
릴레이 첫 번째 바통 완료 ⛳ 여기까지 하드웨어 단계의 작업이 완료되었습니다. 전원 공급 장치가 교류를 안정적인 직류로 변환했고, 메인보드 칩셋이 깨어나 각 부품을 조정하기 시작했으며, CPU도 리셋을 마치고 레지스터를 초기화해 첫 명령어를 실행할 준비가 되었습니다.
하지만 주의하세요——이 순간의 CPU는 마치 "막 눈을 뜬 갓난아기"와 같습니다. 명령어를 실행할 수는 있지만, 자신이 놓인 환경에 대해 아무것도 알지 못합니다. 컴퓨터에 메모리가 얼마나 설치되어 있는지, 그래픽 카드가 정상인지, 하드 디스크가 어디에 있는지, 어떤 장치에서 운영체제를 부팅해야 하는지 등은 CPU 스스로 알 수 없습니다.
그래서 CPU는 리셋 후 첫 명령어로 고정된 메모리 주소로 점프합니다——이 주소는 메인보드에 납땜된 BIOS/UEFI 펌웨어 칩을 가리킵니다. 이 순간부터 제어권은 순수 하드웨어에서 펌웨어로 넘어갑니다. BIOS/UEFI의 임무는 분명합니다: 모든 하드웨어가 정상인지 확인하고, 운영체제를 찾아 부팅하는 것입니다. 이것이 릴레이의 두 번째 바통입니다.
2. BIOS/UEFI: 하드웨어 자체 점검
the firmware boot flow
릴레이 두 번째 바통 완료 ⛳ BIOS/UEFI는 세 가지 임무를 완벽히 수행했습니다. POST 자체 점검을 통해 메모리, 그래픽 카드, 키보드 등 하드웨어가 모두 정상 작동하는지 확인했고, 각 하드웨어의 동작 모드를 초기화했으며, 부팅 순서에 따라 하드 디스크의 부트 섹터를 찾았습니다.
하지만 BIOS/UEFI의 역할은 여기까지입니다——본질적으로 "건강 검진 의사 + 조정자"에 불과합니다. 하드웨어가 건강한지 검사하고 어떤 장치에서 부팅할지 결정할 수 있지만, 파일을 관리하거나, 응용 프로그램을 실행하거나, 멋진 데스크톱을 보여줄 수는 없습니다. 이런 복잡한 작업에는 더 강력한 소프트웨어가 필요합니다——바로 운영체제입니다.
인계 방식은 구체적입니다. BIOS/UEFI는 하드 디스크 첫 번째 섹터（부트 섹터）에 있는 부트로더 코드를 읽어 메모리에 로드한 다음, CPU가 이 코드로 점프하여 실행하도록 합니다. 이 순간부터 제어권은 공식적으로 펌웨어에서 운영체제의 부트로더로 넘어갑니다. 부트로더는 한 걸음씩 운영체제 커널을 메모리에 로드하고, 시스템 서비스를 시작하며, 마침내 익숙한 데스크톱을 보여줍니다. 이 연결 고리 중 가장 복잡한 바통이 시작됩니다.
3. 운영체제 부팅: 커널에서 데스크톱까지
the computer steward
릴레이 세 번째 바통 완료 ⛳ 운영체제가 완전히 부팅되어 데스크톱이 눈앞에 나타났습니다. 이 바통에서 무엇을 했는지 되돌아봅시다. 부트로더가 하드 디스크에서 커널을 읽고, 커널이 CPU와 메모리 제어권을 넘겨받고, 시스템 서비스가 하나씩 시작되고（네트워크, 오디오, 보안 센터……）, 마지막으로 그래픽 인터페이스가 데스크톱을 렌더링했습니다.
이 순간의 운영체제는 전기와 수도가 연결되고 관리 사무소가 입주한 빌딩과 같습니다——프로세스 관리는 각 세대(프로그램)에게 방을 배정하고, 메모리 관리는 공간을 할당하며, 파일 시스템은 창고를 관리하고, 네트워크 프로토콜 스택은 외부 통신을 담당합니다. 이러한 "공공 서비스"는 모든 응용 프로그램이 실행되기 위한 인프라이며, 이것이 없으면 어떤 프로그램도 시작할 수 없습니다.
이제 인터넷을 사용하려고 데스크톱의 브라우저 아이콘을 더블클릭합니다. 이 간단한 동작 뒤에는 운영체제가 다음과 같은 일련의 작업을 수행합니다. 브라우저 실행 파일이 하드 디스크 어디에 있는지 찾고, 독립된 프로세스를 생성하고, 메모리 공간을 할당하고, 프로그램 코드를 로드합니다…… 이것이 바로 운영체제 "프로세스 관리" 능력이 직접적으로 드러나는 순간입니다. 이제 브라우저가 어떻게 시작되는지 살펴봅시다.
4. 브라우저 열기: 응용 프로그램의 실행
4.1 응용 프로그램의 실행 과정
브라우저 아이콘을 더블클릭하면 운영체제는 다음과 같이 동작합니다:
- 실행 파일 찾기: 파일 연결 정보에 따라 브라우저의
.exe（Windows）또는 실행 파일을 찾습니다 - 프로세스 생성: 브라우저를 위한 새로운 프로세스를 만듭니다
- 프로그램 로드: 브라우저 코드를 하드 디스크에서 메모리로 로드합니다
- 초기화: 브라우저의 메인 스레드, 렌더링 엔진, 네트워크 엔진 등을 시작합니다
브라우저 실행 과정:
┌─────────────────────────────────────┐
│ 1. 아이콘 더블클릭 │
│ 2. 운영체제가 브라우저 실행 파일 찾기│
│ 3. 브라우저 프로세스 생성 │
│ 4. 브라우저 코드를 메모리에 로드 │
│ 5. 각 모듈 초기화（렌더링, 네트워크, JS）│
│ 6. 브라우저 창 표시 │
└─────────────────────────────────────┘4.2 브라우저의 주요 구성 요소
현대 브라우저는 복잡한 "운영체제"로, 주로 다음 부분으로 구성됩니다:
| 모듈 | 기능 |
|---|---|
| 사용자 인터페이스 | 주소 표시줄, 탭, 북마크 등 |
| 브라우저 엔진 | UI와 렌더링 엔진 간 조정 |
| 렌더링 엔진 | HTML/CSS를 파싱하여 웹페이지 표시 |
| JavaScript 엔진 | JavaScript 코드 실행 |
| 네트워크 모듈 | HTTP 요청 전송 |
| UI 백엔드 | 기본 UI 컴포넌트 그리기 |
| 데이터 저장소 | Cookie, LocalStorage 등 |
릴레이 네 번째 바통 완료 ⛳ 브라우저가 성공적으로 시작되었습니다. 운영체제는 독립된 프로세스를 생성하고 메모리 공간을 할당했으며, 브라우저 자체의 각 모듈도 초기화를 마쳤습니다. 렌더링 엔진은 HTML/CSS를 파싱할 준비가 되었고, JavaScript 엔진은 스크립트를 실행할 준비가 되었으며, 네트워크 모듈은 데이터를 주고받을 준비가 되었습니다.
지금의 브라우저는 시동이 걸린 자동차에 비유할 수 있습니다——엔진이 돌아가고, 계기판이 켜지고, 내비게이션이 준비되었지만, 차는 아직 제자리에 멈춰 있습니다. 운전자(당신)가 아직 "어디로 갈지" 알려주지 않았기 때문입니다. 브라우저 창은 지금 빈 상태로, 주소 표시줄에 커서가 깜빡이며 입력을 기다리고 있습니다.
주소 표시줄에
https://www.example.com을 입력하고 엔터를 누르면, 인터넷 전체를 가로지르는 여정이 시작됩니다. 브라우저의 네트워크 모듈이 이 요청을 처리합니다. 먼저 URL 구조를 분석하고, DNS를 통해 도메인 이름을 IP 주소로 변환한 다음, 네트워크를 통해 원격 서버와 TCP 연결을 수립하고, 암호화 채널을 협상하고, HTTP 요청을 보내고, 서버 응답을 기다린 후, 마지막으로 받은 HTML/CSS/JS 코드를 렌더링 엔진에 전달하여 화면에 웹페이지를 그립니다. 이것은 전체 릴레이 체인 중 단계가 가장 많고 관련 프로토콜이 가장 풍부한 바통입니다——바로 웹 개발자가 가장 잘 이해해야 할 부분이기도 합니다.
5. URL 접속: 네트워크 요청의 전체 과정
5.1 URL이란?
URL（Uniform Resource Locator）은 리소스의 주소로, 현실의 주소처럼 인터넷 상의 리소스를 찾는 데 사용됩니다.
URL 구조:
┌─────────────────────────────────────────────────────────┐
│ https:// │ www.example.com │ /path/to/page │ ?query=1 │
│ 프로토콜 │ 도메인 │ 경로 │ 쿼리 │
└─────────────────────────────────────────────────────────┘- 프로토콜（Protocol）: 어떤 방식으로 접근할지 지정（http, https, ftp 등）
- 도메인（Domain）: 서버의 주소
- 경로（Path）: 서버 상의 리소스 위치
- 쿼리（Query）: 추가 매개변수
5.2 URL 접속의 전체 과정
https://www.example.com에 접속하면 다음과 같은 일이 일어납니다:
첫 번째 단계: URL 파싱
브라우저는 먼저 URL을 파싱하여 프로토콜, 도메인, 경로 등의 정보를 추출합니다.
URL 파싱 과정:
https://www.example.com/index.html
↓
프로토콜: https
도메인: www.example.com
경로: /index.html두 번째 단계: DNS 확인
컴퓨터는 네트워크를 통해 서버에 접근하지만, 네트워크는 도메인 이름이 아닌 IP 주소（예: 93.184.216.34）를 사용합니다. 따라서 도메인 이름을 IP 주소로 변환해야 하며, 이 과정을 DNS 확인이라고 합니다.
DNS 확인 흐름:
┌─────────────────────────────────────────────────────────┐
│ 브라우저 캐시 → hosts 파일 → 로컬 DNS 캐시 → DNS 서버 │
└─────────────────────────────────────────────────────────┘
실제 과정:
1. 브라우저가 캐시를 확인（최근에 방문한 적이 있나요?）
2. 운영체제가 DNS 캐시를 확인
3. DNS 서버에 쿼리 요청 전송
4. DNS 서버가 IP 주소 반환세 번째 단계: TCP 연결 수립
IP 주소를 얻으면 브라우저는 서버와 TCP 연결을 수립합니다. TCP는 전송 계층 프로토콜로, 데이터의 신뢰성 있는 전송을 보장합니다.
TCP 3방향 핸드셰이크:
┌─────────────────────────────────────────────────────────┐
│ 클라이언트 → 서버: SYN（동기화 요청） │
│ 서버 → 클라이언트: SYN-ACK（확인 및 동기화） │
│ 클라이언트 → 서버: ACK（확인） │
│ ↓ │
│ 연결 수립 완료! │
└─────────────────────────────────────────────────────────┘HTTPS의 경우, 추가로 TLS/SSL 핸드셰이크를 수행하여 암호화 채널을 수립해야 합니다.
네 번째 단계: HTTP 요청 전송
연결이 수립되면 브라우저는 서버에 HTTP 요청을 보냅니다:
HTTP 요청 형식:
┌─────────────────────────────────────────────────────────┐
│ GET /index.html HTTP/1.1 │
│ Host: www.example.com │
│ User-Agent: Mozilla/5.0... │
│ Accept: text/html │
│ │
│ （빈 줄） │
└─────────────────────────────────────────────────────────┘주요 HTTP 메서드:
| 메서드 | 의미 | 용도 |
|---|---|---|
| GET | 리소스 조회 | 웹페이지 탐색 |
| POST | 데이터 제출 | 로그인, 폼 제출 |
| PUT | 리소스 업로드 | 파일 업로드 |
| DELETE | 리소스 삭제 | 데이터 삭제 |
다섯 번째 단계: 서버 요청 처리
서버（보통 Nginx, Apache와 같은 웹 서버）가 요청을 받으면:
- 요청 파싱: 클라이언트가 원하는 것을 이해
- 비즈니스 처리: 백엔드 프로그램 호출（예: Python, Node.js, Java）
- 데이터베이스 쿼리: 필요한 데이터 조회
- 응답 생성: 데이터를 HTML, JSON 등의 형식으로 조립
서버 처리 흐름:
┌─────────────────────────────────────────────────────────┐
│ 1. 웹 서버가 요청 수신 (Nginx/Apache) │
│ 2. 경로에 따라 해당 핸들러 찾기 │
│ 3. 백엔드 코드 실행 (API, 비즈니스 로직) │
│ 4. 필요 시 데이터베이스 쿼리, 데이터 조회 │
│ 5. 응답 조립 (HTML/JSON/CSS/JS) │
│ 6. HTTP 응답 반환 │
└─────────────────────────────────────────────────────────┘여섯 번째 단계: HTTP 응답 반환
서버는 HTTP 응답을 반환하며, 여기에는 상태 코드, 응답 헤더, 응답 본문이 포함됩니다:
HTTP 응답 형식:
┌─────────────────────────────────────────────────────────┐
│ HTTP/1.1 200 OK │
│ Content-Type: text/html │
│ Content-Length: 1234 │
│ │
│ <!DOCTYPE html> │
│ <html>...</html> │
└─────────────────────────────────────────────────────────┘주요 상태 코드:
| 상태 코드 | 의미 |
|---|---|
| 200 | 성공 |
| 301/302 | 리디렉션 |
| 404 | 리소스를 찾을 수 없음 |
| 500 | 서버 오류 |
일곱 번째 단계: 브라우저 페이지 렌더링
브라우저는 응답을 받은 후 페이지 렌더링을 시작합니다:
- HTML 파싱: DOM 트리 구축
- CSS 파싱: 스타일 계산, 렌더 트리 구축
- JavaScript 실행: 페이지 내 JS 코드 실행
- 페이지 그리기: 콘텐츠를 화면에 표시
브라우저 렌더링 과정:
┌─────────────────────────────────────────────────────────┐
│ 1. HTML 파싱 → DOM 트리 │
│ 2. CSS 파싱 → 스타일 규칙 │
│ 3. DOM + CSS → 렌더 트리 │
│ 4. 레이아웃 계산 → 각 요소의 크기와 위치 │
│ 5. 페인팅 → 픽셀을 화면에 표시 │
│ 6. 합성 → 여러 레이어를 병합하여 표시 │
└─────────────────────────────────────────────────────────┘릴레이 마지막 바통 완료 ⛳ 드디어 웹페이지가 눈앞에 나타났습니다! 이 마지막 바통이 얼마나 많은 단계를 거쳤는지 되돌아봅시다. 브라우저가 URL을 파싱하여 프로토콜과 도메인을 추출하고, DNS를 통해 단계별로 조회하여 도메인을 IP 주소로 변환하고, TCP 3방향 핸드셰이크로 서버와 신뢰성 있는 연결을 수립하고, TLS 핸드셰이크로 암호화 채널을 구축한 다음, HTTP 요청을 보내고, 서버는 비즈니스 로직을 처리하고, 데이터베이스를 쿼리하고, 응답 데이터를 조립하여 반환하며, 마지막으로 브라우저의 렌더링 엔진이 HTML을 DOM 트리로 파싱하고, CSS를 스타일 규칙으로 계산하고, 둘을 렌더 트리로 병합하고, 레이아웃을 계산하고, 픽셀 단위로 화면에 그립니다.
이제 시야를 넓혀 이 릴레이 경기의 전체 모습을 처음부터 끝까지 살펴봅시다. 전원 버튼을 누른 순간부터: 전류가 하드웨어를 깨우고（1번 바통）→ 펌웨어가 장치를 점검하고 부팅 디스크를 찾고（2번 바통）→ 운영체제가 커널부터 데스크톱까지 완전히 부팅되고（3번 바통）→ 브라우저가 응용 프로그램으로서 운영체제에 의해 실행되고（4번 바통）→ 네트워크 요청이 인터넷을 가로질러 데이터를 가져와 페이지로 렌더링합니다（5번 바통）. 다섯 바통이 서로 긴밀히 연결되어 있으며, 각 바통은 이전 바통의 성과 위에 구축됩니다. 어느 하나라도 빠지면 지금 눈앞의 이 웹페이지를 볼 수 없습니다.
이제 완전한 흐름도를 통해 이 다섯 단계를 하나로 연결하고, 그 의존 관계를 직관적으로 살펴봅시다.
6. 전체 흐름 리뷰
이 전체 과정을 하나로 연결해 봅시다:
전원을 켜서 웹사이트에 접속하기까지의 완전한 흐름:
┌──────────────────────────────────────────────────────────────────┐
│ 1. 전원 버튼 누르기 │
│ └── 전원 공급 → 메인보드 기동 → CPU 리셋 → BIOS/UEFI 실행 │
├──────────────────────────────────────────────────────────────────┤
│ 2. BIOS/UEFI 부팅 │
│ └── 하드웨어 자체 점검 → 부팅 장치 검색 → 부트로더 읽기 │
├──────────────────────────────────────────────────────────────────┤
│ 3. 운영체제 부팅 │
│ └── 부트로더 → 커널 로드 → 서비스 시작 → 데스크톱 표시 │
├──────────────────────────────────────────────────────────────────┤
│ 4. 브라우저 열기 │
│ └── 아이콘 더블클릭 → 프로세스 생성 → 프로그램 로드 → 창 표시 │
├──────────────────────────────────────────────────────────────────┤
│ 5. URL 접속 │
│ └── URL 파싱 → DNS 확인 → TCP 연결 → HTTP 요청 │
│ → 서버 처리 → HTTP 응답 → 브라우저 렌더링 → 웹페이지 표시 │
└──────────────────────────────────────────────────────────────────┘전체 연결 고리를 살펴보면 흥미로운 규칙을 발견할 수 있습니다. 각 단계가 해결하는 문제는 완전히 다르고, 그 뒤에 관련된 기술 분야도 확연히 다릅니다. 1번 바통은 전자공학의 영역——전원 변환, 회로 설계, 신호 전송입니다. 2번 바통은 펌웨어 프로그래밍에 속합니다——저수준 코드로 하드웨어를 직접 제어합니다. 3번 바통은 운영체제의 세계——프로세스 스케줄링, 메모리 관리, 파일 시스템으로, 컴퓨터 과학의 핵심 과제입니다. 4번 바통은 응용 프로그램 개발을 다룹니다——브라우저처럼 복잡한 소프트웨어 아키텍처를 어떻게 설계할 것인가. 5번 바통은 컴퓨터 네트워크와 프론트엔드 개발을 아우릅니다——DNS, TCP/IP, HTTP 등 네트워크 프로토콜부터 HTML/CSS/JS의 파싱과 렌더링까지.
이는 "풀스택 엔지니어"가 왜 광범위한 지식이 필요한지 설명해 줍니다. 여러분이 작성하는 모든 프론트엔드 코드 한 줄은 결국 이 전체 연결 고리를 거쳐 사용자에게 전달됩니다. 이 고리의 각 부분을 이해하면 문제가 발생했을 때 빠르게 원인을 파악할 수 있습니다——네트워크 계층의 문제인가? 서버의 문제인가? 아니면 브라우저 렌더링의 문제인가?
아래 지식 지도는 이러한 기술 분야를 정리하고, 앞으로의 심화 학습 방향을 제시합니다.
7. 지식 지도
이 장에서 다루는 지식 영역:
컴퓨터 시스템 개요
├── 하드웨어 기초
│ ├── 전원 공급 장치 (PSU)
│ ├── 메인보드 칩셋
│ └── CPU
├── BIOS/UEFI
│ ├── POST 자체 점검
│ ├── 부팅 순서
│ └── 부트로더
├── 운영체제
│ ├── 커널 (Kernel)
│ ├── 시스템 서비스
│ └── 데스크톱 환경
├── 응용 프로그램
│ ├── 프로세스 관리
│ └── 프로그램 로딩
└── 네트워크 통신
├── DNS 확인
├── TCP/IP 프로토콜
├── HTTP 프로토콜
└── 브라우저 렌더링더 배워보기
특정 단계를 더 깊이 이해하고 싶다면, 다음을 계속 학습해 보세요:
- 트랜지스터부터 CPU까지: 컴퓨터 하드웨어 기초 이해하기
- 운영체제（프로세스/메모리/파일 시스템）: 운영체제 깊이 이해하기
- 컴퓨터 네트워크: 네트워크 프로토콜 깊이 이해하기