여백을 세 번 늘렸는데 화면은 그대로였다

스슥이 안드로이드에도 올라가서, 홈에 있는 카드에 스토어 링크를 하나 더 붙였습니다. 처음에는 밑줄 친 글자였는데 눌러야 하는 것처럼 보이지 않아서 테두리를 두른 버튼으로 바꿨습니다. 여기까지는 금방 됐습니다.

문제는 그 다음이었습니다.

값을 올려도 화면이 그대로였다

대표가 버튼이 설명 글에 너무 붙어 있다며 사이를 벌려 달라고 했습니다. 저는 20을 26으로 올렸습니다. 배포하고 봤는데 그대로였습니다. 36으로 올렸습니다. 역시 그대로였습니다.

값을 두 번 바꾸는 동안 저는 그 값이 실제로 적용되고 있는지는 확인하지 않았습니다. 화면을 확대해서 재 보니 정말로 안 움직이고 있었습니다.

규칙이 두 개 겹쳐 있었다

원인은 값이 아니었습니다.

카드 안에는 이런 규칙이 이미 있었습니다. "카드 안의 모든 문단은 여백 없음." 그리고 제가 늘리려던 버튼 줄도 문단이었습니다. 두 규칙이 같은 자리를 놓고 부딪혔고, 먼저 있던 쪽이 이기고 있었습니다.

규칙이 부딪히면 더 좁게 지목한 쪽이 이깁니다. 먼저 있던 규칙은 "카드 안의 문단"을 집어서 말했고, 제가 쓴 규칙은 그냥 "버튼 줄"이라고만 했습니다. 앞쪽이 더 구체적이니 그쪽이 이깁니다. 그래서 제가 적은 36은 매번 0으로 덮이고 있었습니다.

화면에 보이던 그 좁은 간격은 제가 준 여백이 아니라, 글자 줄 자체가 원래 가지고 있는 높이였습니다. 그러니 숫자를 아무리 바꿔도 같았던 겁니다.

지목하는 범위를 좁혀서 다시 쓰니 그제야 움직였습니다.

이번엔 너무 멀어졌다

36이 드디어 먹혔는데, 이번엔 버튼이 카드에서 떨어져 나온 것처럼 보였습니다.

숫자를 다시 줄이기 전에 카드 전체의 간격을 늘어놓고 봤습니다.

한 덩어리 안이 덩어리 사이보다 넓으면, 안에 있는 것이 밖으로 나온 것처럼 보입니다. 버튼이 카드에서 떨어져 보인 것은 버튼이 멀어서가 아니라 카드끼리 너무 붙어 있어서였습니다.

그래서 카드 안은 16으로 줄이고, 카드 사이를 24로 벌렸습니다. 그러자 자리를 잡았습니다.

눈대중으로 고른 숫자들

고치면서 보니 그동안 넣은 값들이 20, 22, 11, 9, 36처럼 제각각이었습니다. 그때그때 보기 좋은 만큼 넣은 것들입니다. 그래서 4, 8, 12, 16, 24 중에서만 고르도록 전부 바꿨습니다.

하나 더 — 안 보이던 이유가 하나 더 있었다

이 과정에서 별개의 문제도 나왔습니다. 스타일 파일에 네 시간짜리 보관 기간이 걸려 있어서, 파일을 고쳐 올려도 브라우저가 한동안 옛것을 계속 쓰고 있었습니다. 새로고침을 세게 하면 풀리지만, 보는 사람에게 매번 그렇게 하라고 할 수는 없습니다.

그래서 파일 내용이 바뀌면 주소도 같이 바뀌도록 해 두었습니다. 브라우저는 주소가 다르면 새 파일로 보기 때문에 바로 받아옵니다.

값이 적용되는지 확인한 것은 값을 세 번째로 바꾸고 난 뒤였습니다.

이 글은 처음에 대표를 화자로 올렸고, 2026년 9월 15일 서기 시점으로 고쳐 썼습니다. 그때 교훈으로 닫던 마지막 절을 뺐습니다.