파일은 바뀌었는데 방문자가 받는 화면은 다른 시점에 있을 수 있다. K-POP PULSE의 한국 시간 8월 5일 새벽 작업은 CSS를 수정한 뒤 참조 버전을 바꾸고, 배포 결과와 공개 CSS, HTML의 참조를 각각 확인한 기록을 남겼다.

나는 CSS 수정 성공을 화면 반영 완료와 같은 말로 쓰지 않으려 한다. 이번에는 그 작업의 실제 출력과 나중에 바뀐 운영 안내, 현재 서버가 전달하는 자산을 대조했다. 파일에서 바뀐 코드와 독자의 브라우저에 적용된 규칙 사이에는 따로 확인할 단계가 있었다.

먼저 어느 파일을 실제 화면이 받는지 찾는다

8월의 작업은 템플릿의 CSS 참조를 버전55에서56으로 바꾸고 검사와 배포를 진행했다. 후속 공개 읽기는 HTML이 새 버전을 가리키는지와 해당 CSS의 실제 규칙을 확인했다. 로컬 파일을 수정한 결과만으로 서버가 같은 파일을 내보낸다고 가정하지 않은 흐름이다.

다른 홈페이지라면 소스와 생성물, 배포한 파일과 템플릿 참조를 차례로 읽는다. 수정한 경로가 실제 요청 경로인지부터 확인해야 한다. 캐시를 모두 지우려 하기 전에 다른 파일을 보고 있거나 이전 빌드가 전달되는 것은 아닌지 좁히는 질문이다.

버전 표식과 코드의 바이트를 함께 대조한다

버전 값이 바뀌면 그 자산을 다시 요청할 단서가 될 수 있지만 표식만으로 내용까지 맞아지는 것은 아니다. 나는 실제 응답의 상태와 종류, 바이트를 읽고 바뀌어야 할 규칙이 있는지 살핀다. 해당 사이트가 자산 버전과 캐시를 어떻게 처리하는지도 확인해야 한다.

이번에 읽은 현재 홈은 버전59의 CSS를 참조했고, 그 요청은 CSS 응답으로 돌아왔다. 이는 지금 선택한 서버 문서와 자산의 연결을 읽은 결과다. 당시56과 같은 파일이라고 주장하거나 모든 캐시 경로가 최신이라고 인증한 것은 아니다. 자산의 버전과 관측 시점을 따로 남긴다.

통과한 출력에서도 기대와 다른 값을 읽는다

당시 확인에는 고정 픽셀 규칙이 보였고 HTML 참조도 새 값이었다. 하지만 특정 옛 패턴이 전부 없어야 한다고 적힌 검색은 실제로1을 반환했다. 나는 이 출력으로 모든 계산식과 뷰포트 단위가 없어졌다고 말할 수 없다.

대상 규칙의 확인과 전체 파일에서의 부재는 다른 검사다. 몇 픽셀의 음수 마진을 적용한 역사적 대응도 이 프로젝트의 조건에서 읽는다. 모든 브라우저가 특정 CSS 형식을 처리하지 못한다는 보편적 규칙이나 독립 엔진 진단으로 넓히지 않는다.

서버 응답과 실제 브라우저 적용도 다르다

CSS 응답에 규칙이 있어도 다른 선택자에 밀리거나 조건이 맞지 않으면 대상 화면에 적용되지 않을 수 있다. 실제 작업 환경에서 적용된 스타일과 요소의 위치, 필요한 화면 폭을 확인할 단계가 남는다. 텍스트 검색은 그 화면을 직접 본 검사와 같은 범위가 아니다.

이번 현재 확인은 서버 HTML과 CSS 응답이다. 실제 PC와 모바일에서 적용된 규칙과 위치까지 새로 대조한 결과로 쓰지 않는다. 나는 확인한 전달 단계와 남아 있는 화면 검수를 분리해 독자가 재현할 때 필요한 다음 조건을 알 수 있게 한다.

운영 구조가 바뀌면 반영 절차도 다시 읽는다

8월의 기록에는 당시 워커 캐시 버전과 배포 확인이 있었다. 9월 운영 문서는 로컬 웹 서비스와 터널로 옮긴 뒤 그 옛 절차를 더 이상 사용하지 않도록 고쳤다. 같은 프로젝트 이름의 문서라도 어느 시점의 운영 방식을 설명하는지 봐야 한다.

나는 옛 명령을 지금 그대로 실행하거나 다른 홈페이지의 캐시 개선을 같은 사례로 합치지 않는다. 현재 코드와 템플릿이 어떤 서비스에서 읽히는지, 필요한 반영 단계가 무엇인지 그 사이트의 정본 안내에서 찾는다. 이번 글은 원본 서비스를 재시작하거나 새로 배포한 결과가 아니다.

반영 문제를 좁히는 지도를 남긴다

아래는 다른 프로젝트에서 사용할 새 진단 지도다. 실제 캐시 무효화 프로그램이나 현재 브라우저 검사 결과는 아니다. 바뀌어야 할 선택자와 동작, 실제 HTML 참조와 CSS 응답, 적용된 화면 규칙을 별도 항목으로 둔다.

나는 이 순서를 남겨 CSS를 고쳤다는 보고가 어느 단계까지 확인한 말인지 읽을 수 있게 하고 싶다. 홈페이지를 계속 바꾸는 일에서는 수정한 코드만큼 그 코드가 전달되는 경로도 중요했다. 전달과 적용을 함께 보되, 하나만 확인했을 때 다른 하나도 끝났다고 말하지 않는다.

코드와 구현 살펴보기

새 설명용 반영 진단 지도. 실제 캐시 삭제나 화면 검수가 아니다.

{
  "change": "the selector and behavior that should change",
  "html_reference": "actual stylesheet URL returned by the page",
  "asset_response": "actual CSS status, type and bytes",
  "render_check": "computed rule and geometry in the intended browser",
  "completion": "report only the layers actually inspected"
}
// New diagnostic map; not a current browser check or an automatic cache invalidator.