HTML 이스케이프: 태그를 글자로 표시하는 방법

SmartInfoBank 운영자 · 작성 2026-10-10 · 수정 2026-10-16 · 4분

블로그에 <p>라는 코드를 설명하려고 붙였는데 태그가 화면에서 사라질 수 있습니다. HTML 편집기가 이를 문자 대신 태그로 해석했기 때문입니다. 텍스트로 보여 주는 처리와 실제 HTML을 실행하는 처리를 구분해야 합니다.

원문과 표시용 표현을 비교합니다

아래 예제에서 왼쪽 꺾쇠를 &lt;, 오른쪽 꺾쇠를 &gt;로 표현하면 HTML 문서의 텍스트 위치에서 코드 자체를 보여 줄 수 있습니다. & 문자는 &amp;로 먼저 처리해야 이미 만들어진 문자 참조가 다시 섞이지 않습니다. 도구는 한 번의 문자 치환으로 처리합니다.

원문: <p>A & B</p>
표시용: &lt;p&gt;A &amp; B&lt;/p&gt;

텍스트를 넣는 위치가 중요합니다

직접 웹 화면을 만든다면 사용자 문자열을 textContent에 넣는 방식은 이를 텍스트로 취급합니다. 반대로 innerHTML은 문자열을 HTML로 해석합니다. 아래 도구는 결과를 textContent로 표시하므로 붙여넣은 태그를 실행하지 않습니다. 하지만 결과를 나중에 어떤 위치에 사용하는지는 별도로 판단해야 합니다.

보안 정화 도구와 혼동하지 않습니다

문자 치환은 안전한 HTML 편집기를 만드는 모든 과정을 대신하지 않습니다. URL 속성의 허용 프로토콜, 이벤트 속성, 스크립트 맥락에는 별도 규칙이 필요합니다. HTML을 일부 허용해야 한다면 검증된 정화 도구와 맥락별 출력 규칙을 사용해야 합니다. 이 글의 도구는 표시용 예제를 만드는 기능이며 XSS 방어를 포괄적으로 보증하지 않습니다.

이중 이스케이프를 알아봅니다

원문 <p>를 한 번 변환하면 표시용 문자열에는 &lt;p&gt;가 들어갑니다. 이미 &lt;가 들어 있는 문자열을 다시 변환하면 &amp;lt;처럼 바뀌어 화면에 &lt;가 그대로 보일 수 있습니다. 데이터가 현재 원문인지 표시용으로 변환된 값인지 구분해서 보관하세요. 오류를 고치려고 모든 &amp;를 되돌리면 다른 정상 값이 손상될 수 있습니다.

에디터의 코드 블록 기능도 확인합니다

블로그 에디터에 코드 블록이나 일반 텍스트 붙여넣기 기능이 있다면 그 기능부터 사용합니다. 일부 에디터는 자동 이스케이프를 하므로 도구 결과를 또 넣으면 이중 변환이 됩니다. 가상 태그 한 줄로 미리보기를 확인하고 의도한 글자가 보이는지 점검한 다음 전체 예제를 넣으세요. 실제 비밀 키나 개인정보가 든 코드를 예제로 공개하지 않습니다.

결과가 여기에 표시됩니다.