웹 개발 기초집LESSON 01

웹페이지는 어떻게 화면에 나타날까?

난이도입문

예상 시간25분

선수지식웹 브라우저와 파일 사용

1강. 웹페이지는 어떻게 화면에 나타날까?

이번 강의의 결과물은 로컬 웹 서버를 통해 브라우저에 표시되는 첫 HTML 페이지입니다.

1. 이번 강의에서 해결할 문제

HTML 파일을 작성한 뒤 브라우저에서 확인하려면 무엇을 해야 할까요?

파일을 더블 클릭해도 페이지는 열리지만 주소가 file://로 시작합니다. 실제 웹 프로젝트처럼 브라우저가 서버에 파일을 요청하는 과정을 연습하려면 http:// 주소로 접속해야 합니다. 이번 강의에서는 내 컴퓨터 안에 간단한 로컬 서버를 실행해 이 문제를 해결합니다.

학습 목표

파일을 더블 클릭해도 페이지는 열리지만 주소가 file://로 시작합니다. 실제 웹 프로젝트처럼 브라우저가 서버에 파일을 요청하는 과정을 연습하려면 http:// 주소로 접속해야 합니다. 이번 강의에서는 내 컴퓨터 안에 간단한 로컬 서버를 실행해 이 문제를 해결합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

웹페이지가 표시되는 가장 기본적인 흐름은 다음과 같습니다.

브라우저(클라이언트)
    │  GET / 요청
    ▼
로컬 웹 서버
    │  200 OK + index.html 응답
    ▼
브라우저가 HTML을 해석하여 화면에 표시

클라이언트: 서버에 필요한 자료를 요청하는 프로그램입니다. 이번 실습에서는 웹 브라우저가 클라이언트입니다.
서버: 요청을 받아 알맞은 자료를 응답하는 프로그램입니다. 이번 실습에서는 Python의 간단한 웹 서버를 사용합니다.
요청(Request): 브라우저가 서버에 보내는 메시지입니다. 예를 들어 GET /는 기본 페이지를 보내 달라는 요청입니다.
응답(Response): 서버가 브라우저에 돌려주는 메시지입니다. 상태 코드와 HTML 같은 본문을 포함할 수 있습니다.
URL: 브라우저가 어느 서버의 어떤 자원을 요청할지 나타내는 주소입니다.
localhost: 인터넷의 다른 컴퓨터가 아니라 현재 사용 중인 내 컴퓨터를 가리키는 이름입니다.
포트: 한 컴퓨터에서 실행되는 여러 프로그램을 구분하는 번호입니다. 이번 실습에서는 5500을 사용합니다.

HTTP Semantics 표준은 HTTP를 클라이언트가 요청하고 서버가 응답하는 프로토콜로 정의합니다. 브라우저가 받은 HTML을 어떤 구조로 해석하는지는 WHATWG HTML 표준에서 정의합니다.

3. 코드 예시

파일 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio\index.html

파일명: index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>개발 기초 포트폴리오</title>
  </head>
  <body>
    <h1>나의 개발 기초 포트폴리오</h1>
    <p>브라우저가 서버로부터 받아 표시한 첫 페이지입니다.</p>
  </body>
</html>

doctype, head, meta 같은 문서 구조는 2강에서 하나씩 설명합니다. 이번 강의에서는 위 코드를 안전한 시작 형태로 사용하고, 요청과 응답의 흐름에 집중합니다.

실행 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

PowerShell 실행 명령:

cd D:\WebProject\StartBook\dev-foundations\web-basics\portfolio
python -m http.server 5500

서버가 실행된 동안 브라우저에서 다음 주소를 엽니다.

http://localhost:5500/

서버를 종료할 때는 서버를 실행한 PowerShell 창에서 Ctrl+C를 누릅니다.

4. 코드가 동작하는 이유

python -m http.server 5500은 현재 폴더의 파일을 제공하는 로컬 웹 서버를 5500번 포트에 실행합니다.
브라우저가 http://localhost:5500/에 접속하면서 서버에 / 경로를 요청합니다.
서버는 기본 문서 이름인 index.html을 찾아 파일 내용과 성공 상태를 응답합니다.
브라우저는 응답으로 받은 HTML을 해석하고 h1과 p 요소의 내용을 화면에 표시합니다.

Python의 SimpleHTTPRequestHandler는 현재 디렉터리를 URL 경로에 연결하고 기본적으로 index.html을 인덱스 페이지로 사용합니다. 자세한 동작과 명령 형식은 Python http.server 공식 문서에서 확인할 수 있습니다.

이 서버는 학습과 로컬 확인을 위한 도구입니다. 기본적인 보안 검사만 제공하므로 실제 서비스 운영용 서버로 사용하면 안 됩니다.

5. 자주 하는 실수

서버를 다른 폴더에서 실행함: 브라우저에 디렉터리 목록이 보이거나 404 File not found가 발생할 수 있습니다. 명령을 실행하기 전에 현재 위치를 확인합니다.
파일명이 다름: index.html.txt, Index.html처럼 저장하면 서버가 기본 문서를 찾지 못할 수 있습니다.
저장하지 않고 새로고침함: 편집기에서 파일을 저장한 뒤 브라우저를 새로고침해야 변경 사항이 보입니다.
포트가 이미 사용 중임: 5500번 포트를 사용할 수 없다는 오류가 나오면 명령과 주소의 포트를 모두 5501로 바꿉니다.
서버 창을 닫음: 서버 프로세스가 종료되므로 브라우저에서 더 이상 페이지를 받을 수 없습니다.

6. 짧은 실습 과제

web-basics 아래에 portfolio 폴더를 만들고 코드 예시를 index.html로 작성합니다.
h1 내용을 자신의 이름이나 개발자 소개 문장으로 바꿉니다.
로컬 서버를 실행하고 http://localhost:5500/에서 페이지가 표시되는지 확인합니다.
브라우저에서 F12를 눌러 개발자 도구를 열고 Network 탭을 선택한 다음 페이지를 새로고침합니다.
index.html 요청에서 다음 세 항목을 찾아 web-basics/lesson-01-notes.md에 기록합니다.
- Request URL
- Request Method
- Status Code

Windows의 Chrome 또는 Edge에서는 일반적으로 F12나 Ctrl+Shift+I로 개발자 도구를 열 수 있습니다. Chrome의 정확한 사용법은 Chrome DevTools 공식 안내와 Network 패널 안내에서 확인할 수 있습니다.

완료 기준은 주소가 http://localhost:5500/로 시작하고, 작성한 제목과 문장이 화면에 표시되며, Network 탭에서 성공한 문서 요청을 확인하는 것입니다.

7. 이해 점검 질문 3개

HTML 파일을 더블 클릭하는 대신 로컬 서버를 사용하는 이유는 무엇인가요?
이번 실습에서 클라이언트와 서버는 각각 무엇인가요?
브라우저에 포트 번호를 5501로 입력했지만 서버는 5500으로 실행했다면 페이지가 열리지 않는 이유는 무엇인가요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ