번역할 제목을 알려 주세요.
발행: (2025년 12월 29일 오전 11:05 GMT+9)
3 분 소요
원문: Dev.to
Source: Dev.to
저는 시스템을 생각하는 솔루션 아키텍트 Mat이며, 의도적인 삶에 대해 글을 쓰고 최근에 개인 사이트를 공개했습니다: matbanik.info.
이번이 첫 번째 DEV 포스트라, 스택과 구축 과정에서 얻은 교훈을 공유하려 합니다. 누군가 포트폴리오를 만들 때 도움이 되길 바랍니다.
스택
| 레이어 | 선택 |
|---|---|
| 프레임워크 | Astro |
| 호스팅 | Cloudflare Pages |
| 백엔드 | Cloudflare Workers |
| 봇 보호 | Cloudflare Turnstile |
| 분석 | Cloudflare Web Analytics |
| 뉴스레터 | Buttondown (Workers 이용) |
| 이메일 | Resend (Workers 이용) |
| 검색 | Pagefind |
총 호스팅 비용: $0 /월
Next.js, Hugo, 11ty 등을 평가한 뒤 Astro를 선택했습니다. 그 이유는 다음과 같습니다:
- 콘텐츠 컬렉션 — Zod 스키마를 활용한 타입‑안전 마크다운. 빌드 시 블로그 포스트가 검증됩니다.
- 기본적으로 Zero JS — HTML/CSS만 전송됩니다. JavaScript는 컴포넌트별로 선택적으로 로드됩니다.
- 파일 기반 i18n — 스페인어는
/es/아래에 페이지를 복제하기만 하면 됩니다. 복잡한 라우팅 설정이 필요 없습니다. - 아일랜드 아키텍처 — 인터랙티브 컴포넌트가 독립적으로 하이드레이트됩니다(사실 거의 필요하지 않았지만).
다르게 할 점
- Pagefind를 더 일찍 도입 — 클라이언트‑사이드 검색은 훌륭한 UX 개선 요소입니다.
- 처음부터 CSS 커스텀 프로퍼티 사용 — 테마와 다크 모드를 손쉽게 구현할 수 있습니다.
- CSP를 보고‑전용 모드로 먼저 설정 — 적용하기 전에 아직 검증 중입니다.