HTML을 텍스트로 변환

HTML을 텍스트로 변환하는 일이 실제로 하는 것

웹 페이지, 이메일, CMS 내보내기는 순수 텍스트가 아닙니다. 정작 중요한 단어를 p, div, span, a, strong 같은 태그가 감싼 트리, 곧 HTML입니다. 그 소스를 복사하거나 서식 있는 조각을 붙여넣으면 인라인 스타일, 추적 속성, 구조용 마크업이 딸려 오는데, 읽을 수 있는 콘텐츠만 따로 원하는 순간 이것들이 방해가 됩니다. HTML을 텍스트로 변환하는 일은 그 트리를 훑으며 눈에 보이는 단어만 남기고 모든 태그와 속성을 버립니다.

목표는 단순히 꺾쇠괄호를 지우는 것이 아닙니다. 태그를 순진하게 찾아 바꾸면 문단이 서로 짓눌려 단정한 글 한 편이 끊어지지 않는 벽이 되어 버립니다. 제대로 된 변환은 문단, 제목, 목록 항목 같은 블록 수준 요소를 경계로 다뤄 줄바꿈을 넣음으로써 결과가 사람이 읽을 때와 같은 논리적 순서로 읽히게 하고, 볼드나 이탤릭 같은 인라인 요소는 그저 사라지며 그 텍스트만 남깁니다.

무엇을 지키고 무엇을 잃는가

설계상 순수 텍스트는 시각적 서식을 담을 수 없습니다. 볼드, 이탤릭, 글꼴 크기, 색상, CSS 레이아웃은 모두 텍스트 파일에 깃들 자리가 없어 떨어져 나갑니다. 테이블은 연속된 줄로 무너지고, 정확한 열 구조는 보존되지 않습니다. 이는 예상된 것입니다. 표현을 이식성과 맞바꾸는 것이니까요.

링크와 이미지는 흥미로운 중간 지대입니다. Preserve Links를 켜면 앵커가 [text](url)로 렌더링되어 목적지가 읽을 수 있는 형태로 살아남고, Include Image Alt Text를 켜면 이미지를 소리 없이 떨궈 내는 대신 설명적인 alt 속성을 유지합니다. 더 깔끔하게 읽고 싶다면 그 옵션을 끄거나, Ignore Images와 Ignore HR Tags로 자리표시자와 수평선을 아예 억제하세요.

실제 예제

이 조각을 붙여넣는다고 해 봅시다. shop이 example.com 으로 가는 링크인 Visit our shop이라는 문단, 그 뒤에 Tom & Jerry 엔티티를 담은 두 번째 문단입니다. Preserve Links와 Decode HTML Entities를 켜면 출력은 깔끔한 두 줄이 됩니다. 첫 줄에 Visit our [shop](https://example.com), 둘째 줄에 Tom & Jerry입니다. p 태그는 줄바꿈이 되었고, 앵커는 대괄호와 괄호 형태로 다시 쓰였으며, & 는 문자 그대로의 앰퍼샌드로 디코딩되었습니다.

HTML 엔티티가 중요한 이유

HTML은 브라우저가 마크업으로 오해하지 않도록 특정 문자를 이스케이프합니다. 앰퍼샌드는 &amp;, 보다 작음 기호는 &lt;, 줄바꿈 없는 공백은 &nbsp; 로 쓰이고, 둥근 따옴표는 흔히 &#8220; 와 &#8221; 로 나타납니다. 디코딩을 건너뛰면 그 날것의 시퀀스가 텍스트로 새어 들어와 깨진 것처럼 보입니다. Decode HTML Entities를 켜면 이것들이 그것이 나타내는 실제 문자, 즉 &, <, 일반 공백, 그리고 제대로 된 따옴표로 되돌아갑니다. 이 설정 하나가, 거의 맞는데 엉뚱한 앰퍼샌드 코드가 점점이 박힌 출력에 대한 가장 흔한 해결책입니다.

줄바꿈과 자동 줄바꿈 제어하기

두 설정이 결과의 배치를 좌우합니다. Preserve Line Breaks는 블록 요소가 암시하는 줄바꿈을 유지해 문단이 분리된 채로 있게 하고, Preserve Whitespace는 HTML이 보통 축소하는 공백과 들여쓰기의 연속을 보존하는데, 코드나 ASCII 배치처럼 원래 간격이 의미를 지닐 때 유용합니다.

Word Wrap은 한 줄당 최대 글자 수를 정하고 긴 문단을 거기에 맞게 다시 흘려보내는데, 터미널, 고정 폭 이메일, 순수 텍스트 README에 붙여넣을 때 편리합니다. 0으로 설정하면 자동 줄바꿈이 완전히 꺼져 각 문단이 길지만 한 줄에 유지되어, 자체적으로 줄바꿈을 하는 목적지에 보낼 준비가 됩니다.

실제 활용 사례

서식 있는 콘텐츠를 중립적인 텍스트로 만들어야 할 때면 언제든 이 도구에 손을 뻗으세요. 흔한 경우로는 재사용이나 인용을 위해 게시된 웹 페이지에서 깔끔한 글을 떼어내기, 다른 곳에 가져오기 전에 CMS나 뉴스레터 내보내기를 정제하기, HTML 이메일에서 읽을 수 있는 본문 끌어내기, 글자 수나 가독성 검사를 위한 콘텐츠 준비하기, 그리고 태그가 아닌 순수 입력을 기대하는 번역 도구나 스크립트에 깔끔한 글을 넣기 등이 있습니다.

개발 중의 빠른 점검에도 좋습니다. 렌더링된 템플릿을 텍스트로 변환하면 실제 읽기 순서가 드러나고, CSS로 시각적으로 숨겨졌지만 마크업에는 여전히 존재하는 콘텐츠가 노출되는데, 이는 접근성과 SEO 점검에 중요할 수 있습니다.

피해야 할 흔한 실수

가장 큰 함정은 레이아웃이 살아남기를 기대하는 것입니다. 테이블 구조, 글머리 기호 계층, 스타일이 보존되어야 한다면 순수 텍스트는 잘못된 목표입니다. 대신 Markdown으로 변환하거나 HTML을 그대로 두세요. 두 번째 함정은 엔티티 디코딩을 잊은 채 왜 출력에 &amp; 가 곳곳에 있는지 의아해하는 것입니다. 끝으로, 변환은 붙여넣은 마크업에 들어 있는 것만 반영한다는 점을 기억하세요. 페이지가 로드 후 JavaScript로 콘텐츠를 구성한다면 View Source에서 복사한 원시 HTML은 거의 비어 있을 수 있으니, 대신 렌더링된 DOM을 복사하세요.