북극곰 히어로와 블로그를 한 페이지에 담기

이 글은 블로그 목록과 상세 화면이 어떻게 보이는지 확인하기 위한 예시 포스트입니다.
메인페이지의 캐릭터 경험은 유지하면서 글을 발견하고 읽는 흐름을 자연스럽게 연결했습니다.

목표

화면을 구성할 때 아래 세 가지를 우선순위로 두었습니다.

1. 첫 화면에서는 북극곰 캐릭터가 시선을 잡을 것
2. 스크롤하면 최신 글과 대표 글을 바로 발견할 수 있을 것
3. 글이 늘어나도 마크다운 파일만으로 관리할 수 있을 것

시각적인 첫인상과 콘텐츠 탐색 중 하나를 포기하지 않고, 한 페이지 안에서 역할을 분리하는 것이 핵심입니다.

데이터 흐름

글은 content/posts 폴더의 마크다운 파일에서 읽습니다. 프론트매터는 목록 카드와 상세 페이지에서 공통으로 사용합니다.

---
title: "글 제목"
date: "2026-06-28"
description: "목록에 표시할 한 줄 설명"
tags: ["Next.js", "UI"]
thumbnail: "/images/thumbnail.png"
featured: true
---

홈에서는 모든 글을 날짜순으로 정렬한 뒤 featured 값이 있는 글을 대표 글로 선택합니다.

const posts = getAllPosts();
const featuredPost = getFeaturedPost(posts);
const recentPosts = posts
  .filter((post) => post.slug !== featuredPost?.slug)
  .slice(0, 4);

화면별 역할

영역	역할	주요 정보
히어로	사이트의 첫인상	캐릭터, 소개 문구, 블로그 CTA
대표 글	가장 먼저 읽을 글 안내	썸네일, 제목, 설명, 태그
최근 글	새 콘텐츠 탐색	작성일, 읽기 시간, 요약
태그 페이지	전체 글 검색	태그 필터, 키워드 검색

다크 테마를 유지하는 방법

페이지마다 직접 색상을 지정하면 화면이 늘어날수록 수정 범위가 커집니다. 공통 색상을 CSS 변수로 정의하고 Tailwind 토큰에서 참조하면 헤더, 카드, 본문이 같은 규칙을 공유할 수 있습니다.

:root {
  --background: #050507;
  --foreground: #f7f7fb;
  --card: #101014;
  --border: #27272f;
  --muted: #9ca3af;
}

인터랙티브 북극곰은 밝은 오브젝트이기 때문에 어두운 배경에서 윤곽이 더 분명해집니다. 카드에는 배경보다 한 단계 밝은 색을 사용해 콘텐츠 계층을 구분했습니다.

다음 단계

• 실제 개발 기록으로 예시 글 교체하기
• 글별 썸네일 이미지 추가하기
• 태그별 글 수와 검색 결과 확인하기
• 배포 후 모바일에서 WebGL 성능 측정하기

이제 새 글은 다음 명령으로 만들 수 있습니다.

npm run new-post -- my-next-post

생성된 마크다운을 작성하면 메인, 태그, 상세 페이지에 자동으로 반영됩니다.