URL 구조 알아보기 🔗
매일 인터넷을 사용하면서 URL을 보지만, 각 부분이 무엇을 의미하는지 잘 모를 수 있어요. URL의 구조를 이해하면 웹 개발이 훨씬 쉬워집니다! 차근차근 알아볼까요?
URL을 일상생활로 비유하면?
URL을 우편 주소로 비유해볼까요?
우편 주소 이야기 📬
대한민국 서울시 강남구 테헤란로 123 ABC빌딩 5층 501호
↓ ↓ ↓ ↓ ↓ ↓ ↓
국가 도시 구 거리 건물 층 호수
URL도 비슷해요:
https://www.example.com:443/products/shoes?color=red&size=10#reviews
↓ ↓ ↓ ↓ ↓ ↓
프로토콜 도메인 포트 경로 쿼리스 트링 해시
URL의 정의
URL (Uniform Resource Locator)
- 인터넷에서 자원(페이지, 이미지, 파일 등)의 위치를 나타내는 주소
- "웹 주소" 또는 "링크"라고도 불러요
URL 전체 구조 한눈에 보기
https://user:pass@www.example.com:443/products/shoes?color=red&size=10#reviews
└──┬─┘ └────┬────┘└───────┬───────┘└┬┘└──────┬──────┘└────────┬────────┘└──┬──┘
프로토콜 인증정보 도메인 포트 경로 쿼리스트링 해시/프래그먼트
하나씩 자세히 알아볼게요!
1. 프로토콜 (Protocol) 🔐
웹사이트에 접속하는 방법
https://example.com
└──┬─┘
프로토콜
주요 프로토콜
HTTP (HyperText Transfer Protocol)
http://example.com
- 평범한 웹사이트 접속 방법
- 보안 없음 ⚠️
- 데이터가 암호화되지 않음
- 요즘은 거의 사용 안 함
HTTPS (HTTP Secure)
https://example.com
- 보안이 있는 웹사이트 접속 방법 🔒
- 데이터가 암호화됨
- 현대 웹사이트 표준
- 자물쇠 아이콘 🔒 표시
기타 프로토콜
ftp://example.com # 파일 전송
mailto:user@email.com # 이메일 보내기
file:///C:/folder # 로컬 파일
팁
항상 HTTPS를 사용하세요! 특히 로그인, 결제, 개인정보 입력 시 HTTPS인지 꼭 확인하세요.
2. 도메인 (Domain) 🌐
웹사이트의 이름
https://www.example.com
└────── ┬──────┘
도메인
도메인 구조
www.example.com
└┬┘ └──┬──┘└┬┘
서브 이름 TLD
도메인 (최상위 도메인)
최상위 도메인 (TLD - Top Level Domain)
.com → 상업적 (가장 흔함)
.net → 네트워크
.org → 조직/비영리
.edu → 교육기관
.gov → 정부
.io → IT/스타트업 (인기)
.co.kr → 한국 기업
서브도메인 (Subdomain)
www.example.com → 웹사이트
blog.example.com → 블로그
api.example.com → API 서버
admin.example.com → 관리자 페이지
실제 예시
https://blog.naver.com
└┬┘ └──┬─┘└┬┘
서브 메인 TLD
도메인 도메인
3. 포트 (Port) 🚪
서버의 어느 문으로 들어갈지
https://example.com:443
└┬┘
포트
기본 포트
보통은 생략돼요 (자동으로 추가됨):
http://example.com → http://example.com:80 (자동)
https://example.com → https://example.com:443 (자동)
일반적인 포트 번호
| 포트 | 용도 |
|---|---|
| 80 | HTTP (웹) |
| 443 | HTTPS (보안 웹) |
| 21 | FTP (파일 전송) |
| 22 | SSH (원격 접속) |
| 3000 | 개발 서버 (Node.js) |
| 3306 | MySQL 데이터베이스 |
| 5432 | PostgreSQL |
| 8080 | 대체 HTTP |
개발 중에는?
http://localhost:3000 # React 개발 서버
http://localhost:8080 # Spring Boot
http://127.0.0.1:5000 # Flask/Python
4. 경로 (Path) 📂
웹사이트 안의 특정 페이지나 폴더
https://example.com/products/shoes/nike
└────────┬────────┘
경로
경로 구조
/products/shoes/nike
└┬┘ └┬┘ └┬┘
카테고리 상세 브랜드
실제 폴더 구조처럼 생각하면 돼요:
웹사이트
├── products/
│ ├── shoes/
│ │ ├── nike/
│ │ └── adidas/
│ └── clothes/
└── about/
실제 예시
https://github.com/facebook/react
└──────┬──────┘
경로
/사용자/저장소
5. 쿼리스트링 (Query String) 🔍
추가 정보나 검색 조건
https://example.com/search?q=javascript&sort=popular&page=2
└──────────────┬──────────────┘
쿼리스트링
구조
?key1=value1&key2=value2&key3=value3
└┬┘ └──┬──┘ └──┬──┘ └──┬──┘
시작 첫번째 구분자 세번째
(키=값) (&) (키=값)
실제 사용 예시
검색
https://google.com/search?q=javascript
└─────┬────┘
검색어: javascript
필터링
https://shop.com/products?category=shoes&color=red&size=10
└────────────┬────────────────┘
카테고리:shoes, 색:red, 사이즈:10
페이지네이션
https://blog.com/posts?page=2&limit=20
└──────┬──────┘
2페이지, 20개씩
주의사항
한글이나 특수문자는 인코딩이 필요해요:
원본: ?q=자바스크립트
인코딩: ?q=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
팁
URL Encoder로 쉽게 인코딩할 수 있어요!
6. 해시/프래그먼트 (Hash/Fragment) #️⃣
페이지 내의 특정 위치
https://example.com/docs#installation
└─────┬────┘
해시
용도
1. 페이지 내 이동
<a href="#section1">섹션 1로 이동</a>
<h2 id="section1">섹션 1</h2>
2. SPA (Single Page Application)
https://app.com/#/home
https://app.com/#/profile
https://app.com/#/settings
특징
- 서버로 전송되지 않음
- 브라우저에서만 사용
- 페이지 새로고침 없이 이동
실전 예시
예시 1: 쇼핑몰 🛍️
https://shop.example.com/products/electronics/laptops?brand=apple&price=1000-2000&sort=price#reviews
프로토콜: https
도메인: shop.example.com
경로: /products/electronics/laptops
쿼리스트링:
- brand=apple (애플 제품만)
- price=1000-2000 (가격 범위)
- sort=price (가격순 정렬)
해시: #reviews (리뷰 섹션으로 이동)
예시 2: 검색 엔진 🔍
https://www.google.com/search?q=web+development&hl=ko&page=1
프로토콜: https
서브도메인: www
도메인: google.com
경로: /search
쿼리스트링:
- q=web+development (검색어)
- hl=ko (한국어)
- page=1 (첫 페이지)
예시 3: YouTube 영상 🎥
https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=30s
프로토콜: https
도메인: www.youtube.com
경로: /watch
쿼리스트링:
- v=dQw4w9WgXcQ (영상 ID)
- t=30s (30초 시점부터 재생)
URL 파싱 도구 사용하기
URL Params Parser
- URL을 붙여넣으면 각 부분 자동 분석
- 쿼리스트링 파라미터 목록 표시
- 인코딩/디코딩 자동 처리
자주 묻는 질문 (FAQ)
Q1: www가 없어도 되나요?
A: 네! 요즘은 www를 생략하는 추세예요.
https://example.com ✅
https://www.example.com ✅ (같은 사이트)
Q2: URL 길이 제한이 있나요?
A: 기술적으로는 2000자 정도가 안전해요. 하지만 짧을수록 좋아요!
Q3: 대소문자를 구분하나요?
A: 부분에 따라 다릅니다!
도메인: 구분 안 함
Example.com = example.com ✅
경로: 구분함 (서버 설정에 따라)
/About ≠ /about ⚠️
Q4: 특수문자를 사용할 수 있나요?
A: 일부만 가능하고, 대부분은 인코딩 필요해요!
안전한 문자: A-Z a-z 0-9 - _ . ~
인코딩 필요: 공백, 한글, ?, &, #, %, / 등
좋은 URL 작성 팁 💡
1. 짧고 명확하게
❌ https://example.com/p?id=12345&cat=3&subcategory=5
✅ https://example.com/products/shoes/nike-air
2. 의미있는 단어 사용
❌ /page1.php
✅ /about-us
❌ /item?id=123
✅ /products/laptop-dell-xps
3. 소문자 사용
❌ /Products/SHOES
✅ /products/shoes
4. 하이픈(-) 사용 (언더스코어 X)
❌ /web_development
✅ /web-development
5. 불필요한 단어 제거
❌ /and-the-product-is-shoes
✅ /products/shoes
URL 디버깅
URL이 작동하지 않을 때 확인할 것:
체크리스트
- ✅ 프로토콜이 있나요? (
https://) - ✅ 도메인 철자가 맞나요?
- ✅ 경로가 존재하나요?
- ✅ 쿼리스트링 형식이 맞나요? (
?key=value&key2=value2) - ✅ 특수문자가 인코딩되었나요?
도구 사용
- URL Encoder - 인코딩 확인
- URL Params Parser - URL 구조 분석
다음 단계 🚀
URL 구조를 이해했다면:
- ✅ HTTP 요청/응답 이해하기 - URL로 어떻게 데이터를 주고받는지
- ✅ URL Encoder - URL 인코딩/디코딩 연습
- ✅ URL Params Parser - URL 분석 도구
- ✅ API Tester - URL로 API 요청하기
- ✅ 인코딩이란? - URL 인코딩 자세히 알아보기
마무리
URL은 인터넷의 주소예요! 🏠
기억할 포인트:
- 프로토콜: https:// (보안 있음) vs http:// (보안 없음)
- 도메인: 웹사이트 이름 (example.com)
- 포트: 보통 생략 (443, 80)
- 경로: 페이지 위치 (/products/shoes)
- 쿼리스트링: 추가 정보 (?color=red&size=10)
- 해시: 페이지 내 위치 (#section1)
URL 구조를 이해하면 웹 개발이 훨씬 쉬워져요! 🎉
이제 웹사이트 주소를 보면 각 부분이 무엇을 의미하는지 알 수 있겠죠?