HTML Entity 변환기 완벽 가이드
HTML(HyperText Markup Language)에서 특수문자는 특별한 의미를 가집니다. 예를 들어 <와 >는 태그의 시작과 끝을 나타내고, &는 엔티티 참조의 시작을 의미합니다. 따라서 이러한 문자를 HTML 소스코드에 그대로 표시하려면 반드시 HTML 엔티티로 변환(인코딩)해야 합니다. 이 HTML Entity 변환기는 바로 이러한 변환 작업을 자동으로 수행하는 무료 온라인 도구입니다.
HTML 엔티티에는 두 가지 형식이 있습니다. 첫째는 이름 엔티티(Named Entity)로, <, >, &처럼 의미를 알 수 있는 이름을 사용합니다. 둘째는 숫자 엔티티(Numeric Entity)로, <, >, &처럼 문자의 유니코드 코드포인트를 10진수로 표기합니다. 본 도구는 두 가지 형식을 모두 지원하며, 토글 스위치 하나로 간편하게 전환할 수 있습니다.
웹 개발에서 HTML 엔티티 변환이 중요한 이유는 크게 세 가지입니다. 첫째, HTML 구문 오류를 방지합니다. 만약 <div>라는 텍스트를 그대로 HTML에 넣으면 브라우저는 이것을 태그로 해석합니다. <div>로 변환해야 텍스트로 정상 표시됩니다. 둘째, XSS(Cross-Site Scripting) 공격을 방지합니다. 사용자가 입력한 텍스트를 이스케이프 처리하지 않으면 악의적인 스크립트가 실행될 수 있습니다. 셋째, 키보드로 입력하기 어려운 특수문자(저작권 기호, 상표 기호, 화살표, 수학 기호 등)를 HTML에 삽입할 수 있습니다.
본 도구는 인코딩과 디코딩 두 가지 모드를 제공합니다. 인코딩 모드에서는 일반 텍스트에 포함된 특수문자를 HTML 엔티티로 변환하고, 디코딩 모드에서는 HTML 엔티티를 원래 특수문자로 복원합니다. '모든 문자 변환' 옵션을 활성화하면 알파벳과 숫자를 포함한 모든 문자를 엔티티로 변환하여 이메일 주소 난독화 등에 활용할 수 있습니다.
모든 처리는 사용자의 브라우저 내에서 JavaScript로 이루어지며, 입력한 텍스트는 외부 서버로 전송되지 않습니다. LocalStorage를 활용하여 마지막 입력값을 자동 저장하므로 페이지를 새로고침해도 작업 내용이 유지됩니다. 변환 결과는 클립보드 복사, SNS 공유, 이미지 카드 저장 등 다양한 방법으로 활용할 수 있습니다.
주요 기능
- 인코딩/디코딩 토글: 탭 버튼으로 인코딩과 디코딩 모드를 간편하게 전환
- 이름 엔티티:
<,>,&등 읽기 쉬운 형식 지원 - 숫자 엔티티:
<,>,&등 유니코드 코드포인트 형식 지원 - 전체 문자 변환: 알파벳, 숫자 포함 모든 문자를 엔티티로 변환 가능
- 엔티티 참조표: 자주 사용하는 수십 가지 엔티티를 카테고리별로 정리
- 클릭 복사: 참조표의 엔티티를 클릭 한 번으로 클립보드에 복사
- 이미지 저장: 변환 결과 요약을 이미지 카드로 저장하여 공유 가능
자주 묻는 질문 (FAQ)
Q. HTML 엔티티란 무엇인가요?
A. HTML 엔티티는 HTML에서 특수한 의미를 가지거나 키보드로 직접 입력하기 어려운 문자를 표현하기 위한 코드입니다. 앰퍼샌드(&)로 시작하여 세미콜론(;)으로 끝나는 형식입니다. 예를 들어 <는 <(less than) 기호를 나타냅니다. 이름 엔티티(<)와 숫자 엔티티(<) 두 가지 표기법이 있으며, 둘 다 동일한 문자를 나타냅니다.
Q. 이름 엔티티와 숫자 엔티티의 차이점은 무엇인가요?
A. 이름 엔티티(<, © 등)는 사람이 읽기 쉬운 이름을 사용하지만, 모든 문자에 이름이 정의되어 있지는 않습니다. 숫자 엔티티(<, © 등)는 유니코드 코드포인트를 10진수로 표기하므로 어떤 문자든 표현할 수 있습니다. 일반적으로 이름 엔티티가 가독성이 좋아 선호되지만, 특수한 유니코드 문자는 숫자 엔티티를 사용해야 합니다.
Q. XSS 공격 방지를 위해 어떤 문자를 변환해야 하나요?
A. XSS 방지를 위해 최소한 다섯 가지 문자를 반드시 이스케이프해야 합니다: <, >, &, "(큰따옴표), '(작은따옴표). 이 다섯 문자는 HTML과 JavaScript에서 특별한 의미를 가지므로, 사용자 입력값을 HTML에 출력할 때는 반드시 엔티티로 변환해야 합니다. 본 도구의 기본 인코딩 모드가 이 다섯 문자를 자동으로 변환합니다.
Q. '모든 문자 변환' 옵션은 어떤 경우에 사용하나요?
A. 이 옵션은 모든 문자를 숫자 엔티티로 변환합니다. 주로 이메일 주소를 스팸봇으로부터 보호하거나, 소스 코드에서 텍스트를 난독화하고 싶을 때 사용합니다. 예를 들어 user@example.com을 모든 문자 엔티티로 변환하면, 브라우저에서는 정상적으로 보이지만 스팸봇은 이메일 주소를 인식하기 어렵습니다.
Q. 입력한 데이터가 서버로 전송되나요?
A. 아닙니다. 모든 변환 처리는 사용자의 웹 브라우저 내에서 JavaScript로 이루어지며, 입력한 텍스트는 외부 서버로 전송되지 않습니다. 따라서 API 키, 비밀번호, 민감한 코드 등이 포함된 텍스트도 안전하게 변환할 수 있습니다.
Q. 디코딩 모드에서 이름 엔티티와 숫자 엔티티를 모두 처리할 수 있나요?
A. 네, 디코딩 모드에서는 이름 엔티티(<, 등)와 숫자 엔티티(<,   등)를 모두 인식하여 원래 문자로 변환합니다. 16진수 숫자 엔티티(<)도 지원합니다. 하나의 텍스트에 이름 엔티티와 숫자 엔티티가 섞여 있어도 정상적으로 디코딩됩니다.