정적 사이트 생성
Astro 5
모든 페이지를 빌드 시점에 HTML로 만들어 둡니다. 요청마다 서버가 렌더링하지 않습니다.
WEBSITE / BLDNEX OWN PRODUCT
bldnex.com.
만든 걸 보시려면,
지금 보고 계신 게 그겁니다.
이 웹사이트는 BLDNEX가 직접 기획하고 만들어 운영합니다. 아래 수치는 설명이 아니라 지금 열려 있는 이 사이트를 빌드할 때 실제로 잰 값입니다. 브라우저 개발자 도구를 열어 그대로 확인하실 수 있습니다.
첫 방문 용량
265 KB
HTML·CSS는 gzip 기준. 홈이 쓰지 않는 글꼴 굵기까지 더해 실제보다 크게 잡은 값입니다
JavaScript
0.6 KB
번들 파일 없음. 메뉴와 주소 복사만 인라인으로
외부 요청
0건
분석 도구·쿠키·외부 글꼴 없음
페이지
9개
전부 빌드 시점에 생성된 정적 HTML
WHY IT MATTERS
웹사이트를 만드는 회사의
웹사이트부터 그래야 합니다.
처음에는 이 사이트도 글꼴을 외부 CDN에서 통째로 받고 있었습니다. HTML은 11 KB인데 실제로는 1.59 MB를 내려받고 있었고, 그중 98%가 쓰지도 않는 한글 글자였습니다.
실제로 쓰는 글자를 세어 보니 한글 402자를 포함해 500자 남짓이었습니다. 빌드할 때마다 쓰인 글자만 추려 글꼴을 다시 만들도록 바꿨고, 글꼴 용량이 202 KB로 줄면서 외부 요청도 함께 사라졌습니다.
고객 프로젝트에서 성능과 개인정보를 이야기하기 전에, 우리 사이트에서 먼저 지키는 편이 설득력 있다고 생각합니다.
THE STACK
필요한 것만,직접 고르고 조립해서.
유행하는 기술을 나열하기보다, 이 사이트가 실제로 하는 일에 필요한 것만 씁니다.
콘텐츠 데이터 모델
TypeScript
서비스·제품·FAQ·방침 원고를 타입이 있는 데이터로 두고 페이지에서 재사용합니다.
호스팅
Cloudflare Pages
정적 파일을 엣지에서 전송합니다. 응답 헤더는 저장소의 _headers로 관리합니다.
빌드 단계 에셋 생성
Sharp · subset-font
공유 이미지와 서브셋 폰트를 빌드할 때 만듭니다. 손으로 만든 산출물을 커밋하지 않습니다.
AUTOMATED REVIEW
사람이 눈으로 보는 대신,빌드가 먼저 막습니다.
pnpm test 한 번에 아래 항목을 전부 확인하고, 하나라도 어긋나면 빌드가 실패합니다. 조용히 깨진 채로 배포되는 경우를 없애는 것이 목적입니다.
- 페이지마다 제목이 겹치지 않는지, h1이 하나인지
- 내부 링크와 앵커가 전부 실제 대상에 닿는지
- 모든 이미지에 대체 텍스트와 크기 속성이 있는지
- 공유 이미지가 페이지마다 다르고 실제로 1200×630인지
- canonical과 og:url이 일치하고 슬래시가 붙지 않는지
- 폰트 서브셋에서 빠진 글자가 없는지
- 선언된 글꼴 굵기에 해당하는 파일이 있는지
- 외부 폰트 호스트를 다시 참조하지 않는지
- 미완성 페이지가 색인되거나 사이트맵에 들어가지 않는지
마지막 빌드: · 검사 통과 후 배포됨
LET’S BUILD WHAT’S NEXT.
이런 기준으로 만들어 드릴까요?
지금 쓰고 계신 사이트의 용량과 외부 요청부터 함께 확인해 보겠습니다.