지난 편에서 외부 콘텐츠를 안전하게 끼워 넣는 법을 다뤘습니다. 이번에는 훨씬 작은 단위로 내려가, 글자 하나하나를 다루는 이야기를 합니다. 문서를 만들다 보면 화면에 특정 기호를 그대로 보여 주고 싶은데 그것이 뜻대로 나오지 않는 경우가 있습니다. 부등호를 썼더니 사라지거나, 코드를 그대로 보여 주려 했는데 브라우저가 그것을 명령으로 해석해 버리는 일이죠. 이번 편에서 그 원인과 해결을 다룹니다.
제가 초보 시절 가장 당황했던 순간 중 하나가, 부등호가 든 수식을 화면에 적었는데 그 부분이 통째로 사라진 것이었습니다. 알고 보니 브라우저는 그 부등호를 태그의 시작으로 오해했던 것입니다. 그때 처음으로 어떤 문자는 문서에서 특별한 뜻을 가지며, 그것을 글자로 보여 주려면 특별한 표기가 필요하다는 것을 배웠습니다. 그 표기가 이번 편의 주제입니다.
1. 문법 문자를 글자로 되돌리기
문서에는 특별한 뜻을 가진 문자가 몇 개 있습니다. 여는 부등호와 닫는 부등호는 태그의 시작과 끝을 나타내고, 앰퍼샌드 기호는 특수 표기의 시작을 알립니다. 이 문자들은 문서의 문법을 이루는 재료이기 때문에, 그냥 적으면 브라우저가 문법의 일부로 해석해 버립니다. 화면에 그 문자 자체를 보여 주려면 다른 방법이 필요합니다.
그 방법이 이 문자들을 특별한 표기로 바꿔 적는 것입니다. 여는 부등호와 닫는 부등호, 앰퍼샌드 기호에는 각각 정해진 대체 표기가 있습니다. 이 표기로 적으면 브라우저는 그것을 문법이 아니라 화면에 보여 줄 글자로 이해합니다. 대체 표기는 앰퍼샌드로 시작해 세미콜론으로 끝나는 짧은 이름 형태입니다.
여기서 재미있는 점은 앰퍼샌드 자신도 특별한 문자라는 것입니다. 앰퍼샌드는 이 대체 표기의 시작을 알리는 문자이므로, 앰퍼샌드 자체를 보여 주려면 그것도 대체 표기로 바꿔야 합니다. 그래서 앰퍼샌드가 든 문구를 적을 때는 앰퍼샌드를 잊지 말고 대체 표기로 처리해야 합니다. 이것을 빠뜨리는 실수가 은근히 잦습니다.
이 대체 표기가 필요한 대표적인 경우가 수식이나 조건식을 화면에 적을 때입니다. 크다, 작다를 나타내는 부등호가 든 식을 그대로 적으면 브라우저가 그 부분을 태그로 오해합니다. 부등호들을 대체 표기로 바꿔 적어야 식이 온전히 화면에 나타납니다. 저는 부등호가 보이는 문구를 적을 때 반사적으로 이 대체 표기를 떠올립니다.
제가 이 원리를 이해하고 나서 앞선 부등호 실종 사건의 정체를 알게 되었습니다. 브라우저는 여는 부등호를 만나면 그 뒤를 태그 이름으로 읽으려 하고, 알아볼 수 없으면 그 부분을 통째로 무시해 버립니다. 그래서 부등호와 그 뒤가 함께 사라졌던 것이죠. 원리를 아니 문제도 명확히 보였습니다.
아래는 부등호와 앰퍼샌드를 대체 표기로 바꾼 예시입니다. 조건식이 화면에 그대로 나오게 됩니다.
<p>조건은 a < b && b > c 입니다.</p>
2. 속성 안의 따옴표 다루기
대체 표기가 필요한 또 다른 상황이 따옴표입니다. 태그의 속성값은 대개 따옴표로 감쌉니다. 그런데 그 값 안에 다시 따옴표가 들어가야 한다면 문제가 생깁니다. 값을 감싼 따옴표와 값 안의 따옴표가 뒤엉켜, 브라우저가 값이 어디서 끝나는지 헷갈립니다. 값 안의 따옴표를 감싼 따옴표의 짝으로 오해하는 것이죠.
이를 푸는 한 가지 방법이 값 안의 따옴표를 대체 표기로 바꾸는 것입니다. 큰따옴표와 작은따옴표에는 각각 대체 표기가 있어서, 값 안의 따옴표를 이 표기로 적으면 브라우저가 그것을 값의 일부인 글자로 이해하고 값의 끝으로 오해하지 않습니다. 뒤엉킴이 풀리는 것이죠.
또 다른 방법은 감싸는 따옴표와 안의 따옴표를 서로 다른 종류로 쓰는 것입니다. 값을 큰따옴표로 감쌌다면 안에서는 작은따옴표를 쓰고, 그 반대로도 할 수 있습니다. 종류가 다르면 브라우저가 헷갈리지 않습니다. 다만 값 안에 두 종류의 따옴표가 다 필요하다면 결국 대체 표기가 답입니다.
이 문제는 사용자가 입력한 내용을 속성값에 넣을 때 특히 조심해야 합니다. 사용자가 따옴표가 든 글을 입력했는데 그것을 그대로 속성값에 넣으면, 따옴표가 값을 깨뜨려 예상치 못한 결과가 나옵니다. 심하면 이것이 보안 문제로 이어지기도 합니다. 그래서 사용자 입력을 속성에 넣을 때는 반드시 대체 표기 처리를 거쳐야 합니다.
제가 겪은 사례로, 사용자 별명을 속성값에 넣는 부분에서 따옴표가 든 별명 때문에 화면이 깨진 적이 있습니다. 값 안의 따옴표가 감싼 따옴표를 조기에 닫아 버려 뒤의 내용이 엉망이 된 것이죠. 사용자 입력을 대체 표기로 처리하도록 고치자 문제가 사라졌습니다. 입력값은 항상 안전하게 처리해야 한다는 교훈이었습니다.
아래는 속성값 안의 따옴표를 대체 표기로 처리한 예시입니다. 값이 깨지지 않고 온전히 유지됩니다.
<img src="a.png" alt="그는 "안녕" 이라고 말했다">
3. 줄바꿈 없는 공백
대체 표기 중에 모양이 아니라 동작을 위한 것도 있습니다. 대표적인 것이 줄바꿈을 막는 특별한 공백입니다. 보통의 공백은 그 자리에서 줄이 바뀔 수 있습니다. 문장이 화면 폭에 닿으면 공백을 기준으로 줄이 나뉘죠. 그런데 어떤 경우에는 두 단어가 줄이 나뉘어 떨어지면 안 될 때가 있습니다.
예를 들어 숫자와 단위가 있는 문구를 생각해 봅시다. 무게를 나타내는 숫자와 그 단위가 줄바꿈으로 갈라져, 숫자는 앞 줄 끝에 단위는 다음 줄 처음에 떨어지면 읽기에 어색합니다. 사람 이름의 성과 이름이 갈라지는 것도 마찬가지입니다. 이럴 때 보통의 공백 대신 줄바꿈을 막는 공백을 쓰면, 두 부분이 항상 같은 줄에 붙어 다닙니다.
이 특별한 공백은 눈에 보이기로는 보통의 공백과 같습니다. 다만 그 자리에서 줄이 바뀌지 않는다는 점만 다릅니다. 그래서 갈라지면 곤란한 두 요소 사이에 이 공백을 넣으면, 화면 폭이 어떻든 그 둘은 늘 함께 붙어 표시됩니다. 세밀한 문장 다듬기에 유용한 도구입니다.
다만 이 공백을 여백을 만드는 용도로 남용하면 안 됩니다. 요소 사이에 간격을 두고 싶다고 이 공백을 여러 개 늘어놓는 것은 좋지 않은 습관입니다. 간격은 다른 방법으로 주는 것이 옳고, 이 공백은 어디까지나 줄바꿈을 막는 본래 목적에만 써야 합니다. 도구를 제 용도로 쓰는 절제가 필요합니다.
제가 이 공백을 알고 나서 문장의 세밀한 어색함들을 고칠 수 있게 되었습니다. 전에는 숫자와 단위가 갈라지는 것을 그냥 두었는데, 이 공백을 쓰니 그런 어색함이 사라졌습니다. 작은 도구지만 문장의 완성도를 한 단계 높여 주었습니다. 다만 남용하지 않도록 늘 조심합니다.
아래는 줄바꿈을 막는 공백을 쓴 예시입니다. 숫자와 단위가 갈라지지 않게 됩니다.
<p>총 무게는 10 kg 입니다.</p>
4. 이름 표기와 숫자 표기
화면에 특별한 기호를 보여 주는 대체 표기는 문법 문자에만 있는 것이 아닙니다. 저작권 기호, 화살표, 곱셈 기호, 여러 종류의 대시 같은 다양한 기호에도 대체 표기가 마련되어 있습니다. 이런 기호들을 자판으로 직접 입력하기 어려울 때, 그 기호의 이름 표기를 쓰면 화면에 해당 기호가 나타납니다.
이 표기에는 두 가지 방식이 있습니다. 하나는 기호마다 정해진 이름을 쓰는 방식으로, 외우기 쉽고 읽기에도 뜻이 통합니다. 다른 하나는 그 기호의 번호를 쓰는 방식입니다. 세상의 모든 문자에는 고유한 번호가 매겨져 있는데, 그 번호로 기호를 지목하는 것입니다. 이름이 없는 기호도 번호로는 부를 수 있습니다.
이름 방식은 편하지만 정해진 이름이 있는 기호에만 쓸 수 있습니다. 반면 번호 방식은 모든 문자에 두루 쓸 수 있어 범용적입니다. 자주 쓰는 기호는 이름으로, 이름이 없는 특이한 기호는 번호로 부르는 식으로 상황에 맞게 고르면 됩니다. 저는 뜻이 잘 통하는 이름 방식을 우선 쓰고, 이름이 없을 때만 번호를 씁니다.
이런 대체 표기를 쓸 때 주의할 점은 세미콜론을 빠뜨리지 않는 것입니다. 이 표기는 세미콜론으로 끝나야 완성되는데, 이것을 빠뜨리면 표기가 어정쩡하게 처리되거나 뒤의 글자와 뒤엉킵니다. 표기를 적을 때 세미콜론까지 꼭 챙기는 것이 중요합니다. 저도 이것을 빠뜨려 기호가 이상하게 나온 적이 여러 번 있습니다.
다만 오늘날에는 대다수의 기호를 대체 표기 없이 직접 입력해도 됩니다. 문서가 통합 문자 체계로 되어 있고 저장도 그렇게 되어 있으면, 저작권 기호든 화살표든 그냥 붙여 넣어도 잘 나옵니다. 그래서 대체 표기는 문법 문자처럼 반드시 필요한 경우나, 직접 입력이 어려운 특수한 경우에 주로 쓰게 됩니다.
아래는 이름 표기와 번호 표기를 함께 쓴 예시입니다. 두 방식이 같은 기호를 부르는 것을 보세요.
<p>© 2026 — 자세히 → 여기</p>
5. 코드를 코드로 보여 주기
대체 표기가 가장 빛을 발하는 순간이 코드 자체를 화면에 보여 줄 때입니다. 이 글처럼 태그가 든 코드를 독자에게 그대로 보여 주려면 특별한 처리가 필요합니다. 코드 안의 부등호를 그냥 적으면 브라우저가 그것을 진짜 태그로 해석해 실행해 버리기 때문입니다. 코드를 코드로 보여 주려면 그 안의 문법 문자들을 모두 대체 표기로 바꿔야 합니다.
이것을 놓치면 웃지 못할 일이 벌어집니다. 예를 들어 상자를 만드는 코드를 화면에 보여 주려 했는데 문법 문자를 그대로 두면, 브라우저가 그 코드를 실행해 실제 상자가 화면에 생겨 버립니다. 독자에게 코드를 보여 주려던 것이 엉뚱하게 그 코드가 동작하는 결과로 나타나는 것이죠. 이번 시리즈의 모든 코드 예시가 바로 이 대체 표기로 처리된 것입니다.
이 처리를 일일이 손으로 하는 것은 번거롭습니다. 코드가 길면 그 안의 모든 부등호와 앰퍼샌드를 하나하나 바꿔야 하니까요. 그래서 코드를 자주 보여 주는 문서에서는 이 변환을 자동으로 해 주는 도구를 쓰는 것이 보통입니다. 원본 코드를 넣으면 문법 문자를 대체 표기로 알아서 바꿔 주는 것이죠.
사용자가 쓴 글을 화면에 보여 줄 때도 같은 처리가 필요합니다. 사용자가 우연히 또는 악의로 태그가 든 글을 썼을 때, 그것을 그대로 화면에 내보내면 그 태그가 실행되어 문제가 생깁니다. 그래서 사용자 입력을 화면에 보여 주기 전에 문법 문자를 대체 표기로 바꾸는 것은 보안의 기본입니다. 이 처리가 없으면 심각한 취약점이 됩니다.
제가 이 대체 표기의 중요성을 가장 절실히 느낀 것은 보안 관점에서였습니다. 사용자 입력을 처리 없이 화면에 내보내는 것이 얼마나 위험한지, 그리고 대체 표기 처리가 그 위험을 어떻게 막는지를 알고 나서, 이것을 단순한 표기 기법이 아니라 안전의 핵심 장치로 여기게 되었습니다. 작은 표기 하나가 사이트의 안전을 지키는 것이죠.
이번 편에서는 문법 문자의 대체 표기, 속성 안 따옴표, 줄바꿈 없는 공백, 이름과 번호 표기, 그리고 코드를 코드로 보여 주는 법까지 살펴봤습니다. 다음 편에서는 요소에 우리만의 데이터를 붙이는 커스텀 속성으로 넘어가겠습니다. 글자를 다루는 세밀한 기법을 익혔으니, 이제 요소에 정보를 담는 법을 배울 차례입니다.