마크다운 서식 출력 테스트 포스트

이 글은 블로그 본문에서 사용하는 마크다운 서식이 실제 화면에서 어떻게 보이는지 빠르게 확인하기 위한 테스트 포스트다. 단순히 문법을 나열하기보다, 짧은 문단 안에서 자연스럽게 섞어 쓰는 방식으로 렌더링 결과를 확인하려고 한다.

본문에서는 굵게, 기울임, 굵은 기울임, 취소선, 그리고 인라인 코드가 가장 자주 등장한다. 이 정도만 안정적으로 보여도 글의 가독성은 크게 올라가고, 링크 색상이나 코드 배경색처럼 테마 영향을 받는 요소도 함께 체크할 수 있다. 예시 링크는 Hugo 공식 문서를 사용한다.

문단과 인용문

일반 문단 사이에 인용문이 들어갈 때 위아래 간격이 과하지 않은지 보는 것도 중요하다. 특히 모바일에서는 줄 길이가 짧아서 인용문 박스의 패딩과 본문 줄간격이 어색하게 느껴질 수 있다.

마크다운 테스트 글은 문법 설명서가 아니라, 실제 작성 흐름 안에서 화면을 점검하는 샘플에 가깝다.

인용문 다음 문단이 자연스럽게 이어지고, 본문 폰트와 인용문 폰트의 대비가 지나치지 않다면 기본 타이포그래피 설정은 무난하다고 볼 수 있다.

목록과 체크박스

이 블로그는 문단 중심으로 쓰더라도 중간에 짧은 목록이 들어갈 수 있으므로, 들여쓰기와 마커 정렬 상태를 한 번 확인해두는 편이 좋다. 아래 예시는 실제 체크리스트처럼 사용하지 않고 렌더링 모양만 보는 용도다.

• 첫 번째 항목은 기본 불릿 간격을 본다.

• 두 번째 항목은 인라인 코드가 목록 안에 들어간 경우를 본다.

• 세 번째 항목은 문장이 조금 길어졌을 때 줄바꿈 정렬을 확인한다.

• 완료된 체크박스 예시

• 미완료 체크박스 예시

목록 뒤에 이어지는 문단의 상단 여백이 너무 크지 않으면, 본문 흐름이 끊기지 않고 안정적으로 읽힌다.

코드 블록과 구분선

코드 블록은 배경색, 테두리, 스크롤 처리, 그리고 모바일 가독성까지 한 번에 영향을 주는 요소다. 아래 예시는 Hugo 템플릿에서 자주 보게 되는 front matter 형태를 흉내 낸 것이다.

title: "Sample Post"
draft: false
tags:
  - markdown
  - test
summary: "Renderer check"

짧은 코드 블록만으로는 가로 스크롤이 정상적으로 작동하는지 확인하기 어렵기 때문에, 아래에는 일부러 길고 쓸모없는 테스트용 내용을 넣어 둔다. 실제 의미는 없고, 스크롤바와 긴 줄 처리만 보는 용도다.

{"debug":"horizontal-scroll-smoke-test","note":"this_is_purposefully_long_and_verbose_so_that_the_code_block_needs_to_scroll_horizontally_even_on_a_reasonably_wide_desktop_viewport_without_wrapping_the_content","fakePayload":{"section":"prose-body","component":"code-block","status":"placeholder","items":["lorem-ipsum-alpha-sequence-0001","lorem-ipsum-beta-sequence-0002","lorem-ipsum-gamma-sequence-0003","lorem-ipsum-delta-sequence-0004","lorem-ipsum-epsilon-sequence-0005","lorem-ipsum-zeta-sequence-0006","lorem-ipsum-eta-sequence-0007","lorem-ipsum-theta-sequence-0008"],"trackingUrl":"https://example.com/testing/codeblock/horizontal/scroll/verification/with/an/absurdly/long/path/that/should/force/a/clear/overflow/condition/in/the/rendered/post/view"}}

조금 더 현실적인 예시도 하나 있어야 폭이 넓은 문자열과 반복되는 들여쓰기가 함께 어떻게 보이는지 확인할 수 있다. 아래 셸 예시는 일부러 옵션과 경로를 과장해 넣은 더미 명령이다.

./scripts/render-preview --source content/posts/20260222-0003/index.md --target public/preview/markdown-format-test/index.html --include-drafts=false --include-related-assets=true --copy-static-resources=true --generate-debug-snapshots=true --emit-layout-measurements=true --fake-flag-for-overflow-check=this-line-is-intentionally-too-long-to-fit-without-horizontal-scrolling

문단 중간에 흐름 전환이 필요할 때는 아래처럼 구분선을 사용하기도 한다. 테마에 따라 선이 너무 진하거나 너무 옅게 보일 수 있으니 함께 확인한다.

구분선 이후 본문이 시각적으로 잘 분리되면서도 과하게 튀지 않으면 적절하다.

표와 각주

표는 데스크톱에서는 간단해 보여도 모바일에서 쉽게 깨지므로, 정렬과 가로 스크롤 처리 여부를 확인하는 용도로 작은 표를 하나 넣어두는 것이 좋다. 아래 표는 본문 요소별 점검 포인트를 압축해서 보여준다.

각주도 지원된다면 긴 설명을 본문에서 분리할 수 있다. 이 문장 끝에 각주를 하나 붙여 둔다.¹

이미지와 캡션 규칙

이미지는 다음 줄 처리 방식에 따라 캡션 여부가 갈리므로, 실제 작성 규칙이 화면에서 그대로 드러나는지 확인할 필요가 있다. 아래 첫 번째 예시는 이미지 다음 줄에 텍스트를 바로 붙여 쓴 경우다.

이 문장은 이미지와 같은 문단 안에 있으므로 캡션처럼 보여야 한다.

아래 두 번째 예시는 이미지 다음에 빈 줄을 넣은 경우다.

이 문장은 이미지와 문단이 분리되어 있으므로 일반 본문처럼 보여야 한다.

접어두는 문단

긴 부연 설명이나 스포일러처럼 처음부터 모두 보일 필요가 없는 내용은 HTML의 details와 summary 태그로 접어둘 수 있다. 아래 예시는 제목 줄만 먼저 보이고, 사용자가 직접 눌렀을 때 숨겨둔 문단이 펼쳐지는지 확인하기 위한 용도다.

마무리

이 테스트 포스트가 정상적으로 보이면, 이후 실제 글에서는 문맥에 맞는 요소만 골라 사용하면 된다. 특히 본문 문단, 코드 블록, 표, 인용문 정도가 안정적이면 대부분의 기술 메모와 일반 에세이를 무리 없이 작성할 수 있다.