Raoun.me

MDX Playground

MDX 테스트

2024-08-03 · 6분 · 조회 2

이 글은 이제 제 블로그 기준으로 다시 정리한 MDX 실험 노트입니다.
문법과 레이아웃을 한 번에 검증할 수 있도록 구성했습니다.

마크다운(Markdown)은 생각을 빠르게 기록할 수 있고,
MDX는 그 기록을 컴포넌트와 연결해 더 풍부하게 보여줄 수 있습니다.

이 글의 목적은 단순한 문법 소개가 아니라,
제가 실제로 쓰는 글쓰기 방식과 레이아웃 감각을 테스트하는 것입니다.

h2 미니멀리즘

저는 글을 읽을 때 정보량보다 호흡이 먼저 보인다고 생각합니다.
그래서 내용만큼 간격, 대비, 흐름을 신경 씁니다.

글이 편안하게 읽히는 레이아웃을 목표로 삼았습니다.

  • 제목과 본문의 톤을 최대한 자연스럽게 연결합니다.
    • 정보 계층은 분명하되, 시각적으로 과장하지 않습니다.
    • 글 전체를 하나의 덩어리로 읽을 수 있게 합니다.
  • 문단 간 간격을 넉넉히 둡니다.
    • 한 문단을 읽고 다음 문단으로 넘어갈 때 짧은 휴식이 생깁니다.
  • 페이지 상단은 의도적으로 여유를 둡니다.
    • 시선이 네비게이션보다 본문 흐름으로 먼저 들어오게 합니다.
  • 본문 대비를 과하게 올리지 않습니다.
    • 필요한 강조(제목, 굵은 텍스트, 링크)가 더 잘 보입니다.

h3 제목

이 블로그의 본문 구조는 h2와 h3 중심으로만 사용합니다.
**시맨틱 HTML**의 계층을 유지하고, TOC도 과도하게 복잡해지지 않게 하려는 선택입니다.

  • h1은 페이지 최상위 제목에만 사용합니다.
  • h4 이하는 정말 필요할 때만 씁니다. 가능하면 안 씁니다.

기본 요소

인용문은 문장의 속도를 잠깐 낮추는 역할을 합니다.
본문에서 가장 중요한 문맥 전환 지점에만 배치합니다.

문장 중간의 기울임은 뉘앙스를 조정하는 데 쓰고,
inline code는 단어를 명확히 구분할 때 사용합니다.

<mark></mark>를 활용해 핵심 포인트를 하이라이트 할 수 있습니다.

내부 링크는 흐름을 이어주고,
외부 링크는 맥락 확장에 사용합니다.

https://github.com/Raoun4136 처럼 URL 자동 파싱도 동작합니다.

구분선은 섹션 전환이 필요할 때만 사용합니다.

목록

  • 글을 작성할 때 가장 먼저 독자의 읽기 경로를 생각합니다.
  • 그다음 문단 간 연결이 자연스러운지 확인합니다.
    • 같은 정보를 반복하는 문장은 과감히 삭제합니다.

순서 목록

  1. 문제 정의
  2. 구조 설계
  3. 구현
  4. 회고 및 자동화

코드 블록

inline code [1, 2, 3]

Block code

import clsx, { type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
site-top-header.tsx
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import SearchMenu from '@/components/search-menu';
import { RouterPath } from '@/components/lib/constant';
 
export default function SiteTopHeader() {
  const pathname = usePathname();
  const breadcrumbs = pathname.split('/').filter(Boolean);
 
  return (
    <header>
      <Link href={RouterPath.HOME}>Raoun.me</Link>
      <SearchMenu posts={[]} notes={[]} />
      <span>{breadcrumbs.join(' / ') || 'home'}</span>
    </header>
  );
}
전역 헤더는 한 번 정의하고, 모든 경로에서 동일하게 사용한다.

테이블

항목설명
목적MDX 문법 + 블로그 컴포넌트 렌더링 검증
기준읽기 흐름, 레이아웃 안정성, 링크 유효성
결과문서 렌더링/애니메이션/가독성 검증 완료
가독성여백, 문장 길이, 문단 구조가 자연스러운지 확인
확장성코드 블록, 표, 이미지, 링크가 함께 동작하는지 확인
유지보수나중에 문서를 추가해도 구조가 무너지지 않는지 확인
좌중앙우
흐름구조밀도

이미지

![이미지 설명](링크)

출처 및 참고

Home
Posts
Notes