νŠœν† λ¦¬μ–Ό #μ•ˆλ…•ν•˜μ„Έμš”#Astro

πŸ‘‹ Hello World

2026-01-01 Β· 632자 Β· 3λΆ„

Astro-Theme-Aither에 μ˜€μ‹  것을 ν™˜μ˜ν•©λ‹ˆλ‹€ β€” νƒ€μ΄ν¬κ·Έλž˜ν”Όκ°€ λ””μžμΈμ„ μ΄λ„λŠ” λΈ”λ‘œκ·Έ ν…Œλ§ˆ

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. 배포 β€” 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 ꡬ쑰, μ˜¬λ°”λ₯Έ 제λͺ© 계측 ꡬ쑰, 그리고 νœ΄λŒ€ν°λΆ€ν„° μšΈνŠΈλΌμ™€μ΄λ“œ λͺ¨λ‹ˆν„°κΉŒμ§€ λ‹€μ–‘ν•œ ν™”λ©΄μ—μ„œμ˜ 읽기 κ²½ν—˜μ— λŒ€ν•œ μ„Έμ‹¬ν•œ 주의.

쒋은 λ””μžμΈμ€ 보이지 μ•ŠμŠ΅λ‹ˆλ‹€. 이 ν…Œλ§ˆμ—μ„œ 글을 읽을 λ•Œ ν…Œλ§ˆλ₯Ό μ „ν˜€ μ˜μ‹ν•˜μ§€ μ•Šκ³  κΈ€ 자체λ₯Ό 즐기게 λœλ‹€λ©΄ β€” λ°”λ‘œ 그것이 μ˜λ„ν•œ λŒ€λ‘œ λ””μžμΈμ΄ μž‘λ™ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

즐거운 κΈ€μ“°κΈ° λ˜μ„Έμš”.

끝 Β· μ½μ–΄μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€

λŒ“κΈ€

Giscusλ₯Ό μ„€μ •ν•˜λ©΄ λŒ“κΈ€μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.