글 상세 페이지 레이아웃 고정, 큰 화면에서 가독성 확보

블로그 글 상세 페이지의 콘텐츠가 큰 화면(1920px 이상)에서 제대로 중앙 정렬되지 않는 문제를 고쳤다. CSS와 Astro 레이아웃 템플릿에서 간단했지만 눈에 띄는 작업이었다.

왜 이 문제가 발생했나

블로그처럼 긴 텍스트를 제공하는 서비스에서 가독성은 UX의 핵심이다. 특히 '행의 길이(line length)'가 중요한데, 일반적으로 60~80자 범위가 가장 읽기 편하다고 알려져 있다. 반응형 디자인을 할 때는 작은 화면부터 구축하고 점진적으로 확장하는 'mobile-first' 방식을 따르는 경우가 많은데, 그 과정에서 큰 화면에 대한 최대 너비 제약을 빼먹기 쉽다.

우리 블로그도 마찬가지였다. 글 상세 페이지가 중간 크기 화면까진 괜찮았지만, 1920px 이상의 초고해상도 모니터에서 콘텐츠가 화면 끝까지 늘어나버리는 현상이 생겼다. 결과적으로 한 줄이 너무 길어져서 읽기 불편했고, 시각적으로도 정렬이 어색해 보였다.

수정 내용

변경은 두 가지로 나뉜다.

CSS에서는 대개 다음과 같은 패턴을 쓴다:

.post-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

또는 flexbox를 부모에 적용:

.post-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.post-content {
  width: 100%;
  max-width: 900px;
  padding: 0 20px;
}

Astro의 경우 컴포넌트 레벨에서 동적으로 클래스를 할당하기보다는, 레이아웃 템플릿 자체에 기본 스타일 구조를 깔끔하게 정의하는 게 관리하기 좋다.

배운 점과 앞으로

이 작업은 '작은 픽스'로 보일 수 있지만, 사실 몇 가지 중요한 포인트를 담고 있다.

첫째, 반응형 디자인은 '끝점(breakpoint)이 아니라 유연성'을 기준으로 생각해야 한다. 과거처럼 lg, xl 같은 고정 너비로만 생각하면 새로운 화면 크기가 나타났을 때 대응하기 어렵다. 대신 "콘텐츠가 읽기 편한 최대 너비는 몇인가?"라는 질문으로 시작하는 게 맞다.

둘째, 가독성 개선은 '기능 추가'만큼이나 중요한 일이다. 사용자 관점에서 보면 버그 수정과 구분 없이 경험이 좋아지는 것이고, 팀 입장에서도 '페이지 느려짐 해결', '새 기능 추가'와 같은 수준의 우선순위를 줄 가치가 있다.

셋째, 레이아웃 변경은 여러 뷰에 미치는 영향을 체크해야 한다. 이번엔 포스트 상세 페이지였지만, 같은 스타일이 다른 페이지(목록, 아카이브, 태그 페이지 등)에도 영향을 줄 수 있으니, 변경 후 전체 사이트를 한 번 훑어보는 습관이 중요하다.

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

• 27인치 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

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