디브 중앙 정렬은 쉬워졌지만, 브라우저 사이드바가 다시 어긋나게 했다

웹 개발에서 요소를 화면 한가운데 놓는 일은 오랫동안 번거로운 의식과도 같았다. 과거에는 여러 줄의 우회적인 CSS를 동원해야 겨우 가운데 정렬이 됐지만, 지금은 몇 줄이면 허무할 만큼 간단히 끝난다. 문제는 이 '쉬워진 정렬'이 사실은 브라우저의 콘텐츠 영역, 즉 웹뷰(webview)를 기준으로 한 정렬이라는 점이다. 사용자가 실제로 바라보는 창 전체와 웹뷰가 일치하지 않는 순간, 완벽하게 중앙에 있어야 할 요소가 미묘하게 한쪽으로 치우쳐 보이기 시작한다.

이 글의 저자가 겪은 상황이 정확히 그랬다. 그는 브라우저 창 하나를 눈앞에 타일 형태로 고정해 두고, 사이드바를 열어 둔 채 작업한다. 이 상태에서 사이드바가 웹뷰 폭을 잠식하면, 좁은 폭으로 의도적으로 중앙 정렬된 레이아웃은 창의 진짜 한가운데가 아니라 사이드바 옆에 남은 공간의 한가운데에 놓인다. 요소 자체는 여전히 완벽하게 중앙 정렬돼 있지만, 기준이 되는 사각형이 잘못된 것이다.

절반만큼 밀어 보정하기

첫 접근은 단순했다. 자바스크립트는 웹뷰의 폭과 브라우저 창 전체의 폭을 모두 알 수 있으므로, 사이드바가 왼쪽에 있다면 두 값의 차이의 절반만큼 컨테이너를 되밀어 주면 된다. 중요한 점은 이 보정이 레이아웃 자체를 건드리지 않는다는 것이다. 사이드바는 여전히 웹뷰를 좁히고 페이지는 평소대로 리플로우되며, 이미 중앙 정렬돼 있던 컨테이너의 위치만 옮긴다. 그리고 만약 컨테이너를 온전히 보여줄 공간이 부족하다면, 콘텐츠를 잘라 숨기는 대신 보정을 멈추도록 설계했다. 화면 밖으로 내용을 밀어내는 것보다 살짝 어긋난 정렬이 낫다는 판단이다.

이 방식은 개발자 도구(DevTools)를 열기 전까지는 잘 작동했다. 저자의 DevTools는 오른쪽에 도킹돼 있었는데, 그러자 창과 웹뷰의 폭 차이에 좌우 양쪽의 브라우저 UI가 함께 포함돼 버렸다. 전체 차이값은 알 수 있어도, 그 값이 왼쪽과 오른쪽에 각각 얼마씩 분배됐는지는 알 방법이 없었다. 절반씩 나눈다는 전제가 무너진 것이다.

포인터가 알려 준 좌표

빠진 좌표를 채워 준 것은 뜻밖에도 포인터였다. 신뢰할 수 있는 포인터 이벤트는 자신이 화면상 어디에 있는지, 그리고 웹뷰 내부에서 어디에 있는지를 동시에 안다. 이 두 좌표만 있으면 창 안에서 웹뷰가 정확히 어디에 위치하는지 역산할 수 있다. 좌우 UI가 비대칭이든 아니든 상관없이 실제 오프셋이 드러나는 셈이다.

브라우저별 대응은 갈린다. 파이어폭스는 이 뷰포트 위치를 직접 노출해 주므로 곧바로 값을 얻을 수 있다. 반면 크로미움 계열은 이를 제공하지 않기 때문에, 확장 프로그램은 우선 사용자가 선택한 사이드바 위치를 기준으로 시작한 뒤 포인터가 페이지 안으로 들어오는 순간 값을 바로잡는 방식을 택한다. 첫 프레임은 추정으로 채우고, 상호작용이 시작되면 정확한 좌표로 교정하는 구조다.

정렬 선호는 사이트가 아니라 사용자의 몫

저자는 자신이 통제하지 못하는 남의 페이지에도 같은 보정을 적용해 보고 싶어 'center, actually'라는 확장 프로그램을 만들었다. 이 확장은 페이지에서 중앙 정렬된 요소를 스스로 찾아내고, 만약 잘못 짚으면 사용자가 직접 대상을 지정할 수 있게 한다. 여기서 눈여겨볼 대목은 설계 철학이다. 이런 정렬 취향은 특정 사이트가 모든 방문자에게 일괄로 강제할 성질이 아니라, 원하는 사람만 켜는 옵트인(opt-in) 방식으로 사용자 쪽에 두는 것이 맞다는 것이다.

실무적으로 이 사례는 두 가지를 시사한다. 하나는 CSS 중앙 정렬이 쉬워졌다고 해서 '시각적 중앙'까지 보장되는 것은 아니라는 점이다. 사이드바, 도킹된 개발자 도구, 각종 브라우저 UI가 웹뷰와 창 사이에 비대칭적인 여백을 만들면 명세상 완벽한 정렬도 눈에는 어긋나 보인다. 다른 하나는 브라우저가 창 내부의 뷰포트 위치를 표준적으로 노출하지 않는 탓에, 이런 미세 조정이 포인터 좌표 같은 우회적 신호에 의존해야 한다는 한계다. 대다수 사용자에게는 감지되지 않을 만큼 사소한 어긋남이지만, 화면 배치에 민감한 사람에게는 충분히 신경 쓰이는 틈이며, 그 틈을 메우는 책임을 사이트가 아닌 사용자에게 돌린 접근은 곱씹어 볼 만하다.