컨텐츠 너비 표준화로 레이아웃 일관성 확보

처음에는 작은 스타일링 수정이라고 생각했지만, 이번 작업을 돌아보니 구조적으로 중요한 기술부채 정리였다. 사이트 곳곳에서 다른 너비 값을 사용하고 있던 상황을 발견했고, 이를 800px로 통일하면서 동시에 불필요한 레이아웃 계층을 제거했다.

왜 너비 통일이 필요했는가

웹사이트가 성장하다 보면 페이지별로 CSS가 살짝씩 다르게 쓰인다. 홈페이지는 너비 제한이 없고, 포스트 페이지는 95% 너비로, 어딘가는 max-width: 1024px... 이런 식으로 일관성이 없어진다. 처음엔 "대충 봐도 괜찮네" 싶지만, 사용자가 페이지를 옮길 때 컨텐츠 영역이 갑자기 넓어졌다 좁아졌다 하면서 디자인이 어색해 보인다.

800px는 대부분의 디스플레이 환경에서 읽기 좋은 너비다. 가독성 연구에 따르면 한 줄이 너무 길면 다음 줄을 읽을 때 시점을 잃기 쉽고, 너무 좁으면 답답해 보인다. 특히 기술 블로그처럼 긴 텍스트를 다루는 사이트라면 이 정도 너비가 최적이다. 팀 입장에서도 "우리는 800px로 간다"는 하나의 기준점을 세우는 것이 중요했다. 나중에 새로운 페이지를 만들 때 개발자가 고민할 필요 없이 바로 적용할 수 있기 때문이다.

중복 masthead 제거의 의미

styles.css, Post.astro, pages/index.astro 세 곳을 함께 수정한 이유는 이 세 영역이 겹쳐 있었기 때문이다. 특히 "masthead"는 보통 사이트의 상단 영역을 뜻하는데, 이걸 여러 곳에서 정의하고 있었다.

이렇게 여러 곳에 흩어진 코드를 정리하면 다음과 같은 이점이 생긴다:
- 버그 수정이 쉬워진다: 헤더 높이 조정 같은 작업을 한 곳에서만 하면 된다.
- 일관성 유지가 자동화된다: 누군가 "index 페이지의 masthead만 다르게"라는 유혹에 빠질 가능성이 줄어든다.
- 온보딩 시간 단축: 새 팀원이 "어, 헤더가 왜 이렇게 여러 개야?" 하면서 헷갈릴 일이 없다.

이런 정리 작업의 함정

사실 이 정도 규모의 스타일 통일은 간단해 보이지만, 실제로는 몇 가지 주의할 점이 있다.

첫째, 레이아웃 변경 후 실제 렌더링이 깨지지 않았는지 확인이 중요하다. 800px라는 값 자체는 단순하지만, 그걸 적용하는 과정에서 padding, margin, 미디어쿼리 같은 다른 값들과의 상호작용을 생각해야 한다. 특히 반응형 디자인이 있다면 모바일에서도 제대로 동작하는지 체크해야 한다.

둘째, "중복 제거"를 너무 자동으로 진행하면 안 된다. 혹시 Post.astro와 index.astro의 masthead가 의도적으로 다르게 디자인된 건 아닌지 확인해야 한다. 이 경우엔 차이가 불필요했기에 제거했지만, 만약 의도된 차이였다면 각각 별도의 클래스로 유지하는 게 맞다.

이번 작업으로 배운 점

이 작업을 하면서 깨달은 건, 스타일링 작업도 결국 팀의 의사결정이라는 것이다. "400px든 800px든 상관 아니지 않나"라고 생각할 수도 있지만, 하나의 표준을 정하고 지키는 과정이 팀의 일관성을 만든다.

또한 기술부채는 "버그도 아니고 기능도 아닌" 영역이라서 우선순위가 밀리기 쉬운데, 이번처럼 정기적으로 이런 정리를 진행하면 나중에 더 큰 리팩토링 작업을 할 때 마주할 위험을 줄일 수 있다. 누적된 스타일 중복은 언젠가 누군가를 혼동하게 만들고, 그게 결국 버그로 이어진다.

앞으로도 "완벽하지 않은 현재 상태"를 고치는 작업의 가치를 팀과 함께 인식하고, 작은 정리들이 모여서 구조를 만든다는 관점으로 우선순위를 잡을 생각이다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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