7부 · 전체를 잇기 + 다음 걸음

← 6부 | 목차

지금 다루는 단계: 전체 — 1부부터 6부까지를 하나의 흐름으로 다시 꿰어 봅니다.

처음부터 끝까지: 주소창 엔터의 전 생애

이제 모든 조각을 배웠으니, 첫 장의 그 질문 — "google.com을 치고 엔터를 누르면 무슨 일이 벌어질까?" — 에 완전한 답을 할 수 있습니다.

sequenceDiagram
    participant U as 사용자
    participant B as 브라우저
    participant D as DNS
    participant S as 서버

    U->>B: 주소창에 example.com 입력 + 엔터
    Note over B,D: ① 이름을 주소로
    B->>D: example.com 의 IP는?
    D-->>B: 93.184.x.x
    Note over B,S: ② 연결 (TCP/TLS 핸드셰이크)
    B->>S: 안전한 연결 수립
    Note over B,S: ③ 요청
    B->>S: GET / HTTP/1.1 (HTTP)
    Note over S: ④ 서버 처리
    S-->>B: ⑤ 200 OK + HTML
    Note over B: ⑥ 렌더링 시작
    B->>S: (추가) GET style.css, app.js, img...
    S-->>B: 각 파일 응답
    Note over B: DOM → 스타일 → 레이아웃 → 페인트
    B->>U: 완성된 페이지 표시 🎉

말로 한 문장씩 옮기면:

1. ① DNS(2부): 브라우저가 example.com이라는 이름을 IP 주소(번호)로 바꿉니다.
2. ② 연결(3부): 그 주소의 서버와 안전한 연결(HTTPS면 TLS 봉투)을 맺습니다.
3. ③ 요청(3부): GET / HTTP/1.1 같은 HTTP 요청 편지를 보냅니다.
4. ④ 서버 처리: 서버가 요청을 읽고 응답을 준비합니다.
5. ⑤ 응답(3부): 200 OK와 함께 HTML 본문을 돌려줍니다.
6. ⑥ 렌더링(4·5·6부): 브라우저가 HTML을 DOM으로 만들고, CSS·JS·이미지를 추가 요청으로 받아, 스타일을 입히고 위치를 계산해 픽셀로 칠합니다. 화면 완성!

여러분이 4·5부에서 만든 소개 페이지도 누군가의 브라우저에서 정확히 이 과정을 거쳐 보이게 됩니다.

우리 페이지를 세상에 공개하려면

지금 실습 페이지는 내 컴퓨터 안에만 있습니다(더블클릭으로 열었으니까요). 남이 보려면 어딘가의 서버에 올려 주소를 부여해야 합니다. 개념만 짚자면:

flowchart LR
    LOCAL["내 컴퓨터의<br/>index.html"]:::doc
    HOST["호스팅 서비스에<br/>올리기 (배포)"]:::server
    DOMAIN["도메인 연결<br/>(이름 부여)"]:::net
    WORLD["누구나 접속<br/>가능"]:::good

    LOCAL --> HOST --> DOMAIN --> WORLD

    classDef doc fill:#e9d8fd,stroke:#6b46c1,color:#000
    classDef server fill:#e9d8fd,stroke:#6b46c1,color:#000
    classDef net fill:#cfe8ff,stroke:#2b6cb0,color:#000
    classDef good fill:#c6f6d5,stroke:#276749,color:#000

• 배포(deploy): 내 파일을 항상 켜져 있는 서버(호스팅)로 복사하는 일.
• 도메인 등록: 2부에서 배운 이름을 사서 그 서버 주소에 연결하는 일.

정적인 HTML 페이지를 무료로 올려 주는 서비스가 여럿 있습니다(특정 제품을 정답으로 권하진 않겠습니다 — "정적 사이트 호스팅"으로 검색하면 현재 쓸 만한 선택지를 비교할 수 있습니다). 핵심은 "내 파일을 남이 요청할 수 있는 서버에 둔다"는 개념입니다. 그 순간 여러분의 페이지도 이 안내서가 설명한 요청-응답 파이프라인의 응답하는 쪽(서버)이 됩니다.

무언가 안 될 때: 증상 → 원인 빠른 진단

웹을 다루다 보면 자주 만나는 오류들이 있습니다. 이 안내서의 개념으로 대부분 짚어낼 수 있습니다.

막혔을 때 첫 번째로 할 일: 개발자 도구(F12)의 Console 탭을 여세요. JS 오류가 빨간 글씨로 찍혀 있고, 대개 몇 번째 줄이 문제인지까지 알려줍니다. 두 번째로 Network 탭에서 어떤 요청이 실패(빨간색)했는지 봅니다. 이 두 탭이 거의 모든 문제의 단서를 줍니다.

알아두면 좋은 보안 기초

웹은 누구나 접근할 수 있어 편리한 만큼, 악용도 가능합니다. 초보 단계에서 이름만이라도 알아두면 좋은 것들입니다.

• HTTPS 사용: 앞서 본 밀봉 봉투. 로그인·결제 페이지라면 필수입니다. 자물쇠 없는 사이트에 비밀번호를 입력하지 마세요.
• 입력값을 믿지 말 것: 사용자가 폼에 무엇을 넣을지 모릅니다. 악의적 입력으로 공격하는 대표 수법이 XSS(악성 스크립트 주입)와 SQL 인젝션(데이터베이스 조작)입니다. 그래서 서버는 들어온 입력을 늘 검증·소독합니다.
• 비밀은 클라이언트에 두지 말 것: 브라우저로 보낸 코드(HTML·JS)는 누구나 들여다볼 수 있습니다(F12로요). 비밀번호·API 키 같은 민감 정보는 절대 프런트엔드 코드에 넣지 않고, 서버에서 다룹니다.

깊이 들어갈 필요는 없지만, 핵심 원칙 하나는 기억하세요: "클라이언트(브라우저)에서 오는 것은 무엇도 무조건 믿지 않는다." 보안의 출발점입니다.

자주 헷갈리는 것 빠른 정리

더 깊이 들어가고 싶다면 (방향 안내)

이 안내서는 '큰 그림'에 집중했습니다. 다음 단계로 각 조각을 깊게 파고들 수 있습니다. 무엇이든 하나를 끝까지 보다 보면 나머지가 따라옵니다.

• HTML·CSS 더 깊이: 시맨틱 태그(<header>, <nav>, <article>), 반응형 디자인(화면 크기에 맞춰 배치 바꾸기), Flexbox·Grid 같은 배치 도구.
• JavaScript 더 깊이: 변수·함수·조건·반복 같은 프로그래밍 기본기, 이벤트 다루기, 서버와 데이터를 주고받는 fetch.
• 백엔드 입문: 서버를 직접 만들어 보기, 데이터베이스, API 개념.
• 개발 도구 친해지기: 3부에서 연 개발자 도구(F12)의 Network·Elements·Console 탭을 일상적으로 써 보기. 가장 빠른 성장 도구입니다.

가장 신뢰할 만한 무료 학습 출처로 MDN Web Docs(developer.mozilla.org)가 있습니다. 한국어 문서도 많고, 표준에 충실합니다. 막힐 때 "MDN + 키워드"로 검색하는 습관을 들이면 큰 도움이 됩니다.

실습 프로젝트, 여기까지 온 것

처음엔 빈 메모장이었습니다. 안내서를 따라오며 이렇게 자랐습니다.

• 4부: HTML로 구조를 세웠다 (제목·이미지·목록·링크).
• 5부: CSS로 모양을 입히고 JavaScript로 버튼을 동작시켰다.
• 6부: 그 페이지가 브라우저 안에서 DOM이 되고 픽셀로 그려지는 과정을 이해했다.
• 7부: 이 페이지가 인터넷에 올라가 남에게 보이기까지의 전체 흐름을 다시 꿰었다.

이제 여러분은 웹페이지를 만들 수 있고, 그것이 화면에 뜨기까지 무슨 일이 벌어지는지 설명할 수 있습니다. 그게 이 안내서의 목표였습니다.

마지막 한마디

웹은 결국 단순한 아이디어의 반복입니다 — 누군가 요청하면, 누군가 응답한다. DNS도, HTTP도, 렌더링도 모두 이 한 문장을 거드는 장치일 뿐입니다. 이 골격만 단단히 잡고 있으면, 앞으로 만나는 새 기술(프레임워크·API·클라우드 등)도 "전체 그림의 어디에 끼는 조각인지"로 이해하게 될 것입니다.

수고하셨습니다. 이제 메모장을 열고, 여러분만의 페이지를 한 줄 더 고쳐 보세요. 🎉

빠른 참조가 필요하면 부록을 활용하세요 — 용어집, 상태 코드표, 증상→원인 진단표, 새 페이지 체크리스트가 정리돼 있습니다.

→ 부록 · 빠른 참조 모음

← 목차로 돌아가기