front-end development

[지식루프 웹개발공부] 05. 웹 브라우저 작동원리

지식루프 2025. 4. 22. 13:43
728x90
반응형

🌐 웹 브라우저의 작동 원리: 어떻게 콘텐츠가 화면에 보일까?

1. 웹 브라우저란 무엇인가?

  • 웹 브라우저(browser): 인터넷(World Wide Web)을 탐색할 수 있게 해주는 소프트웨어 애플리케이션이다.
  • Chrome, Safari, Edge, Firefox 등이 대표적.
  • 사용자는 브라우저를 통해 웹사이트 주소를 입력하고 원하는 정보를 얻는다.

2. 웹 브라우저의 핵심 역할

  • 요청(Request): 사용자가 입력한 URL을 바탕으로 웹 서버에 요청을 보냄
  • 응답(Response): 서버로부터 HTML, CSS, JS 등의 웹 콘텐츠 데이터를 받아옴
  • 렌더링(Rendering): 받은 데이터를 사용자의 화면에 보기 좋은 형태로 시각적으로 표시

3. URL의 구성

웹사이트 주소(URL)는 다음과 같은 구성요소로 되어 있다:

  • 프로토콜: http 또는 https (서버와 어떻게 통신할지 정하는 규칙)
  • 도메인 이름: www.example.com (웹사이트 이름)
  • 경로(path): /page1.html (웹페이지의 위치)

예시: https://www.example.com/products/shoes


4. 브라우저와 서버의 통신: HTTP 요청-응답 주기

📌 1단계: 사용자의 행동

  • 브라우저 실행 후 주소창에 URL 입력
  • 예: www.searchengine.com 입력 후 Enter

📌 2단계: 요청 전송

  • 브라우저가 HTTP 요청을 생성하여 인터넷을 통해 웹 서버로 전송

📌 3단계: 서버 응답

  • 웹 서버가 요청을 받고 처리한 후, HTML 문서, 이미지, 스크립트 등의 웹페이지 데이터를 응답으로 보냄

📌 4단계: 브라우저 렌더링

  • 브라우저가 서버로부터 받은 데이터를 해석하고, 최종적으로 사용자에게 시각적인 웹페이지로 보여줌

5. 검색 예시로 보는 작동 과정

  1. 검색엔진 사이트 접속 → 브라우저가 서버에 요청
  2. 서버 응답 → 검색창 있는 웹페이지 표시
  3. "내 주변 식당" 입력 후 검색 클릭
  4. 브라우저가 해당 키워드 포함 요청 전송
  5. 서버는 관련 데이터를 **데이터베이스(DB)**에서 찾아 응답
  6. 브라우저는 식당 목록, 지도, 리뷰 등을 포함한 새 페이지 렌더링

6. 웹 서버와 데이터베이스

  • 웹 서버: 다른 컴퓨터(클라이언트)의 요청을 받아 웹페이지 데이터를 제공
  • 데이터베이스: 웹 서버와 연결되어 있어 사용자가 요청한 정보(검색 결과 등)를 저장하고 제공

7. 웹 요청 주기의 확장

  • 채팅, 영화 스트리밍, 파일 공유 등 모든 온라인 활동은 이와 유사한 요청-응답 구조로 작동
  • 클라이언트가 요청 → 서버가 응답 → 브라우저가 표시

✅ 요약 정리

 


📌 마무리

  • 우리가 웹사이트에 접속하고 검색하는 모든 과정은 요청 → 처리 → 응답 → 렌더링이라는 과정을 통해 이루어진다.
728x90
반응형