모바일에서 자꾸 생기는 좌우 스크롤 문제

반응형 웹을 만들다 보면 예상치 못한 문제가 자주 발생합니다. 그중 하나가 모바일에서 좌우로 화면이 밀리는 문제인데, 모든 코드가 정상적으로 보여도 어느 순간 갑자기 생기는 경우가 있습니다.

저도 프로젝트를 진행하면서 Django → HTML 렌더링 → JS 리로드 구조에서 이 문제를 겪었는데, 원인은 생각보다 단순했습니다.

문제의 원인: % 단위의 max-width

처음에는 아래와 같이 코드를 작성했습니다.

.code-block-container {
    max-width: 100% !important;
}

겉보기에는 문제가 없어 보이지만, 모바일 환경에서 렌더링되는 과정에서 스크롤이 좌우로 튀어나오는 현상이 발생했습니다.

이는 % 단위가 부모 요소의 크기를 기준으로 계산되는데, JS에서 DOM이 리로드되는 과정에서 미세하게 계산이 어긋나면서 화면보다 큰 영역이 잡히는 경우가 있었던 겁니다.

해결 방법: vw 단위 사용하기

결국 아래처럼 vw 단위를 적용해 해결할 수 있었습니다.

.code-block-container {
    max-width: 93vw !important;
}

여기서 vw는 브라우저 뷰포트의 가로 폭을 기준으로 하는 단위입니다.

즉, 화면 자체를 기준으로 하기 때문에 부모 요소의 영향 없이 안정적으로 크기가 고정됩니다.

100vw로 설정하면 오히려 스크롤이 생길 수 있기 때문에, 살짝 줄여 93vw 정도로 맞추는 것이 모바일에서 안정적이었습니다.

CSS 세계는 쉽지 않다

반응형 CSS를 다루다 보면 정말 사소한 단위 차이 하나 때문에 몇 시간을 헤매기도 합니다.

%와 vw처럼 비슷해 보이지만 기준이 다르기 때문에 상황에 따라 적절히 사용하는 것이 중요합니다.

이번 경험을 통해 모바일 반응형 디자인에서는 px 대신 vw 단위를 활용하는 것이 안전하다는 걸 다시 한번 느꼈습니다.