🔄

Base64 인코더/디코더

텍스트와 파일을 Base64로 변환하거나 Base64를 원본으로 복원합니다

🔄⚙️ 제어판

변환 모드

빠른 작업

텍스트 입력

0 글자

Base64 출력

0 글자

실무 활용 시나리오

웹 개발

이미지를 Base64로 인코딩하여 CSS나 HTML에 직접 임베드하면 HTTP 요청을 줄이고 로딩 속도를 개선할 수 있습니다.

이메일 전송

바이너리 파일을 Base64로 변환하여 이메일 시스템에서 안전하게 전송하거나 JSON API를 통해 파일 데이터를 주고받을 수 있습니다.

API 인증

인증 토큰이나 API 키를 Base64로 인코딩하여 HTTP 헤더(Authorization: Basic)에 안전하게 포함시킬 수 있습니다.

데이터 저장

바이너리 데이터를 텍스트 형식으로 변환하여 JSON 파일이나 데이터베이스에 저장하고, 필요 시 원본으로 복원할 수 있습니다.

🚀 개발자 가이드

📦

JavaScript 구현

브라우저 네이티브 API: btoa() (인코딩), atob() (디코딩) 사용

Node.js: Buffer.from(data).toString('base64') 또는 Buffer.from(base64, 'base64')

파일 처리: FileReader API로 읽고 result.split(',')[1]로 Base64 추출

대용량 파일: 스트림 방식으로 청크 단위 처리 권장

🔧

실전 활용 패턴

Data URI: [MIME타입];base64,[Base64문자열] 형식으로 HTML/CSS에 임베드

API 전송: JSON payload에 바이너리 데이터 포함 시 Base64 인코딩 필수

이미지 최적화: 작은 아이콘만 인라인, 큰 이미지는 CDN 사용

캐싱 전략: Base64 인코딩 결과를 localStorage나 메모리에 캐시

⚡

성능 및 보안

성능: 33% 크기 증가로 네트워크 비용 상승, 10KB 이하 파일만 인라인 권장

보안: Base64는 암호화가 아니므로 민감 데이터는 반드시 HTTPS와 함께 사용

브라우저 제한: btoa()는 Latin1만 지원, UTF-8은 encodeURIComponent 변환 필요

에러 처리: 잘못된 Base64 문자열 디코딩 시 try-catch로 예외 처리

전문가 팁

Base64는 암호화가 아닙니다

Base64는 데이터를 감추는 것이 아니라 전송 가능한 형식으로 변환하는 인코딩 방식입니다. 보안이 필요하면 암호화를 별도로 적용해야 합니다.

파일 크기 증가 고려

Base64 인코딩 시 원본 크기의 약 33% 증가합니다. 대용량 파일은 직접 업로드하는 것이 효율적이며, 10KB 이하의 작은 파일에만 사용을 권장합니다.

Data URI 이미지 임베딩

Data URI로 이미지를 임베드할 때는 10KB 이하의 작은 아이콘이나 로고에만 사용하세요. 큰 이미지는 성능 저하의 원인이 됩니다.

패딩 문자 유지

인코딩된 문자열 끝의 '=' 기호는 패딩으로, 데이터 길이를 맞추기 위한 것이므로 절대 제거하면 안 됩니다. 디코딩 오류의 원인이 됩니다.

🚀 고급 활용법

API 통합 패턴

RESTful API나 GraphQL에서 바이너리 데이터를 JSON으로 전송할 때 Base64를 활용하세요. multipart/form-data보다 구현이 간단합니다.

fetch('/api/upload', { method: 'POST', body: JSON.stringify({ image: base64Data }) });

성능 최적화

대용량 파일은 청크 단위로 분할하여 Base64 인코딩하면 메모리 사용량을 줄일 수 있습니다. Web Worker를 활용하면 UI 블로킹을 방지할 수 있습니다.

const worker = new Worker('base64-worker.js'); worker.postMessage(fileData);

보안 고려사항

Base64 인코딩은 암호화가 아니므로 민감한 데이터는 TLS/SSL로 전송 계층을 보호하고, 필요시 AES 등의 암호화를 추가로 적용하세요.

// Bad: Base64만 사용 // Good: HTTPS + Base64 + AES 암호화

브라우저 호환성

btoa/atob는 IE10+에서 지원되며, UTF-8 문자는 encodeURIComponent로 전처리가 필요합니다. 최신 브라우저에서는 TextEncoder/TextDecoder 사용을 권장합니다.

const encoded = btoa(encodeURIComponent(utf8String));

자주 묻는 질문

Base64는 암호화 방법인가요?

아니요. Base64는 인코딩 방법으로, 바이너리 데이터를 텍스트로 변환할 뿐 보안을 제공하지 않습니다. 누구나 쉽게 디코딩할 수 있습니다.

이미지를 Base64로 변환하면 좋은 점은?

HTTP 요청 수를 줄여 로딩 속도를 개선하고, CSS나 HTML에 직접 임베드할 수 있습니다. 단, 파일 크기가 33% 증가하므로 작은 이미지에만 권장합니다.

최대 처리 가능한 파일 크기는?

브라우저 메모리에 따라 다르지만 10MB 이하를 권장합니다. 큰 파일은 서버 사이드에서 처리하세요.

인코딩 후 파일 크기가 왜 커지나요?

Base64는 6비트 데이터를 8비트 ASCII 문자로 표현하므로, 원본 대비 약 33% 크기가 증가합니다.

디코딩 시 원본 파일과 완전히 같나요?

네. Base64는 무손실 인코딩 방식으로, 디코딩하면 원본과 완전히 동일한 바이너리 데이터를 얻을 수 있습니다.

🛠️ 다른 유용한 도구들

📊

글자 수 세기

텍스트의 글자 수, 단어 수, 문단 수를 실시간으로 측정합니다

📝

줄바꿈 제거

텍스트에서 줄바꿈을 제거하거나 중복 공백을 정리합니다

🔧

공백 제거

텍스트의 앞뒤, 전체, 중복 공백을 제거합니다

전체 도구 보기 →

🎯 재미있는 테스트

🐱

나는 어떤 동물일까?

5개 질문으로 알아보는 나의 동물 유형!

🐱🐕🦉🐻🦊🐰

테스트 시작하기

더 많은 테스트 보기 →

뚝딱툴