가운데 정렬했는데 안 맞아 보여서 무게중심을 계산했다

메인 화면은 가운데 글자 하나와 그 주변에 떠 있는 오브젝트 네 개로 되어 있다.

“가운데 정렬이 안 돼 있다” 는 말을 들었다.

아니었던 것

글자 위치를 의심했다. 절대 위치에 translate(-50%, -50%) 를 쓰고 있으니 어딘가 어긋났을 수 있다.

네 방향 여백을 쟀다.

좌 522.6   우 522.6
상 356     하 356

완벽한 중앙이었다. 화면 중심 대비 오차가 (0, -0.5) 였다.

가로로 7.5px 왼쪽에 있는 것처럼 보이는 건 확인했는데, 그건 세로 스크롤바 15px 때문이었다. 콘텐츠 영역 기준으로는 정확히 가운데다. 모든 사이트가 같은 방식이라 이건 원인이 아니었다.

재보기

글자가 중앙인데 안 맞아 보인다면, 안 맞는 건 글자가 아니다.

주변 오브젝트를 면적으로 가중해서 무게중심을 계산했다. 화면에 보이는 크기(getBoundingClientRect)를 그대로 썼다. 원근 때문에 앞엣것은 커 보이고 뒤엣것은 작아 보이는데, 눈에 보이는 게 그거니 그 값이 맞다고 봤다.

오브젝트      세로 위치   면적
두루마리      165        97k
빨간 버튼     246        43k
문어          478        155k
광석          596        199k

무거운 둘이 아래에 있고 가벼운 둘이 위에 있다.

무게중심은 (632.2, 443.7). 화면 중심은 (632.5, 400).

가로 -0.3
세로 +43.7

가로는 맞는데 세로가 43.7px 아래였다. 글자는 정중앙인데 주변 질량이 아래로 당기고 있었다.

고친 방법

무거운 둘만 올렸다. 구도는 유지하면서 균형만 맞추려면 가벼운 걸 움직여봐야 효과가 적다.

문어      y 60 → 54
광석      y 72 → 64

무게중심 오차 (-0.3, 0).

여기서 문제가 하나 더 생겼다. 광석을 위로 올렸더니 가운데 글자 위로 올라와서 글자의 46.6% 를 덮었다. 균형을 맞추려다 글자를 가린 것이다.

아래로 다시 내리면 균형이 깨진다. 그래서 아래가 아니라 바깥으로 밀었다. 가로 위치를 68% 에서 74% 로. 가림이 46.6% 에서 10.6% 로 떨어졌다.

이번엔 가로 무게중심이 +29.7px 틀어졌다. 위쪽 두루마리를 왼쪽으로 옮겨(74% → 63%) 되맞췄다. 최종 오차 (-0.9, 0.3).

남은 것

가림을 0으로 만들 수도 있었는데 안 했다. 앞뒤가 겹쳐야 깊이가 보인다. 10% 쯤 겹치는 게 지금은 적당해 보인다. 근거는 없고 눈이다.

면적 가중이 시각적 무게의 좋은 근사인지도 모르겠다. 어두운 광석과 밝은 두루마리가 같은 면적이면 같은 무게일 리 없다. 밝기나 대비를 넣어야 할 것 같은데 어떻게 넣을지 몰라서 안 넣었다.

그래도 하나는 건졌다. “안 맞아 보인다” 는 말을 들었을 때 제일 먼저 재야 할 건 지적받은 그 요소가 아닐 수 있다. 그 요소는 이미 맞아 있었고, 어긋난 건 주변이었다.