URL 인코더/디코더

텍스트를 URL 안전 형식으로 변환하거나 퍼센트 인코딩 URL을 디코딩합니다.

도구 열기 도구 목록으로
// about

도구 소개

인터넷 웹 주소에는 띄어쓰기나 특수문자를 그대로 쓸 수 없습니다. 이 도구는 웹 주소에 쓸 수 없는 글자를 안전한 기호(% 형식)로 바꾸어 주거나, 인코딩된 주소를 사람이 읽기 쉬운 원래 글자로 복원해 줍니다.

사용 방법

  1. 변환하려는 주소나 문장을 상자에 붙여넣으세요.
  2. 인코딩(변환) 또는 디코딩(해독) 옵션을 선택하세요.
  3. 실행 버튼을 누르고 변환된 주소를 복사해 사용하세요.

이 도구를 찾는 이유

  • 한글이나 띄어쓰기가 들어간 주소가 깨지지 않도록 안전하게 변환합니다.
  • %20 같은 복잡한 기호로 가득 찬 주소를 깨끗한 원래 문장으로 읽어냅니다.
  • 별도 프로그램 설치 없이 브라우저에서 즉시 실행됩니다.

자주 묻는 질문 (FAQ)

웹 주소에 %20 같은 문자가 왜 생기나요?

인터넷 브라우저가 빈칸(띄어쓰기)을 구분하기 위해 %20 기호로 자동 변경하기 때문입니다.

언제 URL 인코딩을 해야 하나요?

웹 주소 뒤에 파라미터를 붙일 때 한글이나 특수문자가 포함되어 있다면 꼭 인코딩해야 합니다.

무료로 계속 이용할 수 있나요?

네! 횟수 제한 없이 누구에게나 100% 무료로 제공됩니다.

가이드 · 인코딩 · 6분 읽기

Base64 인코딩 완벽 이해: 원리, 쓰임새, 흔한 오해

이메일 첨부파일, 이미지 data URI, JWT 토큰까지. 개발을 하다 보면 Base64 문자열을 매일 마주칩니다. 이 글에서는 Base64가 정확히 무엇을 하는지, 왜 결과가 원본보다 길어지는지, 언제 써야 하고 언제 쓰면 안 되는지를 정리합니다.

컴퓨터의 모든 데이터는 결국 0과 1로 이루어진 바이트입니다. 그런데 이메일, HTTP 헤더, JSON, URL처럼 '텍스트'만 안전하게 오갈 수 있는 통로가 의외로 많습니다. 이런 통로에 이미지 파일이나 암호화된 바이트를 그대로 넣으면 제어 문자나 줄바꿈이 섞여 데이터가 깨지거나, 중간 시스템이 내용을 임의로 바꿔 버릴 수 있습니다.

Man   → TWFu
Hi    → SGk=
한    → 7ZWc
안녕  → 7JWI64WV
Base64가 3바이트를 4글자로 바꾸는 원리, 끝에 붙는 = 기호의 의미, Base64URL과의 차이, 그리고 Base64가 암호화가 아닌 이유를 예시와 함께 설명합니다.
가이드 읽기 →

관련 가이드

인코딩 5분 읽기

URL 인코딩(퍼센트 인코딩) 가이드: 한글 주소가 %EC%95%88처럼 바뀌는 이유

URL에 쓸 수 있는 문자와 없는 문자, 퍼센트 인코딩의 동작 방식, 공백이 %20과 +로 다르게 표현되는 이유, 이중 인코딩 문제까지 정리합니다.

가이드 읽기
QR·바코드 4분 읽기

QR 코드 제대로 만들기: 오류 정정 레벨, 인쇄 크기, 바코드와의 차이

QR 코드의 구조와 오류 정정 레벨(L·M·Q·H), 인쇄물에 넣을 때 필요한 최소 크기와 여백, 잘 안 찍히는 QR의 원인, 상품 바코드와의 차이를 정리합니다.

가이드 읽기
AI로 직접 만들기

이 도구를 AI로 직접 만들어 보세요

나만의 버전이 필요하다면 아래 작업지시 프롬프트를 AI 채팅에 붙여 넣거나, 스킬 파일을 AI 코딩 에이전트에 저장하세요. 저희가 이 도구를 만들 때 정리한 기능, 예외 상황, 테스트 케이스가 그대로 담겨 있습니다.

AI 작업지시 프롬프트

Claude, ChatGPT, Gemini 같은 AI 채팅에 그대로 붙여 넣으세요.

당신은 숙련된 풀스택 웹 개발자입니다. 아래 요구사항에 맞춰 "URL 인코더/디코더" 웹 도구를 만들어 주세요.

## 목표

URL 전체 또는 쿼리 파라미터 값을 퍼센트 인코딩·디코딩하는 도구를 만든다.

## 핵심 기능

- 인코딩/디코딩 모드
- 구성 요소 모드(encodeURIComponent)와 전체 URL 모드(encodeURI) 선택
- 공백을 %20 또는 +로 표현하는 옵션
- 쿼리 문자열을 키-값 표로 분해해 보여 주기
- 결과 복사

## 입력

- URL 또는 인코딩할 값
- 모드와 공백 표현 옵션

## 출력

- 인코딩/디코딩 결과
- 쿼리 파라미터 목록(키, 디코딩된 값)

## 예외 상황과 처리 규칙

- %2520처럼 이중 인코딩이 의심되면 안내 표시
- 잘못된 퍼센트 시퀀스(%G1, 끝의 %)는 오류 대신 원문 유지 후 경고
- + 기호를 공백으로 해석할지 사용자 옵션으로 결정
- UTF-8이 아닌 바이트 시퀀스 처리

## 구현 조건

- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
- 모바일에서도 쓰기 편한 반응형 UI로 만들고, 입력 요소에는 레이블을 달아 키보드로도 조작할 수 있게 해 주세요.
- 결과에는 '복사' 버튼을 달고, 잘못된 입력에는 이해하기 쉬운 한국어 오류 메시지를 보여 주세요.
- 핵심 로직은 UI와 분리된 함수로 작성해 단위 테스트를 할 수 있게 해 주세요.

## 완료 기준 (테스트 케이스)

- 'a b&c=d' 구성 요소 인코딩 → 'a%20b%26c%3Dd'
- '안녕' → '%EC%95%88%EB%85%95'
- 'https://x.com/a?q=1' 전체 URL 모드에서 :, /, ?, = 유지

먼저 구현 계획을 5줄 이내로 설명한 다음 전체 코드를 작성하고, 마지막에 위 테스트 케이스를 확인하는 방법을 알려 주세요.

스킬 (SKILL.md)

Claude Code 같은 AI 코딩 에이전트에서 .claude/skills/build-url-codec/SKILL.md 경로로 저장하면, 이 도구를 만들거나 고칠 때마다 다시 쓸 수 있습니다.

---
name: build-url-codec
description: URL 인코더/디코더 도구를 새로 만들거나 수정할 때 사용합니다. URL 전체 또는 쿼리 파라미터 값을 퍼센트 인코딩·디코딩하는 도구를 만든다.
---

# URL 인코더/디코더 만들기

## 목표

URL 전체 또는 쿼리 파라미터 값을 퍼센트 인코딩·디코딩하는 도구를 만든다.

## 작업 순서

1. 아래 필수 기능, 입력, 출력을 확인하고 빠진 정보가 있으면 먼저 질문합니다.
2. 핵심 로직을 UI와 분리된 순수 함수로 구현합니다.
3. 검증 목록의 테스트 케이스로 로직을 확인합니다.
4. 입력 폼, 결과 영역, 복사 버튼을 갖춘 반응형 UI를 만듭니다.
5. 규칙에 적힌 예외 상황을 하나씩 재현해 보고 오류 메시지를 다듬습니다.

## 핵심 기능

- 인코딩/디코딩 모드
- 구성 요소 모드(encodeURIComponent)와 전체 URL 모드(encodeURI) 선택
- 공백을 %20 또는 +로 표현하는 옵션
- 쿼리 문자열을 키-값 표로 분해해 보여 주기
- 결과 복사

## 입력

- URL 또는 인코딩할 값
- 모드와 공백 표현 옵션

## 출력

- 인코딩/디코딩 결과
- 쿼리 파라미터 목록(키, 디코딩된 값)

## 규칙

- %2520처럼 이중 인코딩이 의심되면 안내 표시
- 잘못된 퍼센트 시퀀스(%G1, 끝의 %)는 오류 대신 원문 유지 후 경고
- + 기호를 공백으로 해석할지 사용자 옵션으로 결정
- UTF-8이 아닌 바이트 시퀀스 처리
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.

## 검증

- [ ] 'a b&c=d' 구성 요소 인코딩 → 'a%20b%26c%3Dd'
- [ ] '안녕' → '%EC%95%88%EB%85%95'
- [ ] 'https://x.com/a?q=1' 전체 URL 모드에서 :, /, ?, = 유지

AI에게 맡길 때 팁

  • 첫 줄에 사용 중인 기술(예: React, Vue, 순수 HTML)을 적으면 프로젝트에 맞는 코드를 받을 수 있습니다.
  • 코드를 받기 전에 목록의 테스트 케이스를 실제로 실행하고 결과를 보여 달라고 요청하세요.
  • 실제 비밀번호, 고객 데이터, API 키는 프롬프트에 넣지 말고 예시 값으로 바꿔 쓰세요.