HTML 이스케이프란 무엇인가요?

HTML 이스케이프는 HTML에서 특별한 의미를 가진 문자를 해당 엔티티 참조로 대체하는 과정입니다. 반드시 이스케이프해야 하는 다섯 가지 문자는 앰퍼샌드(&), 작은따옴표(<), 큰따옴표(>), 큰따옴표("), 작은따옴표(')입니다. 이스케이프하지 않으면 브라우저가 이 문자들을 표시 가능한 텍스트가 아닌 마크업 지시문으로 해석하여 페이지 렌더링이 깨지고 인젝션 공격의 통로가 됩니다.

HTML 명세(WHATWG에서 관리)는 문자 참조의 두 가지 형식을 정의합니다: &처럼 이름이 있는 엔티티와 & 또는 &처럼 숫자 엔티티입니다. 이름 있는 엔티티는 소스 코드에서 읽기가 더 쉽습니다. 숫자 엔티티(10진수 또는 16진수)는 모든 유니코드 코드 포인트를 표현할 수 있어 이름 있는 별칭이 없는 문자에 유용합니다. 두 형식 모두 브라우저에서 동일한 출력을 생성합니다.

언이스케이프(디코딩이라고도 함)는 역방향 연산으로, 엔티티 참조를 리터럴 문자로 다시 변환합니다. 이는 HTML 소스에서 텍스트를 추출하거나, 시스템 간에 콘텐츠를 이동하거나, 엔티티를 이중 인코딩하는 템플릿을 디버깅할 때 흔히 사용됩니다. 이 도구는 브라우저에서 양방향을 모두 처리하므로 이스케이프 로직을 검증하거나 HTML이 많은 소스에서 일반 텍스트를 빠르게 복원할 수 있습니다.

HTML 이스케이프 도구를 사용하는 이유

큰 텍스트 블록에서 꺾쇠 괄호와 앰퍼샌드를 수동으로 교체하는 것은 지루하고 오류가 발생하기 쉽습니다. 전용 도구는 설치 없이 한 번에 입력을 변환합니다.

⚡

즉각적인 변환

텍스트 또는 HTML을 붙여넣으면 즉시 이스케이프되거나 언이스케이프된 출력이 표시됩니다. 모든 처리가 JavaScript에서 로컬로 이루어지므로 서버 왕복을 기다릴 필요가 없습니다.

🔒

개인 정보 보호 우선 처리

입력 내용이 브라우저 밖으로 나가지 않습니다. 서버로 전송되거나 어디에도 저장되지 않으므로 자격 증명, API 키 또는 내부 코드가 포함된 마크업도 안전하게 이스케이프할 수 있습니다.

📋

계정 또는 설정 불필요

페이지를 열고 바로 붙여넣기 시작하세요. 로그인 장벽도, 이메일 인증도, 설치할 소프트웨어도 없습니다. 최신 브라우저가 있는 모든 기기에서 작동합니다.

🌐

완전한 엔티티 지원

다섯 가지 필수 HTML 특수 문자와 숫자 엔티티(10진수 및 16진수)를 처리합니다. 왕복 변환을 지원합니다: 이스케이프 후 언이스케이프하면 원래 문자열이 반환됩니다.

HTML 이스케이프 활용 사례

프론트엔드 개발자: 사용자 입력 표시

사용자가 제출한 텍스트를 페이지 내에서 렌더링할 때, 브라우저가 HTML 태그로 해석하지 않도록 먼저 이스케이프하세요. 이것은 원시 문자열을 출력하는 템플릿에서 저장형 XSS에 대한 기본 방어입니다.

백엔드 엔지니어: HTML 응답 생성

문자열을 HTML로 연결하는 서버 측 코드는 삽입 전에 동적 값을 이스케이프해야 합니다. 이 도구를 사용하여 이스케이프 함수가 중첩된 따옴표 같은 엣지 케이스에서 올바른 출력을 생성하는지 확인하세요.

DevOps: HTML에 설정 삽입

HTML 페이지 내 인라인 JSON이나 셸 명령(예: script 태그나 data 속성)은 이스케이프가 필요합니다. 설정 스니펫의 꺾쇠 괄호와 앰퍼샌드가 올바르게 인코딩되었는지 확인하세요.

QA 엔지니어: XSS 벡터 테스트

일반적인 XSS 페이로드를 도구에 붙여넣어 애플리케이션의 출력이 올바르게 이스케이프된 버전과 일치하는지 확인하세요. 이스케이프된 출력을 앱이 생성한 결과와 문자 단위로 비교하세요.

기술 작가: 문서의 코드 샘플

HTML 기반 문서(Jekyll, Hugo, 커스텀 CMS)에 코드 스니펫을 게시할 때 제네릭 타입 구문과 템플릿 플레이스홀더의 꺾쇠 괄호를 이스케이프해야 합니다. 코드 샘플을 붙여넣으면 모든 특수 문자가 즉시 인코딩됩니다.

학습자: HTML 엔티티 배우기

문자를 입력하거나 붙여넣어 이름 있는 엔티티와 숫자 엔티티 형식을 확인하세요. 줄 바꿈 없는 공백, em 대시, 유니코드 기호 같은 엣지 케이스를 실험하며 HTML 문자 인코딩의 작동 방식을 이해하세요.

HTML 엔티티 참조 표

아래 표는 자주 사용되는 HTML 엔티티를 나열합니다. 다섯 가지 특수 문자(& < > " ')는 HTML 콘텐츠와 속성 값에서 항상 이스케이프해야 합니다. 다른 엔티티는 선택 사항이지만 타이핑하기 어렵거나 소스 코드에서 모호한 문자에 유용합니다.

문자	설명	이름 있는 엔티티	숫자 엔티티
&	Ampersand	&	&
<	Less-than sign	<	<
>	Greater-than sign	>	>
"	Double quote	"	"
'	Single quote / apostrophe	'	'
	Non-breaking space
©	Copyright sign	©	©
®	Registered sign	®	®
—	Em dash	—	—
’	Right single quote	’	’
€	Euro sign	€	€

이스케이프 vs. 언이스케이프: 각각의 사용 시점

두 연산은 역방향 관계입니다. 잘못된 방향을 선택하면 이중 인코딩되거나 보호되지 않은 출력이 생성됩니다.

이스케이프 (인코딩)

신뢰할 수 없거나 동적인 텍스트를 HTML에 삽입할 때 사용합니다. 리터럴 <를 &lt;로 변환하여 브라우저가 태그를 시작하는 대신 문자를 표시하게 합니다. 사용자 입력, 로그 항목 또는 마크업을 포함할 수 있는 모든 문자열을 렌더링하기 전에 적용하세요.

언이스케이프 (디코딩)

HTML 소스에서 일반 텍스트를 추출할 때 사용합니다. &lt;를 다시 <로 변환합니다. CMS에서 콘텐츠를 이동하거나, 스크래핑된 HTML을 파싱하거나, 문자 대신 엔티티 이름을 표시하는 &amp;amp; 같은 이중 인코딩 문자열을 수정할 때 적용하세요.

코드 예시

아래는 4개 언어로 작성된 HTML 이스케이프 및 언이스케이프의 실용적인 예시입니다. 각 스니펫은 양방향을 모두 다루며 중첩된 따옴표와 숫자 엔티티 같은 엣지 케이스를 처리합니다.

JavaScript (browser / Node.js)

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

Python

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

PHP

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

자주 묻는 질문

HTML 이스케이프와 URL 인코딩의 차이점은 무엇인가요?

HTML 이스케이프는 HTML에서 특별한 의미를 가진 문자(< > & " ')를 <처럼 엔티티 참조로 대체하여 텍스트로 표시되게 합니다. URL 인코딩(퍼센트 인코딩)은 URL에서 안전하지 않은 문자를 %XX 16진수 시퀀스로 대체합니다. 서로 다른 컨텍스트를 보호합니다: HTML 이스케이프는 마크업 인젝션을 방지하고, URL 인코딩은 유효한 쿼리 문자열과 경로 세그먼트를 보장합니다.

HTML에서 반드시 이스케이프해야 하는 문자는 무엇인가요?

항상 이스케이프해야 하는 다섯 가지 문자는 & (앰퍼샌드), < (작음 기호), > (큼 기호), " (속성 내 큰따옴표), ' (속성 내 작은따옴표)입니다. 이 중 하나라도 이스케이프하지 않으면 렌더링이 깨지거나 크로스 사이트 스크립팅(XSS) 취약점이 생길 수 있습니다.

'는 HTML5에서 유효한가요?

예. ' 이름 엔티티는 HTML5 명세에 정의되어 있으며 모든 최신 브라우저에서 지원됩니다. HTML 4에는 없었으며, HTML 4는 &, <, >, "만 인식했습니다. 매우 오래된 HTML 4 파서를 지원해야 한다면 숫자 형식 '를 대신 사용하세요.

&amp;와 같은 이중 인코딩된 HTML 엔티티를 어떻게 수정하나요?

이중 인코딩은 이미 이스케이프된 문자열이 이스케이프 함수를 두 번 통과할 때 발생합니다. 수정 방법은 출력이 안정될 때까지 언이스케이프하는 것입니다. 이중 인코딩된 문자열을 이 도구에 언이스케이프 모드로 붙여넣고, & 참조가 남아 있으면 다시 실행하세요. 이중 인코딩을 방지하려면 이스케이프 함수를 적용하기 전에 입력이 이미 이스케이프되어 있는지 확인하세요.

HTML 엔티티를 JavaScript 문자열 안에서 사용할 수 있나요?

HTML 엔티티는 JavaScript 엔진이 아닌 HTML 파서에 의해 해석됩니다. script 블록 내에서 코드는 HTML 파서가 페이지를 처리한 후 실행되므로, script 블록의 <는 JavaScript가 보기 전에 <로 변환됩니다. 인라인 이벤트 핸들러(onclick 등)의 경우 속성 값이 먼저 HTML 디코딩된 다음 JavaScript로 실행됩니다. 외부 .js 파일에서는 엔티티에 특별한 의미가 없으며 리터럴 텍스트로 처리됩니다.

PHP의 htmlspecialchars와 htmlentities의 차이점은 무엇인가요?

htmlspecialchars()는 HTML 구조에 영향을 미치는 다섯 가지 특수 문자(& < > " ')만 이스케이프합니다. htmlentities()는 이 다섯 가지 외에 저작권 기호와 악센트가 있는 문자처럼 이름 있는 HTML 엔티티가 있는 모든 문자를 이스케이프합니다. 보안 목적으로는 ENT_QUOTES와 함께 htmlspecialchars()로 충분합니다. htmlentities()는 UTF-8을 처리할 수 없는 시스템에 ASCII 안전 출력이 필요할 때 유용합니다.

HTML 이스케이프만으로 XSS를 방지할 수 있나요?

HTML 이스케이프는 가장 일반적인 경우인 HTML 요소 콘텐츠나 속성 값에 신뢰할 수 없는 텍스트를 삽입할 때의 XSS를 방지합니다. 그러나 다른 인젝션 컨텍스트는 보호하지 못합니다. 사용자 데이터를 script 블록에 삽입할 때는 JavaScript 문자열 이스케이프가 필요합니다. style 속성에 삽입할 때는 CSS 이스케이프가 필요합니다. URL 속성(href, src)에 삽입할 때는 URL 유효성 검사와 인코딩이 필요합니다. 완전한 XSS 방어는 모든 삽입 지점에서 컨텍스트별 이스케이프를 적용합니다.

HTML Escape / Unescape