렌더링 실험실: 코드·수식·문서 요소

이 글은 공개 화면에서 코드 블록, 수식, 표와 다이어그램이 올바르게 표시되는지 확인하기 위한 렌더링 테스트다.

텍스트와 링크

일반 문단 안의 inline code, 굵은 글씨, 기울임 글씨와 Example Domain 링크를 함께 확인한다.

단순함은 기능이 적다는 뜻이 아니라 핵심이 선명하다는 뜻에 가깝다.

코드 블록

const fibonacci = (count) => {
  const values = [0, 1];

  for (let index = 2; index < count; index += 1) {
    values.push(values[index - 1] + values[index - 2]);
  }

  return values.slice(0, count);
};

console.log(fibonacci(10));

코드 블록에는 언어 표시와 복사 버튼이 추가된다. 긴 줄은 레이아웃을 밀어내지 않고 코드 영역 안에서 가로로 스크롤된다.

안전한 수식

인라인 수식은 단일 달러 구분자를 사용하지 않는다. 질량과 에너지의 관계는 $E = mc^2$ 로 쓴다.

블록 수식은 다음처럼 두 개의 달러 구분자를 사용한다.

$$\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}$$

일반 문장 속 $PATH, 가격 표시와 셸 코드는 수식으로 오인되지 않는다.

표

요소	확인 포인트	예상 결과
코드	글꼴과 긴 줄	고정폭, 가로 스크롤
수식	크기와 정렬	본문과 자연스러운 대비
표	모바일 폭	화면 밖으로 넘치지 않음

Mermaid 다이어그램

flowchart LR
  A[Markdown] --> B[Astro build]
  B --> C[OPSEC audit]
  C --> D[Cloudflare Pages]

다이어그램은 브라우저에서 필요한 페이지에만 로드되며 외부 CDN을 사용하지 않는다.

마무리

• 시스템·라이트·다크 모드를 직접 전환할 수 있어야 한다.
• 작은 화면에서는 사이드바가 메뉴 버튼으로 열려야 한다.
• JavaScript가 실패해도 본문과 기본 링크는 읽을 수 있어야 한다.