넓은 모니터에서 글이 구석에 몰려 있던 레이아웃 버그 수정

Astro 블로그의 포스트 상세 페이지 레이아웃을 다시 손질했다. 가운데 정렬과 1920px 해상도 대응이 제대로 먹지 않아서인데, 이 작업을 하면서 느낀 게 꽤 있어서 남겨본다.

왜 이런 버그가 생겼나

결국 단순한 원인이었다. 포스트 레이아웃이 고정폭으로 설정되어 있었는데, 폭이 기존 모니터 해상도(1366px, 1440px 정도)를 기준으로만 맞춰져 있었던 거다. 요즘 2K, 4K 모니터가 일반화되면서, 특히 1920px 넓이의 데스크톱 화면에서 본문이 왼쪽에 밀려나 있고 오른쪽에 거대한 공백이 생기고 있었다.

UI/UX 관점에선 사소해 보일 수 있지만, 독자 입장에선 화면의 절반을 쓰지 못하면서 문장을 읽기가 불편하다. 특히 기술 블로그는 코드 블록과 긴 텍스트가 많으니, 적절한 가독성 너비를 확보하고 그걸 가운데 정렬하는 게 중요하다.

레이아웃 확장, 어떻게 했나

src/layouts/Post.astro에서 가운데 정렬과 폭 설정을 다시 정의했다. Astro 레이아웃의 전형적인 패턴은 이렇다:

<div class="post-container">
  <article>
    <h1>{title}</h1>
    <slot />
  </article>
</div>

<style>
  .post-container {
    max-width: 900px;        /* 가독성 기준 본문 너비 */
    margin: 0 auto;          /* 가운데 정렬 */
    padding: 0 2rem;         /* 양옆 여백 */
  }
</style>

핵심은 max-width와 margin: 0 auto 조합이다. 본문을 800~900px 정도의 "편한 읽기 너비"로 제한하고, 양쪽 마진을 자동으로 할당해서 가운데 정렬하는 거다. 이렇게 하면 화면 크기가 아무리 커도 본문은 적절한 너비를 유지하고, 모든 해상도에서 균형 잡혀 보인다.

1920px 해상도에서도 이제 양옆 공백이 대칭으로 생긴다. 넓은 모니터 사용자는 화면을 활용하면서도, 읽기 편한 너비의 글을 본다.

패딩과 반응형 설계의 균형

여기서 중요한 건 padding이다. 태블릿이나 모바일에선 화면 자체가 좁으니, padding: 0 2rem도 상대적으로 커진다. 그래서 보통은:

/* 모바일 우선 */
.post-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 태블릿 이상 */
@media (min-width: 768px) {
  .post-container {
    padding: 0 2rem;
  }
}

이런 식으로 브레이크포인트별로 조정하곤 한다. 파일 통계가 안 나왔으니 구체적으로 이 작업에서 뭘 변경했는진 모르지만, 대체로 이 방향의 수정일 거다.

배운 점: 사소한 버그도 팀 우선순위 관점에서 중요하다

처음엔 "레이아웃 버그?" 하고 가볍게 넘어갈 뻔했다. 코드 로직이나 성능 이슈처럼 급하게 느껴지지 않기도 하고, 특정 사용자 리포트도 없었으니까. 하지만 생각해 보니 누군가 2K 모니터로 블로그를 방문했을 때 본문이 한쪽에 치우쳐 있으면 첫 인상이 안 좋다.

팀이 커질수록 이런 "눈에 띄지 않지만 사용자 경험을 깎아먹는" 문제들을 놓치기 쉽다. 특히 레이아웃은 모든 페이지의 기초이니, 한두 줄의 CSS 수정이 전체 서비스 인상을 좌우할 수 있다.

결국 이런 작은 수정들이 쌓여서 서비스의 마무리가 된다는 생각이 든다. 다음엔 더 일찍 발견하고 우선순위를 매겨야겠다.

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

• 모니터 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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