Windows에서 HTML 및 저장한 웹페이지를 Markdown으로 변환하기

웹페이지를 Markdown으로 저장하려면 Chrome이나 Edge에서 Ctrl+S를 눌러 웹페이지, 전체 형식으로 저장한 다음 HTML 파일을 MD Factory에 추가하세요. 앱이 PC에서 페이지를 변환해, 페이지의 이미지와 함께 Markdown 파일로 저장합니다.

이 가이드는 직접 보관하려는 페이지(기사, 문서, 레시피, 참고 자료)를 위한 것입니다. 스크립트나 빌드에서 HTML을 변환해야 한다면 마지막 섹션으로 넘어가세요.

닫힌 노트북 옆에 놓인, 회색 블록과 선으로 된 인쇄된 웹페이지 레이아웃 세 장. — 저장한 페이지가 일반 텍스트로 편집할 수 있는 노트가 됩니다.

Chrome이나 Edge에서 페이지 저장하기

Chrome에서는 Ctrl+S를 누르거나, 더보기 메뉴에서 전송, 저장, 공유를 선택한 다음 페이지를 다른 이름으로 저장을 선택하세요. 단계별 안내는 다음 문서에 있습니다: Chrome 도움말.

Edge에서는 Ctrl+S를 누르세요. 이 단축키는 다음 문서에 나와 있습니다: Edge 키보드 단축키.

파일 형식 목록에서 웹페이지, 전체를 선택하세요. 두 브라우저 모두 세 가지 형식을 제공하며, MD Factory는 형식마다 다르게 처리합니다:

파일 형식	브라우저가 저장하는 내용	MD Factory에서 얻는 결과
웹페이지, 전체	HTML 파일과, 같은 이름에 _files가 붙은 폴더(이미지가 들어 있음)	텍스트와 이미지
웹페이지, HTML만	HTML 파일만 저장되고 이미지는 웹사이트에 남음	이미지 없는 텍스트, 검토 필요로 표시됨
웹페이지, 단일 파일	MHTML 파일 하나	없음: MD Factory는 MHTML 파일을 열지 못하며 건너뛴 항목으로 표시합니다

저장한 페이지 변환하기

MD Factory를 여세요.
파일 추가를 클릭해 저장한 HTML 파일을 선택하거나, 파일을 창으로 끌어다 놓으세요.
변환은 바로 시작됩니다. 항목에 결과가 표시되면 결과 경로를 더블클릭해 Markdown 파일을 여세요.

폴더가 아니라 HTML 파일을 추가하세요. 폴더를 추가하면 MD Factory가 _files 폴더도 처리하여, 그 안의 스크립트, 스타일 시트, 이미지는 건너뛴 항목으로 표시되고 그 안의 HTML 파일은 별도의 노트로 변환됩니다.

Markdown 파일은 페이지 이름을 따르며 페이지 옆에 저장됩니다. 사용된 이미지는 그 옆의 폴더에 들어갑니다:

Saved pages/
  Sourdough bread.html
  Sourdough bread_files/
  Sourdough bread.md
  Sourdough bread_images/

저장한 페이지와 _files 폴더는 그대로 남습니다. Markdown 파일을 옮길 때는 _images 폴더도 함께 옮기세요. Markdown이 그 폴더에 있는 그림을 링크하기 때문입니다.

Markdown으로 옮겨지는 내용

페이지에서	Markdown에서
제목	같은 수준의 제목
단락, 목록, 인용문	굵게와 기울임 서식을 포함해 유지됨
코드 블록과 인라인 코드	코드로 유지됨
표	Markdown 표
페이지와 함께 저장된 이미지	이미지 폴더에 PNG 파일로 복사됨
링크	아래 설명대로 유지됨
스크립트, 스타일, 다른 사이트의 동영상 플레이어 같은 포함된 프레임	제거됨
사이트 메뉴, 머리글, 바닥글, 사이드바, 쿠키 안내	일반 텍스트와 링크로 유지됨
브라우저 탭에 표시되는 제목	포함되지 않음

표에 제목 셀이 있으면 첫 행이 Markdown 표의 제목 행이 됩니다. 없으면 앱이 번호가 매겨진 열 제목을 추가합니다. 병합된 셀은 격자 전체로 펼쳐지며, 값은 첫 번째 셀에 남고 병합되었던 나머지 셀은 비어 있게 됩니다.

유지되는 이미지

MD Factory는 인터넷에서 아무것도 다운로드하지 않습니다. 이미지는 파일이 PC에 있을 때만 Markdown에 들어갑니다:

웹페이지, 전체 형식이 만드는 _files 폴더의 이미지,
페이지 주변의 다른 폴더(상위 폴더 포함)에 있는 이미지,
HTML 코드 자체에 포함된 이미지.

웹사이트에만 있는 이미지는 제외되고 파일은 검토 필요로 표시됩니다. SVG 이미지는 지원되지 않으므로 마찬가지로 제외됩니다.

링크 처리 방식

전체 웹 주소, 이메일 링크, 전화 링크는 그대로 유지됩니다.
같은 사이트의 다른 페이지로 가는 링크 같은 상대 링크는 저장된 페이지에 원래 주소가 기록되어 있으면 전체 웹 주소가 됩니다. 그렇지 않으면 쓰인 그대로 남으며, 링크된 파일이 Markdown 파일과 같은 상대 위치에 있을 때만 작동합니다.
같은 페이지의 섹션으로 가는 링크는 Markdown에서도 섹션의 앵커가 유지되므로 계속 작동합니다.
클릭하면 스크립트를 실행하는 링크, 즉 javascript:로 시작하는 링크는 일반 텍스트가 됩니다.

노트 정리하기

MD Factory는 페이지의 본문 전체를 변환합니다. 어느 부분이 기사인지 추측하지 않으므로 위쪽에는 사이트 메뉴가, 아래쪽에는 바닥글, 관련 링크, 쿠키 안내가 들어 있을 수 있습니다. 필요 없는 부분은 삭제하세요.

브라우저 탭의 제목은 포함되지 않습니다. 기사 자체의 제목이 없다면 맨 위에 직접 추가하세요.

페이지 주소와 저장한 날짜를 노트의 첫 줄에 추가하세요. 그러면 나중에 원문을 찾을 수 있고, 인용할 때 출처를 밝힐 수 있습니다.

Obsidian에 노트를 보관한다면 Obsidian으로 문서 가져오기 가이드에서 파일을 보관함으로 변환하고 이미지 링크를 유지하는 방법을 다룹니다.

페이지가 검토 필요로 표시될 때

검토 필요는 Markdown 파일은 저장되었지만 페이지의 일부 내용이 반영되지 않았다는 뜻입니다. 대기열 처리가 끝나면 파일 항목의 상태를 클릭해 메시지를 확인하세요.

메시지	흔한 원인
외부 이미지 또는 리소스를 건너뛰었습니다.	웹페이지, HTML만 형식으로 저장한 경우처럼 이미지가 웹사이트에만 있습니다.
이미지를 내보낼 수 없습니다.	페이지가 폴더에 없는 이미지 파일을 가리킵니다.
이미지 형식은 지원되지 않습니다.	SVG처럼 앱이 변환할 수 없는 형식의 이미지입니다.
일부 문서 내용을 Markdown으로 표현할 수 없습니다.	다른 사이트의 동영상 플레이어 같은 포함된 프레임이 페이지에 있어서 제거되었습니다.
로컬 링크 대상을 보존할 수 없습니다.	사이트의 다른 페이지로 가는 링크를 웹 주소나 저장된 파일과 연결하지 못했습니다. 링크 텍스트만 남고 링크는 제거됩니다.
텍스트 인코딩이 유추되었습니다. 특수문자를 확인해보세요.	페이지가 UTF-8로 저장되지 않아 앱이 인코딩을 추정해야 했습니다. 악센트 문자와 기호를 확인하세요.

코드에서 HTML 변환하기

스크립트, 빌드 단계, 스크레이퍼에서 HTML을 Markdown으로 변환해야 한다면 MD Factory는 맞지 않는 도구입니다. 이 앱은 명령줄이나 프로그래밍 인터페이스 없이 창에서만 작동합니다. 대신 라이브러리를 사용하세요. Turndown 라이브러리는 MIT 라이선스로 제공되며, Node.js나 브라우저의 JavaScript에서 HTML을 Markdown으로 변환합니다. html2text 라이브러리는 GPL-3.0 라이선스로 제공되며, Python에서 같은 일을 합니다. Pandoc 도구는 HTML과 Markdown을 포함한 여러 문서 형식 사이를 변환하는 명령줄 변환기입니다. 어느 것을 쓰든 변환 규칙을 정하고 이미지와 링크를 처리하는 일은 직접 해야 합니다.

pandoc -f html -t gfm page.html -o page.md