HTML 엔티티 변환기
특수문자를 HTML 엔티티로 변환하거나 HTML 엔티티를 원래 문자로 복원합니다.
주요 HTML 엔티티 참고표
| 문자 | 엔티티 | 설명 |
|---|---|---|
| & | & | 앰퍼샌드 |
| < | < | 작다 (Less than) |
| > | > | 크다 (Greater than) |
| " | " | 큰따옴표 |
| ' | ' | 작은따옴표 |
| | 공백 (Non-breaking space) | |
| © | © | 저작권 |
| ® | ® | 등록상표 |
| ™ | ™ | 상표 |
| € | € | 유로 |
| £ | £ | 파운드 |
| ¥ | ¥ | 엔/위안 |
| ° | ° | 도(Degree) |
| ± | ± | 플러스마이너스 |
| × | × | 곱하기 |
| ÷ | ÷ | 나누기 |
| ← | ← | 왼쪽 화살표 |
| → | → | 오른쪽 화살표 |
| ↑ | ↑ | 위쪽 화살표 |
| ↓ | ↓ | 아래쪽 화살표 |
| ♠ | ♠ | 스페이드 |
| ♥ | ♥ | 하트 |
| ♦ | ♦ | 다이아몬드 |
| ♣ | ♣ | 클럽 |
HTML 엔티티 변환기 — 특수문자를 안전하게 인코딩·디코딩하기
HTML 엔티티(Entity)는 HTML 파서가 마크업으로 해석하는 문자(<, >, &, ", ')를 텍스트 그대로 표시하기 위해 고안된 이스케이프 시퀀스입니다. HTML 4.01 명세는 252개의 Named Entity를, HTML5는 2,231개로 크게 확장했습니다. 이 도구는 입력 텍스트를 즉시 인코딩(문자 → 엔티티)하거나 디코딩(엔티티 → 문자)하며, 서버 전송 없이 브라우저에서 처리하므로 민감 데이터도 안전합니다.
엔티티의 세 가지 표기 형식
| 형식 | 표기 예시 (&) | 설명 |
|---|---|---|
| Named Entity | & | 사람이 읽기 쉬운 이름 기반 |
| Decimal (10진) | & | 유니코드 코드 포인트 10진수 |
| Hexadecimal (16진) | & | 유니코드 코드 포인트 16진수 |
Named Entity는 가독성이 좋지만 HTML 파서 구현에 따라 인식되지 않는 이름이 있을 수 있습니다. Numeric(Decimal/Hex) 형식은 모든 유니코드 문자를 표현할 수 있어 호환성이 가장 높습니다. 예를 들어 한글 "가"는 가 또는 가으로 표기합니다.
XSS 방지와 엔티티 인코딩
XSS(Cross-Site Scripting)는 OWASP Top 10에 지속적으로 등재되는 웹 보안 위협입니다. 공격자가 <script>alert('xss')</script> 같은 코드를 입력 폼에 넣으면, 서버가 이를 그대로 HTML에 삽입할 때 브라우저가 스크립트로 실행합니다. 출력 시점에 <를 <로, >를 >로 변환하면 브라우저는 이를 태그가 아닌 텍스트로 렌더링하여 공격을 차단합니다. React, Vue 등 현대 프레임워크는 기본적으로 텍스트 보간 시 자동 이스케이프를 수행하지만, dangerouslySetInnerHTML이나 v-html을 사용할 때는 개발자가 직접 이스케이프해야 합니다.
실무 활용 예시
코드 블로그 작성 — HTML/JSX 코드 예제를 블로그에 삽입할 때 태그가 렌더링되지 않도록 엔티티로 변환합니다. 이 도구에 코드를 붙여넣고 인코딩 버튼을 누르면 즉시 안전한 텍스트를 얻을 수 있습니다.
이메일 HTML 템플릿 — 이메일 클라이언트는 HTML5 Named Entity를 모두 지원하지 않으므로, 특수 기호는 Numeric Entity로 변환하는 것이 안전합니다. ©(저작권) 대신 ©를 권장합니다.
XML/RSS 피드 — XML은 <, >, &, ", ' 다섯 개만 사전 정의 엔티티로 인식합니다. 같은 HTML Named Entity를 XML에 넣으면 파싱 오류가 발생하므로 반드시 Numeric으로 교체해야 합니다.
자주 하는 실수
이중 인코딩은 가장 흔한 실수입니다. 이미 &로 변환된 텍스트를 다시 인코딩하면 &amp;가 되어 화면에 &가 그대로 노출됩니다. 인코딩 전에 원본이 이미 인코딩 상태인지 확인하세요. 또한 '(작은따옴표)는 HTML4에서 공식 지원하지 않으므로, HTML4 호환이 필요한 환경에서는 '를 사용해야 합니다.
관련 도구
엔티티 변환 후 불필요한 공백을 제거하려면 텍스트 정리 도구를 활용하세요. 변환된 텍스트를 마크다운 문서에 삽입할 때는 마크다운 에디터에서 미리보기로 렌더링 결과를 확인할 수 있습니다.
참고 자료
- HTML5 Named Character References — html.spec.whatwg.org/named-characters
- OWASP XSS Prevention Cheat Sheet — cheatsheetseries.owasp.org
- W3C HTML 4.01 Character Entity References — w3.org/TR/html4/sgml/entities.html
- MDN: Entity — developer.mozilla.org/en-US/docs/Glossary/Entity