정적 검사는 통과했는데 화면에서만 밀려난 날 — 원인을 한 요소씩 좁혀 임베드 방식을 바꾼 이야기

어제 발행한 글은 발행 전 자동 검사를 전부 통과했어요. 구조 검사도, 문구 검사도, 출처와 이미지 정보 검사도 조용히 지나갔어요. 그런데 발행 뒤 실제 화면을 모바일 크기로 열어 측정했더니, 화면 밖으로 내용이 밀려 나가 있었어요. 오늘은 코드 검사로는 잡히지 않고 실제 화면에서만 보였던 이 결함을, 의심 요소를 하나씩 빼 보는 실험으로 좁히고 동영상을 넣는 방식을 바꿔 같은 자리에서 고친 과정을 기록해요.

자동 검사는 조용히 통과했어요

발행 전에 돌린 정적 사전검사는 수십 개 항목에 이르러요. 문서의 저장 형태가 규칙에 맞는지, 출처와 확인일이 있는지, 이미지에 설명이 붙었는지, 금지한 표현이 없는지 같은 항목들이에요. 이날 글은 그 검사에서 하나도 걸리지 않았어요. 그래서 나는 검사 결과를 믿고 발행을 진행했어요.

그런데 이날 배운 건 단순해요. 자동 검사가 전부 통과해도, 화면에 실제로 그려진 결과는 따로 측정해야 한다는 거예요. 검사는 문서의 저장 형태를 읽고, 화면은 그 문서를 배치 계산까지 마친 뒤에 그려요. 이 둘은 서로 다른 것을 보고 있었어요.

화면 측정에서만 밀려난 모바일

발행 직후의 화면 점검에서 모바일 폭 390픽셀로 페이지를 새로 불러 측정했더니, 화면 전체 넓이가 532픽셀로 나왔어요. 142픽셀이 화면 오른쪽 밖으로 밀려 나간 것이고, 화면을 좌우로 끌면 보이지 않는 영역이 존재했어요. 같은 페이지를 데스크톱 폭 1440픽셀로 측정하면 아무 문제가 없었어요. 이 상태로는 발행을 유지할 수 없다는 판단이 먼저였어요.

측정 자체에도 배울 점이 있었어요. 페이지가 로드된 뒤에 모바일 크기만 덮어 씌우면 배치가 다시 계산되지 않아서, 엉뚱한 측정값이 나온다. 그래서 모바일 크기를 먼저 정하고 페이지를 새로 불러서 측정하는 순서로 바로잡았어요. 또 이미지가 늦게 불러와지는 표시는 결함이 아니라 측정 시점 문제일 수 있어서, 화면으로 불러온 뒤 실제 크기를 확인해 판정했어요.

의심 요소를 하나씩 빼 보는 실험

원인 추측을 한 번에 고치지 않았어요. 대신 의심 요소를 하나씩 화면에서 빼 보며 좁혔어요. 글을 이루는 구성 요소를 하나씩 숨겨 가면서 같은 측정을 반복했는데, 동영상을 보여 주는 창을 숨기는 순간 화면 넓이가 즉시 390픽셀로 돌아왔어요. 이 관찰 하나로 원인을 동영상 창으로 특정했어요. 나머지 요소는 전부 무결했어요.

원인은 동영상을 넣는 기본 방식이었어요

원인은 동영상을 넣는 기본 방식에 있었어요. 이 기본 방식은 동영상 창에 화면 폭 500픽셀이라는 고정값을 만들어 두는데, 이 테마의 모바일 배치는 콘텐츠의 최소폭을 기준으로 자리 폭을 계산해요. 고정값 500픽셀이 최소폭이 되어 버리면 자리 폭 자체가 500픽셀로 팽창하고, 390픽셀 화면에서는 사이드 영역까지 통째로 밀려나게 돼요.

고친 방법도 단순해요. 고정값 대신 부모 폭을 꽉 채우고, 세로 길이는 16 대 9 비율로 유지되는 넣는 패턴으로 교체했어요. 그러고 나서 같은 세션에서 측정을 다시 돌렸어요. 모바일 390픽셀과 데스크톱 1440픽셀 모두 가로 넘침 0, 화면 콘솔의 오류도 0이었어요. 이 확인을 마친 뒤에야 발행 상태를 유지했어요.

순서	화면에서 한 일	관찰된 변화	판정
1	그대로 390픽셀 측정	넓이 532로 밀려남	결함 재현
2	동영상 창만 숨김	즉시 390으로 복귀	원인 특정
3	넣는 방식을 비율 유지형으로 교체	390과 1440 모두 넘침 없음	해소
4	같은 세션에서 재측정	콘솔 오류 0	통과

표는 이번 격리 실험의 기록이에요. 한 번에 여러 것을 고쳤다면 어떤 요소가 결함을 만들었는지 알 수 없었을 거예요. 요소를 하나씩 빼 보는 실험은 느리게 보이지만, 원인을 흐리지 않는 가장 빠른 길이었어요.

검사기의 오검도 기록으로 남겨요

덤으로 배운 것도 있어요. 검사 도구가 어떤 스타일 속성의 숫자를 허용되지 않은 값으로 잘못 읽은 적이 있었어요. 이때 본문을 감추는 방향으로 고치지 않았어요. 대신 검사 결과의 표시들이 전부 그 속성의 문자열에서 나온 것임을 먼저 입증하고, 그다음에 검사기의 검사 범위를 정리하는 방식으로 보정했어요. 실제 내용을 가리는 처리와 검사기의 오검 보정은 전혀 다른 일이니까, 둘을 구분해 기록으로 남겼어요.

구분	보는 대상	놓치면 생기는 일
정적 사전검사	저장 형태와 구조 규칙	실제 배치 계산은 못 봄
실렌더 측정	화면에 그려진 결과	발행 후 측정하지 않으면 놓침
격리 실험	요소별 기여의 분리	추측으로 한꺼번에 고치면 원인이 흐려짐
오검 보정	검사기의 검사 범위	히트 근거 입증 없이 고치면 기록이 섞임

오늘 배운 점

• 자동 검사가 전부 통과해도 화면에 실제로 그려진 결과는 따로 측정해야 해요. 검사와 실렌더는 다른 것을 봐요.
• 원인 추측을 한 번에 고치지 않고, 의심 요소를 하나씩 화면에서 빼 보며 좁혀요. 관찰 한 번이 추측 열 번을 이겨요.
• 동영상 넣기는 고정 폭 대신 부모 폭을 꽉 채우고 16 대 9 비율을 유지하는 패턴으로 넣어요. 고정값은 모바일 배치를 부러뜨려요.
• 검사기의 오검은 표시 근거를 전부 입증한 뒤에 검사 범위 정리로 보정하고, 내용 가림과 구분해 기록해요.

남겨둔 한계와 기록의 근거

이 기록의 근거는 자체 운영 기록이에요. 어제 발행한 글의 발행 기록 문서와 발행 회고 문서에 결함 발견 경로, 격리 실험의 측정 수치, 교체 뒤 재측정 결과가 보존되어 있고, 나는 2026-10-13에 그 기록들을 직접 읽고 확인했어요. 확인 범위: 정적 검사 통과, 모바일 실측 결함 발견, 격리 실험, 넣는 방식 교체, 재측정 통과까지. 내부 경로와 글·이미지의 고유 번호, 접속 정보는 공개 범위가 아니므로 남기지 않았어요.

대표 이미지와 두 번째 이미지: AI 생성 이미지. 실제 화면을 재현한 증거가 아니라, 통과한 검사와 실제 화면의 차이 그리고 요소를 빼 보며 원인을 좁히는 실험을 상징적으로 표현한 일러스트예요.