목차
지금 보고 계신 이 사이트는 얼마 전 처음부터 다시 만든 것입니다. 디자인을 바꾸는 김에 보이지 않는 부분까지 손봤는데, 사실 바꾸고 싶었던 건 겉모습보다 속이었습니다.
기존 사이트는 구매한 HTML 템플릿 위에 올라가 있었습니다. 화면은 멀쩡했지만, 한 페이지를 열 때마다 jQuery와 십수 개의 플러그인, 쓰지도 않는 기능의 CSS·JS가 함께 따라왔습니다. 회사 소개 페이지 한 장을 띄우는 데 필요한 것치고는 과했습니다.
템플릿을 걷어냈습니다
새 사이트는 Astro로 다시 지었습니다. Astro는 빌드 시점에 페이지를 정적 HTML로 구워내는 프레임워크입니다. 서버에서 매번 렌더링하지도, 브라우저에서 무거운 프레임워크를 켜지도 않습니다. 방문자에게는 이미 완성된 HTML이 그대로 전달됩니다.
덕분에 “화면을 그리기 위해 돌아가는 코드”가 거의 사라졌습니다. 필요한 인터랙션은 그 자리에 필요한 만큼만 작은 스크립트로 넣습니다. 템플릿이 기본으로 얹어 주던 것들을 덜어낸 게 아니라, 처음부터 얹지 않은 쪽에 가깝습니다.
외부로 나가는 요청을 0건으로
이번 재구축에서 가장 신경 쓴 원칙이 하나 있습니다. 공개 페이지가 외부 서버로 보내는 요청을 0건으로 유지하는 것입니다.
많은 사이트가 폰트는 구글에서, 아이콘은 CDN에서, 분석 스크립트는 또 다른 곳에서 불러옵니다. 편하긴 하지만 그만큼 페이지는 남의 서버 상태에 의존하게 되고, 방문자의 접속 정보가 여러 곳으로 흩어집니다.
그래서 이렇게 정리했습니다.
- 폰트는 SUIT 가변폰트를 사이트에 직접 담아(self-host) 제공합니다.
- 아이콘은 빌드 시점에 SVG로 페이지 안에 새겨 넣어, 별도 네트워크 요청 없이 그려집니다.
- 스타일은 빌드할 때 하나로 묶어, CDN에서 불러오지 않습니다.
이 “외부 요청 0건” 원칙은 말로만 지키면 언젠가 무너집니다. 그래서 빌드 단계에서 산출물을 훑어 외부 주소로 나가는 요청이 하나라도 있으면 빌드를 실패시키는 검사를 넣어 뒀습니다. 누군가 실수로 외부 링크를 끼워 넣어도 배포 전에 걸립니다.
콘텐츠는 한 곳에서만 고칩니다
예전 사이트에는 작지만 성가신 문제가 있었습니다. 제공 서비스 목록이 헤더, 서비스 페이지, 푸터에 각각 따로 적혀 있었고, 시간이 지나자 셋이 서로 달라져 있었습니다. 푸터에는 템플릿 원본에 있던, 우리가 하지도 않는 항목이 그대로 남아 있기도 했습니다.
지금은 서비스·연락처 같은 정보를 한 파일에서만 관리하고, 화면 곳곳은 그 한 곳을 읽어 갑니다. 고칠 곳이 하나면 틀릴 곳도 하나입니다.
왜 이렇게까지 했느냐면
이건 우리가 고객 프로젝트에서 지키려는 기준과 같습니다. 성능·SEO·보안을 나중에 덧붙이는 옵션이 아니라 기본값으로 두는 것, 그리고 다음 사람이 이어받기 쉬운 코드로 넘기는 것. 60여 개의 프로젝트를 거치며 다져온 기준인데, 정작 우리 사이트가 그렇지 못하다면 면목이 없겠지요.
그래서 우리 홈페이지를 첫 고객이라고 생각하고 만들었습니다. 빠르고, 군더더기 없고, 고치기 쉬운 사이트 — 당신의 프로젝트에 드리고 싶은 것과 정확히 같은 것입니다.