인코딩이란? 🔐
웹 개발을 하다 보면 "인코딩", "Base64", "URL 인코딩" 같은 용어를 자주 듣게 됩니다. 도대체 인코딩이 뭘까요? 아주 쉽게 설명해드릴게요!
인코딩을 일상생활로 비유하면?
인코딩을 번역으로 비유해볼까요?
번역 이야기 🌏
한국어로 "안녕하세요"를 다른 형태로 바꿔볼까요?
- 영어로: "Hello" (영어 인코딩)
- 숫자로: "97 110 110 121 111 110 103" (숫자 인코딩)
- 이모지로: "👋😊" (이모지 인코딩)
인코딩 = 데이터를 다른 형식으로 변환하는 것
인코딩의 정의
인코딩 (Encoding)
- 데이터를 특정 형식으로 변환하는 과정
- 목적: 전송, 저장, 표시 등을 위해
디코딩 (Decoding)
- 인코딩된 데이터를 원래대로 되돌리는 과정
원본 데이터 → [인코딩] → 변환된 데이터 → [디코딩] → 원본 데이터
"안녕" → "%EC%95%88%EB%85%95" → "안녕"
왜 인코딩이 필요할까?
1. 안전한 전송 📤
특수문자나 한글은 인터넷에서 깨질 수 있어요.
원본: "안녕하세요"
URL 인코딩: "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94"
→ 인터넷에서 안전하게 전송!
2. 바이너리 데이터를 텍스트로 🖼️
이미지나 파일을 텍스트로 바꿔서 전송할 수 있어요.
이미지 파일 → Base64 인코딩 → 텍스트 문자열
→ JSON이나 HTML에 포함 가능!
3. 특수문자 처리 ✨
URL에는 사용할 수 없는 문자들이 있어요.
공백: " " → "%20"
&: "&" → "%26"
#: "#" → "%23"
주요 인코딩 종류
1. Base64 인코딩 📦
이미지나 파일을 텍스트로 변환할 때 사용!
원본 텍스트:
Hello World
Base64로 인코딩:
SGVsbG8gV29ybGQ=
특징:
- 바이너리 데이터를 텍스트로 변환
- 이메일, JSON, HTML에서 사용
- 데이터 크기가 약 33% 증가
- 암호화 아님! (누구나 디코딩 가능)
사용 예시:
<!-- 이미지를 HTML에 직접 포함 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAA..." />
2. URL 인코딩 (Percent Encoding) 🔗
URL에 한글이나 특수문자를 안전하게 넣을 때!
원본:
https://example.com/search?q=안녕하세요
URL 인코딩:
https://example.com/search?q=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94
인코딩이 필요한 문자:
공백: " " → "%20" 또는 "+"
한글: "안녕" → "%EC%95%88%EB%85%95"
특수문자: "?" → "%3F"
"&" → "%26"
"=" → "%3D"
"#" → "%23"
안전한 문자 (인코딩 불필요):
A-Z, a-z, 0-9, -, _, ., ~
3. HTML Entity 인코딩 📝
HTML에서 특수문자를 표시할 때!
원본:
<div>Hello & Goodbye</div>
HTML Entity:
<div>Hello & Goodbye</div>
주요 엔티티:
< → <
> → >
& → &
" → "
' → '
공백 →
4. UTF-8 인코딩 🌏
전 세계 모든 언어를 표현할 수 있는 인코딩!
특징:
- 한글, 중국어, 이모지 등 모든 문자 표현 가능
- 웹 표준 인코딩
- 영어는 1바이트, 한글은 3바이트
예시:
영어 "A": 1바이트
한글 "가": 3바이트
이모지 "😊": 4바이트
실전 예시
예시 1: 검색 URL 🔍
사용자가 검색:
"자바스크립트 배우기"
브라우저가 보내는 URL:
https://google.com/search?q=%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8+%EB%B0%B0%EC%9A%B0%EA%B8%B0
예시 2: 이미지를 Base64로 📸
원본 이미지:
logo.png (10KB)
Base64 인코딩:
iVBORw0KGgoAAAANSUhEUgAAAAUA... (13KB의 텍스트)
HTML에 사용:
<img src="data:image/png;base64,iVBORw0KGgo..." />
예시 3: 이메일에 첨부파일 📧
이메일은 텍스트만 보낼 수 있어요. 파일은 Base64로 인코딩해서 보냅니다!
파일 → Base64 인코딩 → 이메일 본문에 포함 → 받는 사람이 디코딩
인코딩 도구 사용하기
우리 사이트의 도구들로 직접 인코딩/디코딩해보세요!
Base64 인코딩/디코딩
- 텍스트를 Base64로 변환
- Base64를 텍스트로 변환
- 이미지를 Base64로 변환
URL 인코딩/디코딩
- URL 안전한 문자열로 변환
- URL 디코딩으로 원본 확인
HTML Entity 변환
- 특수문자를 HTML 엔티티로
- HTML 엔티티를 특수문자로
실습: 직접 해보기
실습 1: Base64 인코딩
- Base64 Encoder 열기
- "Hello World" 입력
- Encode 버튼 클릭
- 결과:
SGVsbG8gV29ybGQ= - Decode로 다시 "Hello World" 확인!
실습 2: URL 인코딩
- URL Encoder 열기
- "안녕하세요" 입력
- 인코딩 결과 확인
- 디코딩으로 원본 확인!
인코딩 vs 암호화
인코딩 🔄
- 목적: 데이터 형식 변환
- 보안: 없음 (누구나 디코딩 가능)
- 예: Base64, URL 인코딩
"Hello" → Base64 → "SGVsbG8="
누구나 디코딩 가능! 🔓
암호화 🔐
- 목적: 데이터 보호
- 보안: 있음 (비밀키 필요)
- 예: AES, RSA
"Hello" → 암호화 → "x8f2k9a..."
비밀키 없으면 해독 불가! 🔒
Warning
중요: Base64는 암호화가 아닙니다! 누구나 쉽게 디코딩할 수 있으므로 비밀번호나 중요한 정보를 Base64로만 보호하면 안 돼요.
자주 사용하는 경우
1. 웹 개발 🌐
// URL 인코딩
const query = encodeURIComponent('안녕하세요');
// "%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94"
// Base64 인코딩
const encoded = btoa('Hello World');
// "SGVsbG8gV29ybGQ="
2. API 통신 📡
{
"image": "data:image/png;base64,iVBORw0KGgo...",
"query": "%EC%95%88%EB%85%95"
}
3. 데이터 저장 💾
이미지 파일 → Base64 → 데이터베이스에 텍스트로 저장
흔한 실수와 해결법
❌ 실수 1: 한글 URL을 그대로 사용
// 잘못된 방법
fetch('https://api.com/search?q=안녕') // ❌ 에러 발생 가능
✅ 올바른 방법:
const query = encodeURIComponent('안녕');
fetch(`https://api.com/search?q=${query}`) // ✅ 올바름
❌ 실수 2: Base64를 암호화로 착각
// Base64는 암호화가 아닙니다!
const password = btoa('mypassword123'); // ❌ 보안 취약
// 누구나 atob(password)로 디코딩 가능!
✅ 올바른 방법:
// 비밀번호는 해시화 사용
import bcrypt from 'bcrypt';
const hashed = await bcrypt.hash('mypassword123', 10); // ✅
❌ 실수 3: 중복 인코딩
const text = '안녕';
const encoded1 = encodeURIComponent(text);
const encoded2 = encodeURIComponent(encoded1); // ❌ 중복!
자주 묻는 질문 (FAQ)
Q1: Base64는 왜 끝에 "="이 붙나요?
A: 패딩(padding)입니다! 데이터 길이를 4의 배수로 맞추기 위해 사용해요.
"A" → "QQ==" (패딩 2개)
"AB" → "QUI=" (패딩 1개)
"ABC" → "QUJD" (패딩 없음)
Q2: URL 인코딩에서 공백이 "+" 또는 "%20"인 이유는?
A: 두 가지 방식이 있어요!
- Form URL Encoded: 공백 →
+ - Percent Encoding: 공백 →
%20둘 다 정상이지만,%20이 더 표준적입니다.
Q3: UTF-8이 뭔가요?
A: 전 세계 모든 문자를 표현할 수 있는 인코딩 방식입니다. 웹 표준이에요!
Q4: 인코딩하면 데이터가 커지나요?
A: 네!
- Base64: 약 33% 증가
- URL 인코딩: 한글은 약 300% 증가
- 영어: 거의 변화 없음
언제 어떤 인코딩을 사용할까?
| 상황 | 인코딩 | 도구 |
|---|---|---|
| 이미지를 HTML/JSON에 포함 | Base64 | Base64 Encoder |
| URL에 한글/특수문자 | URL 인코딩 | URL Encoder |
HTML에 <, >, & 표시 | HTML Entity | HTML Entity Converter |
| 국제 문자 표현 | UTF-8 | 웹 표준 (자동) |
다음 단계 🚀
인코딩을 이해했다면:
- ✅ Base64 Encoder - Base64 인코딩 연습
- ✅ URL Encoder - URL 인코딩 연습
- ✅ HTML Entity Converter - HTML 엔티티 변환
- ✅ URL 구조 알아보기 - URL이 어떻게 구성되는지
- ✅ Image to Base64 - 이미지 Base64 변환
마무리
인코딩은 어렵지 않아요! 데이터를 다른 형식으로 바꾸는 것일 뿐이에요.
기억할 포인트:
- Base64: 바이너리 → 텍스트 (암호화 아님!)
- URL 인코딩: 한글/특수문자 → URL 안전한 문자
- HTML Entity: HTML 특수문자 → 엔티티 코드
- UTF-8: 전 세계 모든 문자 표현
도구로 직접 실험하다 보면 금방 익숙해질 거예요! 🎉