포트폴리오를 Astro로 다시 지은 이유

이 사이트의 이전 버전은 리액트 SPA였습니다. 포트폴리오 하나 보여 주자고 번들 200KB를 내려받게 하는 구조였죠. 올해 초 Astro로 다시 지으면서 생각이 많이 정리됐습니다.

01포트폴리오는 문서다

포트폴리오 사이트의 본질은 앱이 아니라 문서입니다. 방문자의 여정은 읽고, 넘기고, 연락하는 것이 전부입니다. 이 중 자바스크립트가 필요한 순간은 "연락"의 폼 제출 하나뿐이었습니다.

Astro의 아일랜드 아키텍처는 정확히 이 구조를 강제합니다. 기본은 HTML이고, 동적인 부분만 섬처럼 띄웁니다. 제 사이트에서 섬은 문의 폼 하나입니다. 나머지 페이지는 빌드 시점에 전부 HTML로 구워집니다.

02콘텐츠 컬렉션이 주는 규율

작업물과 글을 마크다운으로 관리하면서 가장 좋았던 것은 스키마 검증입니다. 프론트매터에 연도를 빼먹거나 태그를 문자열로 잘못 쓰면 빌드가 실패합니다. CMS 없이도 콘텐츠에 타입이 생기는 셈입니다.

const works = defineCollection({
  schema: z.object({
    title: z.string(),
    year: z.number(),
    tags: z.array(z.string()),
  }),
})

03백엔드는 빌리는 것

문의 폼의 저장은 직접 서버를 만드는 대신 BaaS의 SDK를 서버 엔드포인트에서 호출하는 것으로 끝냈습니다. 정적 사이트 하나를 위해 데이터베이스와 인증을 직접 운영하는 것은 배보다 배꼽이 큰 일입니다. 페이지는 정적으로, 데이터는 게이트웨이 너머로. 이 단순한 분리가 유지 보수를 극적으로 줄였습니다.

결과적으로 첫 페이지의 자바스크립트는 3KB 아래로 내려갔고, Lighthouse 점수는 네 항목 모두 초록색입니다. 도구를 바꾼 것이 아니라 사이트의 본질에 맞는 구조를 찾은 것에 가깝습니다.