Markdown 텍스트를 HTML 미리보기로 변환하는 방법

Markdown 텍스트를 HTML 미리보기로 확인하는 방법

이 도구는 Markdown과 비슷한 표기법으로 작성한 내용을 입력하고, 그 결과가 HTML 미리보기에서 어떤 모습으로 나타나는지 살펴볼 때 사용합니다. 별도의 문서 편집 과정 없이 짧은 안내문, 회의 메모, 초안의 제목과 목록 구조를 확인하는 용도로 활용할 수 있습니다. 입력은 선택 사항이므로 텍스트를 넣지 않고 작업을 실행할 수도 있습니다. 다만 입력이 없으면 작업은 성공으로 처리되면서 미리보기 영역은 비어 있게 됩니다.

입력할 때는 일반 문장만 적어도 되지만, 제목이나 목록처럼 지원되는 표기를 함께 사용할 수 있습니다. 예를 들어 # 회의 메모는 제목 표기의 입력이고, - 자료 확인은 목록 항목을 나타내는 입력입니다. 도구는 비어 있지 않은 텍스트를 정해진 패턴에 따라 HTML 미리보기로 바꿉니다. 따라서 결과는 원문을 그대로 복사한 화면이 아니라, 입력에 포함된 표기를 서식으로 표시한 미리보기입니다.

사용 순서

텍스트 입력 영역을 엽니다. 사용할 내용이 있다면 제목, 본문, 목록처럼 확인하려는 텍스트를 준비합니다. 입력 영역은 선택적으로 사용할 수 있으므로 내용을 넣지 않은 상태에서도 작업을 실행할 수 있습니다.
미리 볼 내용을 입력하거나 붙여 넣습니다. 예를 들어 첫 줄에 # 회의 메모를 쓰고 다음 줄에 - 자료 확인을 작성하면 제목과 목록 표기가 포함된 입력이 됩니다. 코드 표기, 인용문, 링크, 강조처럼 결과에서 확인하려는 표현도 지원 범위 안에서 함께 넣을 수 있습니다.
작업을 실행하고 생성된 HTML 미리보기를 확인합니다. 입력한 비어 있지 않은 텍스트는 정해진 패턴에 따라 서식이 적용된 미리보기로 표시됩니다. 제목은 수준 1부터 수준 6까지 구분되며, 코드, 표 형태의 행, 가로줄, 인용문, 이미지, 링크, 강조, 취소선, 목록 및 선택된 줄바꿈 표기도 변환 대상에 포함됩니다.
표시된 결과와 입력 내용을 나란히 비교합니다. 제목의 단계, 목록의 구분, 링크나 강조 표기의 적용 여부처럼 확인하려던 부분을 중심으로 살펴보면 됩니다. 지원되는 표기라도 입력의 조합이나 작성 방식에 따라 기대한 모양과 다르게 보일 수 있으므로, 결과가 필요하면 짧은 입력으로 표현을 나누어 확인합니다.
미리보기와 함께 표시되는 문자 수 정보가 있다면 입력한 원문과 비교합니다. 이 정보는 변환된 HTML의 길이가 아니라, 비어 있지 않은 상태에서 제출한 원문에 포함된 문자 수를 나타냅니다. 입력을 비워 둔 경우에는 빈 미리보기가 정상적인 성공 결과이므로, 내용이 없는 상태에서 문자 수나 서식 결과를 찾지 않습니다.

결과를 해석하는 방법

결과는 입력한 텍스트가 지원되는 Markdown과 비슷한 패턴을 통해 HTML 미리보기로 표현된 것입니다. 제목이 단계별로 보이거나 목록의 항목이 구분되어 보인다면 해당 입력 표기가 미리보기에서 서식으로 처리된 것입니다. 코드, 인용문, 링크, 이미지, 강조, 취소선처럼 지원 목록에 들어 있는 표현도 같은 방식으로 결과를 확인할 수 있습니다.

반대로 지원 목록에 없는 문법이나 여러 표기를 복잡하게 결합한 경우에는 원하던 모양이 나타난다고 단정하기 어렵습니다. 이 도구의 결과를 전체 Markdown 문법을 처리한 결과로 해석하기보다, 정의된 패턴을 입력에 적용한 미리보기로 이해하는 편이 적절합니다. 결과가 예상과 다르면 지원되는 간단한 표기 하나만 남겨 다시 비교해 보세요.

입력이 없는 상태에서 작업이 성공하고 화면이 비어 있다면 오류로 볼 필요는 없습니다. 선택 입력이 비어 있을 때의 결과가 빈 미리보기이기 때문입니다. 반면 텍스트를 입력했는데 결과가 비어 있다면 먼저 입력 영역에 실제 내용이 들어갔는지 확인한 뒤 다시 실행합니다. 비어 있지 않은 입력에서 보이는 문자 수는 변환 결과의 문자 수가 아니라 제출한 원문 기준이라는 점도 함께 기억해야 합니다.

사용 예시

회의 메모의 제목과 할 일 목록이 미리보기에서 어떻게 보이는지 확인하려고 합니다.

입력 영역에 # 회의 메모와 - 자료 확인을 두 줄로 입력한 뒤 생성된 미리보기를 확인합니다.

입력한 제목과 목록이 서식이 적용된 HTML 미리보기로 표시되고, 비어 있지 않은 원문에 대한 문자 수 정보가 함께 나타납니다.

제한 사항

지원 범위는 정의된 Markdown과 비슷한 표기 목록에 기반하므로 전체 Markdown 문법이나 복잡한 조합까지 처리된다고 볼 수 없습니다.

자주 발생하는 오류

미리보기가 비어 있으면 입력 영역에 내용이 없었을 수 있습니다. 확인하려는 텍스트를 입력하거나 붙여 넣은 뒤 작업을 다시 실행하세요. 입력을 비워 둔 상태라면 빈 미리보기는 성공 결과일 수 있습니다.

자주 묻는 질문

텍스트를 입력하지 않아도 결과가 나오나요?

입력을 생략해도 작업은 성공할 수 있지만 미리보기는 비어 있습니다. 결과를 확인하려면 텍스트를 입력하거나 붙여 넣어야 합니다.

어떤 Markdown 표기를 미리 볼 수 있나요?

지원 범위에는 수준 1부터 수준 6까지의 제목, 코드 표기, 표 형태의 행, 가로줄, 인용문, 이미지, 링크, 강조, 취소선, 목록 및 선택된 줄바꿈 표기가 포함됩니다.

문자 수는 무엇을 기준으로 표시되나요?

입력이 비어 있지 않으면 결과에 원문에 포함된 문자 수 정보가 함께 나타납니다. 이 값은 변환된 HTML이 아니라 입력한 원문을 기준으로 합니다.