메인 페이지를 사이트 전용 레이아웃으로 확정한 이유

메인 페이지 레이아웃을 사이트 특성에 맞게 새로 잡은 작업이다.

src/pages/index.astro 하나만 건드렸지만, 이게 서비스 전체 진입점이라는 점에서 무게감이 꽤 있었음.

왜 "site-specific" 레이아웃이 필요했나

Astro로 프로젝트를 처음 세팅하면 보통 제네릭한 인덱스 페이지가 들어간다. 스타터 템플릿이든, 이전에 빠르게 올려둔 플레이스홀더든 — 어느 시점에 "이 사이트가 무엇을 해야 하는가"에 맞는 레이아웃으로 교체하는 작업이 반드시 온다. 그게 이번 커밋이었음.

제네릭 레이아웃을 계속 끌고 가면 생기는 문제가 있다.

• 컴포넌트 구조가 사이트 목적과 어긋나기 시작함
• 나중에 갈아엎으려면 의존성이 이미 붙어 있어서 더 큰 리팩터링이 필요해짐
• 팀원이 "이 구조가 맞는 건가?" 하고 매번 물어보게 됨 — 컨텍스트가 코드에 없으니까

그래서 이 시점에 index.astro를 이 사이트 전용 구조로 확정짓는 게 맞다고 판단했다. 작업 자체는 파일 하나지만 의사결정으로서의 무게가 있는 커밋.

Astro에서 index 페이지가 갖는 위치

Astro는 src/pages/ 디렉터리가 파일 기반 라우팅 기준점이다. index.astro는 루트 경로(/)로 직접 연결되고, 여기서 어떤 레이아웃 컴포넌트를 import하고, 어떤 props를 내려보내고, 어떤 섹션을 조합하느냐가 사이트 전체 인상을 결정한다.

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import HeroSection from '../components/HeroSection.astro';
// ... site-specific imports
---

<Layout title="...">
  <HeroSection />
  <!-- site-specific 섹션 조합 -->
</Layout>

이런 구조에서 "site-specific"이라는 커밋 메시지는 단순히 디자인 변경이 아니라, 이 페이지가 어떤 컴포넌트 조합으로 구성될지 확정했다는 의미에 가깝다.

인덱스 페이지 작업 시 팀 관점에서 챙기는 것들

특히 마지막 항목이 팀 작업에서 자주 충돌 지점이 된다. 인덱스 페이지는 여러 사람이 손댈 가능성이 높은 파일이라서, 섹션 하나 추가할 때 index.astro 전체를 건드리는 구조면 git conflict가 쌓이기 시작함. 이번 작업에서 섹션 조합 방식을 어떻게 설계했느냐가 이후 팀 작업 마찰도를 결정하는 셈이었다.

회고

파일 하나짜리 커밋이지만 "이 사이트는 이렇게 생겼다"는 선언을 코드로 남긴 작업이다. 이런 커밋이 팀 내에서 명확한 컨텍스트로 남으려면 커밋 메시지보다는 PR 설명이나 코드 내 주석으로 "왜 이 섹션 조합인가"를 짧게라도 남기는 게 낫다. 나중에 "왜 이렇게 되어 있지?"를 추적할 때 git blame이 가장 먼저 열리는 파일이 바로 index니까.

다음 단계는 이 레이아웃 위에 실제 콘텐츠를 붙이는 작업이 될 것 같다.

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

• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →

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