넓은 화면에서 글 본문 센터링
목차
Post 레이아웃에서 화면 폭이 클 때 본문이 왼쪽으로 쏠려 보이던 문제를 해결했다. 좌우 대칭 그리드 구조를 도입하고 반응형 최대 폭을 설정해 모든 뷰포트에서 균형 잡힌 레이아웃을 만들었다.
왜 이 작업이 필요했나
블로그 글 상세 페이지를 다양한 화면에서 보다 보니 패턴이 보였다. 1920px 같은 큰 모니터에서 봤을 때 텍스트 본문이 화면 왼쪽에만 몰려 있고, 오른쪽은 텅 비어 있는 거다.
이건 단순한 미관의 문제가 아니라 사용자 경험과도 연결된다. 긴 문장이 많은 기술 블로그 글을 읽을 때 시선이 계속 왼쪽에만 고정되면 가독성이 떨어진다. 특히 모니터가 넓을수록 한 줄이 길어져서 눈의 피로도 커진다. 기술 문서처럼 집중력을 요하는 콘텐츠라면 콘텐츠 너비를 제한하고 양쪽에 여백을 두는 게 표준 접근법이다.
작업 내용
좌우 대칭 그리드 구조로 변경했다. 기본 아이디어는 간단하다.
뷰포트 크기별 최대 너비 설정:
- 1480px와 1600px 두 단계의 최대 너비를 정의해 반응형으로 대응
- 작은 화면에서는 자유로운 유동성, 큰 화면에서는 일정 폭 이상 넘기지 않도록 제한
- 이렇게 하면 본문이 센터에 고정되고, 양쪽에 동등한 마진이 생긴다
본문 가운데 정렬:
- 컨테이너에 좌우 자동 마진(margin: 0 auto) 적용
- 그리드 칼럼을 대칭적으로 배치해 사이드바나 여백이 있을 경우에도 균형 잡힘
이런 방식은 사실 대부분의 모던 블로그나 문서 사이트에서 흔히 쓰는 패턴이다. Medium, Dev.to 같은 플랫폼도 비슷한 접근을 한다. 콘텐츠 너비를 65~80자 정도로 제한하면 가독성이 최적화된다는 연구 결과도 있고, 이걸 구현하는 가장 간단한 방법이 최대 너비 제한과 센터 정렬이다.
이 작업으로 배운 점
처음엔 "왜 이렇게 간단한 게 이제 고쳤지?" 싶을 수 있지만, 실제로 팀에서 이런 수정이 밀려 있는 경우가 많다. 기능 개발에 비해 레이아웃 개선이 덜 긴급해 보이거나, 여러 해상도를 직접 테스트하기 번거로워서다.
그래서 내 교훈은 이거다. 레이아웃 버그도 정기적으로 감지 체계를 만들어야 한다는 것.
- 개발하면서 최소 3가지 이상 해상도에서 수동 확인 (모바일, 태블릿, 데스크톱)
- PR 리뷰할 때 "이 변경이 모든 화면에서 어떻게 보일까" 체크 포함
- 기술 부채로 남기지 말고 정기 스프린트에 "레이아웃 개선" 카드를 몇 개 깔아두기
또한 이런 작업을 할 때 파일 한 개, 변경 몇 줄이어도 커밋 메시지에 정확히 기록하는 게 중요하다. 향후에 "왜 1480/1600을 선택했지?" 물어봤을 때 git log를 보고 의도를 파악할 수 있어야 한다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.