HTML을 텍스트로 변환하기: 태그 제거하고 깔끔한 본문만 빠르게 추출하기

웹 페이지에서 텍스트를 복사해서 붙여넣었더니 <p> 태그와   문자들이 뒤섞여 나온 경험, 다들 한 번쯤 있으시죠? HTML 이메일 템플릿을 텍스트 에디터에서 열었다가 <td>와 <span style="color:#333333"> 으로 도배된 내용을 마주쳤을 때의 당혹감도 마찬가지입니다.

바로 이런 상황을 해결하는 것이 HTML to Text 변환기의 역할입니다. 단순히 태그를 제거하는 것처럼 들리지만, 실제로는 엔티티 처리, 줄바꿈 정규화 등 몇 가지 세부 사항이 있어서 제대로 구현하는 것이 생각보다 까다롭습니다. 이 도구가 실제로 어떻게 작동하는지, 언제 필요한지, 그리고 어떤 한계가 있는지 살펴보겠습니다.

HTML to Text 변환기가 실제로 하는 일

표면적으로는 < > 괄호 안에 있는 모든 것을 제거하는 작업처럼 보입니다. 하지만 그게 전부가 아닙니다.

태그 제거는 당연히 가장 기본적인 부분입니다. <div>, <p>, <span>, <a>, <img> 등 모든 요소가 제거되고, 태그 사이의 내용만 남습니다.

엔티티 디코딩은 많은 단순한 구현들이 놓치는 부분입니다. HTML은 마크업을 깨뜨릴 수 있는 문자들을 표현하기 위해 엔티티를 사용합니다. & 기호는 &로, <는 <로, 줄바꿈 없는 공백은  로 씁니다. 태그만 제거하고 엔티티를 그대로 두면 출력물에 이런 코드들이 그대로 남아서 전혀 읽기 좋지 않습니다.

제대로 된 변환기는 &, <, >, ",  , —, © 같은 명명된 엔티티뿐 아니라 10진수( )와 16진수( ) 형태의 숫자 엔티티도 모두 처리합니다.

줄바꿈 처리도 중요한 세 번째 요소입니다. HTML의 공백 규칙은 일반 텍스트와 다릅니다. 소스 코드의 줄바꿈은 시각적으로 아무 의미가 없고, 여러 개의 공백은 하나로 합쳐집니다. 브라우저에서 보이는 구조는 <p>, <div>, <h1>~<h6>, <li>, <br>, <hr> 같은 블록 요소에서 나옵니다. 제대로 된 변환기는 이런 요소들을 만날 때 줄바꿈이나 빈 줄을 삽입해서 단락 구조를 유지합니다.

/tools/html-to-text에서 HTML을 붙여넣으면 이 세 가지를 모두 자동으로 처리해줍니다.

실제 사용 사례

이 도구가 실제로 어떤 상황에서 필요한지 살펴보겠습니다. 생각보다 다양한 상황이 있습니다.

HTML 이메일 정리하기

최신 마케팅 이메일 템플릿은 HTML이 매우 복잡하게 구성되어 있습니다. 동료가 특정 문구를 인용해 달라고 이메일을 전달했는데 .eml 파일이나 Outlook에서 복사한 내용만 있다면, 이런 상황을 마주하게 됩니다:

<td class="mcnTextContent" style="padding-top:0;padding-right:18px;">
  <p>2분기 제품 로드맵을 발표하게 되어 기쁩니다&hellip;</p>
</td>

이것을 변환기에 붙여넣으면 이렇게 됩니다:

2분기 제품 로드맵을 발표하게 되어 기쁩니다…

원하는 내용만 깔끔하게 추출됩니다.

이메일의 일반 텍스트 버전 만들기

HTML 이메일 캠페인을 발송할 때는 일반 텍스트 버전도 함께 제공해야 합니다. 이메일 전달 가능성이 높아지고, HTML을 렌더링하지 않는 클라이언트나 사용자 환경에도 대응할 수 있기 때문입니다. 디자인된 템플릿에서 일반 텍스트 버전을 직접 작성하는 것은 상당히 번거로운 작업입니다. 변환기를 거치면 수정하기 좋은 초안을 빠르게 얻을 수 있고, 여기에 적절한 줄바꿈을 추가하거나 불필요한 네비게이션 링크를 제거하는 작업만 하면 됩니다.

완벽한 결과가 나오지는 않지만, 빈 파일에서 시작하는 것보다 훨씬 나은 출발점이 됩니다.

웹 스크래핑과 콘텐츠 추출

웹 페이지를 스크래핑하면 네비게이션, 사이드바, 광고, 푸터, 스크립트가 모두 포함된 전체 HTML이 돌아옵니다. BeautifulSoup나 cheerio로 메인 콘텐츠 영역을 타겟팅하더라도 여전히 HTML이 남아있습니다. 변환기를 통과시키면 읽을 수 있는 텍스트를 얻을 수 있습니다.

빠른 일회성 스크래핑 작업 — 제품 설명 가져오기, 블로그 포스트 텍스트 추출, 레시피 정보 수집 — 에서는 HTML을 도구에 붙여넣는 것이 파서를 직접 작성하는 것보다 확실히 빠릅니다. 체계적이고 대규모 작업이라면 서버 사이드 도구를 써야 하지만, 간단한 작업에서는 이 방법이 최고입니다.

데이터베이스나 검색 인덱스에 저장하기

CMS 기반 블로그나 리치 텍스트 에디터처럼 HTML로 콘텐츠를 저장하지만, 전문 검색 인덱싱이나 AI 모델 입력, 또는 HTML을 렌더링하지 않는 컨텍스트에서 표시하기 위해 순수 텍스트가 필요한 경우가 있습니다. 변환을 통해 얻은 순수 텍스트는 태그 구문에 노출될 위험 없이 안전하게 인덱싱하거나 비교하거나 다운스트림 시스템에 전달할 수 있습니다.

텍스트만 지원하는 환경에 붙여넣기

Google Docs, Notion, 일반 텍스트 에디터, SMS 템플릿, 터미널 출력 등 텍스트는 받지만 HTML은 지원하지 않는 곳들이 많습니다. 브라우저에서 텍스트를 복사하면 숨겨진 HTML 포맷이 함께 따라오는 경우가 많습니다. 먼저 변환한 다음 순수 텍스트를 붙여넣으면 이런 문제를 깔끔하게 해결할 수 있습니다.

HTML 엔티티란 무엇이며 왜 중요한가

이 부분은 많은 사람들이 헷갈려하기 때문에 좀 더 자세히 설명하겠습니다.

HTML 사양은 특수 문자를 표현하기 위한 명명된 문자 참조 집합을 정의합니다. &, <, >, " 같은 것들입니다. 이것들이 존재하는 이유는 HTML 자체가 <, >, &를 문법 문자로 사용하는 텍스트 형식이기 때문입니다. 브라우저에 <를 표시하려면 HTML에서 <라고 써야 합니다. 그렇지 않으면 브라우저가 새로운 태그의 시작으로 인식합니다.

태그는 제거했지만 엔티티를 디코딩하지 않으면 이런 결과가 나옵니다:

입력 HTML:
<p>가격은 10달러 &amp; 배송비는 무료입니다. &lt;세부 정보&gt; 페이지를 확인하세요.</p>

태그만 제거한 후:
가격은 10달러 &amp; 배송비는 무료입니다. &lt;세부 정보&gt; 페이지를 확인하세요.

태그 제거 + 엔티티 디코딩 후:
가격은 10달러 & 배송비는 무료입니다. <세부 정보> 페이지를 확인하세요.

두 번째 결과가 실제로 브라우저에서 보이는 모습입니다. 바로 이것이 원하는 결과물입니다.

자주 접하는 엔티티들:

& → &
< → <
> → >
  → 줄바꿈 없는 공백 (출력에서는 보통 일반 공백으로 표시)
— → — (em 대시)
… → … (줄임표)
© → ©
“, ” → ", " (곱슬 따옴표)

제대로 된 변환기라면 이 모든 것을 투명하게 처리합니다.

HTML to Text vs HTML to Markdown

둘 다 HTML을 다른 형식으로 변환하지만 목적이 다릅니다.

HTML to Text를 사용할 때:

진짜 순수한, 서식 없는 콘텐츠가 필요할 때
Markdown을 이해하지 못하는 시스템에 출력물을 전달할 때
일반 텍스트 이메일 버전을 만들 때
마크업이 노이즈일 뿐인 텍스트 분석이나 자연어 처리를 할 때
사용자 생성 HTML을 안전하게 저장하거나 비교하기 위해 정제할 때

HTML to Markdown을 사용할 때:

문서 구조 (제목, 굵은 글씨, 이탤릭체, 링크, 목록)를 보존하고 싶을 때
HTML CMS에서 Markdown 기반 시스템으로 콘텐츠를 마이그레이션할 때
나중에 Markdown을 지원하는 곳에서 다시 렌더링할 계획이 있을 때
사람이 편안하게 편집할 수 있는 형태를 원할 때

핵심 차이: HTML to Text는 모든 서식 구조를 잃습니다. HTML to Markdown은 사람이 읽고 편집하기 좋은 형태로 구조를 유지합니다. WordPress에서 Astro나 Hugo로 블로그를 이전하는 경우라면 Markdown 변환이 적합하고, 검색 엔진이나 언어 모델을 위한 텍스트 추출이라면 순수 텍스트가 더 깔끔합니다.

줄바꿈 동작과 예상 결과

HTML-to-text 변환에서 가장 까다로운 부분 중 하나가 공백 처리입니다.

HTML에서는 소스 코드의 줄바꿈이 공백으로 처리되고, 여러 개의 공백은 하나로 합쳐집니다. 브라우저에서 보이는 시각적인 줄바꿈은 전적으로 블록 요소와 CSS에서 나옵니다. 태그를 제거할 때는 각 요소 경계에서 어떻게 처리할지를 결정해야 합니다.

합리적인 규칙 세트:

<br> → 단일 줄바꿈
<p>, <div>, <h1>~<h6> → 이중 줄바꿈 (앞뒤로 빈 줄)
<li> → 글머리 기호나 번호가 붙은 줄바꿈
<hr> → 대시 라인이나 빈 줄
인라인 요소 (<span>, <a>, <strong>, <em>) → 텍스트 내용만, 추가 공백 없음

HTML to Text 도구는 이런 규칙들을 적용해서 출력물이 읽기 좋고 어느 정도 구조화되도록 합니다. 복잡한 레이아웃 (테이블, 다중 컬럼 div)에서는 완벽하지 않을 수 있습니다.

한계: 이 도구가 잘 못하는 것

솔직하게 어떤 부분이 안 되는지 이야기해야 할 것 같습니다.

이미지는 완전히 사라집니다. 이미지에 해당하는 일반 텍스트가 없기 때문에, <img> 태그는 src, alt를 포함한 모든 속성과 함께 제거됩니다. 이미지가 중요한 정보를 담고 있다면 해당 정보는 사라집니다. alt 텍스트를 보존해야 한다면 Markdown 변환을 고려해보세요.

복잡한 테이블 레이아웃은 제대로 평탄화되지 않습니다. 레이아웃용으로 사용된 HTML 테이블, 특히 오래된 <table> 기반 이메일 템플릿은 일반 텍스트로 변환했을 때 읽기 어려운 결과가 나오는 경우가 많습니다. 셀들이 읽기 순서로 이어붙여지는데, 이게 사람이 기대하는 순서와 다를 수 있습니다.

CSS로 숨겨진 콘텐츠도 포함됩니다. display: none이나 visibility: hidden이 적용된 요소도 HTML 소스에는 존재하므로, 그 텍스트 내용이 출력물에 나타납니다. 전체 브라우저 렌더링 파이프라인을 실행하지 않고는 CSS 상태에 따라 제거하는 것이 불가능합니다.

JavaScript로 렌더링된 콘텐츠는 보이지 않습니다. JavaScript를 통해 동적으로 콘텐츠를 로드하는 페이지의 원시 HTML 소스를 붙여넣으면, 변환기는 정적 HTML에 있는 내용만 처리합니다. JS로 렌더링된 페이지는 헤드리스 브라우저로 먼저 렌더링된 결과를 가져와야 합니다.

시맨틱 해석이 없습니다. 변환기는 <nav>가 건너뛸 수 있는 네비게이션이라거나, <aside>가 원치 않는 사이드바라는 것을 모릅니다. 모든 요소를 동등하게 취급합니다. 더 깔끔한 출력을 원한다면 변환 전에 <nav>, <footer>, <aside>, <script>, <style> 블록을 미리 제거하는 것이 좋습니다.

웹 스크래핑 목적으로는 특정 요소를 선택자로 타겟팅하고 텍스트를 추출할 수 있는 BeautifulSoup (Python)나 cheerio (Node.js)가 프로덕션 용도에 더 적합합니다. HTML to Text 도구는 이런 트레이드오프를 감수할 수 있는 빠른 일회성 변환에 적합합니다.

실제 워크플로 예시

현실적인 시나리오를 하나 살펴보겠습니다. 제품 설명 페이지를 스크래핑해서 <main> 요소의 원시 HTML을 가지고 있고, 이를 비교 스프레드시트에 사용할 순수 텍스트로 변환하려 합니다.

스크래퍼나 브라우저 DevTools에서 HTML을 복사합니다.
/tools/html-to-text에 붙여넣습니다.
태그가 제거되고, 엔티티가 디코딩되고, 블록 요소가 줄바꿈으로 변환된 출력물이 나타납니다.
결과를 스프레드시트에 복사합니다.

소요 시간: 약 15초. 브라우저 콘솔에서 정규식으로 처리하려면 더 오래 걸리고, 엔티티도 제대로 처리 안 될 가능성이 높습니다.

마무리

HTML to Text 변환은 단순해 보이다가 막상 해보면 생각보다 복잡하다는 것을 깨닫게 되는 작업입니다. 태그는 명백한 부분이고, 엔티티와 공백 정규화가 사람들을 괴롭히는 진짜 부분입니다.

HTML to Text 도구는 이 모든 것을 한 번에 처리합니다. 이메일, 스크래핑한 페이지, CMS 내보내기, 또는 HTML 덩어리가 있는 어떤 상황에서든 마크업에서 순수 텍스트로 가는 가장 빠른 방법입니다.

서식을 제거하는 것이 아니라 보존하고 싶다면 HTML to Markdown을 확인해보세요. HTML 엔티티를 직접 다루고 있다면 HTML Encoder와 HTML Minifier가 도구 세트를 완성해줄 것입니다.