텍스트를 HTML로 변환

일반 텍스트에 변환이 필요한 이유

텍스트 편집기에서 글을 입력하면 눈에 보이는 줄 바꿈과 빈 줄은 파일 안에 실제로 존재하는 문자입니다. 하지만 브라우저는 이를 무시합니다. HTML은 개행을 포함해 연속된 공백 문자를 모두 하나의 공백으로 합쳐 버리기 때문입니다. 깔끔하게 정리한 초안을 웹 페이지에 그대로 붙여넣으면 구분 없이 하나로 뭉쳐진 문단처럼 표시됩니다. 간격을 되살리려면 이 보이지 않는 줄 바꿈을 실제 마크업으로 옮겨야 하는데, 이 변환기가 하는 일이 바로 그것입니다.

이 도구는 입력한 텍스트를 읽어 문단 경계를 찾아내고, 각 블록을 의미에 맞는 태그로 감싸 브라우저가 의도한 대로 콘텐츠를 배치하도록 만듭니다. 그 결과로 태그를 하나하나 손으로 입력하지 않고도 CMS, 이메일 템플릿, 블로그 게시물에 그대로 넣을 수 있는 깔끔하고 구조화된 HTML이 만들어집니다.

문단과 줄 바꿈을 감지하는 방식

핵심 규칙은 단순하고 예측 가능합니다. 빈 줄 하나가 한 문단의 끝이자 다음 문단의 시작을 나타냅니다. 빈 줄 사이의 각 텍스트 블록은 저마다 p 태그로 감싸지는데, p 태그는 문단을 나타내는 올바른 의미 요소이며 브라우저 기본 스타일을 통해 적절한 간격을 제공합니다.

문단 안의 단일 줄 바꿈은 별개의 문제입니다. 기본적으로는 단일 줄 바꿈이 제거되지만, Preserve line breaks를 켜면 각 단일 개행이 br 태그로 바뀌어 우편 주소나 짧은 시 같은 텍스트가 한 문단 안에서 원래의 줄 구조를 그대로 유지합니다. 이 구분은 중요합니다. p 태그는 여백이 있는 분리된 블록을 만드는 반면, br 태그는 그런 추가 간격 없이 블록 안에서 줄만 바꿉니다.

실제 예시

빈 줄로 구분된 두 개의 짧은 문단이 있고, 그중 첫 번째 문단은 입력할 때 두 줄로 나뉘어 있다고 가정해 봅시다. 문단 변환을 켜고 Preserve line breaks를 끈 상태에서는 p 요소 두 개가 만들어지며, 첫 번째 문단은 끊김 없이 이어지는 하나의 문장으로 표시됩니다. Preserve line breaks를 켜면 이제 첫 번째 p 안에 Enter를 누른 지점마다 br 태그가 들어가, 입력했던 두 줄이 위아래로 그대로 유지됩니다. 같은 입력이지만 체크박스 하나로 선택하는, 서로 다르면서도 모두 유효한 두 가지 결과인 셈입니다.

반드시 이해해야 할 이스케이프 주의 사항

이 변환기는 글을 위한 도구이므로, 입력을 무력화해야 할 코드가 아니라 감싸야 할 콘텐츠로 취급합니다. 즉, HTML에서 특별한 의미를 가지는 문자가 자동으로 이스케이프되지 않습니다. 텍스트에 꺾쇠괄호나 앰퍼샌드가 글자 그대로 들어 있으면 입력한 그대로 마크업에 전달됩니다.

실제로 일반적인 글쓰기에서는 이것이 문제되지 않지만, 텍스트에 기호가 포함될 때는 신중해야 합니다. 코드에 관한 글을 쓰면서 문단에 보다 작음 기호 뒤에 태그 이름이 오는 형태가 들어 있다면, 브라우저가 이를 마크업으로 해석하려 할 수 있습니다. 이런 위험이 있을 때는 위험한 문자를 직접 먼저 이스케이프해서, 앰퍼샌드는 &로, 보다 작음 기호는 <로, 보다 큼 기호는 >로 바꾸면 해당 문자가 파싱되지 않고 글자 그대로 표시됩니다.

클래스와 완전한 문서

두 가지 옵션으로 출력물을 사용할 곳에 맞게 다듬을 수 있습니다. Add class to paragraphs는 생성되는 모든 p 태그에 CSS 클래스를 찍어 넣어, 붙여넣는 순간 콘텐츠 블록 전체가 기존 스타일을 그대로 물려받게 해 주며 수동으로 편집할 필요가 없습니다. 변환한 텍스트를 사이트의 타이포그래피에 맞추는 가장 빠른 방법입니다.

Wrap in complete HTML document는 조각 코드를 문단 주위에 html, head, body 태그를 갖춘 완전한 독립 파일로 끌어올립니다. 이미 그런 구조를 제공하는 기존 페이지나 편집기에 붙여넣을 때는 꺼 두고, 저장한 뒤 브라우저에서 바로 열거나 HTML 문서로 첨부할 수 있는 자체 완결형 파일이 필요할 때는 켜세요.

실제 작업 흐름에서의 활용

가장 흔한 용도는 일반 편집기나 메모 앱에서 쓴 글을 발행 시스템으로 옮기는 것입니다. 일반 텍스트로 편하게 초안을 작성하고 변환기에 통과시킨 뒤, 문단 구분이 그대로 유지된다는 확신을 가지고 CMS에 유효한 마크업을 붙여넣으면 됩니다. 직접 만드는 HTML 이메일에도 똑같이 유용한데, 많은 메일 클라이언트가 CSS를 제거하기 때문에 공백에 의존하지 않고 명시적인 p 태그와 br 태그가 필요하기 때문입니다.

개발자는 이 도구로 템플릿과 픽스처를 빠르게 채워, 한 덩어리의 글을 컴포넌트나 목업 페이지에 바로 쓸 수 있는 마크업으로 바꿉니다. 플랫폼 간에 콘텐츠를 이전하는 사람이라면 누구나, 가져오기 전에 지저분하게 붙여넣은 텍스트를 일관되고 의미에 맞는 문단으로 정리하는 데 활용할 수 있습니다.

피해야 할 흔한 실수

대표적인 실수는 새 문단을 의도한 자리에 단일 줄 바꿈만 쓰고는 두 블록이 왜 한데 붙었는지 의아해하는 것입니다. 진짜 문단 사이에는 빈 줄을 넣으세요. 반대되는 실수는 흐르듯 이어지는 글에 Preserve line breaks를 켜 둔 채로 두는 것인데, 그러면 br 태그가 텍스트 곳곳에 흩어져 화면 크기가 다를 때 자연스러운 재배치를 방해합니다. 그리고 앞서 언급했듯이, 이 도구가 특수 문자를 정화해 준다고 가정하지 마세요. 글자 그대로 보여 주고 싶은 HTML 기호가 콘텐츠에 들어 있다면 변환하기 전에 직접 이스케이프하세요.