Astro 블로그 본문 너비 확장 및 사이드바 광고 레이아웃 구현 (Tailwind v4)

AstroPaper 테마의 기본 레이아웃은 가독성을 위해 본문 폭이 다소 좁게 설정되어 있습니다. 하지만 코드 블록이 많은 기술 블로그 특성상 더 넓은 화면 활용이 필요할 때가 많습니다.

오늘은 Tailwind CSS v4의 @utility를 활용해 본문 너비를 시원하게 넓히고, 남는 여백을 활용해 사이드바 광고를 배치하는 최적화 과정을 공유합니다.

1. 전역 너비 확장 (@utility 설정)

가장 먼저 global.css에서 전체 컨테이너의 최대 너비를 수정합니다. v4에서는 @utility 지시어를 사용하여 직관적으로 레이아웃 클래스를 정의할 수 있습니다.

/* src/styles/global.css */

@utility max-w-app {
  /* 기존 3xl(768px)에서 6xl(1152px)로 대폭 확장 */
  @apply mx-auto max-w-6xl px-4;  
}

@utility app-layout {
  @apply mx-auto w-full max-w-app px-4;
}

이렇게 설정하면 app-layout 클래스를 사용하는 모든 페이지의 기초 공사가 완료됩니다.

2. 본문 중심의 지능형 레이아웃 설계

본문 너비를 무작정 100%로 채우면 텍스트가 너무 길어져 가독성이 떨어집니다. 제가 선택한 방식은 **“본문은 중앙에 적정 너비(4xl)로 두되, 화면이 아주 커질 때만 여백에 광고를 띄우는 것”**입니다.

PostDetails.astro 구조 변경

relative 포지셔닝을 활용하여 본문 영역(article)과 사이드바(aside)를 분리합니다.

<main class="app-layout relative">
  <div class="flex justify-center w-full">
    <section class="w-full max-w-4xl">
      <article id="article" class="app-prose">
        <slot />
      </article>
    </section>

    <aside class="hidden xl:block absolute left-[calc(100%-14rem)] top-12 w-60">
      <div class="sticky top-24">
        <div class="rounded-xl border border-skin-line p-4 text-center">
          <AdsenseInArticle />
        </div>
      </div>
    </aside>
  </div>
</main>

3. 왜 이 방식인가? (장점)

가독성 보호: 본문 폭을 max-w-4xl로 제한하여 시선이 분산되지 않습니다.
반응형 최적화: 노트북이나 모바일 등 화면이 좁을 때는 광고가 본문을 침범하지 않도록 hidden 처리됩니다.
공간 활용: 27인치 이상의 대형 모니터 사용자에게는 버려지는 우측 여백에 광고를 노출하여 수익성을 극대화합니다.

마치며

블로그 너비를 넓히는 것은 단순히 수치를 키우는 것이 아니라, 어떤 정보를 어디에 배치할 것인가에 대한 고민이 선행되어야 합니다. Tailwind v4의 강력한 유틸리티 기능을 활용하면 엔지니어링 블로그에 최적화된 시원시원한 레이아웃을 손쉽게 구현할 수 있습니다.

DevBJ는 개인정보를 노출하지 않으며, 오직 기술적인 삽질과 해결 과정만을 기록합니다.