HTML 이스케이프 — 다섯 글자와, 되돌릴 때 생기는 함정
브라우저에게 < 는 글자가 아니라 태그의 시작입니다. 화면에 < 를 그대로 보여주려면 < 라고 적어야 합니다. 바꾸는 쪽은 규칙이 단순한데, 되돌리는 쪽에는 조용히 글자를 바꿔 버리는 자리가 있습니다.
HTML 문서에서 몇몇 글자는 문법입니다. < 는 태그가 시작된다는 뜻이고, & 는 문자 참조가 시작된다는 뜻이고, 따옴표는 속성값의 경계입니다. 그래서 이 글자들을 내용으로 보여주려면 문법이 아니라 글자라고 알려 줘야 합니다. 그 표기법이 문자 참조이고, 흔히 엔티티라고 부릅니다.
필요한 상황은 대개 둘 중 하나입니다. 코드 예제를 글에 넣을 때, 그리고 사용자가 입력한 내용을 페이지에 그대로 표시할 때입니다. 두 번째가 더 중요합니다. 이스케이프를 빠뜨리면 남이 쓴 <script> 가 내 페이지에서 실행됩니다.
바꿔야 하는 다섯 글자
숫자 참조는 이름 대신 코드포인트를 쓰는 방식으로, 결과는 같습니다.
| 글자 | 이름으로 | 숫자로 | 왜 |
|---|---|---|---|
| < | < | < | 태그의 시작 |
| > | > | > | 태그의 끝 |
| & | & | & | 문자 참조의 시작 |
| " | " | " | 속성값의 경계 |
| ' | ' | ' | 속성값의 경계 (작은따옴표) |
& 를 먼저 바꾸지 않으면 결과가 망가집니다
다섯 글자를 하나씩 순서대로 치환하는 코드를 쓰면 순서에 걸립니다. < 를 < 로 먼저 바꾼 뒤에 & 를 & 로 바꾸면, 방금 만들어 놓은 < 의 & 까지 걸려서 &lt; 가 됩니다. 화면에는 기호가 아니라 < 라는 글자가 그대로 보입니다.
그래서 & 를 가장 먼저 처리하거나, 이 도구처럼 다섯 글자를 한 번에 훑으면서 각각 대응표를 찾는 방식을 씁니다. 후자가 순서에 의존하지 않아 안전합니다.
같은 이유로 이미 이스케이프된 텍스트를 한 번 더 이스케이프하면 &amp; 가 됩니다. 입력에 문자 참조가 보이면 이 도구가 알려 줍니다. 진짜 & 를 쓴 것일 수도 있어서 자동으로 정하지는 않습니다.
세미콜론이 없어도 바뀝니다
되돌리는 쪽의 함정입니다. 문자 참조는 © 처럼 세미콜론으로 끝나는 것이 규칙인데, HTML 표준은 세미콜론 없이 쓰인 것도 백여 개는 인정합니다. 90년대에 그렇게 쓰인 페이지가 지금도 열려야 하기 때문입니다.
그래서 원래 마크업이 아니었던 글이 조용히 바뀝니다.
이 도구는 언이스케이프할 때 이런 조각을 찾아서 무엇이 무엇으로 바뀔지 먼저 보여 줍니다. 막지는 않습니다. × 를 원한 것일 수도 있으니까요. 다만 로그나 메모를 되돌리다가 모르는 사이에 글자가 바뀌는 일은 없게 합니다.
세미콜론 없이도 바뀌는 예
| 입력한 글 | 되돌리면 |
|---|---|
| Sales × 3 | Sales × 3 |
| 가격 £ 5 | 가격 £ 5 |
| © 2026 | © 2026 |
| ¬it | ¬it |
| AT&T | AT&T (안 바뀜) |
한글은 바꾸지 않아도 됩니다
예전 자료를 보면 한글을 한 처럼 숫자 참조로 적어 놓은 것을 볼 수 있습니다. 문서의 인코딩이 무엇인지 확실하지 않던 시절에 안전을 택한 방식입니다.
지금은 필요 없습니다. 문서가 UTF-8 이면 한글도 일본어도 이모지도 그대로 쓰면 됩니다. 오히려 숫자 참조로 바꾸면 용량이 여덟 배 가까이 늘고 사람이 읽을 수 없게 됩니다. 문법에 걸리는 다섯 글자만 바꾸는 것이 맞습니다.
이스케이프를 빠뜨리면 생기는 일
- •댓글이나 후기에 <script> 를 적어 넣으면 그 페이지를 보는 모든 사람의 브라우저에서 실행됩니다. 가장 흔한 웹 취약점입니다.
- •상품명에 따옴표가 있으면 속성값이 거기서 끊기고 뒤가 태그로 읽힙니다.
- •본문에 있던 < 이후가 통째로 사라집니다. 브라우저가 태그로 보고 화면에 안 그립니다.
- •AT&T 처럼 & 뒤에 글자가 오면 문자 참조로 오해받아 엉뚱한 기호가 나옵니다.
자주 묻는 질문
' 를 안 쓰고 ' 를 쓰는 이유가 있나요?
' 는 HTML5에서 추가된 이름이라 아주 오래된 브라우저나 일부 XML 도구가 모릅니다. 숫자 참조인 ' 는 어디서나 통합니다.
이스케이프하면 XSS가 막히나요?
본문에 넣는 경우라면 대체로 그렇습니다. 다만 <script> 안이나 이벤트 속성, href="javascript:..." 같은 자리는 규칙이 다릅니다. 그런 자리에는 사용자 입력을 넣지 않는 것이 맞습니다.
는 그냥 공백과 다른가요?
다릅니다. 줄바꿈이 일어나지 않는 공백이고 U+00A0 이라는 별도의 글자입니다. 웹에서 복사한 글에 섞여 들어와 검색이 안 되는 원인이 되기도 합니다. 이런 보이지 않는 글자를 찾아 정리하려면 유니코드 텍스트 정리 도구가 더 맞습니다.
입력한 내용이 전송되나요?
아니요. 변환은 브라우저 안에서만 일어납니다.