페이지 콘텐츠가 충분한지 확인하려고 분량을 쟀습니다. 응답을 받아 크기를 찍었더니 19,750이 나왔고, 저는 기록에 "페이지당 1.8~2만 자"라고 적었습니다.
실제 텍스트는 590자였습니다. 33배 부풀린 숫자를 근거로 "콘텐츠가 충분하다"는 결론을 내렸고, 그 결론 위에서 2주를 썼습니다.
19,750에 들어 있던 것
현대적인 프레임워크가 뱉는 HTML에서 사람이 읽는 글자가 차지하는 비중은 아주 작습니다. 나머지는 이런 것들입니다.
- 유틸리티 클래스 이름 — 요소 하나에 클래스 열 개씩 붙습니다
- 인라인 스타일과 그라디언트 정의
- SVG 아이콘의 경로 데이터
- 하이드레이션용 직렬화 데이터, 프리로드 링크, 청크 경로
- 메타 태그, 구조화 데이터(JSON-LD)
여기에 한글은 UTF-8에서 글자당 3바이트라는 점이 겹칩니다. 바이트 수를 글자 수로 읽으면 한국어 사이트에서는 그 자체로 3배가 부풀려집니다. 마크업 비중까지 더해져 33배가 됐습니다.
세야 할 것
재고 싶은 건 "사람이 읽는 글자"입니다. 그러면 그것만 남기고 세야 합니다.
const textLength = (html) =>
html
.replace(/<script[\s\S]*?<\/script>/gi, " ")
.replace(/<style[\s\S]*?<\/style>/gi, " ")
.replace(/<[^>]+>/g, " ")
.replace(/&[a-z]+;/gi, " ")
.replace(/\s+/g, " ")
.trim().length;script와 style을 내용까지 통째로 지우는 게 중요합니다. 태그만 벗기면 자바스크립트 소스가 본문으로 잡혀 또 부풀려집니다. 저는 이 함수를 콘텐츠 파이프라인에 넣고, 발행 여부를 이 값으로 판정하게 했습니다.
검산 습관
이 실수가 유독 뼈아팠던 건, 한 번만 되짚었어도 즉시 걸렸을 것이기 때문입니다. 2만 자면 원고지 100장이 넘습니다. 서비스 소개 페이지가 그 분량일 리 없습니다. 화면을 스크롤해 봤다면 몇 초 만에 이상하다고 느꼈을 겁니다.
그 뒤로 규칙을 하나 두었습니다. 측정값이 결론을 뒷받침할 때일수록 단위를 소리 내어 확인한다. "19,750 무엇인가?" 바이트인지 글자인지 요소 개수인지. 원하는 답이 나왔을 때 검산을 건너뛰는 게 사람의 기본값이고, 그때가 정확히 틀리는 지점입니다.
보조 규칙도 하나 더 붙였습니다. 숫자를 기록에 남길 때 어떻게 쟀는지를 같이 적습니다. "2만 자"가 아니라 "태그 제거 후 글자 수 590". 나중의 내가 검증할 수 있게 됩니다. 위 사례에서는 기록에 "1.8~2만 자"라고만 적혀 있었기 때문에, 두 달 동안 아무도 그 숫자를 의심하지 않았습니다.