푸터 하나 때문에 레이아웃을 다시 봤습니다 — Forge History

새 디자인 시안을 Astro로 옮긴 뒤 화면을 확인하다가 이상한 가로 스크롤을 발견했습니다. 콘텐츠는 화면 안에 다 들어와 있는데 페이지를 좌우로 조금 움직일 수 있었습니다. 원인은 본문이 아니라 맨 아래 전폭 푸터였습니다.

시안에서는 푸터를 화면 끝까지 늘리기 위해 100vw에 가까운 계산을 사용했습니다. 문제는 브라우저의 vw가 세로 스크롤바 폭까지 포함한다는 점이었습니다. 스크롤바가 생기는 순간 푸터가 실제 콘텐츠 폭보다 15~17픽셀 넓어졌습니다.

처음에는 overflow-x: hidden으로 가릴 수도 있었습니다. 하지만 그렇게 하면 원인이 남습니다. 대신 푸터를 본문 .app 밖으로 빼고, 푸터 안쪽만 다시 최대 폭에 맞춰 정렬했습니다. 가로 폭을 억지로 계산할 필요 자체를 없앴습니다.

작은 결함이었지만 이 일을 통해 구현 원칙이 하나 더 생겼습니다. 보이는 증상을 가리는 것보다 잘못된 계산을 없애는 쪽을 택한다. 이후 레이아웃을 고칠 때도 시안 수치를 그대로 믿기보다 실제 브라우저에서 여러 폭으로 측정하게 됐습니다.

디자인은 눈으로만 확인하면 쉽게 속습니다. 1280, 931, 930, 375픽셀에서 실제 scrollWidth와 clientWidth를 비교하니 문제가 사라졌는지 명확하게 볼 수 있었습니다.