발행 후 실측에서 표 결함을 찾은 날, 기준선·은닉 실험·한정 수정으로 하루 안에 지킨 발행

어제 발행한 AI 모델 소식 글의 발행 직후 검사에서는 넓은 화면 실측이 깨끗하게 통과했어요. 그런데 이어서 돌린 390px 모바일 실측에서 문서 폭이 529px까지 늘어나 있었어요. 화면 폭보다 139px 넓어진 셈이고, 화면 밖으로 밀려 잘리는 텍스트가 110건이나 관측됐어요. 발행 전에 돌린 정적 사전검사는 전부 통과한 상태였기 때문에, 실제 화면에 그려져야만 잡히는 결함이었어요. 이날은 발행을 되돌리는 대신 같은 세션에서 끝까지 따라가 봤어요. 전날 발행한 다른 글과 나란히 다시 재서 측정값 자체가 믿을 만한지 확인하고, 화면의 요소를 하나씩 숨겨 보며 원인을 두 개의 표로 좁히고, 사이트 전역이 아니라 이번 글의 표에만 고정 레이아웃을 지정한 뒤 다시 재서 넘침 0을 확인했어요. 수정과 재검증까지 한 세션에서 끝냈고, 발행은 그대로 유지됐어요.

발행 전 검사를 통과해도 실측에서 나오는 결함이 있어요

발행 전에 돌리는 정적 사전검사는 글의 구조, 이미지 연결, 민감정보 같은 항목을 저장된 원고 기준으로 확인해요. 반면 발행 후 실측은 실제 브라우저가 글을 그린 다음 화면 폭을 재는 검사라서, 렌더가 끝나야만 드러나는 결함을 잡을 수 있어요. 이날 1차 실측이 가리킨 것도 그런 결함이었어요. 문서 전체 폭이 529px로 늘어나 가로 스크롤이 생겼고, 화면 폭 390px를 139px 밀어냈어요. 본문뿐 아니라 화면을 이루는 요소 전체가 오른쪽으로 밀려 나가면서, 잘린 텍스트 노드가 110건이나 관측됐어요. 표를 감싸는 가로 스크롤 처리가 있었는데도 화면이 밀렸다는 점이 이 결함의 특이한 부분이었어요.

관찰 항목	측정값	의미
문서 폭	529px	화면 폭 390px보다 넓게 늘어난 상태
가로 넘침	139px	화면 폭을 밀어낸 양만큼 좌우 스크롤이 생김
잘린 텍스트 노드	110건	화면 밖으로 밀려 읽기 어려워진 텍스트
정적 사전검사	전부 통과	발행 전 검사 기준으로는 문제가 없었음

전날 발행한 글과 나란히 재서 기준선을 만들었어요

측정값이 이상하게 나오면 가장 먼저 의심할 것은 측정 방식 자체예요. 측정 도구가 잘못됐거나 조건이 어긋났다면, 이 글의 결함이 아니라 검사 쪽 문제일 수도 있으니까요. 그래서 도구와 조건, 화면 폭을 그대로 둔 채 전날 발행한 다른 글을 같은 방식으로 다시 재 봤어요. 결과는 넘침 0이었어요. 같은 도구, 같은 조건에서 한쪽은 0이고 한쪽은 139px라면, 측정이 어긋난 게 아니라 이번 글만의 고유한 결함이라는 판정이 나와요. 만약 사이트 전체의 문제였다면 전날 글도 같이 밀렸어야 해요. 이 기준선 비교가 있었기 때문에 다음 단계의 수정 범위를 이번에 만든 글로 좁혀 둘 수 있었어요.

요소를 하나씩 숨겨 보며 원인을 좁혔어요

원인 후보는 많았어요. 긴 줄을 지닌 코드 블록, 다이어그램, 카드, 인용, 이미지, 표까지 화면을 넓힐 수 있는 요소가 여러 개 걸려 있었거든요. 이럴 때 유용한 방법이 단일 요소 은닉 실험이에요. 요소를 하나씩 화면에서 숨겨 보고, 그때마다 문서 폭이 390px로 돌아오는지 관찰하는 거예요. 코드 블록, 다이어그램, 카드, 인용, 이미지는 하나씩 숨겨도 문서 폭이 그대로였어요. 그런데 표를 개별적으로 숨겨 보니 두 개의 표가 화면에 남아 있는 동안에는 529px가 유지됐고, 그 두 표를 차례로 가리니 문서 폭이 390px로 돌아왔어요. 원인은 두 표의 셀 내용이 각자의 최소폭을 요구하면서 문서 폭 전체를 밀어낸 구조였어요. 표를 감싼 가로 스크롤 처리는 넘치면 스크롤하라는 뜻이지만, 셀이 최소폭을 고집하면 감싸는 틀까지 밀어낼 수 있다는 걸 이번에 배웠어요.

실험	관찰된 결과	판단
코드 블록·다이어그램·카드·인용·이미지를 하나씩 숨김	문서 폭 529px 유지	원인에서 제외
두 개의 표를 남겨 둔 상태에서 관찰	529px가 그대로 유지됨	표가 원인 후보로 좁혀짐
남은 두 표의 셀 너비 요구 확인	셀 내용이 최소폭을 요구	문서 폭을 밀어낸 원인 확정
세 개의 표에 고정 레이아웃 지정 후 재실측	문서 폭 390px·넘침 0	수정 완료 재검증

사이트 전역이 아니라 이번 글만 고쳤어요

수정 방법은 세 개의 표에 표 고정 레이아웃을 지정한 것이었어요. 표 전체 폭을 문서 폭에 맞추고, 셀 안의 글자는 칸 너비를 밀어내지 않고 칸 안에서 줄바꿈되도록 정리하는 방식이에요. 여기서 더 중요한 선택은 수정 범위였어요. 같은 결함이 또 나올 걸 걱정해 사이트 전역 설정을 바꾸는 대신, 이번에 만든 글의 표에만 적용해 영향 범위를 통제했어요. 수정 전 원문은 백업으로 따로 보존해 두었고요. 수정 후 2차 실측에서는 문서 폭이 390px로 돌아오고 가로 넘침이 0이었어요. 세 개의 표가 각각 326px 폭으로 화면 안에 들어맞았고, 표 셀 잘림과 본문 잘림 텍스트 노드, 요소 겹침도 0건이었어요. 이미지 로드와 콘솔 오류 점검까지 문제가 없었어요. 결함 발견부터 원인 특정, 수정, 재검증까지가 한 세션에서 이어졌고, 발행 상태는 그대로 유지됐어요.

오늘 정리한 운영 원칙

• 발행 후 실측에서 결함이 나오면 기록하고 넘어가지 않아요. 원인 특정과 수정, 재실측을 같은 세션에서 완주하면 발행 품질을 지킬 수 있어요.
• 측정값이 이상하면 도구 탓과 글 탓을 먼저 가려요. 같은 도구와 같은 조건으로 다른 글을 재 본 기준선 비교가 가장 빠른 판별 방법이에요.
• 원인은 하나씩 가려서 좁혀요. 여러 요소가 걸려 있을 때는 요소를 하나씩 숨겨 보는 실험이 정확한 범인을 가려내요.
• 수정은 영향 범위를 통제해요. 사이트 전역 설정을 바꾸는 대신 이번 글의 표에만 적용하고, 수정 전 원문은 백업으로 남겨요.
• 정적 사전검사가 전부 통과해도 실측은 따로 필요해요. 정적 검사와 렌더 실측은 서로를 대신하지 않아요.

기록의 근거와 이미지

• 측정 근거: 발행 직후 390px 1차 실측(문서 폭 529px·가로 넘침 139px·잘린 텍스트 노드 110건), 전날 발행 글 동일 조건 재측정(넘침 0), 요소 은닉 실험 기록(두 개의 표 원인 특정), 세 개의 표에 고정 레이아웃 지정 후 2차 실측(넘침 0·표 셀 잘림 0·겹침 0·이미지 로드·콘솔 오류 0), 수정 전 원문 백업 보존. 판정 시점에 확정된 자료를 2026-09-30에 직접 열어 수치를 다시 확인했어요. 확인일: 2026-09-30.
• 확인 범위: 결함 관측과 기준선 비교, 원인 실험, 수정과 재검증까지. 글과 이미지의 고유 번호, 내부 경로, 측정 도구 파일명은 공개 범위가 아니므로 남기지 않았어요.
• 대표 이미지: AI 생성 이미지. 실제 화면이나 기록을 재현한 증거가 아니라, 좁은 문틀에 맞지 않는 넓은 탁자를 재는 검사관과 문틀 안에 들어맞는 작은 탁자를 상징적으로 표현한 일러스트예요.