클로드 코드로 만든 사이트를 아이폰으로 열어 보니 다섯 군데가 깨져 있었습니다. 좁은 화면 확인을 430픽셀 폭으로 했는데도 놓쳤어요. 차림표 단추가 두 줄로 꺾여 페이지 폭을 넘긴 것이 두 가지 증상의 원인이었고, 지도는 비율을 3 대 4 로 못박아 둔 탓에 폰에서 좁아졌습니다. 지도 말풍선은 흰 바탕에 흰 글씨였고요. ⛔ 마지막 하나인 취소선, 그러니까 글자 가운데를 죽 긋는 줄은 컴퓨터 화면에도 이미 있었습니다. 표만 확인하고 본문을 안 읽어서 못 봤던 것입니다.
클로드 코드에 한 줄을 시켜서 자전거 여행 사이트를 만들었습니다. 1시간 26분 만에 주소가 나왔고, 만드는 내내 잘 되고 있다고 생각했습니다.
그리고 아이폰으로 열었습니다. 다섯 군데가 깨져 있었습니다.
클로드 코드를 처음 쓰시는 분이라면 설치와 첫 설정부터 보시면 되고, 요금이 궁금하시면 사용량 한도가 어떻게 도는지를 함께 보시면 됩니다.
만드는 내내 본 것 — 데스크톱 창 하나
만들면서 본 화면은 컴퓨터 브라우저 창 하나였습니다. 폭이 1,562픽셀인 넓은 창이었어요.
좁은 화면 확인을 안 한 것도 아닙니다. 기록을 보면 430픽셀 폭으로 확인했다고 적혀 있어요. 웬만한 스마트폰 화면 폭이 그쯤입니다.
그런데도 다섯 개가 폰에서 나왔습니다.
⛔ 하나는 뺐습니다. 「지도가 너무 커서 아래가 답답하다」는 것이었는데, 그건 망가진 게 아니라 더 낫게 해 달라는 쪽이라서요. 여기서는 눈에 보이게 깨진 다섯 가지만 다룹니다.
왜 그랬는지는 하나씩 보시면 압니다.
첫날 밤에 나온 것 — 단추 하나가 만든 두 가지
배포하고 처음 폰으로 열었을 때 두 가지가 눈에 걸렸습니다.
하나는 위쪽 차림표의 그 단추가 두 줄로 꺾인 것이었어요.
다른 하나는 내용이 한 번은 왼쪽으로, 한 번은 오른쪽으로 쏠리는 것이었어요. 오른쪽에 빈 띠가 남고 화면이 고정이 안 된 느낌이었습니다.
⛔ 둘은 같은 원인이었습니다. 차림표의 그 단추가 좁은 화면에서 두 줄로 꺾이면서 페이지 폭을 넘겼고, 그래서 페이지 전체가 옆으로 스크롤되는 상태가 된 겁니다. 손가락 위치에 따라 내용이 왼쪽 오른쪽으로 밀려 보인 거죠.
고친 것은 넷입니다. 좁은 화면에서는 그 단추를 감추고(첫 화면에 같은 단추가 또 있습니다), 차림표 링크 사이 여백을 줄이고, 줄바꿈을 막았습니다. 그리고 페이지가 가로로 넘치지 않게 잠그는 규칙을 더했습니다.
마지막 것이 한 줄입니다. 사이트 전체에 걸리는 CSS 파일 맨 위에 넣으면 됩니다. 어떤 요소가 폭을 넘쳐도 페이지가 옆으로 안 밀리게 잠급니다.
html, body {
overflow-x: clip;
}⛔ hidden 이 아니라 clip 인 데는 까닭이 있어요. hidden 을 쓰면 화면을 내려도 따라오는 요소(화면을 내려도 같이 따라오는 지도 같은 것)가 같이 죽습니다. clip 은 넘치는 것만 자르고 그건 안 건드려요.
고친 뒤 390픽셀 폭에서 다시 확인하니 문서 폭 373, 화면 폭 386 이었습니다. 문서가 화면보다 좁아졌으니 이제는 안 밀리더군요.
⛔ 확인하는 일 자체도 한 번 막혔습니다. 브라우저 창 크기를 프로그램으로 줄이려 했는데 먹히지 않았어요. 창 폭을 바꿔도 화면이 인식하는 폭은 그대로였습니다. 결국 390픽셀짜리 작은 창을 페이지 안에 띄워서 그 안을 들여다보는 방법으로 돌아갔습니다.
폭 확인은 했는데 차림표 오른쪽 끝을 안 봤습니다. 좁은 화면 확인은 글이 잘 보이는지만이 아니라 가로로 밀리지 않나까지 봐야 합니다.
둘째로 나온 것 — 세로로 좁은 지도
첫 화면 지도가 세로 직사각형으로 나와서 양옆이 비었습니다. 폰은 세로로 긴데 지도는 가로로 넓어야 노선이 보이거든요.
지도의 보이는 범위를 3 대 4 로 못박아 둔 것이 원인이었습니다. 컴퓨터 화면에서는 그 비율이 맞았는데 폰에서는 안 맞았던 거죠.
고친 방법은 지도 칸의 실제 가로세로 비율을 그때그때 확인해서 그 비율로 자르는 것이었습니다. 폰에서는 가로로 넓게, 컴퓨터에서는 세로로 길게 나옵니다.
지도 칸의 크기가 바뀔 때마다 비율을 다시 확인합니다. 아래에서 el 은 지도를 담고 있는 화면 칸이고, setAspect 는 그 칸의 가로세로 비율을 기억해 두는 곳입니다. 지도를 그리는 코드 안에 넣습니다.
const measure = () => {
const r = el.getBoundingClientRect();
setAspect(r.width / r.height); // 칸의 실제 가로세로 비율
};
measure();
const ro = new ResizeObserver(measure); // 크기가 바뀌면 다시 확인
ro.observe(el);그리고 폰에서는 지도를 폭을 다 쓰는 둥근 카드에 넣어서 잘린 직사각형 느낌을 없앴어요.
고친 뒤 확인한 값은 이래요. 폰에서 지도 칸이 344 곱하기 280 이고 보이는 범위의 비율이 1.23 으로 카드와 같습니다. 컴퓨터에서는 예전 그대로 세로로 길고요. 같은 코드인데 화면에 따라 다르게 자릅니다.
둘째 날 아침에 나온 것 — 흰 바탕에 흰 글씨
화면을 어두운 모드로 두고 노선 지도에서 인증센터 번호를 누르면 이름이 떠야 합니다. 그런데 흰 상자만 뜨고 글씨가 안 보였어요. 사진처럼 흰 바탕에 흰 글씨였던 겁니다.
지도를 그려 주는 남의 코드 뭉치가 있습니다. 그쪽이 들고 있던 기본 색 규칙이 제 규칙보다 나중에 실리면서 바탕색만 덮어썼더라고요. 글자색은 어두운 모드용 밝은 색이 그대로 남아 있었고요.
왜 흰 바탕에 흰 글씨만 남았는지 처음엔 헷갈렸는데 사정이 이랬습니다.
⛔ 밝은 모드에서는 멀쩡했습니다. 어두운 모드에서만 나왔어요. 직접 확인해 보실 분은 폰 설정을 어두운 모드로 바꿔 놓고 눌러 보셔야 합니다. 밝은 모드로 보면 아무 일도 안 일어납니다.
고친 방법은 제 규칙 앞에 한 겹을 더 얹는 것이었어요. 지도 색을 정해 둔 CSS 파일에서 고칩니다.
/* 전 — 상대가 나중에 실리면 밀린다 */
.maplibregl-popup-content { background: var(--surface); color: var(--fg); }
/* 후 — 앞에 .maplibregl-map 을 더했다 */
.maplibregl-map .maplibregl-popup-content {
background: var(--surface);
color: var(--fg);
}조건이 하나 늘면 그 규칙이 더 무겁게 계산됩니다. 무거운 쪽이 이기니 순서는 상관없어져요. 싸움에서 이기려고 !important 를 쓰는 방법도 있는데, 그건 나중에 또 덮어쓸 일이 생기면 더 큰 싸움이 됩니다.
마지막 하나 — 컴퓨터에도 있던 취소선
같은 아침에 하나가 더 나왔습니다. 이번엔 또 뭔가 싶었는데 글자에 줄이 그어져 있었어요.
위 사진에 있는 그대로입니다. 「105~114km」도 「105114km」가 됐고요.
글을 쓰는 문법에서 물결표를 취소선 기호로 읽은 것이었습니다. 원래는 물결표 두 개가 취소선인데 하나만 써도 그렇게 읽은 거죠.
고치는 데는 값 하나면 됐습니다. 마크다운을 HTML 로 바꾸는 코드에서 remark-gfm 을 불러 쓰는 자리를 찾아 고칩니다.
.use(remarkGfm, { singleTilde: false })물결표 하나짜리는 취소선으로 읽지 말라는 뜻이에요. 이제 ~~두 개~~ 만 줄이 그어집니다. 한국어로 글을 쓰면서 범위를 물결표로 적는 분은 이 한 줄을 미리 넣어 두시는 편이 낫습니다.
한국어에서 「46~56km」처럼 범위를 물결표로 쓰는 건 아주 흔합니다. 그런데요.
⛔ 이건 컴퓨터 화면에도 이미 그어져 있었습니다.
만들면서 그 글을 분명히 열어 봤습니다. 그런데 구간별 거리표가 제대로 나오는지만 확인하고 창을 닫았어요. 표 아래 문단은 안 읽었습니다.
만든 사람은 훑고, 읽는 사람은 읽습니다. 저는 잘 나왔는지를 확인했지 무슨 내용인지를 읽지 않았어요. 폰으로 본 김에 처음부터 끝까지 읽었더니 그제야 보였습니다.
다섯 군데에서 얻은 것 네 가지
하나. 좁은 화면 확인은 폭만 보는 게 아닙니다. 430픽셀로 확인해 놓고도 놓쳤어요. 가로로 밀리지 않나를 같이 봐야 합니다. 페이지가 옆으로 스크롤되면 화면 전체가 흔들립니다.
둘. 깨진 것 다섯 중 둘은 원인이 하나였습니다. 단추 하나가 넘쳐서 페이지 전체가 밀렸어요. 증상이 여럿이라고 원인도 여럿인 건 아닙니다.
셋. 비율을 숫자로 못박으면 다른 화면에서 깨집니다. 3 대 4 로 정해 둔 지도가 폰에서 좁아졌어요. 화면을 보고 그때그때 정하게 하는 편이 안전합니다.
넷. ⛔ 다 만들고 나면 한 번은 독자처럼 끝까지 읽으세요. 취소선은 컴퓨터에도 있었는데 표만 보고 못 봤습니다. 만드는 눈과 읽는 눈은 다릅니다.
여기까지가 제 윈도우 환경에서 직접 확인한 것입니다. 사이트는 bikeweb-liart.vercel.app 에서 돌고 있습니다. 다음 편에서는 한 줄만 시켜서 1시간 26분 만에 주소가 나오기까지, 그 사이 일곱 번 막힌 이야기를 하겠습니다.
자주 묻는 질문
좁은 화면 확인을 했는데도 폰에서 깨질 수 있나요?
있습니다. 저는 430픽셀 폭으로 확인하고도 다섯 군데를 놓쳤습니다. 폭을 좁혀 놓고 「글이 잘 보이나」만 봤기 때문입니다. 페이지가 가로로 밀리지 않는지, 차림표 오른쪽 끝이 넘치지 않는지까지 봐야 합니다.
내용이 왼쪽 오른쪽으로 쏠려 보이는 건 왜 그런가요?
페이지 어딘가가 화면 폭을 넘겨서 페이지 전체가 옆으로 스크롤되는 상태일 가능성이 큽니다. 제 경우 차림표의 단추 하나가 좁은 화면에서 두 줄로 꺾이며 폭을 넘겼습니다. 손가락 위치에 따라 내용이 밀려 보였고요. 넘치는 요소 하나를 찾아 고치면 증상이 같이 사라집니다.
지도가 폰에서 세로로 좁게 나오는 건 왜 그런가요?
지도의 보이는 범위를 3 대 4 같은 숫자로 못박아 두면 화면 비율이 다른 기기에서 어긋납니다. 저는 지도 칸의 실제 가로세로 비율을 그때그때 확인해서 그 비율대로 자르게 고쳤습니다. 폰에서는 가로로 넓게, 컴퓨터에서는 세로로 길게 나와요.
지도 말풍선이 어두운 모드에서만 안 보이는 이유는 뭔가요?
지도를 그려 주는 남의 코드가 들고 온 기본 색 규칙이 제 규칙보다 나중에 실리면서 바탕색만 덮어썼기 때문입니다. 글자색은 제가 정한 어두운 모드용 밝은 색이 그대로 남아 흰 바탕에 흰 글씨가 됐습니다. 밝은 모드에서는 바탕도 글자도 어긋나지 않아 멀쩡해 보입니다. 그래서 확인하실 때는 폰 설정을 어두운 모드로 바꿔 놓고 눌러 보셔야 합니다. 고칠 때는 제 규칙의 선택자 앞에 한 겹을 더 얹어 무게를 올리면 실리는 순서와 상관없어집니다.
글에서 물결표를 쓰면 왜 취소선이 되나요?
제가 글을 쓸 때 쓰는 마크다운 문법 때문입니다. 마크다운은 기호 몇 개만 넣으면 제목이나 굵은 글씨로 저절로 바뀌는 글쓰기 방식인데, 이 문법이 물결표를 취소선 기호로 읽어요. 원래는 물결표 두 개가 취소선인데 설정에 따라 하나만 써도 그렇게 읽습니다. 「46~56km」처럼 숫자 사이에 물결표를 쓰면 그 자리부터 다음 물결표까지 줄이 그어집니다. 물결표 하나는 취소선으로 읽지 않게 설정하면 됩니다.
만들면서 확인했는데도 못 보는 게 있나요?
있습니다. 제 경우 취소선은 컴퓨터 화면에도 이미 그어져 있었는데 못 봤습니다. 구간별 거리표가 제대로 나오는지만 확인하고 그 아래 문단은 안 읽었거든요. 만든 사람은 잘 나왔는지 훑고, 읽는 사람은 내용을 읽습니다. 다 만든 뒤 한 번은 독자처럼 처음부터 끝까지 읽어 보셔야 합니다.
