HTML 문자열 이스케이프 변환 원리와 검증법
HTML 코드 블록을 자바스크립트 문자열 변수로 옮길 때는 줄바꿈을 실제 개행이 아니라 데이터로 남기고, 문자열을 감싸는 기호와 겹치는 따옴표만 정확히 이스케이프해야 문법 에러 없이 붙여넣을 수 있습니다. 이 처리를 손으로 하면 줄 하나, 따옴표 하나만 놓쳐도 실행 시점에야 에러가 드러납니다. 이 글은 쌍따옴표·홑따옴표 모드와 백틱(템플릿 리터럴) 모드가 각각 왜 다르게 동작하는지, 그리고 변환 결과를 코드에 붙이기 전에 무엇을 확인해야 하는지를 다룹니다.
요약 ① 쌍따옴표·홑따옴표 모드는 줄마다 문자열을 끊어 "\n" 과 + 로 다시 이어 붙입니다. 일반 문자열은 소스 코드 안에 실제 줄바꿈을 담을 수 없기 때문입니다. ② 백틱 모드는 줄바꿈을 그대로 두고 백틱(`)과 ${ 만 이스케이프합니다. 템플릿 리터럴은 원래 여러 줄을 그대로 담는 문법이기 때문입니다. ③ 변환 후 문법 에러가 나면 대부분 감싸는 기호를 손으로 바꿔치기했거나, 여러 줄짜리 결과의 일부만 복사해 마지막 줄의 세미콜론이 빠졌기 때문입니다.
왜 이 문제가 실제로 발생하나
정적 페이지에 붙이는 위젯 스크립트, 이메일 발송 코드, 브라우저 확장 프로그램의 콘텐츠 스크립트처럼 HTML 마크업 덩어리를 자바스크립트 문자열 변수 하나에 통째로 담아야 하는 경우가 자주 있습니다. 디자이너나 퍼블리셔가 만든 HTML 조각을 개발자가 코드 파일 안에 그대로 옮겨 넣는 상황입니다.
이때 HTML을 그냥 복사해 따옴표 사이에 붙여 넣으면, 태그의 속성에 들어있는 class="box" 같은 따옴표가 문자열을 감싸는 따옴표와 충돌해 그 지점에서 문자열이 끊깁니다. 게다가 HTML은 보통 여러 줄로 되어 있는데, 자바스크립트의 일반 문자열은 소스 코드 안에 실제 줄바꿈이 들어가는 것을 허용하지 않습니다.
그래서 줄바꿈과 따옴표를 각각 규칙에 맞게 처리해야 하고, 그 규칙은 어떤 종류의 따옴표로 문자열을 감싸느냐에 따라 달라집니다.
도구 없이 직접 변환하는 방법
원리를 알면 손으로도 할 수 있습니다. 먼저 문자열을 무엇으로 감쌀지부터 정합니다.
쌍따옴표·홑따옴표 모드로 처리하기
쌍따옴표(") 또는 홑따옴표(')를 고른 경우, 다음 순서로 처리합니다.
- HTML을 줄바꿈 지점마다 잘라 여러 줄로 나눕니다.
- 각 줄 안에서 원본에 백슬래시()가 있으면 먼저 \ 로 이스케이프합니다.
- 그 줄 안에서 감싸는 기호와 같은 문자(쌍따옴표를 골랐다면 ", 홑따옴표를 골랐다면 ')가 나올 때마다 앞에 \ 를 붙입니다.
- 줄 끝에 개행을 뜻하는 "\n" 을 붙이고, 전체를 따옴표로 감쌉니다.
- 마지막 줄이 아니면 뒤에 연결 연산자 + 를 붙여 다음 줄 문자열과 이어질 준비를 하고, 마지막 줄에만 + 대신 문장을 마치는 세미콜론 ; 을 붙입니다.
줄을 이렇게 쪼개서 + 로 다시 잇는 이유는 간단합니다. "..." 나 '...' 로 감싼 일반 문자열은 소스 코드 중간에 실제 줄바꿈 문자가 있으면 그 자리에서 끝나지 않은 문자열로 처리되어 에러가 납니다.
그래서 실제 개행은 문자로 표현한 "\n" 으로 대신하고, 소스 코드 상의 줄바꿈은 문자열 여러 개를 + 연산자로 이어 붙이는 방식으로 흉내 냅니다.
백틱 모드로 처리하기
백틱(`)을 고른 경우는 다릅니다. 줄을 쪼갤 필요 없이 HTML 전체를 백틱 두 개 사이에 그대로 넣습니다. ES6에서 도입된 템플릿 리터럴은 애초에 소스 코드 안의 실제 줄바꿈을 그대로 담을 수 있도록 만들어진 문법이기 때문입니다.
이 경우 이스케이프할 대상은 두 가지뿐입니다. 원본에 백틱() 문자가 있으면 \ 로 바꾸고, 변수를 끼워 넣는 표현식 기호인 ${ 가 있으면 ${ 로 바꿉니다.
${ 를 그대로 두면 자바스크립트가 그 뒤를 코드로 해석하려고 시도해 원치 않는 동작이나 에러로 이어집니다. 반면 일반 따옴표(", ')는 백틱 모드에서 아무 의미가 없는 평범한 글자라서 이스케이프할 필요가 없습니다.
줄 수가 많은 HTML을 이 규칙대로 손으로 처리하다 보면, 한 줄이라도 백슬래시나 따옴표를 빠뜨리기 쉽습니다. 규칙 자체는 위 내용이 전부이니, 반복 작업만 줄이면 됩니다. 저희 도구로 확인하기.
쌍따옴표·홑따옴표·백틱 세 가지 모드로 HTML을 JS 문자열 선언문으로 변환합니다. 설치나 가입이 필요 없습니다.
흔히 헷갈리는 지점과 실수
| 모드 | 줄바꿈 처리 | 이스케이프 대상 |
|---|---|---|
| 쌍따옴표 " | 줄마다 잘라 "\n" + 로 연결 | 큰따옴표("), 백슬래시() |
| 홑따옴표 ' | 줄마다 잘라 "\n" + 로 연결 | 작은따옴표('), 백슬래시() |
| 백틱 ` | 그대로 유지(줄을 자르지 않음) | 백틱(`), ${ |
가장 흔한 실수는 변환 결과를 받은 뒤 감싸는 기호만 손으로 바꾸는 것입니다. 예를 들어 백틱 모드로 변환한 결과를 두고, 나중에 백틱만 쌍따옴표로 손수 바꿔치기하면 문제가 생깁니다.
백틱 모드는 애초에 " 나 ' 를 이스케이프하지 않았기 때문에, HTML 속성 안에 있던 따옴표가 그대로 남아 있다가 문자열을 중간에서 끊어버립니다. 쌍따옴표로 된 결과가 필요하면 도구에서 쌍따옴표 모드를 다시 선택해 변환해야 합니다.
두 번째 실수는 입력을 수정한 뒤 변환 버튼을 다시 누르지 않는 것입니다. 이 도구는 입력창의 내용이 바뀐다고 자동으로 다시 계산하지 않고, "JS 문자열로 변환하기" 버튼을 눌러야만 결과가 갱신됩니다. HTML을 고친 뒤 예전 결과를 그대로 복사하면 코드와 실제 화면이 어긋납니다.
세 번째는 여러 줄로 나뉜 결과의 일부만 복사하는 것입니다. 쌍따옴표·홑따옴표 모드의 결과는 대부분의 줄이 + 로 끝나고 오직 마지막 줄만 세미콜론으로 끝납니다. 결과 끝부분을 빠뜨리고 복사하면 + 로 끝난 채 뒤가 없는 미완성 문장이 되고, 반대로 결과 뒤에 다른 코드를 그대로 이어 붙이면 이미 세미콜론으로 끝난 문장 뒤에 엉뚱한 토큰이 붙어 에러가 납니다.
정리
- 일반 문자열(", ')은 소스 코드 안에 실제 줄바꿈을 담을 수 없어서, 쌍따옴표·홑따옴표 모드는 줄 단위로 쪼개고 "\n" + 로 이어 붙입니다.
- 백틱 템플릿 리터럴은 여러 줄을 그대로 담는 문법이라, 줄을 쪼갤 필요 없이 백틱과 ${ 만 이스케이프합니다.
- 백틱 모드는 일반 따옴표를 이스케이프하지 않으므로, 변환 후 감싸는 기호만 손으로 바꾸면 안 됩니다.
- 결과를 붙이기 전에는 마지막 줄이 세미콜론으로 끝나는지, 그 앞 줄들이 전부 + 로 이어지는지 확인해야 합니다.
- 입력을 수정했다면 변환 버튼을 다시 눌러야 최신 결과를 얻을 수 있습니다.
쌍따옴표·홑따옴표·백틱 세 가지 모드로 HTML을 JS 문자열 선언문으로 변환합니다. 설치나 가입이 필요 없습니다.
자주 묻는 질문
왜 백틱 모드는 따옴표를 이스케이프하지 않나요?
백틱 문자열 안에서 " 와 ' 는 구분자가 아니라 평범한 글자이기 때문입니다. 자바스크립트가 문자열의 끝으로 인식하는 기호는 그 문자열을 시작한 것과 같은 백틱뿐이라, 이스케이프가 필요한 대상은 백틱 자신과 표현식 삽입 기호인 ${ 뿐입니다.
변환 결과를 붙였는데 문법 에러가 납니다. 왜 그런가요?
대부분 두 가지 중 하나입니다. HTML을 수정한 뒤 변환 버튼을 다시 누르지 않고 예전 결과를 복사했거나, 여러 줄로 나뉜 결과의 일부만 복사해 마지막 줄의 세미콜론이 빠졌거나 뒤에 다른 코드가 잘못 이어 붙은 경우입니다. 결과창 전체를 처음부터 끝까지 다시 복사해 확인하는 것이 가장 빠릅니다.
원본 HTML에 백슬래시가 있으면 어떻게 되나요?
쌍따옴표·홑따옴표 모드에서는 각 줄의 백슬래시도 이스케이프 대상이라 \ 로 두 번 표기됩니다. 경로나 정규식 패턴처럼 백슬래시가 포함된 텍스트를 다룰 때는, 결과에서 백슬래시가 하나가 아니라 두 개로 나오는 것이 정상이라는 점을 알아두면 됩니다.
백틱 모드로 변환한 결과를 나중에 쌍따옴표 문자열로 바꿔도 되나요?
권장하지 않습니다. 백틱 모드는 " 와 ' 를 이스케이프하지 않기 때문에, 감싸는 기호만 손으로 바꾸면 HTML 속성 안의 따옴표가 그대로 남아 문자열을 조기에 끝내버립니다. 쌍따옴표로 된 결과가 필요하면 도구에서 쌍따옴표 모드를 다시 선택해 변환하는 것이 안전합니다.