유지보수 쉬운 UI 구조(정적 블로그 관점)

정적 블로그를 만들 때 가장 흔한 비용은 “나중에 수정할 때” 발생합니다. 예를 들어:

• 목록 카드 스타일이 바뀔 때 모든 페이지를 찾아야 함
• 태그 UI가 바뀔 때 로직이 흩어짐
• SEO 메타데이터 생성이 중복됨

이 템플릿은 이런 문제를 줄이기 위해 다음 규칙을 둡니다.

1) 콘텐츠 로딩은 lib에만 둔다

src/lib/posts.ts에서 frontmatter를 읽고, 정렬/정규화를 담당합니다. 페이지는 “렌더링”만 합니다.

예시(태그 파싱 로직):

function parseTags(input: unknown): string[] {
  if (!input) return [];
  if (Array.isArray(input)) return input.map(String).map(s => s.trim()).filter(Boolean);
  if (typeof input === "string") return input.split(/[,;]+/g).map(s => s.trim()).filter(Boolean);
  return [];
}

2) 본문 렌더링은 MDX 컴포넌트 매핑으로 통일

src/components/markdown/MDXComponents.tsx에서 pre, code, img를 공통 스타일로 고정합니다. 그래서 어떤 글을 추가해도 코드 블록과 이미지가 동일한 가독성을 유지합니다.

3) 태그 필터는 정적 친화적으로

목록 페이지는 서버에서 posts 메타데이터를 전달하고, 클라이언트에서 ?tag= 쿼리로 필터링합니다. 이렇게 하면 필터 UI가 바뀌어도 콘텐츠 로딩 로직을 건드릴 필요가 없습니다.

원하시면 이 구조를 확장해서:

• 검색어(키워드) 필터
• 글의 “시리즈” 태그
• 프로젝트 상세 페이지

까지도 같은 패턴으로 쉽게 붙일 수 있습니다.