렌더링 점검 — 모든 요소를 한 페이지에

이 페이지는 눈으로 보기 위해 존재한다. 블로그가 만들어낼 수 있는 마크다운 요소를 한 화면에 모아두면, 타이포그래피가 깨졌을 때 실제 글에서 뒤늦게 발견하는 대신 스크린샷 한 장에서 드러난다.

실제 글이 아니라 픽스처인 이유

블로그의 prose 스타일은 app/pages/blog/[...slug].vue의 .prose :deep(...)에 있다. ContentRenderer 산출물이 Vue scoped 스타일 범위 밖이기 때문이다. 그래서 셀렉터가 하나 빠져도 에러가 나지 않는다 — 그 요소만 스타일 없이 렌더되고, 실제 독자가 그 부분에 닿을 때까지 아무도 모른다. 모든 요소를 쓰는 픽스처는 그 조용한 구멍을 눈에 보이게 만든다.

무엇을 점검하나

1. h2·h3 크기 위계와 여백
2. 본문 한 줄 길이, 행간, 문단 리듬
3. 목록·표·인용·코드 블록 처리
4. 본문 대비 링크 색

인라인 요소

본문은 16px에 행간 1.75다. 720px 칼럼 안에서 읽기 편한 길이가 나와야 한다. 굵은 글씨는 베이스라인이 튀지 않으면서 무게만 더 나가야 한다. queryCollection('blog_ko') 같은 인라인 코드는 배경 색조가 주변 줄을 삼키지 않아야 한다. 요금제 페이지로 가는 링크는 밑줄이 없으므로 색만으로 본문과 구분돼야 한다.

인용은 왼쪽 라인과 흐린 글씨로 잡았다. 제목이 아니라 곁말처럼 읽혀야 한다.

목록

순서 없는 목록:

• 짧은 항목 하나.
• 두 번째 항목은 두 줄로 넘어갈 만큼 길게 써서, 줄바꿈된 다음 줄의 들여쓰기가 글머리 기호가 아니라 텍스트에 맞는지 확인할 수 있게 한다.
• 세 번째 항목.

순서 있는 목록:

1. 첫 단계
2. 두 번째 단계
3. 세 번째 단계

표

표는 페이지를 넓히지 않고 자기 컨테이너 안에서 좌우로 스크롤된다.

코드 블록

// content.config.ts — 두 컬렉션은 `source`만 다르다
blog_ko: defineCollection({
  type: 'page',
  source: { include: 'ko/blog/**', prefix: '/blog' },
  schema: blogSchema,
})

위 구분선 다음으로 여백이 깨끗하게 리셋되고 마지막 문단으로 이어져야 한다. 이 페이지에서 스타일이 안 먹은 것처럼 보이는 요소가 있다면, 빠진 셀렉터는 .prose :deep(...)에 있다.