Pilo

URL vs URI 차이점 완벽 정리! 개발자라면 반드시 알아야 할 웹 기초 개념

🤔 URL과 URI, 비슷해 보이는데 정확히 뭐가 다른 걸까요?

웹 개발 면접에서 자주 나오는 질문이지만, 많은 개발자들이 헷갈려하는 개념을 5분만에 완벽 정리해드립니다!

🎯 URL과 URI, 왜 구분해야 할까?

웹 개발을 하다 보면 URL과 URI라는 용어를 자주 접하게 됩니다. 많은 개발자들이 이 둘을 같은 의미로 사용하지만, 실제로는 명확한 차이가 있습니다.

이런 경험 있으신가요?

  • 기술 면접에서 "URL과 URI의 차이를 설명해보세요" 질문을 받았을 때
  • API 문서를 작성하면서 어떤 용어를 써야 할지 고민될 때
  • REST API 설계 시 정확한 개념 정의가 필요할 때
  • 웹 표준을 준수한 개발을 위해 기초 개념을 확실히 하고 싶을 때

오늘 이 글을 통해 URL과 URI의 차이점을 완벽하게 이해하고, 실무에서 올바르게 사용할 수 있게 될 것입니다.

📚 URI와 URL의 기본 정의

🔍 URI (Uniform Resource Identifier)란?

URI는 "통합 자원 식별자"로, 인터넷상의 자원을 고유하게 식별하는 문자열입니다.

핵심 특징:

  • 자원의 위치나 이름 또는 둘 다로 식별
  • 인터넷상의 모든 자원에 대한 포괄적인 식별 체계
  • URL과 URN을 모두 포함하는 상위 개념

URI의 일반적인 구조:

scheme:[//authority]path[?query][#fragment]

🌐 URL (Uniform Resource Locator)란?

URL은 "통합 자원 위치 지정자"로, 인터넷상의 자원이 어디에 있는지 위치를 나타냅니다.

핵심 특징:

  • 자원의 구체적인 위치 정보 제공
  • 자원에 접근하는 방법도 함께 명시
  • URI의 하위 집합

URL의 구조:

protocol://hostname[:port]/path[?query][#fragment]

🔄 URI vs URL: 핵심 차이점 비교

📊 한눈에 보는 비교표

구분 URI URL

정의 자원을 식별하는 문자열 자원의 위치를 나타내는 문자열
목적 자원 식별 (Identify) 자원 위치 지정 (Locate)
범위 상위 개념 (URL + URN 포함) URI의 하위 개념
접근성 식별만 가능, 접근 불가능할 수 있음 항상 접근 가능한 위치 제공
예시 mailto:user@example.com https://example.com/page.html

🎯 개념적 차이점

1. 포함 관계

URI (전체)
├── URL (위치 기반 식별)
└── URN (이름 기반 식별)

2. 식별 방식

  • URI: "무엇인가?" (What)
  • URL: "어디에 있는가?" (Where)

3. 실용성

  • URI: 개념적 식별, 추상적
  • URL: 실제 접근 가능한 주소, 구체적

💡 실제 예시로 이해하는 차이점

🌟 URL 예시 (위치 지정)

웹사이트 URL

<https://www.example.com/products/smartphone>
  • 의미: example.com 서버의 products 디렉터리에 있는 smartphone 페이지
  • 특징: 브라우저에서 직접 접근 가능

FTP URL

<ftp://ftp.example.com/files/document.pdf>
  • 의미: FTP 서버의 files 디렉터리에 있는 PDF 파일
  • 특징: FTP 프로토콜로 다운로드 가능

🎨 URI 예시 (식별자)

이메일 URI

<mailto:contact@example.com>
  • 의미: 특정 이메일 주소를 식별
  • 특징: 이메일 클라이언트 실행, 직접 "위치"는 없음

전화번호 URI

tel:+82-10-1234-5678
  • 의미: 특정 전화번호를 식별
  • 특징: 전화 앱 실행, 물리적 "위치"가 아님

URN 예시

urn:isbn:9788966261208
  • 의미: ISBN으로 특정 책을 식별
  • 특징: 책의 고유 식별자, 어디서 구할 수 있는지는 별도

🔧 개발 실무에서의 활용법

💻 웹 개발에서의 구분

HTML에서의 사용


회사소개

JavaScript에서의 구분

// URL 객체 사용 (접근 가능한 주소)
const url = new URL('<https://example.com/search?q=javascript>');
console.log(url.hostname); // example.com
console.log(url.pathname); // /search

// URI 식별자로 사용
const resourceId = 'urn:product:12345';
const apiEndpoint = `https://api.example.com/resources/${resourceId}`;

🌐 REST API 설계에서의 적용

올바른 REST URI 설계

✅ 좋은 예 (명사 사용, 계층 구조)
GET /api/users/123/orders/456
POST /api/products
PUT /api/categories/electronics

❌ 나쁜 예 (동사 사용, 비논리적 구조)
GET /api/getUser?id=123
POST /api/createProduct
PUT /api/updateCategory

HTTP 메서드와 URI의 조합

GET    /api/users        # 사용자 목록 조회
POST   /api/users        # 새 사용자 생성
GET    /api/users/123    # 특정 사용자 조회
PUT    /api/users/123    # 특정 사용자 수정
DELETE /api/users/123    # 특정 사용자 삭제

📈 SEO와 웹 표준에서의 중요성

🔍 검색엔진 최적화 관점

URL 구조의 SEO 중요성

✅ SEO 친화적 URL
<https://blog.example.com/web-development/url-uri-difference>

❌ SEO 불친화적 URL
<https://blog.example.com/post.php?id=12345&category=tech>

 

🚀 실무 활용 시나리오

💼 프로젝트별 활용 가이드

1. 전자상거래 사이트

# 상품 식별 URI
/products/electronics/smartphone/galaxy-s24

# 카테고리 URL
<https://shop.example.com/categories/electronics>

# 검색 결과 URL
<https://shop.example.com/search?q=smartphone&brand=samsung>

2. 블로그/미디어 사이트

# 게시글 URI 패턴
/blog/2025/09/url-uri-difference-guide

# 태그 기반 URL
<https://blog.example.com/tags/web-development>

# 작성자 페이지 URL
<https://blog.example.com/authors/john-doe>

3. API 서비스

# RESTful API URI
GET /api/v1/users/123/posts/456
POST /api/v1/users/123/posts
PUT /api/v1/posts/456
DELETE /api/v1/posts/456

🔧 개발 도구에서의 활용

웹브라우저 개발자 도구

// 현재 페이지의 URL 정보
console.log(window.location.href);    // 전체 URL
console.log(window.location.origin);  // 프로토콜 + 도메인
console.log(window.location.pathname); // 경로 부분

Node.js에서의 URL 처리

const { URL } = require('url');

// URL 파싱
const myURL = new URL('<https://example.com/path?query=value#section>');
console.log(myURL.protocol); // https:
console.log(myURL.hostname); // example.com
console.log(myURL.pathname); // /path
console.log(myURL.search);   // ?query=value

🎓 면접 대비 핵심 포인트

💬 자주 나오는 면접 질문

Q1: URL과 URI의 차이점을 설명해주세요.

✅ 좋은 답변: "URI는 자원을 식별하는 포괄적인 개념이고, URL은 자원의 위치를 나타내는 URI의 하위 집합입니다. URL은 실제로 접근 가능한 주소를 제공하지만, URI는 단순히 식별만 할 수도 있습니다."

Q2: REST API에서 URI 설계 원칙은 무엇인가요?

✅ 좋은 답변: "명사 사용, 계층 구조 표현, 소문자 사용, 하이픈으로 단어 구분, 동사는 HTTP 메서드로 표현하는 것이 주요 원칙입니다."

📝 실무 면접 시나리오

실제 코드 작성 문제

// 주어진 URL에서 도메인과 경로를 분리하는 함수 작성
function parseURL(urlString) {
  try {
    const url = new URL(urlString);
    return {
      domain: url.hostname,
      path: url.pathname,
      query: url.search,
      fragment: url.hash
    };
  } catch (error) {
    return null; // 유효하지 않은 URL
  }
}

// 테스트
console.log(parseURL('<https://example.com/path?q=test#section>'));

🔍 고급 개념: URN과 IRI

📖 URN (Uniform Resource Name)

URN의 특징

  • 위치에 독립적인 영구 식별자
  • 자원이 이동해도 변하지 않는 이름
  • 주로 학술, 출판 분야에서 사용

URN 예시

urn:isbn:9788966261208        # 도서 ISBN
urn:uuid:12345678-1234-5678   # 고유 식별자
urn:doi:10.1000/182           # 학술 논문 DOI

🌐 IRI (Internationalized Resource Identifier)

IRI의 필요성

  • 국제화 문자 지원 (한글, 중국어, 아랍어 등)
  • 유니코드 기반 식별자
  • 다국어 도메인 지원

IRI 예시

<https://한글도메인.한국/경로/파일명.html>
<https://中文域名.中国/路径/文件.html>

⚡ 성능과 보안 고려사항

🚀 URL 최적화 방법

URL 길이 최적화

✅ 짧고 명확한 URL
/products/smartphones/galaxy-s24

❌ 불필요하게 긴 URL
/categories/electronics/mobile-devices/smartphones/samsung/galaxy/s24-ultra-256gb-black

쿼리 파라미터 최적화

✅ 의미있는 파라미터
/search?category=electronics&sort=price&order=asc

❌ 암호화된 파라미터
/search?c=1&s=2&o=1

🔒 보안 고려사항

민감 정보 URL 노출 방지

❌ 위험한 예
/admin/users?password=123456&token=secret

✅ 안전한 예
/admin/users (POST body에 민감 정보 포함)

URL 인코딩

// 특수 문자 인코딩
const query = '검색어 테스트';
const encodedQuery = encodeURIComponent(query);
// 결과: %EA%B2%80%EC%83%89%EC%96%B4%20%ED%85%8C%EC%8A%A4%ED%8A%B8

📱 모바일과 앱에서의 활용

📲 딥링크와 URL 스킴

앱 URL 스킴

myapp://profile/123        # 앱 내 프로필 페이지
myapp://product/456        # 앱 내 상품 페이지

유니버설 링크

<https://example.com/app/profile/123>
# 앱이 있으면 앱으로, 없으면 웹으로 이동

🔧 Progressive Web App (PWA)

매니페스트 파일에서의 URL 설정

{
  "name": "My App",
  "start_url": "/",
  "scope": "/app/",
  "id": "<https://example.com/app>"
}

🎯 실전 문제 해결 가이드

🐛 흔한 문제들과 해결책

1. 한글 URL 깨짐 현상

// 문제: 한글 URL이 깨져서 표시됨
const koreanURL = '<https://example.com/한글페이지>';

// 해결: URL 인코딩 적용
const encodedURL = encodeURI(koreanURL);
console.log(encodedURL); // <https://example.com/%ED%95%9C%EA%B8%80%ED%8E%98%EC%9D%B4%EC%A7%80>

2. 쿼리 파라미터 파싱 오류

// 안전한 쿼리 파라미터 파싱
function parseQueryString(url) {
  const urlObj = new URL(url);
  const params = {};

  for (const [key, value] of urlObj.searchParams) {
    params[key] = decodeURIComponent(value);
  }

  return params;
}

3. 상대 경로와 절대 경로 변환

// 상대 경로를 절대 경로로 변환
function resolveURL(base, relative) {
  return new URL(relative, base).href;
}

// 예시
resolveURL('<https://example.com/path/>', '../other.html');
// 결과: <https://example.com/other.html>

📊 2025년 웹 트렌드와 URI/URL

🔮 미래 전망

새로운 URI 스키마

ipfs://QmHash...           # 분산 파일 시스템
ar://transaction-id        # Arweave 영구 저장

AI와 시맨틱 웹

  • 구조화된 URI로 AI가 더 쉽게 이해
  • 스키마 마크업과 연계된 URI 활용 증가

웹3와 블록체인

  • NFT URI: ipfs://Qm... 형태의 분산 저장
  • ENS 도메인: myname.eth 형태의 블록체인 도메인

🎉 결론: URL과 URI 마스터하기

URL과 URI의 차이를 이해하는 것은 웹 개발의 기초 중의 기초입니다.

핵심 포인트 요약:

  1. 개념적 차이: URI는 식별자, URL은 위치 지정자
  2. 포함 관계: URL은 URI의 하위 집합
  3. 실무 적용: REST API, SEO, 웹 표준에서 중요
  4. 면접 대비: 기술 면접 단골 질문
  5. 미래 준비: 웹3, AI 시대의 새로운 URI 패턴

이제 여러분도 URL과 URI를 정확히 구분하고 활용할 수 있는 웹 개발 전문가가 되셨습니다!

💬 더 궁금한 점이 있으시면 댓글로 남겨주세요!

👍 도움이 되셨다면 동료 개발자들과 공유해주세요!

🔗 참고 자료

마지막 업데이트: 2025년 9월 23일

웹 표준 변경사항을 반영하여 주기적으로 업데이트됩니다.

저작자표시 비영리 변경금지 (새창열림)

'IT/네트워크(Network)' 관련 정보 더 얻기

더 보기

댓글

Copyright © Pilo All Rights Reserved

Designed by JB FACTORY

티스토리툴바