급여·퇴직금·실업급여 계산기와 광고·크롤링 인프라 첫 배포
목차
급여 계산기 / 퇴직금 계산기 / 실업급여 계산기 세 페이지를 한 번에 올리면서, 프로젝트의 첫 번째 실질적인 콘텐츠 레이어가 완성됐다.
왜 이 세 개를 P0으로 묶었나
기능 우선순위를 정할 때 항상 "사용자가 이 서비스에 처음 들어오는 이유"부터 시작한다. 이 프로젝트에서 가장 먼저 올려야 할 페이지를 고민했을 때, 그 답은 비교적 명확했다. 급여 실수령 계산, 퇴직금, 실업급여 — 이 세 가지는 노동자라면 누구나 인생의 특정 시점에 반드시 찾아보는 정보다. 이직할 때, 계약 만료될 때, 해고 통보를 받았을 때. 검색 의도도 명확하고, 필요성도 분명하다.
P0 기준은 단순했다. "이게 없으면 서비스가 존재할 이유가 없는가" — 그 질문에 YES가 나오는 것들만 첫 배포에 넣었다. 팀 단위로 일할 때 이 기준을 명시적으로 공유해두지 않으면, 각자 생각하는 MVP가 달라서 스코프가 흐릿해지는 경우를 많이 봤다. 그래서 이번엔 아예 P0 레이블을 커밋 메시지에 박아버렸다.
변경 파일들이 말하는 것
이번 커밋에서 흥미로운 건 페이지 파일 자체보다 변경된 파일 목록이다.
| 파일 | 역할 | 이번 변경의 의미 |
|---|---|---|
.env.example |
환경변수 템플릿 | 새 기능(광고 슬롯 등)에 필요한 키 추가 |
public/robots.txt |
크롤러 정책 | 신규 페이지 경로 크롤링 허용 또는 제어 |
src/components/AdSlot.astro |
광고 슬롯 컴포넌트 | 페이지에 수익화 슬롯 붙이기 위한 기반 마련 |
src/components/Footer.astro |
푸터 | 새 페이지 링크 추가 또는 공통 구조 정비 |
src/components/Header.astro |
헤더 | 네비게이션에 신규 페이지 반영 |
src/layouts/Layout.astro |
공통 레이아웃 | AdSlot, SEO 메타 등 페이지 공통 요소 통합 |
페이지 파일 자체는 변경 목록에 없고, 레이아웃과 공통 컴포넌트만 바뀌었다는 게 눈에 띈다. Astro 구조상 각 페이지는 src/pages/ 아래에 별도로 추가되는 방식이라 커밋 stat에 따로 잡히지 않았을 가능성이 있고, 혹은 이번 커밋이 "공통 인프라를 세팅하면서 페이지들도 함께 올린" 묶음 작업이었을 거다.
AdSlot.astro가 이 시점에 등장한 건 의미 있다. 콘텐츠 페이지가 처음 생기는 타이밍에 광고 슬롯 컴포넌트를 함께 붙인 거니까, 수익화 구조를 나중에 끼워 넣는 게 아니라 처음부터 레이아웃 안에 자리를 잡아둔 셈이다. 이런 결정은 나중에 "광고 넣으려면 전 페이지 다 손봐야 해요"라는 상황을 방지한다.
robots.txt와 SEO 첫 설정
robots.txt를 이 시점에 건드린 것도 자연스러운 순서다. 페이지가 처음 퍼블리싱되는 순간이 크롤러 정책을 명시해야 하는 첫 타이밍이고, 나중에 인덱싱 문제가 생기고 나서 수정하는 것보다 훨씬 낫다.
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
이런 계산기 서비스 특성상 검색 유입이 핵심 트래픽 소스가 될 거라서, robots.txt와 sitemap 연결을 초기에 제대로 잡아두는 게 중요하다. 팀원한테 "SEO는 나중에 해도 되죠?"라는 말을 들을 때마다 하는 대답이 있는데 — 나중에 하면 두 배로 힘들다. 특히 인덱싱은 시간이 걸리기 때문에, 첫 배포 전에 구조를 잡아두지 않으면 론칭 후 몇 주를 날리게 된다.
Layout.astro가 비대해지지 않으려면
공통 레이아웃에 AdSlot, Header, Footer를 다 품으면서 Layout.astro가 점점 많은 걸 알게 되는 구조가 될 수 있다. 지금은 초기라 괜찮지만, 페이지 종류가 늘어나면 "광고 슬롯 없는 레이아웃"이나 "사이드바 있는 레이아웃" 같은 변형이 필요해진다. 그 시점에 대비해서 레이아웃을 props로 제어 가능하게 만들어두는 게 좋다.
---
// Layout.astro
const { showAd = true, fullWidth = false } = Astro.props;
---
<html>
<Header />
<main class:list={[{ 'full-width': fullWidth }]}>
<slot />
</main>
{showAd && <AdSlot />}
<Footer />
</html>
지금 당장 복잡하게 만들 필요는 없지만, 분기 포인트를 props로 빼두는 습관은 리팩토링 비용을 크게 줄여준다. 코드리뷰할 때 이런 부분을 "나중에 필요할 것 같으니 지금 해두자"로 넘기는 게 아니라, "언제 필요한지 기준"을 같이 이야기하는 걸 선호한다.
P0 세 페이지 + 인덱스까지 한 커밋에 묶은 건 좋은 결정이었다. 공통 인프라 없이 페이지만 올리거나, 반대로 인프라만 세팅하고 페이지를 나눠서 올렸으면 배포 검증이 훨씬 번거로웠을 거다. 다음 우선순위는 아마 P0 페이지들의 계산 로직 고도화와 SEO 메타 채우기가 될 것 같다.
끝.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.