HTML 엔티티 변환
<, >, & 같은 특수문자를 HTML 엔티티로 이스케이프하거나 반대로 복원합니다.
HTML 엔티티 변환란?
웹페이지에 `<script>` 태그나 `< >` 같은 특수문자를 그대로 보여주고 싶을 때, 문자가 깨지거나 HTML 태그로 잘못 해석되는 문제를 겪어보셨나요? 이럴 때 필요한 것이 바로 HTML 엔티티 이스케이프입니다. 이 도구는 텍스트 속 특수문자를 `<script>`처럼 안전한 HTML 엔티티로 변환(이스케이프)하거나, 반대로 엔티티 코드를 다시 원래의 문자로 되돌려(복원) 줍니다. 텍스트를 붙여넣으면 결과가 즉시 나타나며, 모든 과정은 서버 전송 없이 사용자 브라우저 안에서만 안전하게 처리됩니다. XSS 공격 방지를 위한 기본 변환부터, 코드 가독성을 위한 '명명 엔티티', 인코딩 문제 해결을 위한 '전체' 변환까지 다양한 모드를 지원하며, '한글 유지' 옵션으로 더 정교한 제어도 가능합니다. 작업에 필요한 엔티티를 바로 찾아 복사할 수 있는 참조표까지 갖춘 강력한 무료 도구입니다.
사용 방법
- 변환하고 싶은 텍스트나 HTML 코드를 왼쪽 입력창에 붙여넣습니다.
- 입력과 동시에 변환 결과가 오른쪽 창에 실시간으로 나타납니다.
- 변환 방향을 선택합니다. 기본은 '이스케이프'이며, 엔티티를 원본 문자로 바꾸려면 '복원'을 누릅니다.
- 이스케이프 시, '기본', '명명 엔티티', '전체' 등 목적에 맞는 변환 범위를 선택할 수 있습니다.
- 필요에 따라 '한글은 그대로 두기'나 숫자 엔티티의 '10진수/16진수' 형식을 지정합니다.
- 오른쪽 '복사' 버튼으로 결과를 클립보드에 복사하거나, '⇅ 결과를 입력으로' 버튼으로 입출력을 맞바꿔 추가 작업을 할 수 있습니다.
HTML 엔티티 변환 사용 가이드
실제 작업에서 이 도구를 어떻게 쓰는지, 무엇을 조심해야 하는지 정리했습니다.
이스케이프는 XSS 방어의 본체입니다
게시판에 사용자가 script 태그로 시작하는 댓글을 씁니다. 이 글자를 그대로 HTML에 출력하면 브라우저는 글이 아니라 코드로 읽고 실행합니다. 다른 사람의 세션 쿠키를 훔쳐 보내는 것도 그 코드가 할 수 있는 일입니다. 이것이 저장형 XSS 입니다.
막는 방법은 화려하지 않습니다. 출력할 때 < 를 < 로 바꾸는 것. 그러면 브라우저는 태그의 시작이 아니라 "작다"라는 글자로 읽고, 화면에는 사용자가 쓴 그대로 보이며 아무것도 실행되지 않습니다. 이 도구의 "기본" 모드가 하는 일이 정확히 이것입니다.
- 입력 시점에 거르는 것보다 출력 시점에 이스케이프하는 것이 원칙입니다. 입력 필터는 우회 방법이 계속 나오지만, 출력 이스케이프는 우회할 것이 없습니다.
- EJS의 <%= %>, React의 중괄호 표현식, Vue의 이중 중괄호는 기본으로 이스케이프합니다. 반대로 <%- %>, dangerouslySetInnerHTML, v-html, innerHTML 은 이스케이프를 끄는 문법입니다 — 여기에 사용자 입력이 들어가는 순간이 사고 지점입니다.
- 이 도구는 코드에 넣을 값을 손으로 만들어 보거나 이미 이스케이프된 문자열을 확인할 때 쓰는 용도입니다. 실제 방어는 템플릿 엔진이 자동으로 하게 두는 것이 맞습니다.
출력 위치에 따라 필요한 이스케이프가 다릅니다
"HTML 이스케이프하면 안전하다"는 절반만 맞습니다. 같은 값이라도 태그 사이에 들어가는지, 속성값에 들어가는지, 스크립트 안에 들어가는지에 따라 위험이 다릅니다.
| 들어가는 자리 | 필요한 처리 | 안 하면 |
|---|---|---|
| 태그 사이 (본문) | HTML 이스케이프 (이 도구의 기본 모드) | 태그가 실행됨 |
| 속성값 (title="…") | HTML 이스케이프 + 반드시 따옴표로 감싸기 | 따옴표를 닫고 onerror= 를 붙일 수 있음 |
| script 태그 안 | JSON 직렬화. HTML 이스케이프는 오히려 코드를 깨뜨림 | 문자열 탈출로 코드 삽입 |
| href="…" 의 URL | URL 인코딩 + javascript: 스킴 차단 | href="javascript:…" 가 동작 |
| CSS 값 | 전용 이스케이프 (직접 만들지 말 것) | CSS 악용 |
함정 — 눈에 안 보이는 공백
(non-breaking space)는 줄바꿈이 일어나지 않는 공백입니다. "010 1234 5678"처럼 중간에서 끊기면 안 되는 것을 붙여 둘 때 쓰라고 만든 것인데, 실제로는 대부분 다른 이유로 들어옵니다 — 워드나 한글(HWP), 위지윅 에디터에서 복사한 텍스트에 딸려 오는 것입니다.
이게 왜 문제냐면, 화면에서는 그냥 공백처럼 보이는데 코드 입장에서는 U+00A0 이라는 전혀 다른 문자이기 때문입니다.
- 검색이 안 됨 — DB에 "무선 드릴"이 nbsp 로 저장되면 일반 공백으로 검색해도 안 나옵니다. 사용자는 분명히 있는데 안 나온다고 문의합니다.
- trim() 이 안 먹음 — 언어에 따라 공백 목록에 U+00A0 을 포함하지 않아 앞뒤 공백 제거가 실패합니다. 정규식의 공백 클래스도 환경마다 다릅니다.
- 숫자 파싱 실패 — 엑셀에서 복사한 "1 000"의 공백이 nbsp 면 숫자 변환이 실패합니다.
한글은 왜 그대로 두는 게 기본인가
"한글은 그대로 두기" 체크박스가 기본으로 켜져 있습니다. 요즘 웹은 거의 전부 UTF-8 이라 한글을 굳이 가 같은 숫자 참조로 바꿀 이유가 없기 때문입니다. 바꾸면 용량만 늘고(한 글자가 8자 이상으로), 사람이 읽을 수 없어 유지보수가 나빠집니다. 그래도 "전체" 모드와 이 체크박스를 끄는 선택지가 남아 있는 이유는 아직 그런 곳이 있기 때문입니다.
- charset 을 제어할 수 없는 옛 시스템에 HTML 조각을 넣어야 할 때.
- 레거시 메일 발송 시스템·문자 관리자 페이지처럼 인코딩이 EUC-KR로 고정된 화면에 한글을 확실히 표시해야 할 때.
- XML/RSS 를 인코딩 선언 없이 주고받아야 할 때.
복원할 때 주의할 것
복원은 이스케이프의 반대 방향이지만 대칭이 아닙니다. 여기에서 실수가 나옵니다.
- 이중 이스케이프 — &lt; 를 한 번 복원하면 < 가 되고 두 번 복원해야 < 가 됩니다. 화면에 < 라는 글자가 그대로 보인다면 어딘가에서 이스케이프가 두 번 걸린 것입니다.
- 세미콜론 누락 —   처럼 세미콜론이 없으면 이 도구는 변환하지 않고 "알 수 없는 엔티티 N개는 그대로 뒀습니다"라고 알려 줍니다. 브라우저는 관대해서 일부를 알아서 해석하지만, 그 관대함에 기대면 안 됩니다.
- 복원한 값을 그대로 innerHTML 에 넣지 마세요 — 이스케이프를 푼 값은 다시 위험한 HTML 입니다. 복원은 "저장된 값을 원래 텍스트로 확인"하는 용도이지 출력 전 처리가 아닙니다.
자주 묻는 질문
어떤 문자가 변환되나요?
이스케이프 모드에 따라 다릅니다. '기본' 모드는 XSS 방지에 필수적인 `& < > " '` 5개 문자만 변환합니다. '명명 엔티티' 모드는 `©`(©), `→`(→)처럼 이름이 부여된 문자를 포함하며, '전체' 모드는 ASCII 외 모든 문자를 숫자 엔티티로 바꿉니다. 복원 시에는 명명 엔티티와 숫자 엔티티(10/16진수)를 모두 원래 문자로 되돌립니다.
입력한 데이터는 안전하게 처리되나요?
네, 안전합니다. 이 도구는 서버로 어떤 데이터도 전송하지 않습니다. 모든 이스케이프 및 복원 과정은 사용자 컴퓨터의 웹 브라우저 안에서만 직접 실행됩니다. 민감한 소스 코드나 개인정보가 포함된 텍스트도 외부 유출 걱정 없이 안심하고 사용할 수 있습니다.
HTML 이스케이프는 언제 사용해야 하나요?
주로 두 가지 경우에 사용합니다. 첫째, 사용자가 입력한 내용을 웹페이지에 표시할 때 악성 스크립트가 실행되는 것(XSS 공격)을 막기 위해 필수적입니다. 둘째, `<div>` 같은 HTML 태그 자체를 코드 예시로 보여주고 싶을 때, 브라우저가 태그로 해석하지 않고 문자 그대로 화면에 표시하게 하려고 사용합니다.
'자주 쓰는 엔티티 참조표'는 어떻게 사용하나요?
웹 개발에 자주 쓰이는 특수문자 엔티티를 모아놓은 표입니다. '화살표', 'nbsp', '©' 등 찾고 싶은 문자의 이름이나 모양으로 검색할 수 있습니다. 목록에서 원하는 항목을 클릭하면 해당 엔티티 코드(예: `→`)가 클립보드에 바로 복사되어 편리하게 붙여넣을 수 있습니다.