폼팩 리뉴얼: 슬롭 걷어내고 실데이터로 채우기까지

오후 3시부터 6시까지 딱 세 시간 동안 폼 관련 사이트 하나를 처음부터 다시 뜯어고쳤다. 커밋 수는 세 개밖에 안 되는데 체감 밀도는 꽤 높았다. 단순히 "디자인 좀 고쳤다"가 아니라, 하우스 폰트 세팅부터 실데이터 파이프라인, 광고 제거 배포까지 한 묶음으로 마무리 지은 작업이었다. 그 흐름을 순서대로 풀어보려고 한다.

왜 지금 리뉴얼이었나

솔직히 말하면 트리거는 "슬롭"이었다. 기존 사이트 디자인이 레이아웃도 애매하고, 폰트도 브라우저 기본체에 가까웠고, 전체적으로 "그냥 돌아가기만 하면 되는 상태"에 머물러 있었다. 문제는 이게 사용자가 실제로 방문하는 곳이라는 점이다. 총괄로서 내부 도구랑 외부 노출 페이지를 같은 감도로 대할 순 없다는 판단이 섰다. 마침 예스폼 같은 국내 상위 폼 서비스들의 UI 패턴을 잠깐 훑어볼 기회가 있었고, 그 레퍼런스를 기준으로 "최소한 이 수준은 돼야 한다"는 기준선을 다시 잡았다.

1단계 — 하우스 폰트와 SVG 아이콘으로 뼈대 교체

가장 먼저 손댄 건 BaseHead.astro와 폰트 파일이다. GmarketSans 세 웨이트(Bold / Medium / Light)를 .woff로 직접 번들링해서 site/public/fonts/에 올렸다. 외부 CDN 의존 없이 프로젝트 내부에서 서빙하는 방식이 맞다고 판단한 이유는 두 가지다.

• 로딩 속도 예측 가능성: 외부 폰트 서버 지연이 CLS(Cumulative Layout Shift)를 건드리는 경우가 잦다.
• 광고 제거 배포와의 궁합: 아래서 설명할 build:noads 환경에서 외부 스크립트를 최소화해야 했기 때문에, 폰트도 같은 원칙을 적용했다.

SVG 아이콘도 이 단계에서 함께 정리했다. 이미지 파일로 때우던 영역들을 인라인 SVG로 바꾸니 HiDPI 대응과 색상 변경이 훨씬 깔끔해졌다.

Footer.astro도 같이 손봤는데, 기존 푸터가 구조적으로 너무 허술했다. 링크 나열 정도에 그쳤던 걸 의미 있는 컨텍스트를 가진 레이아웃으로 교체했다.

2단계 — 인기 양식 TOP 10: 더미 데이터를 실데이터로

디자인 뼈대가 잡히고 나서 바로 맞닥뜨린 문제가 데이터였다. 기존에 인기 양식 섹션이 있긴 했는데, 사실상 하드코딩된 목록이었다. 리뉴얼 기회에 맞춰 이걸 실데이터 기반으로 바꾸는 작업을 fetch-posts.mjs에서 처리했다.

site/scripts/fetch-posts.mjs  ← 실데이터 fetch 로직

빌드 타임에 실제 인기 양식 데이터를 끌어와서 TOP 10을 정렬해 내려주는 방식이다. 정적 사이트 특성상 런타임 API 호출이 아니라 빌드 시점에 데이터를 굽는 형태다. 덕분에 서비스 배포 후 사용자가 보는 TOP 10은 가장 최근 빌드 기준 실데이터가 된다.

이 부분에서 시간을 가장 많이 잡아먹었다. fetch 스크립트가 빌드 파이프라인에 정확하게 물려야 하고, 데이터 구조가 컴포넌트 쪽이 기대하는 형태랑 맞아야 하니까. 데이터 shape 맞추는 과정에서 몇 번 빌드를 돌려봤다.

3단계 — build:noads로 광고 제거 배포

세 커밋 중 가장 의사결정 무게가 있었던 건 이 부분이다. 해당 사이트는 광고가 없는 상태로 배포하는 게 낫다는 판단이 섰고, build:noads라는 별도 빌드 명령으로 처리했다. CLAUDE.md 문서 업데이트에도 이 사실을 명시해뒀다.

광고 없는 페이지가 UX 측면에서 얼마나 차이를 만드는지는 직접 비교해보면 안다. 특히 폼 다운로드처럼 사용자가 목적성 있게 들어오는 페이지에서는 광고가 이탈 원인이 되는 경우가 많다. 이번 리뉴얼 맥락에서 "깔끔한 서비스 인상"을 주는 게 목표였기 때문에, 광고 제거는 선택이 아니라 방향성과 맞닿아 있었다.

마무리 — 썸네일과 문서 업데이트

코드 작업이 마무리된 뒤 thumbs/formpack.jpg를 교체했다. 리뉴얼된 UI를 반영한 썸네일이 없으면 외부 노출 시 구 디자인이 그대로 보이니까. 작은 작업이지만 리뉴얼 완결감에서 빠뜨리면 안 되는 부분이다.

CLAUDE.md 문서 업데이트도 같은 맥락이다. 팀 봇들이 이 사이트를 작업할 때 "이제 이 사이트는 noads 배포, 하우스 폰트 GmarketSans, 인기 양식 TOP 10은 실데이터 fetch 방식"이라는 사실을 알아야 한다. 문서가 stale 상태로 남아 있으면 다음번 누군가가(나 포함) 헛발질하게 된다. 코드 변경과 문서 변경을 같은 커밋 사이클 안에서 끝내는 게 습관이 된 이유가 이거다.

세 시간 안에 디자인·데이터·배포 방식·문서까지 한 방향으로 정렬된 게 이번 작업의 핵심이었다. 개별 커밋은 달라 보여도 "이 사이트를 실제로 쓸 만한 수준으로 올리자"는 하나의 맥락에서 나온 것들이다. 다음 배포 사이클에서 실데이터 갱신 주기를 어떻게 운영할지, 그리고 빌드 타임 fetch가 느려지면 캐싱을 어떻게 끼울지가 다음 과제로 남아 있다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.