Astro Tailwind 레이아웃에서 오른쪽 여백이 남을 때 확인할 것

사이드 광고나 우측 레일을 제거했는데,
화면 오른쪽 공간이 어색하게 남는 경우가 있다.

겉으로 보면 이런 느낌이다.

본문 컨테이너는 넓어진 것 같음
그런데 제목과 설명은 좁게 끊김
이미지는 다른 폭으로 보임
카테고리 페이지도 같은 증상

이럴 때는 광고 컴포넌트만 찾으면 안 된다.
대부분은 예전 레이아웃 폭 제한이 남아 있는 문제다.

Astro Tailwind 레이아웃 오른쪽 여백 삽화

먼저 공용 컨테이너를 본다

Astro 블로그는 보통 여러 페이지가 같은 레이아웃 클래스를 공유한다.

예를 들어:

@utility app-layout {
  @apply mx-auto w-full max-w-5xl px-6;
}

이 값이 좁게 잡혀 있으면 홈, 카테고리, 태그, 글 목록이 모두 좁아진다.

사이드 광고를 제거했다면 컨테이너 폭도 다시 봐야 한다.

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

이렇게 공용 레이아웃을 넓히면 목록형 페이지가 남는 공간을 더 잘 쓴다.

주의할 점도 있다.

모든 화면을 무작정 넓히면 글 본문 가독성이 떨어진다.

그래서 글 상세 페이지는 별도 reading layout을 두는 편이 좋다.

@utility reading-layout {
  @apply mx-auto w-full max-w-5xl px-4 sm:px-6;
}

목록 페이지는 넓게,
본문 읽기 화면은 적당히 제한하는 방식이다.

공용 컨테이너를 고쳤는데도 오른쪽 여백이 남는다면,
자식 요소의 max-w-*를 봐야 한다.

예를 들어 홈 화면에 이런 코드가 있을 수 있다.

<h1 class="max-w-4xl">...</h1>
<p class="max-w-3xl">...</p>
<figure class="max-w-4xl">...</figure>

부모는 넓어졌는데 자식이 계속 좁으면 화면이 이상해 보인다.

이 경우는 의도적으로 좁힐 요소와,
부모 폭을 따라가야 할 요소를 나눠야 한다.

히어로 영역에서는 제목, 설명, 이미지가 같은 시각적 축을 가져야 한다.

제목은 900px,
이미지는 1100px이면 오른쪽이 빈 것처럼 보일 수 있다.

특히 한글 제목은 줄바꿈이 눈에 잘 띈다.

AI와 임베디드 네트워크를 직접 실험하며 정리하는 기술 로
그

이런 식으로 마지막 글자가 떨어지면 컨테이너 폭보다 제목 폭을 먼저 의심한다.

홈만 고치면 안 된다.

카테고리 페이지 상단에도 이런 제한이 남아 있을 수 있다.

<p class="max-w-3xl text-lg font-semibold">카테고리 소개 문구</p>

로드맵 이미지가 넓은데 소개 문구만 좁으면 같은 증상이 반복된다.

카테고리 소개는 이미지와 같은 폭을 쓰거나,
의도적으로 좁힐 이유가 있을 때만 제한하는 편이 좋다.

눈으로만 보면 헷갈린다.

브라우저에서 getBoundingClientRect()로 실제 폭을 확인하면 빠르다.

확인할 요소는 보통 이 정도다.

main
hero section
h1
intro paragraph
figure
category intro title

이 값들이 서로 다르면 어디에 제한이 남아 있는지 바로 보인다.

Astro Tailwind 레이아웃에서 오른쪽 여백이 남는 문제는
대부분 광고 컴포넌트 자체보다 남아 있는 폭 제한 때문이다.

체크 순서는 이렇다.

1. 공용 app-layout 폭
2. 글 상세 reading-layout 분리
3. h1, p, figure의 max-w 제한
4. 홈과 카테고리 페이지 동시 확인
5. 실제 DOM 폭 측정

사이드 레일을 제거했다면 레이아웃 폭도 같이 정리해야 한다.

Astro에서 오른쪽 여백이 남으면 광고 자리보다 app-layout과 자식 요소의 max-w-* 제한이 남아 있는지 먼저 확인해야 한다.