공부 메모

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

Hicecream 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에 대해 더욱 더 파헤처보도록 하겠습니다. 가즈아~!