Base64는 원래 데이터 전송의 안정성을 위해 만들어진 인코딩 방식이지만, 텍스트나 코드 일부를 사람이 바로 읽기 어려운 형태로 변환하는 데도 활용할 수 있습니다. 이를 적절히 사용하면, 일반 방문자는 문제없이 콘텐츠를 볼 수 있지만 단순 복사나 도용에는 장벽을 만들 수 있습니다. 특히 티스토리 블로그 본문에 Base64 인코딩디코딩 기능을 결합하면, 콘텐츠 노출 방식은 유지하면서 무단 도용 방지 효과를 기대할 수 있습니다.
이번 글에서는 Base64 개념부터 인코딩 방식, 활용 목적, 그리고 티스토리 블로그에서 자동 디코딩 스크립트를 적용하는 방법까지 하나씩 살펴보겠습니다.
1. Base64란 무엇인가?
Base64는 바이너리 데이터를 문자열로 변환하는 인코딩 방식입니다.
쉽게 말해, 텍스트나 이미지 같은 데이터를 사람이 읽을 수 있는 영문자숫자 조합으로 변환하는 기술입니다.
이 이름에서 **”Base64″**는 변환 결과가 총 64개의 문자 집합을 사용한다는 의미입니다.
AZ, az, 09, +, /
- 패딩 문자: =
Base64는 HTML, CSS, JSON, 이메일 등 문자 기반 전송 매체에서 바이너리 데이터를 안전하게 주고받기 위해 만들어졌습니다.
2. Base64 인코딩 방식
Base64의 동작 원리는 간단합니다.
- 원본 데이터를 바이너리(이진) 형식으로 변환
- 이진 데이터를 6비트 단위로 쪼갬
- 각 6비트 값을 0~63 범위의 숫자로 매핑
- 매핑된 숫자를 Base64 문자 집합에서 대응되는 문자로 변환
- 6비트 단위로 나눴을 때 딱 맞지 않는 경우, = 기호로 패딩 처리
예시:
원본: "한글"
1) UTF-8 이진 변환
2) 6비트씩 분리
3) Base64 문자로 매핑
4) 결과: 7ZWc6riA
3. Base64 사용 목적
Base64의 가장 흔한 활용 목적은 데이터 전송 안전성입니다.
- 텍스트 환경에서 이진 데이터 전송
- 예: 이메일 첨부파일, JSON 데이터 내 이미지
- URL에 안전하게 데이터 포함
- 특수문자나 줄바꿈 없이 안전하게 포함 가능
- 콘텐츠 난독화
- 코드나 텍스트를 일반인이 바로 읽기 어렵게 만들어 무단 도용 방지
- 간단한 데이터 숨김
- 비밀번호 암호화 용도로는 절대 사용하면 안 되지만, 민감하지 않은 데이터를 가볍게 가리기에는 유용
주의: Base64는 암호화가 아닌 “인코딩”입니다. 즉, 보안성이 강하지 않으니 민감한 정보 보호 목적에는 적합하지 않습니다.
콘텐츠 난독화 디코딩 프로그램
무단 도용방지를 위한 콘텐츠 난독화 방법
한글 Base64 인코딩
Base64 → 원문 디코딩 도구
Base64 디코딩 (한글 지원)
티스토리 블로그에서 Base64로 인코딩된 콘텐츠 자동 디코딩하기
이 코드는 Base64로 인코딩된 텍스트를 자동으로 디코딩해, 사람이 읽을 수 있는 HTML로 변환해 주는 기능을 합니다.
특히, 티스토리 블로그 본문 영역에서만 작동하도록 설계되어, 다른 부분(메뉴, 사이드바, 스크립트 등)과 충돌을 최소화했습니다.
핵심 기능 정리
| 기능 | 설명 |
| isBase64() | 문자열이 Base64 형식인지 검사 |
| decodeBase64ToHTML() | Base64 문자열을 HTML로 변환 |
| decodeTextNodes() | 모든 텍스트 노드를 순회하며 Base64를 찾으면 변환 |
| 본문 영역 제한 | .tt_article_useless_p_margin.contents_style 클래스 영역만 실행 |
티스토리 블로그에 적용하는 방법
적용 절차
- 티스토리 관리자 페이지 접속
- 스킨 편집HTML 편집으로 이동
- body 태그 닫기 전(/body 바로 위)에 아래 코드 붙여넣기
(function() {
// 1. Base64 문자열인지 검사
function isBase64(str) {
if (!str) return false;
str = str.replace(/s+/g, '');
return /^[A-Za-z0-9+/]{8,}={0,2}$/.test(str);
}
// 2. Base64 HTML 변환
function decodeBase64ToHTML(b64) {
try {
const bin = atob(b64); // Base64 이진 문자열
const bytes = Uint8Array.from(bin, c = c.charCodeAt(0)); // 이진 바이트 배열
return new TextDecoder('utf-8').decode(bytes); // 바이트 배열 UTF-8 문자열
} catch (e) {
return b64; // 디코딩 실패 시 원본 그대로 반환
}
}
// 3. 본문 내 모든 텍스트 노드 탐색 및 디코딩
function decodeTextNodes(node) {
node.childNodes.forEach(child = {
if (child.nodeType === Node.TEXT_NODE) {
const trimmed = child.textContent.trim();
if (isBase64(trimmed)) {
const span = document.createElement('span');
span.innerHTML = decodeBase64ToHTML(trimmed);
child.replaceWith(...span.childNodes);
}
} else if (child.nodeType === Node.ELEMENT_NODE) {
const tag = child.tagName.toLowerCase();
// iframe, figure, script, 이미지 치환자, index-checker-container 보호
if (
tag !== 'iframe' &&
tag !== 'figure' &&
tag !== 'script' &&
!child.textContent.includes('[##_Image|') &&
child.id !== 'index-checker-container'
) {
decodeTextNodes(child); // 재귀 탐색
}
}
});
}
// 4. 티스토리 본문 영역만 대상으로 실행
const articleDiv = document.querySelector('.tt_article_useless_p_margin.contents_style');
if (articleDiv) {
decodeTextNodes(articleDiv);
}
})();
사용 시 주의사항
- 보안 기능이 아님
이 스크립트는 난독화를 풀어주는 기능일 뿐, 보안 강화를 위한 암호화가 아닙니다. - 본문 외 영역 변경 방지
코드에서 이미 iframe, script, 이미지 치환자 등은 디코딩 대상에서 제외했습니다. - 호환성
대부분의 최신 브라우저에서 정상 동작하지만, 매우 오래된 브라우저(IE 10 이하)에서는 작동하지 않을 수 있습니다.
Base64란 무엇이며, 블로그에서 왜 사용하나요?
Base64는 텍스트나 이미지를 사람이 바로 읽기 어려운 문자열로 변환하는 인코딩 방식입니다. 티스토리 블로그에서는 콘텐츠 일부를 난독화하여 무단 복사나 크롤링을 방지하면서, 일반 방문자는 문제없이 글을 볼 수 있도록 활용할 수 있습니다.
티스토리 블로그에서 Base64 콘텐츠를 자동으로 디코딩하려면 어떻게 해야 하나요?
본문 영역에만 적용되는 JavaScript를 삽입하면 가능합니다. 이 스크립트는 Base64 형식인지 검사하고, 텍스트 노드를 탐색해 HTML로 변환합니다. 스킨 편집 > HTML 편집 > </body> 바로 위에 코드를 넣으면 적용됩니다.
Base64 난독화를 사용할 때 주의할 점은 무엇인가요?
Base64는 암호화가 아니므로 민감한 정보 보호에는 적합하지 않습니다. 또한 본문 외 영역은 디코딩 대상에서 제외되어야 하며, 오래된 브라우저에서는 호환되지 않을 수 있습니다. 난독화 목적은 주로 무단 도용 방지에 국한됩니다.
https://everydayhub-en.blogspot.com/2025/08/blog-post.html