HTML 엔티티 인코더 / 디코더

HTML 엔티티는 HTML에서 예약되어 있거나 입력하기 불편한 문자를 표현하는 짧은 코드입니다. 각 코드는 앰퍼샌드(&)로 시작해 세미콜론(;)으로 끝납니다. 예를 들어 &amp;는 앰퍼샌드(&), &lt;는 작은 따옴표(<), &copy;는 저작권 기호(©)를 나타냅니다. 엔티티를 사용하면 마크업으로 해석되지 않고 문자 그대로 표시되며, 페이지의 문자 인코딩에 해당 기호가 없더라도 올바르게 렌더링됩니다. HTML을 직접 작성하거나 웹 애플리케이션에서 사용자 입력을 처리(새니타이즈)할 때 항상 접하게 됩니다.

왼쪽 창에 텍스트를 붙여 넣고 모드를 '인코딩'으로 유지하세요. 이스케이프할 문자를 선택할 수 있습니다. 예약 문자(< > & " ')만 이스케이프할지, 예약 문자와 비 ASCII 문자까지 이스케이프할지, 모든 문자를 이스케이프할지 선택하고, 출력 형식을 이름·십진수·16진수 중 하나로 지정하세요. 예를 들어 이름 옵션을 선택하면 '물고기 & 감자튀김 <3'은 '물고기 &amp; 감자튀김 &lt;3'이 됩니다. 결과는 오른쪽에 즉시 나타납니다. 복사 버튼을 클릭해 HTML에 바로 붙여 넣으세요. 모든 처리가 브라우저에서 이루어지므로 파일 업로드나 계정이 필요 없고, 한 번에 인코딩할 수 있는 텍스트 양에도 제한이 없습니다.

모드를 '디코딩'으로 전환하고 인코딩된 HTML을 왼쪽 창에 붙여 넣으면 읽기 쉬운 텍스트가 오른쪽에 즉시 나타납니다. 이름·십진수·16진수 엔티티를 모두 인식하므로 &lt;div&gt; Tom &amp; Jerry &#169;는 <div> Tom & Jerry ©로 디코딩됩니다. 결과를 재인코딩하려면 '바꾸기' 버튼으로 창을 뒤집으세요. 디코더는 같은 문자열에 여러 엔티티 유형이 섞여 있어도 각각 올바르게 처리합니다. FreeFormatter.com의 엔티티 디코더는 매번 폼을 제출하고 페이지를 새로 고침해야 하지만, 이 도구는 입력하는 동안 실시간으로 업데이트됩니다.

가장 자주 사용되는 네 가지 HTML 엔티티입니다. &amp;는 앰퍼샌드(&), &lt;는 작음 기호(<), &gt;는 큼 기호(>)를 나타냅니다. &nbsp;는 줄바꿈 방지 공백으로, 브라우저가 줄을 바꾸거나 공백을 축소하지 못하도록 합니다. 예를 들어 10&nbsp;kg처럼 숫자와 단위 사이에 사용하면 둘이 서로 다른 줄로 분리되는 것을 막을 수 있습니다. &amp;는 다른 엔티티보다 먼저 이스케이프해야 합니다. 그렇지 않으면 &amp; 자체가 새 엔티티의 시작으로 잘못 인식되어 이중 인코딩 문제가 발생할 수 있습니다.

동일한 문자를 표기하는 세 가지 방식입니다. 이름 엔티티는 기억하기 쉬운 키워드를 사용합니다(&amp;). 십진수 숫자 엔티티는 문자의 유니코드 코드 포인트를 10진수로 표현합니다(&#38;). 16진수 엔티티는 16진수를 사용합니다(&#x26;). 세 가지 모두 앰퍼샌드를 출력합니다. 이름 엔티티가 가장 읽기 편하지만, 이름이 정의된 문자는 약 2,000개뿐이므로 나머지 문자에는 숫자 엔티티를 사용해야 합니다. 이모지도 마찬가지로, 웃는 얼굴 😀는 &#128512;로 표현합니다. HTML5 표준은 HTML4보다 훨씬 많은 이름 엔티티를 추가해 2,200개 이상의 이름 문자 참조를 제공합니다. 이 도구는 HTML5 전체 세트를 지원합니다.

페이지 콘텐츠에서 특별한 의미를 갖는 세 가지 문자는 항상 이스케이프해야 합니다. &(&amp;), <(&lt;), >(&gt;)입니다. 속성값 내에서는 "(&quot;)와 '(&#39;)도 이스케이프해야 합니다. 앰퍼샌드를 가장 먼저 이스케이프하세요. 그렇지 않으면 &amp; 자체가 엔티티의 시작으로 잘못 인식되어 이중 이스케이프가 발생할 수 있습니다. 인코딩 모드의 '예약 문자' 옵션은 이 다섯 가지 문자만 처리하고 나머지는 그대로 둡니다. 불필요한 인코딩 없이 폼 입력이나 템플릿 출력을 새니타이즈하는 데 이상적입니다.

자주 쓰이는 화살표 엔티티로는 &larr;(←), &rarr;(→), &uarr;(↑), &darr;(↓), &harr;(↔)가 있고, 이중 선 버전으로 &lArr;, &rArr;, &hArr;(⇐ ⇒ ⇔)도 있습니다. 다른 기호는 아래의 검색 가능한 목록을 활용하세요. 'arrow', 'heart', 'euro'를 입력하면 이름·십진수·16진수 코드를 클릭해 복사할 수 있습니다. 전체 목록은 구두점, 수학 기호, 그리스 문자, 통화 기호, 수백 가지 특수 문자를 포함하며 HTML5 이름 문자 참조 표준으로 업데이트되어 있습니다. W3Schools는 약 255개의 엔티티만 나열하지만 이 도구는 2,200개 이상을 제공합니다.

브라우저에서 널리 사용하는 방법은 DOM이 직접 디코딩하도록 하는 것입니다. 분리된 textarea를 생성하고, innerHTML에 엔티티 문자열을 설정한 후 value를 읽으면 됩니다. 예를 들어 const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;';로 설정하면 el.value에서 '<b> & ©'를 얻을 수 있습니다. 순수 자바스크립트에는 내장 decodeHTMLEntities() 함수가 없으므로, 이 DOM 방식이나 일치하는 엔티티 토큰을 textarea에 전달해 처리하는 소규모 헬퍼 함수가 표준 패턴입니다. 이 도구도 동일한 방식으로 작동하여 신뢰할 수 없는 마크업에 사용해도 XSS 위험이 없습니다.

이중 인코딩 문제입니다. 텍스트가 한 번 이스케이프되어 &가 &amp;로 변환된 후, 다시 한 번 이스케이프되어 &amp;의 &가 &amp;amp;로 바뀐 것입니다. 이는 프레임워크가 이미 이스케이프된 출력을 자동으로 다시 이스케이프할 때 흔히 발생합니다. PHP CMS나 기본적으로 모든 출력을 이스케이프하는 일부 템플릿 엔진(Twig, Smarty, 구형 WordPress 훅 등)에서 자주 나타납니다. 해당 값을 여기서 한 번 디코딩하여 이중 인코딩을 확인하고, 템플릿에서 값을 안전(safe)으로 표시하거나 출력 시점에 한 번만 이스케이프하도록 수정하세요.

©는 &copy;, ®는 &reg;, ™는 &trade;, 줄표(em dash, —)는 &mdash;를 사용하세요. 반줄표(en dash, –)는 &ndash;, 말줄임표(…)는 &hellip;을 사용합니다. UTF-8 페이지라면 기호를 직접 붙여 넣어도 되지만, 이름 엔티티는 명확하고 인코딩이 변경되어도 안전하게 유지됩니다. 사실상 모든 현대 웹페이지는 UTF-8을 사용하므로 © 기호를 직접 붙여 넣어도 문제없습니다. 다만 Outlook, Gmail, Apple Mail 등 클라이언트마다 인코딩 기준이 다른 HTML 이메일에서는 이름 엔티티를 사용하는 것이 가장 안전합니다.

&nbsp;(숫자 코드 &#160; 또는 &#xA0;)입니다. 줄바꿈 방지 공백은 두 단어나 값과 단위를 같은 줄에 유지하고 브라우저가 연속 공백을 축소하는 것을 방지합니다. 예를 들어 홍길동&nbsp;님 또는 5&nbsp;km처럼 사용합니다. 다만 레이아웃 목적으로 과도하게 사용하지 마세요. 간격 조절에는 CSS margin이나 padding을 사용하는 것이 좋습니다. 흔히 저지르는 실수는 들여쓰기나 열 정렬을 위해 &nbsp;를 여러 번 사용하는 것인데, 이는 좋지 않은 관행으로 페이지 크기가 변경되거나 스크린 리더에서 읽힐 때 각각 "줄바꿈 방지 공백"으로 읽혀 문제가 됩니다.

예, 이름 엔티티는 대소문자를 구분합니다. &amp;은 작동하지만 &Amp;나 &AMP;는 작동하지 않을 수 있습니다. &Sigma;(Σ)와 &sigma;(σ)는 완전히 다른 문자입니다. 숫자 엔티티는 16진수 엔티티의 선택적 x 표기에서만 대소문자를 구분하지 않습니다. &#xA9;와 &#xa9; 모두 ©를 출력합니다. 확실하지 않을 때는 기억에 의존해 입력하기보다 여기 참조 목록에서 정확한 코드를 복사하세요. 이름 엔티티의 대소문자가 틀리면 기호 대신 원시 코드가 그대로 표시되며, 이는 수작업으로 작성한 HTML 템플릿에서 흔히 발생하는 버그 원인입니다.

FreeFormatter.com과 W3Schools는 모두 정적 HTML 엔티티 참조 표를 제공하지만 코드 조회만 가능하며, 사용자의 텍스트를 인코딩하거나 디코딩하는 기능은 없습니다. FreeFormatter의 엔티티 인코더가 가장 유사한 대안이지만, 텍스트를 서버로 전송해 처리하고 변환마다 폼 제출 및 페이지 새로 고침이 필요하며, HTML4 이름 엔티티만 지원합니다. W3Schools는 약 255개의 이름 엔티티를 보여 줍니다. 이 도구는 완전한 HTML5 이름 문자 참조 세트(2,200개 이상의 항목)를 포함하며, 검색 가능한 참조 목록과 실시간 인코더·디코더를 하나의 페이지에서 제공하고 입력하는 즉시 업데이트됩니다.

네, 인코더·디코더·엔티티 목록 모두 안드로이드 Chrome과 아이폰 Safari를 포함한 모바일 브라우저에서 완벽하게 작동합니다. 레이아웃이 작은 화면에 맞게 조정되어 두 창이 세로로 쌓입니다. 모바일 팁: 엔티티 목록의 셀에서 원클릭 복사가 바로 실행되지 않을 경우 길게 눌러 브라우저의 복사 옵션을 사용하세요. 앱을 따로 내려받을 필요가 없으며, 최신 모바일 브라우저라면 표준 웹 페이지로 실행됩니다. 회원가입, 계정, 사용량 제한이 없고, 어떤 기기에서도 동일하게 작동합니다. 페이지가 한 번 로드된 후에는 오프라인에서도 사용할 수 있습니다.