블로그를 시작합니다

안녕하세요

개발 블로그를 시작합니다. 이 블로그는 Next.js 15 App Router와 MDX로 만들어졌습니다.

왜 이렇게 알록달록한가요

개발자 블로그 하면 떠오르는 이미지가 있습니다. 흰 배경에 검은 글씨, 회색 보더, 그리고 어딘가에 파란색 링크 하나. 깔끔하고 읽기 좋지만, 솔직히 다 비슷합니다.

블로그를 직접 만들면서 "남들이 안 쓰는 색을 써보고 싶다"는 생각이 들었습니다. 처음엔 보라색 하나로 시작했는데, 어느 순간 무지개 스펙트럼 전체를 쓰면 어떨까 하는 방향으로 흘러갔습니다.

그라데이션과 스펙트럼은 요즘 웹 디자인에서 자주 보이는 트렌드이기도 하고, 실용적인 이유도 있었습니다. 태그마다 다른 색을 부여하면 글 목록에서 주제를 한눈에 구분할 수 있거든요. 코드 블록 상단의 가느다란 그라데이션 바도 "여기 코드가 있어요"라는 시각적 신호 역할을 합니다.

결국 이유를 한 줄로 요약하면 이겁니다:

인생이 짧은데 블로그가 회색일 필요는 없잖아요.

CSS 애니메이션만으로 구현했고, 추가 라이브러리는 하나도 안 썼습니다. prefers-reduced-motion도 대응해서, 애니메이션이 불편한 분들은 자동으로 꺼집니다.

기술 스택

이 블로그에 사용된 기술들입니다:

• Next.js 15 — App Router, RSC, SSG
• TypeScript — 타입 안전성
• Tailwind CSS v4 — 유틸리티 기반 스타일링
• MDX — 마크다운 안에서 React 컴포넌트 사용
• rehype-pretty-code — 빌드 타임 코드 하이라이팅

코드 하이라이팅

rehype-pretty-code와 Shiki로 코드 블록이 렌더링됩니다:

interface Post {
  slug: string;
  title: string;
  date: string;
  tags: string[];
}
 
function getLatestPosts(posts: Post[], count = 5): Post[] {
  return posts.sort((a, b) => (a.date > b.date ? -1 : 1)).slice(0, count);
}

인라인 코드도 지원합니다: console.log('Hello, World!').

좋은 코드는 그 자체로 문서가 된다.

앞으로의 계획

블로그를 통해 다양한 개발 경험과 배움을 공유할 예정입니다. 많은 관심 부탁드립니다!