---
title: 👋 Hello World
date: "2026-01-01T16:07:13+08:00"
category: Tutorial
description: Astro-Theme-Aither에 오신 것을 환영합니다 — 타이포그래피가 디자인을 이끄는 블로그 테마
tags: [hello, astro]
pinned: false
---

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

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

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

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

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

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

## 시작하기

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

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

### 프로젝트 구조

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

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

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

### 첫 번째 글 작성

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

```markdown
---
title: 글 제목
date: "2026-01-15T16:27:43+08:00"
category: General
description: SEO와 소셜 미리보기를 위한 간단한 요약
tags: [topic, another]
---

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

`title`, `date`, `category` 필드는 필수입니다. `date`는 초와 시간대까지 포함한 ISO 8601 형식을 사용하는 것이 좋습니다. 예: `2026-01-15T16:27:43+08:00`. `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` 디자인 토큰 사용
- **검증 체인** — `pnpm validate`를 통해 콘텐츠 커버리지 검사와 agent 프로토콜 smoke test 실행
- **GitHub Pages** — 기본 배포 워크플로우 포함
- **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 구조, 올바른 제목 계층 구조, 그리고 휴대폰부터 울트라와이드 모니터까지 다양한 화면에서의 읽기 경험에 대한 세심한 주의.

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

즐거운 글쓰기 되세요.