URL 구조 완벽 가이드 — 프로토콜부터 프래그먼트까지

URL이란 무엇인가?

**URL(Uniform Resource Locator)**은 인터넷상의 특정 자원(웹 페이지, 이미지, 파일 등)의 위치를 나타내는 주소입니다. 우리가 매일 브라우저 주소창에 입력하거나 링크를 클릭할 때 사용하는 바로 그것입니다.

URL은 단순해 보이지만 여러 구성 요소가 각각의 역할을 수행하는 정교한 구조를 갖고 있습니다. 각 부분을 이해하면 웹 개발, SEO, API 연동, 보안 분석 등 다양한 영역에서 도움이 됩니다.

URL의 전체 구조

다음 예시 URL을 기준으로 각 부분을 살펴보겠습니다.

https://www.example.com:8080/blog/seo-guide?lang=ko&page=1#comments

이 URL은 다음 6가지 구성 요소로 이루어져 있습니다.

구성 요소	값
프로토콜	`https`
호스트(도메인)	`www.example.com`
포트	`8080`
경로	`/blog/seo-guide`
쿼리 문자열	`lang=ko&page=1`
프래그먼트	`comments`

1. 프로토콜 (Protocol / Scheme)

URL의 가장 앞부분으로, 자원에 어떻게 접근할지를 지정합니다.

https://...
^^^^^^^^^^

웹에서 자주 사용하는 프로토콜:

http: 일반 하이퍼텍스트 전송 프로토콜. 데이터가 암호화되지 않음
https: HTTP + TLS/SSL 암호화. 현재 표준
ftp: 파일 전송 프로토콜
mailto: 이메일 링크 (mailto:contact@example.com)
file: 로컬 파일 시스템의 파일 참조

현재 웹에서는 거의 모든 사이트가 https를 사용합니다. 구글은 https를 SEO 순위 신호로 반영하고, 브라우저는 http 사이트에 “안전하지 않음” 경고를 표시합니다.

프로토콜 뒤에는 항상 ://가 옵니다.

2. 호스트 (Host / Domain)

프로토콜 다음에 오는 부분으로, 자원이 위치한 서버를 식별합니다.

https://www.example.com:8080/...
        ^^^^^^^^^^^^^^^

호스트는 세 부분으로 구성될 수 있습니다.

서브도메인: www, blog, api 등. 같은 도메인에서 서로 다른 서비스를 구분
도메인: example — 등록된 고유 이름
TLD(최상위 도메인): .com, .kr, .net, .org 등

예시:

www.example.com → 서브도메인 www + 도메인 example + TLD .com
api.quicktoolkit.app → 서브도메인 api + 도메인 quicktoolkit + TLD .app

도메인 이름은 DNS(Domain Name System)를 통해 실제 서버 IP 주소로 변환됩니다.

3. 포트 (Port)

서버의 어떤 포트에 연결할지를 지정합니다. 콜론(:) 뒤에 숫자로 표시됩니다.

https://www.example.com:8080/...
                        ^^^^

각 프로토콜은 기본 포트가 있습니다.

http → 80번 포트 (생략 가능)
https → 443번 포트 (생략 가능)
ftp → 21번 포트

기본 포트를 사용할 때는 URL에서 포트를 생략해도 됩니다. https://example.com은 사실 https://example.com:443과 동일합니다. 개발 환경에서는 종종 http://localhost:3000처럼 비표준 포트를 사용합니다.

4. 경로 (Path)

서버 내에서 특정 자원의 위치를 나타냅니다. 슬래시(/)로 시작하여 디렉터리 구조를 표현합니다.

https://www.example.com:8080/blog/seo-guide?...
                             ^^^^^^^^^^^^^^^

경로는 파일 시스템의 디렉터리 경로와 유사합니다.

/ → 루트(홈 페이지)
/blog/ → 블로그 목록
/blog/seo-guide → 특정 블로그 포스트
/images/logo.png → 이미지 파일

현대 웹에서 경로는 실제 파일 시스템과 반드시 일치하지 않아도 됩니다. 서버가 URL 경로를 해석해서 적절한 콘텐츠를 반환합니다.

5. 쿼리 문자열 (Query String)

경로 뒤에 ?로 시작하는 부분으로, 서버에 추가 정보를 전달합니다.

https://www.example.com/blog/seo-guide?lang=ko&page=1#...
                                       ^^^^^^^^^^^^^^^^

쿼리 문자열은 키=값 쌍으로 구성되며, 여러 파라미터는 &로 구분합니다.

?lang=ko&page=1&sort=newest
 ^^^^^^^ ^^^^^^ ^^^^^^^^^^^
 파라미터1 파라미터2 파라미터3

주요 활용 사례:

검색 필터: ?category=tech&sort=recent
페이지네이션: ?page=2&per_page=20
언어/지역: ?lang=ko
광고 추적: ?utm_source=google&utm_medium=cpc
API 파라미터: ?api_key=abc123&format=json

쿼리 파라미터 값에 특수문자나 한글이 포함되면 반드시 인코딩해야 합니다. 예를 들어 ?q=안녕하세요는 ?q=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94로 인코딩됩니다.

6. 프래그먼트 (Fragment / Hash)

URL의 마지막 부분으로 #으로 시작합니다.

https://www.example.com/blog/seo-guide?lang=ko&page=1#comments
                                                       ^^^^^^^^

프래그먼트는 서버로 전송되지 않고 브라우저에서만 처리됩니다. 주로 페이지 내 특정 섹션으로 스크롤하는 앵커 링크에 사용됩니다.

<!-- 페이지 내 특정 위치 -->
<section id="comments">댓글 섹션</section>

<!-- 해당 위치로 이동하는 링크 -->
<a href="/blog/seo-guide#comments">댓글 보기</a>

현대 SPA(단일 페이지 앱)에서는 프래그먼트를 라우팅에 사용하기도 합니다.

URL 인코딩이 필요한 이유

URL은 ASCII 문자 집합을 기반으로 설계되었습니다. 그러나 실제로는 다양한 언어의 문자, 특수 기호, 공백 등을 URL에 포함해야 하는 경우가 많습니다.

URL에서 특별한 의미를 가진 예약 문자들:

문자	역할
`?`	쿼리 문자열 시작
`&`	파라미터 구분
`=`	키-값 구분
`#`	프래그먼트 시작
`/`	경로 구분
`:`	프로토콜/포트 구분

이 문자들을 데이터로 사용하려면 퍼센트 인코딩(%XX)이 필요합니다.

예시: 검색어 a&b=c를 파라미터로 전달하려면:

잘못된 방식: ?q=a&b=c  (b=c가 별도 파라미터로 해석됨)
올바른 방식: ?q=a%26b%3Dc

URL 인코더/디코더 도구를 사용하면 이런 복잡한 인코딩 작업을 자동으로 처리할 수 있습니다.

절대 URL vs 상대 URL

웹 개발에서는 두 가지 형태의 URL을 사용합니다.

절대 URL: 프로토콜부터 경로까지 완전한 URL

https://quicktoolkit.app/ko/tools/url-encoder/

상대 URL: 현재 페이지의 위치를 기준으로 한 경로

../tools/url-encoder/   (상위 디렉터리 기준)
/ko/tools/url-encoder/  (루트 기준)
url-encoder/            (현재 디렉터리 기준)

외부 링크나 공유용 URL에는 절대 URL을, 동일 사이트 내 링크에는 상대 URL을 사용하는 것이 일반적입니다.

마무리

URL의 각 구성 요소를 이해하면 웹을 보는 눈이 달라집니다. 브라우저 주소창의 URL을 분석해서 어떤 서버의 어떤 경로에 어떤 파라미터로 요청하는지 파악할 수 있게 됩니다.

URL을 다룰 때 특수문자나 한글이 포함된다면 URL 인코더 도구를 활용해보세요. 인코딩과 디코딩을 간편하게 처리할 수 있어 개발이나 API 작업 시 유용합니다.