6월에 레이아웃에 남긴 메모 8개 중 4개가 "안 맞는다"는 얘기였습니다

7월 말에 6월에 적어 둔 레이아웃 수정 메모를 다시 열어 봤습니다. 메모는 8개였고, 그중 4개가 같은 불만이었습니다. 두 요소가 서로 안 맞는다는 것입니다. 왼쪽 로고와 텍스트, 오른쪽 영역과 왼쪽 영역, 가운데에서 퍼지는 선과 점, 이미지와 텍스트 줄이 한 메모씩 차지하고 있었습니다.

그중 두 개를 고친 과정이 남아 있어서 적어 둡니다.

오른쪽 영역이 왼쪽보다 낮아 보인다는 메모는 원인이 단순했습니다. 바깥 행이 두 열에 위 여백을 똑같이 주고 있었는데, 오른쪽 열이 같은 여백을 한 번 더 주고 있었습니다. 하나를 지우니 두 열의 윗선이 같은 위치(25.25px)에서 시작했습니다.

붉은 선은 왼쪽 라벨의 윗선입니다. 수정 전에는 오른쪽 제목이 49.00px에서 시작해 이 선보다 약 24px 아래였습니다.

이미지와 텍스트 줄을 맞추라는 메모는 쉽게 안 풀렸습니다. 적어 둔 문장이 "안 맞춰도 되나? 맞추는 게 좋을 것 같은데"였으니 저도 확신이 없었던 모양입니다. 브라우저에서 재 보니 이미지 상자와 텍스트 상자의 윗선은 y=375.86으로 정확히 같았습니다. 그런데 눈으로 보면 그림이 낮았습니다. 텍스트는 줄 간격 때문에 첫 글자의 윗선이 상자보다 아래에서 시작하고, 그림에는 그런 간격이 없기 때문입니다. 그래서 일단 그림을 14px 올렸습니다(margin-top: -14px). 다만 14px은 그때 커밋에 적어 둔 눈대중 값이고, 이번에 다시 재 보니 글자 윗선은 상자보다 6에서 8px 정도 아래였습니다. 그렇다면 14px은 과하게 올린 값일 수 있습니다.

이 수정이 맞는지는 아직 모르겠습니다. 상자 기준으로 맞추면 숫자는 깔끔한데 눈에는 틀려 보이고, 글자 기준으로 맞추면 눈에는 맞는데 값에 마이너스 보정이 붙습니다. 이미지와 텍스트 상자를 나란히 놓을 때 윗선을 상자에 맞추시는지 첫 글자에 맞추시는지 궁금합니다.