div 가운데 정렬을 드디어 정복했더니, 이번엔 브라우저가 사이드바를 달았습니다

20년 걸려 정복한 가운데 정렬

프론트엔드 개발자들 사이에 오래된 농담이 하나 있어요. 'div 가운데 정렬을 검색 안 하고 짤 수 있으면 시니어'라는 건데요. 농담이 될 만큼 이 문제는 오랫동안 웹 개발의 통과의례였어요. 그런데 한 개발자가 재미있는 글을 올렸어요. 우리가 드디어 가운데 정렬을 정복했더니, 이번엔 브라우저들이 사이드바를 달기 시작하면서 '가운데'라는 개념 자체가 흔들리고 있다는 이야기예요.

가운데 정렬 수난사

역사를 잠깐 돌아볼게요. 2000년대엔 table 태그로 레이아웃을 짜거나 margin: 0 auto로 가로만 겨우 맞췄어요. 세로 가운데 정렬은 거의 흑마법 취급이었죠. position: absolute로 50% 지점에 놓고 transform: translate(-50%, -50%)로 되돌리는 트릭이 한동안 정석이었고요. 그러다 flexbox가 오면서 justify-content와 align-items 두 줄로 끝나게 됐고, grid에서는 place-items: center 한 줄이면 됐어요. 심지어 최근에는 flex나 grid 선언 없이도 일반 블록 요소에 align-content: center만 쓰면 세로 가운데 정렬이 되도록 스펙이 발전했거든요. 20년 만에 정말로 '한 줄이면 되는' 시대가 온 거예요.

그런데 '가운데'가 어디죠?

문제는 여기서부터예요. 요즘 브라우저들을 보세요. Edge는 Copilot 사이드바를 달았고, Arc는 아예 세로 탭 사이드바가 기본이고, Chrome도 사이드 패널 기능을 계속 키우고 있어요. AI 어시스턴트 패널, 북마크 패널, 분할 화면까지 더하면, 사용자가 보는 웹페이지 영역은 모니터 한가운데가 아니라 한쪽으로 쏠린 직사각형인 경우가 많아졌어요.

이게 왜 문제가 되냐면요, CSS의 가운데 정렬은 어디까지나 뷰포트(브라우저가 페이지에 내어준 영역) 기준이거든요. 뷰포트 안에서는 완벽하게 가운데인데, 모니터 전체로 보면 왼쪽으로 치우쳐 있는 상황이 생기는 거죠. 개발자가 '풀HD 모니터면 이 정도 여백이 나오겠지' 하고 잡아둔 가정도 깨져요. 사이드바 하나 열리는 순간 1920px 모니터의 뷰포트가 1400px대로 줄면서, 데스크톱용으로 짠 레이아웃이 갑자기 태블릿 구간의 미디어 쿼리에 걸려버리는 일도 흔하고요.

그래서 어떻게 대응해야 할까요

이 상황이 주는 교훈은 명확해요. '기기 종류 = 화면 크기'라는 가정을 완전히 버려야 한다는 거예요. 데스크톱 사용자도 언제든 좁은 뷰포트로 볼 수 있거든요. 실무적으로는 몇 가지 방향이 있어요.

첫째, 미디어 쿼리보다 컨테이너 쿼리(container query)를 적극적으로 쓰는 거예요. 이게 뭐냐면, '화면이 얼마나 넓은가'가 아니라 '이 컴포넌트가 들어간 상자가 얼마나 넓은가'를 기준으로 스타일을 바꾸는 기능이에요. 사이드바가 열리든 분할 화면이든, 컴포넌트는 자기 부모의 폭만 보고 알아서 적응하니까 훨씬 견고해져요. 둘째, 100vw 같은 뷰포트 단위를 쓸 때 스크롤바와 브라우저 UI 변화를 고려해서 dvw 같은 동적 단위를 검토하는 거고요. 셋째, 애초에 레이아웃을 고정 폭 분기 몇 개로 설계하지 말고, clamp()나 유동 그리드로 어떤 폭에서든 연속적으로 흐르게 만드는 거예요.

한국 개발자에게 주는 시사점

한국 웹은 유독 데스크톱 고정폭 레이아웃 전통이 강한 편이에요. 1200px 컨테이너를 가운데 두는 관습이 여전히 많죠. 그런데 브라우저 UI가 이렇게 역동적으로 변하는 시대에는, 반응형을 '모바일 대응'이 아니라 '어떤 폭에서든 자연스러운 레이아웃'으로 다시 정의할 필요가 있어요. 특히 사내 어드민이나 대시보드처럼 '어차피 데스크톱에서만 쓰니까'라고 넘겼던 화면들이, 사이드바와 분할 화면 때문에 좁은 뷰포트에서 열리는 일이 실제로 늘고 있거든요.

한줄 정리: 가운데 정렬 기술은 완성됐지만, 브라우저 UI가 변하면서 '가운데'의 기준 자체가 유동적이 됐어요. 화면 폭이 아니라 컨테이너 폭 기준으로 사고를 전환할 때예요.

여러분은 사이드바나 분할 화면 때문에 레이아웃이 깨진 경험 있으세요? 컨테이너 쿼리, 실무에 도입해보셨나요?