글 상세 페이지 레이아웃 정렬해서 읽기 편하게

글 상세 페이지 레이아웃을 손봤다. 콘텐츠를 가운데 정렬하고 최대 폭을 1920px까지 확장했다. 간단해 보이는 변경이지만, 사용자가 긴 글을 읽을 때의 경험이 크게 달라진다.

왜 이 작업이 필요했는가

긴 텍스트 콘텐츠를 다루는 페이지는 화면 폭 관리가 중요하다. 글이 화면 끝까지 늘어지면 한 줄이 너무 길어져서 눈이 피로하고, 반대로 너무 좁으면 공간을 제대로 활용하지 못하는 느낌이 든다. 우리 뉴스 상세 페이지도 비슷한 문제가 있었다.

기존에는 화면이 커져도 콘텐츠 폭이 제한적이었고, 정렬도 한쪽으로 쏠려 있던 것 같다. 특히 1600px 이상의 넓은 모니터를 쓰는 사용자들이 "왜 이렇게 답답할까" 느껴본 적 있을 거다. 일반적으로 콘텐츠 기반 페이지(블로그, 뉴스, 문서)는 다음 원칙을 따른다:

• 최대 폭은 가독성과 공간 활용의 균형을 고려: 보통 800px~1200px 사이에서 결정되곤 하는데, 우리는 최신 모니터 해상도를 고려해 1920까지 지원
• 가운데 정렬: 사용자 시선이 화면 중앙에 집중되도록 하고, 양옆 여백이 대칭이 되게
• 반응형 대응: 작은 화면에서도 읽기 좋아야 함

어떻게 개선했는가

두 파일을 건드렸다:

Base 레이아웃에서 최대 폭을 제어하는 것이 핵심이다. 보통은 이렇게 한다:

.container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

이렇게 하면 화면이 아무리 커도 1920px를 넘지 않고, 가운데에 고정된다. 양옆 padding은 모바일에서도 양쪽 여백을 확보해준다. Astro에서는 이런 스타일을 <style> 블록에 scoped로 두거나 global CSS에 정의할 수 있는데, 두 방식의 성능 차이는 무시할 수 있지만 유지보수 입장에서는 전역 스타일이 깔끔하다.

뉴스 상세 페이지는 이 베이스 레이아웃을 상속받으면서 추가로 텍스트 정렬을 명시적으로 적용했다:

<article class="news-detail">
  <div class="content">
    <!-- 글 본문 -->
  </div>
</article>

news-detail 컨테이너 안 콘텐츠를 text-align: center 또는 flex/grid로 가운데 정렬한다.

반응형 고려사항

여기서 중요한 건 작은 화면 대응이다. 1920 기준으로 설정했을 때, 모바일/태블릿에서는 어떻게 될까?

• 1200px 이상: 거의 최대 폭으로 펴짐
• 768px ~ 1199px: 패딩을 늘려서 적당한 좌우 여백 확보
• 768px 미만: 패딩을 더 크게 해서 극단적으로 좁아지지 않도록 보호

CSS 미디어쿼리로 이렇게 단계적으로 조정하는 게 일반적이다:

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }
}

이런 변경이 팀에 미치는 영향

작은 수정처럼 보일 수 있지만, 사용자가 느끼는 '편함'은 레이아웃의 작은 개선에서 온다. 긴 글을 읽을 때:

1. 한 줄의 문자 수가 적당하면 눈이 덜 피로하다 (이상적으로는 한 줄 50~80자)
2. 가운데 정렬이 되면 시선 이동이 자연스럽고 집중도가 높아진다
3. 최대 폭이 명확하면 화면이 커도 사이트의 일관성이 유지된다

이건 단순 CSS 수정이지만, 팀에서 코드 리뷰할 때는 "이 변경이 의도한 화면 효과를 모든 기기에서 제대로 나타내는가"를 확인해야 한다. 특히:

• 모바일 브라우저에서 너무 좁아지진 않나
• 초고해상도(4K) 모니터에서도 가독성이 유지되나
• 다크모드/라이트모드에서 색감이 어색하진 않나
• 글 사이 제목, 이미지, 인용문 같은 다양한 요소도 정렬이 제대로 되나

이런 디테일이 누적되면 전체 서비스의 품질이 올라간다. 또한 이 패턴은 NewsDetailPage뿐 아니라 다른 콘텐츠 페이지에도 바로 적용할 수 있으니, 일반화하기 좋은 구조라고 본다.

마무리

글 하나를 제대로 읽기 좋게 만드는 것도 중요한 일이다. 사용자는 복잡한 기술을 모르지만, "어라, 이번엔 훨씬 읽기 편하네"라는 느낌은 분명히 받는다. 이런 작은 개선들이 모여서 서비스 전체의 만족도가 높아진다.

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

• 모니터 쿠팡에서 보기 →
• 노트북 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

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