공부 메모

[HTTP] URI/URL/URN? 웹 브라우저 요청 흐름 정리

2025. 3. 29. 19:51

 

 

 

본 게시물은 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 보고 작성하였습니다.

 

 

 

URI? URL? URN?

URI, URL, URN은 인터넷에서 리소스를 식별하는 방식입니다. 이 세 가지 개념은 서로 관련이 있지만, 역할과 범위가 다르다는 차이가 있습니다.

 

1. URI (Uniforn Resource Identifier)

URI는 웹에서 특정 리소스를 "식별"하는 모든 문자열을 의미합니다. 인터넷 상의 모든 자원을 지칭할 수 있는 주소 체계라고 보면 됩니다. URL과 URN은 모두 URI의 한 종류로 포함 관계에 있습니다.

 

<URI의 예시>

  • https://www.example.com/index.html (URL)
  • urn:isbn:0451450234 (URN)

 

2.  URL (Uniform Resource Locator)

URL은 특정 리소스의 "위치"를 나타내는 URI의 한 종류입니다. 리소스를 어디서 찾을 수 있는지를 알려주는 역할을 합니다.

 

<URL의 예시>

  • https://www.google.com/search?q=hello
  • ftp://ftp.example.com/file.txt

 

3. URN (Uniform Resource Name)

URN은 리소스를 위치 없이, 고유한 이름으로 식별하는 URI의 한 종류입니다. 특정 리소스를 유일하게 식별하지만, 그 위치를 포함하진 않습니다.

 

<URN의 예시>

  • urn:isbn:045145023 (책의 ISBN 번호)
  • urn:uuid:123e4567-e89b-12d3-a456-2347134000 (UUID)

 

관계 정리

URI (리소스를 식별하는 모든 것)
 ├── URL (위치를 포함한 URI)
 ├── URN (이름만 포함한 URI)

 

URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않았습니다. 따라서 사실상 URI와 URL만 알면 되기 때문에 실무에서는 대부분 포함 관계인 URI과 URL을 같은 의미로 사용합니다.

 

 

URL 전체 문법

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • 프로토콜 (https)
  • 호스트명 (www.google.com)
  • 포트 번호 (433)
  • 패스 (/search)
  • 쿼리 파라미터 (q=hello&hl=ko)

 

1. URL - scheme

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • 주로 프로토콜 사용
  • 프로토콜: 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙
  • http는 80포트, https는 443포트를 주로 사용, 포트는 생략 가능
  • https는 http에 보안 추가된 것 (HTTP Secure)

 

 

2. URL - userinfo

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • URL에 사용자 정보를 포함해서 인증
  • 거의 사용하지 않음

 

3. URL - host

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • 호스트명
  • 도메인명 또는 IP 주소를 직접 사용 가능

 

4. URL - PORT

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • 접속 포트
  • 일반적으로 생략, 생략 시 http는 80, https는 443

 

5. URL - path

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • 리소스 경로(path), 계층적 구조
  • /members/100, /items/iphone12 

 

6. URL - query

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:433/search?q=hello&hl=ko
  • key=value 형태
  • ?로 시작, &로 추가 가능 (?keyA=valueA&keyB=valueB)
  • query parameter, query string 등으로 불림, 웹 서버에 제공하는 파라미터, 문자 형태

 

7. URL - fragment

scheme://[userinfo@]host[:port][/path][?query][#fragment]

 

  • html 내부 북마크 등에 사용
  • 서버에 전송하는 정보 아님

 

 

웹 브라우저 요청 흐름

 

1. 사용자 입력

사용자가 브라우저의 주소창에 URL을 입력하거나 링크를 클릭합니다.

  • 브라우저에 https://www.google.com:433/search?q=hello&hl=ko를  입력한 상태입니다.

 

2. URL 파싱 및 분석

웹 브라우저는 URL을 파싱(분석)하여, 다음과 같은 요소들을 추출합니다.

  • Scheme : https:// (HTTP 프로토콜의 보안 버전)
  • Host : www.google.com (구글 서버의 도메인)
  • Port : 433 (HTTPS의 기본 포트)
  • Path : /search (구글 검색 페이지)
  • Query : q=hello&hl=ko (검색어 hello와 언어 설정 ko)

 

3. DNS 조회 (도메인 -> IP 주소 변환)

웹 브라우저는 DNS 서버에 요청을 보내 도메인 이름을 IP 주소로 변환합니다.

  • www.google.com -> 216.58.213.110 (구글 서버의 IP 주소)

 

4. HTTP 요청 전송

 

웹 브라우저는 HTTP 요청 메시지를 생성하여 서버에 전송합니다.

GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

 

SOCKET 라이브러리를 통해 TCP/IP를 연결하고 데이터를 전달합니다. 

TCP/IP 패킷을 생성하고, HTTP 메시지를 포함하여 인터넷 망으로 던져서 구글 서버에 요청 패킷이 도착하도록 합니다.

 

5. HTTP 응답 전송

구글 서버에 요청 패킷이 도착하면, TCP/IP 패킷을 벗겨서 버리고, HTTP 메시지만 끄집어냅니다.

서버는 HTTP 응답 메시지를 만들어내고, 브라우저로 전송합니다. 

HTTP/1.1 200 OK   # HTTP버전, 상태 코드 200, OK
Content-Type: text/html; charset=UTF-8   # 밑에 데이터가 텍스트 HTML 형식, 언어는 UTF-8
Content-Length: 3423   # 실제 HTML 길이

<html>
  <body>...</body>
</html>

 

 

6. 브라우저가 응답 데이터 렌더링

브라우저가 받은 HTML, CSS, JavaScript를 분석하여 화면에 구글 검색 결과를 렌더링합니다.

 

 

 

end

이번 글에서는 웹 브라우저의 요청 흐름에 대해 살펴보았습니다. URL을 입력하고, DNS 조회부터 TCP 연결, HTTP 요청 및 응답, 최종적으로 페이지가 렌더링 되는 과정까지, 웹 브라우저가 어떻게 웹 페이지를 표시하는지에 대한 기본적인 흐름을 이해하는 데 아주 큰 도움이 되었습니다. 다음 글에서는 HTTP에 대해 더욱 더 파헤처보도록 하겠습니다. 가즈아~!

 

 

'공부 메모' 카테고리의 다른 글

[HTTP] HTTP 메서드 총정리: API 설계를 위한 필수 개념  (1) 2025.04.04
[HTTP] HTTP 기본 개념 정리: 구조, 특징, 메시지 이해하기  (0) 2025.04.03
[HTTP] 네트워크 필수 개념 정리 (IP/TCP/UDP/PORT/DNS)  (1) 2025.03.28
유튜브 URL로 댓글 목록 크롤링하기  (0) 2025.03.18
정적/동적 크롤링 개념 및 실습 진행해보기  (0) 2025.03.18
  1. URI? URL? URN?
  2. 1. URI (Uniforn Resource Identifier)
  3. 2.  URL (Uniform Resource Locator)
  4. 3. URN (Uniform Resource Name)
  5. 관계 정리
  6. URL 전체 문법
  7. 1. URL - scheme
  8. 2. URL - userinfo
  9. 3. URL - host
  10. 4. URL - PORT
  11. 5. URL - path
  12. 6. URL - query
  13. 7. URL - fragment
  14. 웹 브라우저 요청 흐름
  15. 1. 사용자 입력
  16. 2. URL 파싱 및 분석
  17. 3. DNS 조회 (도메인 -> IP 주소 변환)
  18. 4. HTTP 요청 전송
  19. 5. HTTP 응답 전송
  20. 6. 브라우저가 응답 데이터 렌더링
'공부 메모' 카테고리의 다른 글
  • [HTTP] HTTP 메서드 총정리: API 설계를 위한 필수 개념
  • [HTTP] HTTP 기본 개념 정리: 구조, 특징, 메시지 이해하기
  • [HTTP] 네트워크 필수 개념 정리 (IP/TCP/UDP/PORT/DNS)
  • 유튜브 URL로 댓글 목록 크롤링하기
Hicecream
Hicecream
Hicecream
Hicecream
Hicecream
전체
오늘
어제
  • 분류 전체보기 (203) N
    • 코딩테스트 & 문제 풀이 (159)
    • 동아리 활동 (8)
    • 외부 활동 (0)
    • 대학 과제 (3)
    • Git & Git Hub (5)
    • 코딩 프로젝트 (4)
    • 공부 메모 (18) N
    • 일상 (2)
    • 참고사항 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Bronze 1
  • Bronze 2
  • 구현
  • Silver 4
  • Java
  • programmers
  • python
  • Bronze 4
  • 문자열
  • Bronze 5
  • C언어 기초 100제
  • BOJ
  • Code up
  • 수학
  • C
  • 사칙연산
  • Silver 5
  • Bronze 3
  • LV1
  • 정렬

최근 댓글

최근 글

hELLO · Designed By 정상우.
Hicecream
[HTTP] URI/URL/URN? 웹 브라우저 요청 흐름 정리
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.