웹 개발의 오랜 난제 중 하나였던 'div 중앙 정렬'이 현대 CSS 기술 덕분에 놀랍도록 간편해졌습니다. 과거에는 복잡한 CSS 속성 조합이 필요했지만, 이제는 `display: grid; place-items: center;`와 같은 몇 줄의 코드로 손쉽게 요소를 화면 중앙에 배치할 수 있게 되었습니다. 하지만 이러한 발전에도 불구하고, 브라우저 사이드바나 개발자 도구(DevTools)가 활성화될 경우 웹 페이지의 중앙 정렬이 의도와 다르게 보이는 새로운 문제가 발생하고 있습니다.
이 문제는 웹 페이지가 브라우저 창 전체가 아닌 '웹뷰(webview)'라는 특정 영역 안에서만 중앙 정렬되기 때문에 발생합니다. 예를 들어, 브라우저에 즐겨찾기나 기록 사이드바가 열려 있으면, 웹뷰의 너비가 줄어들어 페이지는 사이드바를 제외한 나머지 공간에서 중앙에 위치하게 됩니다. 이는 사용자가 기대하는 '브라우저 창 전체의 중앙'과는 다른 결과입니다. 이러한 간극을 해결하기 위해, 한 개발자는 자바스크립트를 활용하여 브라우저 창의 전체 너비(`window.outerWidth`)와 웹뷰의 너비(`window.innerWidth`) 차이를 계산하고, 이 차이를 이용해 페이지를 실제 브라우저 창의 중앙으로 옮기는 방법을 시도했습니다. 하지만 이 방법은 개발자 도구가 열릴 경우, 도구의 위치(좌측 또는 우측)를 알 수 없어 정확한 보정값을 계산하기 어렵다는 한계에 부딪혔습니다.
결국, 이 개발자는 포인터 이벤트(pointer event)를 활용하여 웹뷰의 정확한 위치를 파악하는 방법을 찾아냈습니다. 포인터 이벤트는 화면 좌표(`screenX`)와 웹뷰 내 좌표(`clientX`)를 모두 제공하므로, 이를 통해 웹뷰가 브라우저 창 내에서 얼마나 떨어져 있는지 계산할 수 있게 됩니다. 이 복잡한 과정을 거쳐 개발된 'center, actually'라는 브라우저 확장 프로그램은 사용자가 원하는 요소를 브라우저 창의 실제 중앙에 정렬할 수 있도록 돕습니다. 이는 웹 개발자들이 사용자 경험을 최적화하기 위해 얼마나 세밀한 부분까지 고민하는지 보여주는 사례이며, 동시에 브라우저 벤더들이 이러한 사용자 요구를 반영하여 더 나은 웹 표준을 제공할 필요가 있음을 시사합니다.