HTML 붙여넣기로 마크다운 변환 - Word·구글 문서 span·인라인 스타일 제거

Microsoft Word나 구글 문서(Google Docs), 웹 페이지에서 복사한 텍스트를 마크다운 에디터에 붙여넣었을 때 <span style="...">이나 class="c3", <o:p> 같은 태그로 가득 차 난감했던 경험이 있으실 것입니다. 전달하려는 본문 내용은 분명히 들어 있지만, 마크다운 렌더러에는 전혀 불필요한 시각 장식용 마크업에 파묻혀 읽기조차 어려운 상태가 됩니다. 이 글에서는 지저분한 HTML을 한 번의 붙여넣기만으로 깔끔한 마크다운으로 변환하는 방법과 원리를 정리합니다.

결론부터

지저분한 HTML을 HTML to Markdown 변환기에 붙여넣고 실행 버튼을 누르기만 하면 됩니다. <span>, 인라인 style 속성, class 이름, <font> 태그, Word 전용 마크업은 마크다운에 대응하는 문법이 없으므로 자동으로 제거되며, 제목·목록·링크·표와 같은 문서 구조만 깔끔한 마크다운으로 남습니다.

모든 변환 처리는 브라우저 안에서 자바스크립트로 완결되므로, 사내 기밀 문서나 미공개 초안을 붙여넣어도 외부 서버로 데이터가 전송되지 않아 안전합니다.

HTML 클리너와의 차이점

인라인 스타일을 지워 주는 일반적인 HTML 클리너(HTML Cleaner)나 정리 도구가 반환하는 결과물은 어디까지나 정리된 HTML(clean HTML)입니다. 불필요한 스타일은 빠지더라도 <p>나 <ul>, <div> 같은 HTML 태그 자체는 그대로 남아 있습니다.

붙여넣을 대상이 GitHub 이슈, README, 노션(Notion), 옵시디언(Obsidian), 위키, 혹은 LLM 프롬프트라면 필요한 형식은 HTML이 아닌 마크다운이므로 추가 변환 작업이 필요합니다.

변환 도구는 이 두 단계를 한 번에 처리합니다. 장식용 노이즈를 말끔히 걸러내는 동시에 #, -, [텍스트](URL) 같은 마크다운 문법으로 변환해 출력합니다. HTML을 먼저 청소하고 다시 마크다운으로 바꾸는 이중 작업을 거칠 필요가 없습니다.

붙여넣은 HTML이 지저분해지는 이유

HTML이 지저분해지는 양상은 텍스트를 어디서 복사했는지에 따라 달라집니다. 출처마다 섞여 들어오는 노이즈의 종류가 다릅니다.

Microsoft Word

Word는 복사한 텍스트를 Office 고유의 마크업으로 감쌉니다. style 속성 안의 mso-* 프로퍼티, 문단을 나타내는 <o:p> 태그, 조건부 주석(<!--[if gte mso 9]>), <font face="..."> 태그 등이 대표적입니다. 이들은 독자나 마크다운 렌더러에게 아무런 의미가 없는 정보입니다.

복사 경로에 따라서도 섞여 들어오는 태그가 달라집니다. Word 데스크톱 앱에서 직접 복사하는 경우, Outlook을 거치는 경우, 웹 브라우저에서 연 Word 온라인 문서에서 복사하는 경우마다 생성되는 태그의 양과 종류에 차이가 납니다.

구글 문서(Google Docs)

구글 문서는 시맨틱 태그보다 인라인 CSS에 크게 의존하는 HTML을 만듭니다. 굵은 글씨가 <strong> 대신 <span style="font-weight:700">으로 지정되거나, 자동 생성된 class 이름과 텍스트 조각마다 감싸는 빈 '고스트 span'이 대량으로 삽입됩니다. class 이름 역시 무작위로 생성되므로 일정한 규칙으로 걸러내기 어렵습니다.

웹 페이지 복사

웹 브라우저 화면에서 특정 영역을 드래그해 복사하면 해당 사이트가 레이아웃을 잡기 위해 사용한 모든 요소가 함께 따라옵니다. 래퍼용 <div>, 유틸리티 class 속성, 인라인 style은 물론이고 본문 옆에 있던 내비게이션 링크, SNS 공유 버튼, 광고 영역까지 섞여 들어옵니다. 마크다운으로 변환하면 이러한 레이아웃 계층이 제거되고 읽기 쉬운 본문 구조만 남길 수 있습니다.

ChatGPT 및 리치 텍스트 에디터

ChatGPT 웹 인터페이스나 WYSIWYG 에디터에서 서식 있는 답변을 복사하면 에디터 고유의 span 태그나 data-* 속성이 포함된 HTML이 클립보드에 들어가는 경우가 많습니다. 이를 다른 에디터에 그대로 붙여넣으면 노이즈가 이어지지만, 마크다운 변환을 거치면 순수한 텍스트와 구조만 추출됩니다.

PDF 뷰어에서의 복사

PDF 뷰어에서 텍스트를 드래그해 복사한 내용은 애초에 HTML이 아닙니다. span이나 style, class가 전혀 붙지 않는 순수 일반 텍스트이므로, 장식 태그를 제거하는 처리 자체가 적용되지 않습니다.

PDF는 글자를 페이지 위의 좌표 집합으로만 저장하므로 제목과 본문을 구분하는 정보가 없고, 문단 중간에 임의의 줄바꿈이 들어가거나 2단 레이아웃의 좌우 텍스트가 뒤섞여 복사되기도 합니다. 특히 표는 열이 어긋나서 깨지기 쉬우므로, 붙여넣은 텍스트를 직접 고치는 것보다 PDF 파일 자체를 PDF to Markdown 변환기에 직접 입력해 변환하는 것이 훨씬 안정적입니다. 표가 깨지는 원인과 해결 방법에 대한 자세한 내용은 PDF 마크다운 변환 시 표가 깨지는 이유와 해결 방법을 참조하세요.

무엇이 삭제되고 무엇이 남는가

자주 마주치는 복잡한 마크업과 변환 후 마크다운 결과를 비교하면 다음과 같습니다.

변환 시 알아 두어야 할 핵심 원칙은 두 가지입니다.

• 마크다운은 HTML보다 표현할 수 있는 범위가 좁은 언어입니다. 제목, 목록, 링크, 강조, 표, 이미지처럼 마크다운 문법에 대응물이 있는 구조적 요소는 유지되고, 순수하게 장식 목적이었던 스타일은 모두 버려집니다.
• '마크다운으로 변환한다'는 것이 'HTML 태그가 완전히 0개가 된다'는 의미는 아닙니다. 마크다운 사양은 인라인 HTML을 허용하므로, 변환 도구는 깔끔하게 대응시킬 수 없는 태그(복잡한 병합 표나 미지원 커스텀 요소 등)의 내용을 함부로 버리는 대신 원본 HTML 조각으로 보존합니다. 결과물은 충분히 깨끗하지만 모든 상황에서 모든 태그가 사라진다고 단정할 수는 없습니다.

FormatArc로 지저분한 HTML 변환하기

HTML to Markdown 변환기를 사용하면 붙여넣은 HTML에서 즉시 마크다운을 생성할 수 있습니다. 별도의 프로그램 설치가 필요 없고 파일 업로드도 발생하지 않습니다.

1. HTML to Markdown 변환기를 엽니다.
2. 왼쪽 입력창에 Word 마크업이나 고스트 span이 섞인 HTML을 그대로 붙여넣습니다.
3. 실행 버튼을 누르면 오른쪽에 정리된 마크다운이 즉시 나타납니다.

HTML 구문 분석과 마크다운 생성 과정이 모두 브라우저 내부의 자바스크립트 엔진에서 실행됩니다. 따라서 Word에서 복사한 사내 계약서나 CMS의 미공개 초안을 붙여넣더라도 데이터가 외부로 유출되지 않고 안전하게 로컬 환경에 유지됩니다. 브라우저 내부 처리 원리와 보안 검증 방법은 온라인 변환 사이트 보안 검증을 참조하세요.

깔끔하게 변환되지 않을 때의 대처법

일부 복잡한 서식은 변환 후 약간의 수동 정리가 필요할 수 있습니다.

Word의 복잡한 표와 테두리

Word나 스프레드시트에서 복사한 표에 colspan(열 병합)이나 rowspan(행 병합), 테두리 스타일이 포함되어 있다면 마크다운 파이프 표 문법으로 1:1 변환하기 어렵습니다. 병합된 셀은 평탄화되거나 표 자체가 인라인 <table> 태그 형태로 남을 수 있습니다. 표만 집중적으로 다루는 경우 셀 구조를 단순화한 뒤 변환하는 편이 좋습니다. 표 변환의 예외 처리와 상세 방법은 HTML 테이블을 마크다운 표로 변환을 참조하세요.

깊게 중첩된 목록과 줄바꿈

여러 단계로 중첩된 목록, 목록 항목 안의 <br> 태그, 순서 있는 목록과 순서 없는 목록이 복합적으로 섞인 구조는 불필요한 빈 줄이 생기거나 들여쓰기 깊이가 달라질 수 있습니다. 변환 후 출력 결과를 확인하고 렌더러에서 어긋난다면 들여쓰기를 수동으로 맞춰 주세요.

출력 결과에 남은 인라인 HTML

결과물에 <sub>, <details> 블록, 복잡한 테이블 같은 일부 HTML 태그가 남아 있다면 이는 정상적인 동작입니다. 변환 도구가 본문 데이터 손실을 막기 위해 남겨둔 것입니다. GitHub이나 대부분의 정적 사이트 생성기(SSG)는 마크다운 안의 인라인 HTML을 지원하므로 그대로 두어도 무방하며, 불필요하다면 손으로 지워도 됩니다. 혼합된 마크다운이 어떻게 렌더링되는지 확인하고 싶다면 Markdown to HTML 변환기에 붙여넣어 미리보기를 확인할 수 있습니다.

웹 복사 시 섞여 들어간 내비게이션

웹 페이지의 넓은 범위를 한꺼번에 복사해 메뉴 항목이나 공유 버튼 링크가 함께 들어왔다면, 복사할 때 본문 영역만 좁혀서 선택하거나 변환된 마크다운에서 상단·하단의 불필요한 링크 목록을 삭제해 주세요. 어떤 링크가 내비게이션이고 어떤 링크가 본문인지 자동으로 구분해 주는 방법은 없습니다.

한 페이지씩 복사해 붙여넣는 대신 대량의 워드프레스 블로그 글을 이전하려는 목적이라면, 전용 WXR 내보내기 도구나 일괄 변환 스크립트를 활용하는 경로가 훨씬 효율적입니다. 워드프레스 글 이전 절차는 워드프레스 글을 마크다운으로 옮기는 방법에서 자세히 다루고 있습니다.

자주 묻는 질문

왜 span이나 style 속성은 삭제되나요?

마크다운에는 인라인 CSS, class 이름, 래퍼 span을 표현하는 문법이 없습니다. 변환 도구는 에디터 고유의 장식용 노이즈를 걷어내고 구조적 내용만 남기도록 설계되어 있습니다. 특정 에디터에 묶이지 않고 어떤 마크다운 렌더러에서도 읽을 수 있는 이식성 높은 텍스트를 얻는 것이 목적입니다.

Microsoft Word의 mso- 마크업도 제거되나요?

네, 제거됩니다. mso-* 형태의 스타일 속성, <o:p> 문단 태그, <font> 태그, 조건부 주석은 마크다운에 대응물이 없으므로 모두 삭제됩니다. Word에서 텍스트를 어떤 경로로 복사하든 상관없이 마크다운 결과물에는 남지 않습니다.

class 이름이나 폰트 스타일을 유지할 수 있나요?

유지할 수 없습니다. 마크다운은 서식 스타일을 표현하지 못하므로 의도적으로 제거됩니다. 폰트나 색상 스타일이 반드시 필요하다면 원본 HTML을 따로 보관하거나, 마크다운으로 구조를 변환한 뒤 렌더링 단계에서 Markdown to HTML 변환기 등을 활용해 CSS를 새로 적용해야 합니다. 마크다운을 HTML로 다시 변환하는 구체적인 방법은 마크다운 HTML 변환 방법과 라이브러리 비교를 참조하세요.

회사 기밀 문서나 비공개 초안을 붙여넣어도 안전한가요?

안전합니다. 변환 처리는 브라우저 내부 자바스크립트로만 동작하며, 입력한 HTML 데이터가 FormatArc나 제3자의 서버로 전송되지 않습니다. 네트워크 연결을 끊은 오프라인 상태에서도 동일하게 동작합니다.

변환 후 마크다운에 일부 HTML 태그가 남아 있는 이유는 무엇인가요?

마크다운 사양 자체가 인라인 HTML을 허용하기 때문입니다. 마크다운 문법으로 변환할 수 없는 복잡한 요소나 미지원 태그를 만났을 때, 내용을 강제로 지워버리는 대신 원본 HTML 조각으로 보존합니다. 그대로 사용해도 대부분의 렌더러에서 정상 표시되며, 필요에 따라 직접 수정하셔도 됩니다.

정리

Word, 구글 문서, ChatGPT, 웹 페이지에서 가져온 지저분한 HTML은 HTML to Markdown 변환기에 붙여넣는 것만으로 깔끔한 마크다운이 됩니다. span, 인라인 style, class, Office 전용 마크업은 깔끔하게 제거되고 제목과 목록 등 핵심 구조만 남습니다. 복사 붙여넣기 과정에서 서식이 깨져 고민하셨다면 브라우저 안에서 안전하고 빠르게 변환해 보세요. HTML에서 마크다운으로의 전반적인 변환 방법은 HTML 마크다운 변환 가이드를, LLM 프롬프트에 깔끔한 텍스트를 전달하는 방법은 LLM 입력엔 Markdown vs HTML?을 참조하세요.