Base64 인코더/디코더

텍스트를 Base64로 변환하고 Base64 문자열을 빠르게 디코딩합니다.

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

도구 소개

Base64는 일반 글자나 기호를 특정한 알파벳과 숫자의 조합으로 바꾸는 방식입니다. 이 도구를 사용하면 일반 텍스트를 Base64로 바꾸거나, 암호처럼 보이는 Base64를 원래 글자로 되돌릴 수 있습니다.

사용 방법

  1. 변환하려는 글자를 상자에 입력하세요.
  2. 부호화(Encode) 또는 해독(Decode) 모드를 선택하세요.
  3. 실행 버튼을 누르고 변환된 결과를 복사해 사용하세요.

이 도구를 찾는 이유

  • 특수문자가 깨지기 쉬운 인터넷 환경에서 문자를 안전하게 보냅니다.
  • 웹 주소나 코드 속에 포함된 Base64 글자를 원래 무슨 뜻이었는지 바로 해독합니다.
  • 복잡한 설정 없이 인코딩/디코딩 모드 선택만으로 손쉽게 작동합니다.

자주 묻는 질문 (FAQ)

Base64는 비밀번호 암호화인가요?

아니요! Base64는 데이터 전달 시 깨짐을 막는 표기법일 뿐, 비밀을 숨기는 보안 암호는 아닙니다.

결과 끝에 등호(=)가 붙는 이유는 무엇인가요?

컴퓨터가 데이터 길이를 일정하게 맞추기 위해 채워 넣는 빈 공간(패딩) 표시입니다.

한글이나 이모지도 변환할 수 있나요?

네! 한글, 일본어, 이모지 등 모든 언어를 깨짐 없이 변환해 드립니다.

가이드 · 인코딩 · 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과 +로 다르게 표현되는 이유, 이중 인코딩 문제까지 정리합니다.

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

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

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

AI 작업지시 프롬프트

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

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

## 목표

텍스트를 Base64로 인코딩하고 Base64 문자열을 다시 텍스트로 디코딩하는 양방향 변환기를 만든다.

## 핵심 기능

- 인코딩/디코딩 모드 전환
- UTF-8 기준 처리로 한글·이모지 지원
- 표준 Base64와 Base64URL(-, _) 선택
- 패딩(=) 포함/생략 옵션
- 결과 복사 버튼

## 입력

- 변환할 텍스트 또는 Base64 문자열
- 모드(인코딩/디코딩), 변형(표준/URL), 패딩 여부

## 출력

- 변환 결과 문자열
- 입력·출력 바이트 길이

## 예외 상황과 처리 규칙

- 디코딩 입력의 공백·줄바꿈은 제거 후 처리
- 패딩이 빠진 입력은 길이를 4의 배수로 보정
- Base64가 아닌 문자가 있으면 위치를 알려 주는 오류 메시지
- 디코딩 결과가 올바른 UTF-8이 아니면 경고 표시

## 구현 조건

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

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

- 'Man' → 'TWFu', 'Hi' → 'SGk='
- '한' → '7ZWc'이고 다시 디코딩하면 '한'
- 바이트 FB FF가 표준은 '+/8=', URL 변형은 '-_8='

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

스킬 (SKILL.md)

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

---
name: build-base64-tool
description: Base64 인코더/디코더 도구를 새로 만들거나 수정할 때 사용합니다. 텍스트를 Base64로 인코딩하고 Base64 문자열을 다시 텍스트로 디코딩하는 양방향 변환기를 만든다.
---

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

## 목표

텍스트를 Base64로 인코딩하고 Base64 문자열을 다시 텍스트로 디코딩하는 양방향 변환기를 만든다.

## 작업 순서

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

## 핵심 기능

- 인코딩/디코딩 모드 전환
- UTF-8 기준 처리로 한글·이모지 지원
- 표준 Base64와 Base64URL(-, _) 선택
- 패딩(=) 포함/생략 옵션
- 결과 복사 버튼

## 입력

- 변환할 텍스트 또는 Base64 문자열
- 모드(인코딩/디코딩), 변형(표준/URL), 패딩 여부

## 출력

- 변환 결과 문자열
- 입력·출력 바이트 길이

## 규칙

- 디코딩 입력의 공백·줄바꿈은 제거 후 처리
- 패딩이 빠진 입력은 길이를 4의 배수로 보정
- Base64가 아닌 문자가 있으면 위치를 알려 주는 오류 메시지
- 디코딩 결과가 올바른 UTF-8이 아니면 경고 표시
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.

## 검증

- [ ] 'Man' → 'TWFu', 'Hi' → 'SGk='
- [ ] '한' → '7ZWc'이고 다시 디코딩하면 '한'
- [ ] 바이트 FB FF가 표준은 '+/8=', URL 변형은 '-_8='

AI에게 맡길 때 팁

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