Tailwind CSS로 반응형 블로그 레이아웃 잡기 (Header, Footer, Sidebar)

블로그를 직접 만들면서 가장 공을 들인 부분 중 하나는 바로 레이아웃 이다. 특히 Tailwind CSS 를 사용하여 반응형으로 화면을 구성할 때, 헤더와 푸터의 끝선 정렬, 그리고 데스크톱 화면에서 사이드바가 본문을 밀어내는 현상 등을 해결하기 위해 꽤 많은 고민을 했다.

이번 글에서는 블로그 레이아웃을 짜면서 알게 된 핵심적인 CSS 속성들과 트러블슈팅 과정을 정리해 둔다.

1. 헤더와 푸터의 끝선 맞추기

헤더에 있는 다크모드 토글 버튼과 푸터에 있는 유튜브 아이콘의 수직 정렬이 미세하게 어긋나는 문제가 있었다.

원인은 두 가지였다.

1. 헤더와 푸터의 최대 너비(max-w) 불일치.
2. 버튼 요소 자체가 가지는 내부 여백.

이를 해결하기 위해 전체를 감싸는 컨테이너의 너비를 max-w-4xl 로 통일했다. 그리고 다크모드 버튼에는 클릭 영역을 넓히기 위해 p-2 를 주고, 시각적인 끝선을 맞추기 위해 음수 마진인 -mr-2 를 적용했다.

이런 미세한 조정 덕분에 사용자는 버튼을 누르기 편하면서도, 시각적으로는 완벽하게 정렬된 UI 를 경험할 수 있다.

2. 외부 링크 안전하게 연결하기

푸터의 유튜브 링크처럼 외부로 나가는 <a> 태그에는 반드시 rel="noopener noreferrer" 를 추가했다.

• noopener : 새 창이 원래 창을 참조하지 못하게 하여 보안 취약점을 막는다.
• noreferrer : 유입 경로를 숨겨 보안과 프라이버시를 강화한다.

이는 웹 표준 을 지키는 가장 기본적이고 중요한 설정이다.

3. 사이드바와 본문(Main)의 반응형 레이아웃

가장 많은 고민을 했던 부분이다. 화면이 커질 때 사이드바를 노출하면 본문이 오른쪽으로 쏠리는 현상이 있었다. 처음에는 lg 사이즈에서 사이드바를 노출하려 했으나 공간이 부족해 xl 로 미루기도 했었다.

하지만 최종적으로는 다음과 같은 구조로 자연스러운 레이아웃 을 완성했다.

<div class="flex flex-1 justify-center mt-12 px-4 sm:px-6">
  {
    !hideSidebar && (
      <div class="hidden lg:block flex-1 pr-12">
        <Sidebar />
      </div>
    )
  }

  <main class="w-full max-w-[720px] shrink-0 pb-16">
    <slot />
  </main>

  {
    !hideSidebar && (
      <div class="hidden lg:block flex-1 pl-12" />
    )
  }
</div>

여기서 핵심은 세 가지다.

1. 본문의 적절한 최대 너비 제한: max-w-3xl 대신 max-w-[720px] 로 미세 조정하여 lg 화면에서도 사이드바가 숨 쉴 공간을 확보했다.
2. shrink-0: 본문 영역이 사이드바에 의해 찌그러지거나 강제로 줄어들지 않도록 절대 방어막을 쳤다.
3. 양옆의 flex-1: 왼쪽 사이드바와 오른쪽 빈 공간에 모두 flex-1 을 주어, 아주 넓은 화면에서도 본문이 정확히 화면 중앙에 위치하도록 평형추 역할을 하게 만들었다.

4. 사이드바 내부 디테일 (sticky, h-fit, max-h)

전체 레이아웃에서 사이드바의 자리를 잡아준 뒤, 사이드바 컴포넌트 내부에는 다음과 같은 클래스를 적용했다.

<aside class="sticky top-[121px] ml-auto flex flex-col max-w-40 h-fit max-h-[calc(100vh-8rem)]">

• max-w-40: 부모의 flex-1 로 인해 사이드바가 끝없이 넓어지는 것을 막는 최대 너비 제한이다.
• h-fit: 사이드바의 키가 내부 메뉴 콘텐츠만큼만 자라도록 하여, 불필요하게 영역이 길어지는 것을 막는다.
• sticky top-[121px]: 스크롤을 내릴 때 헤더 아래 적당한 위치에서 화면에 따라다니게 만든다.
• max-h-[calc(100vh-8rem)]: 카테고리가 많아져도 브라우저 화면 밖으로 넘치지 않도록 최대 높이를 계산해 주었다.