버튼을 12px 낮췄더니 「출동」이 「줄동」이 됐다 — overflow hidden 이 한글 윗획을 자르는 자리

좌표는 이 결함을 볼 수 없다

우리 UI 검사는 좌표를 잘 본다. 어떤 요소가 어디에 있고, 몇 픽셀 떨어져 있고, 금지 구역을 침범하지 않는지. 555쌍의 인접 간격을 전수로 잰다.

그런데 이 결함은 좌표가 전부 맞은 상태에서 났다. 버튼도 제자리, 라벨도 제자리, 라벨 상자의 크기도 계산대로다. 달라진 것은 그 상자 안에서 글자가 그려지는 결과뿐이다.

라벨 상자에 overflow: hidden 이 걸려 있었다. 버튼 높이가 51.8px 로 내려가자 그 상자가 글자의 실제 잉크 높이보다 얇아졌고, 넘는 부분이 잘렸다. 잘린 곳이 하필 윗획이었다.

한글에서 윗획이 잘리면 글자가 사라지지 않는다. 다른 글자가 된다. 「출」에서 위쪽 획이 없어지면 「줄」로 읽히고, 「령」은 윗부분이 잘리면 「렷」이 된다. 빈 자리가 남지 않기 때문에 「잘렸다」로 보이지 않고 「원래 그렇게 적혀 있다」로 보인다. 로마자였으면 훨씬 빨리 눈에 띄었을 것이다.

왜 이 판에서야 나왔나

이 규칙은 처음부터 있었다. 버튼이 충분히 높던 동안에는 아무 일도 안 했다. 높이를 한 단 내리는 수정이 다른 곳에 있던 규칙을 깨웠다.

이런 종류는 「이번 변경이 무엇을 건드렸나」로 추적이 안 된다. 이번 변경은 높이 한 줄이고, 그 줄은 맞다. 규칙도 그 자리에서 몇 주째 맞다. 둘이 만나는 조합만 틀리다.

발견 경로는 하나뿐이었다

화면을 실제로 그려서 보니 잡혔다. 이 판에서만 스크린샷을 25장 남겼는데, 결함 셋이 전부 그 25장에서 나왔다. 셋 다 테스트는 초록이었다.

• 하단 보조 줄의 글자 양끝이 잘렸다. 새 영역이 생기면서 그 줄의 폭이 반이 됐고, 2px 을 넘겨 잘렸다. → 글자 치수를 한 단 내렸다.
• 선택 상세 영역이 한 줄 늘어 넘쳤다. 표시 항목이 하나 많아졌을 뿐인데 상자를 넘었다. → 권장 인원과 물림 수치를 한 줄로 합쳤다.
• 그리고 이 글자 잘림.

고친 방향 — 자르기를 끄는 게 아니라 축을 나눴다

가장 빠른 수정은 overflow 를 그냥 푸는 것이다. 그런데 그러면 긴 라벨이 버튼 밖으로 흘러나온다. 이 화면은 항목 이름이 데이터에서 와서 길이가 고정이 아니다. 자르기 자체는 필요하다.

그래서 방향을 바꿨다. 세로 자르기와 가로 자르기를 분리했다.

• 세로 자르기는 뗐다. 글자의 위아래는 어떤 경우에도 잘리면 안 된다 — 잘리면 다른 글자가 되기 때문이고, 그건 「보기 나쁨」이 아니라 오독이다.
• 가로 자르기는 하단 보조 줄에만 다시 걸었다. 그 줄은 넘칠 수 있지만, 뒤가 잘려도 뜻이 바뀌지 않는다.

자르기를 허용할지는 요소별이 아니라 방향별로 정했다. 「이 라벨은 잘라도 되나」는 사람마다 답이 다르고 다음 판에 뒤집힌다. 「세로는 절대 안 자른다」는 뒤집힐 이유가 없다.

지금 이 실수는 어떻게 잡히나

• 인접 간격을 전수로 잰다(555쌍, 전역 요소 포함). 이번처럼 한 요소를 낮추면 다른 짝의 간격이 같이 움직이는데, 표본만 재면 그 짝이 빠져 있을 수 있다.
• 되돌릴 수 없는 버튼끼리는 최소 간격을 상수로 못 박았다.
• 그리고 조작 전/후 스크린샷 쌍을 남긴다. 25장 중 11~22 가 그 쌍이다. 좌표 테스트는 「무엇이 어디 있나」를 보증하고, 스크린샷은 「그래서 무엇이 보이나」를 보증한다. 이번 건은 앞의 것이 전부 맞은 채로 뒤의 것만 틀렸다.

글자 렌더링을 자동으로 검사하는 장치는 아직 없다. 픽셀을 세서 잉크 높이를 재는 방법을 생각해 뒀지만, 폰트가 바뀌면 기준선도 같이 바뀐다. 지금 넣으면 값이 흔들리는 검사가 하나 늘 뿐이다. 사람이 스크린샷을 보는 절차가 지금은 더 싸다.