👋 Hello World

Astro-Theme-Aither에 오신 것을 환영합니다.

이것은 하나의 믿음 위에 만들어진 블로그 테마입니다: 좋은 글은 좋은 타이포그래피를 누릴 자격이 있다. 세리프 제목, 깔끔한 읽기 리듬, 그리고 방해하지 않는 레이아웃. 여기 있는 모든 것은 단 하나의 목표를 위해 존재합니다 — 당신의 글이 아름답게 보이고 느껴지도록 하는 것.

또 하나의 블로그 테마를 만든 이유

웹에는 블로그 테마가 넘쳐나니, 왜 또 하나를 만들었는지 묻는 것은 당연합니다. 답은 우선순위에 있습니다. 대부분의 테마는 시각적 임팩트에 최적화합니다 — 큰 히어로 이미지, 복잡한 레이아웃, 애니메이션 전환. 데모에서는 멋지게 보이지만, 누군가가 2,000단어 글을 읽으려 앉으면 오히려 방해가 됩니다.

Astro-Theme-Aither는 다른 전제에서 출발합니다. 콘텐츠가 곧 제품입니다. 테마의 역할은 그 콘텐츠를 정성껏 제공하는 것입니다: 세심한 폰트 조합, 넉넉한 여백, 그리고 장문의 읽기를 편안하게 만드는 수직 리듬.

이 철학은 기술적 결정에도 확장됩니다. 이 테마는 약 0.5 KB의 클라이언트 사이드 JavaScript만 전송합니다 — 테마 토글에 필요한 최소한만. 나머지는 모두 정적 HTML과 CSS입니다. 레이아웃 시프트도, 로딩 스피너도, 백그라운드에서 하이드레이팅하는 JavaScript 프레임워크도 없습니다. 페이지가 로드되면, 읽기만 하면 됩니다.

시작하기

설정하고 실행하는 데 몇 분이면 충분합니다. 전체 과정은 다음과 같습니다:

저장소 복제 — GitHub 템플릿 버튼을 사용하거나 git clone으로 직접 복제
의존성 설치 — pnpm install을 실행하여 모든 패키지 설치
사이트 설정 — src/config/site.ts를 편집하여 사이트 제목, 설명, 네비게이션 링크 설정
샘플 콘텐츠 교체 — src/content/posts/의 글을 자신의 Markdown 파일로 교체
개발 시작 — pnpm dev를 실행하여 핫 리로딩이 되는 로컬 개발 서버 실행
배포 — GitHub에 푸시하면 내장된 CI 워크플로우가 Cloudflare Pages 배포를 처리

프로젝트 구조

코드베이스는 즉시 이해할 수 있도록 구성되어 있습니다:

src/
├── components/     # 재사용 가능한 Astro 컴포넌트
├── config/         # 사이트 설정
├── content/        # Markdown 글과 콘텐츠
├── layouts/        # 페이지 레이아웃 (Layout.astro)
├── pages/          # 라우트 페이지
└── styles/         # Tailwind v4 토큰을 사용한 글로벌 CSS

각 디렉토리에는 명확한 역할이 있습니다. 컴포넌트는 작고 조합 가능합니다. 레이아웃은 문서 셸을 처리합니다. 페이지는 라우트를 정의합니다. 콘텐츠는 글을 담고 있습니다. 마법 같은 것은 없습니다 — 잘 정리된 파일들뿐입니다.

첫 번째 글 작성

src/content/posts/에 다음 프런트매터를 포함하는 새 .md 파일을 만드세요:

---
title: 글 제목
date: 2026-01-15
category: General
description: SEO와 소셜 미리보기를 위한 간단한 요약
tags: [Topic, Another]
---

여기에 내용을 작성하세요.

title, date, category 필드는 필수입니다. description 필드는 메타 설명 태그와 Open Graph 미리보기를 채우기 때문에 작성을 강력히 권장합니다. 태그는 선택 사항이지만 독자들이 관련 콘텐츠를 발견하는 데 도움이 됩니다.

무엇이 포함되어 있나

즉시 사용 가능한 프로덕션 준비 블로깅 플랫폼으로, 필요한 모든 기능을 갖추고 불필요한 것은 없습니다.

콘텐츠 기능

RSS 피드 — /rss.xml에 자동 생성, 모든 피드 리더와 호환
사이트맵 — 검색 엔진 인덱싱을 위해 @astrojs/sitemap으로 자동 생성
SEO 메타 태그 — 모든 페이지에 Open Graph, Twitter 카드, 정규 URL
다크 모드 — localStorage 지속성을 가진 3단 토글 (라이트 / 다크 / 시스템)
카테고리 및 태그 페이지 — 독자들이 주제별로 탐색할 수 있는 정리된 아카이브

개발자 기능

전체 TypeScript — strict 모드, 완전히 타입이 지정된 컴포넌트와 유틸리티
Content Collections — 빌드 타임 프런트매터 유효성 검사를 포함한 Astro 내장 타입 안전 Markdown 시스템
Tailwind CSS v4 — 색상, 폰트, 간격의 손쉬운 커스터마이징을 위한 @theme 디자인 토큰 사용
Vitest + Playwright — CI 파이프라인에 이미 연결된 유닛 테스트와 E2E 테스트
Cloudflare Pages — 자동 PR 미리보기 URL이 포함된 배포 워크플로우
Google Analytics — 선택 사항, 메인 스레드를 차단하지 않도록 Partytown Web Worker에서 격리 실행

성능

이 테마는 최소한의 JavaScript로 정적 HTML을 출력하기 때문에 기본적으로 뛰어난 성능을 제공합니다. Lighthouse 점수 전 항목 100점을 기대할 수 있습니다 — Performance, Accessibility, Best Practices, SEO. 불필요한 것이 없기 때문에 최적화할 것도 없습니다.

커스터마이징

이 테마는 여러분의 것이 되도록 설계되었습니다. 가장 일반적인 커스터마이징은 간단합니다:

색상 — src/styles/global.css의 CSS 커스텀 프로퍼티를 편집하여 전체 팔레트 변경
폰트 — Tailwind 테마 설정에서 font-family 값 교체
네비게이션 — src/config/site.ts의 네비게이션 링크 배열 업데이트
Analytics — 사이트 설정에서 Google Analytics 측정 ID 추가

더 깊은 변경을 위해 컴포넌트 아키텍처는 의도적으로 단순합니다. 깊게 중첩된 추상화나 복잡한 상태 관리 패턴이 없습니다. 각 컴포넌트는 하나의 일을 하고, props를 읽고, HTML을 렌더링합니다.

디자인 철학에 대한 참고

이 테마의 시각적 단순함은 의도적이지만, 엔지니어링적 단순함과는 다릅니다. 내부적으로 이 테마는 놀라울 정도로 많은 것을 처리합니다: 반응형 타이포그래피 스케일, 라이트 및 다크 모드 모두에서의 접근 가능한 색상 대비, 올바른 시맨틱 HTML 구조, 올바른 제목 계층 구조, 그리고 휴대폰부터 울트라와이드 모니터까지 다양한 화면에서의 읽기 경험에 대한 세심한 주의.

좋은 디자인은 보이지 않습니다. 이 테마에서 글을 읽을 때 테마를 전혀 의식하지 않고 글 자체를 즐기게 된다면 — 바로 그것이 의도한 대로 디자인이 작동하는 것입니다.

즐거운 글쓰기 되세요.