DongHyeonkaandClaude Opus 5
b1653dbba8
주소가 게시 시점에 굳어 저장되는 구조, 축 링크를 두 번 옮긴 순서, 한글 slug 가 간헐적으로 보인 두 가지 어긋남을 표로 갈랐다. 화면이 실패를 없음으로 그릴 때 작성 도구에서 왜 더 오래 숨는지, Promise.all 이 거절과 던짐에서 다른 경로를 타는 이유를 채웠다. CSS module 이 왜 전역 규칙에 닿지 않는지, 403 과 404 가 원인을 어떻게 좁혔는지도 적었다. link-audit.py 를 감사 Case 의 evidence 로 걸어 배정한 증거 하나를 메웠다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
73 lines
3.6 KiB
Markdown
73 lines
3.6 KiB
Markdown
---
|
|
kind: REFERENCE
|
|
slug: measure-what-is-visible-not-a-proxy
|
|
title: 프록시 지표가 아니라 보이는 것을 측정한다
|
|
topic: css-rules-that-leak
|
|
topicName: CSS 규칙이 구역을 넘어 샌다
|
|
project: TechLog
|
|
status: 게시 전
|
|
verifiedOn: 2026-09-04
|
|
evidence:
|
|
- ../../../final/evidence/browser/tab-metrics.txt
|
|
sourceRevision: tech-log@2026-09-02
|
|
source:
|
|
- final/document.md#§17.5
|
|
- final/document.md#§11.2
|
|
---
|
|
|
|
# 프록시 지표가 아니라 보이는 것을 측정한다
|
|
|
|
격자와 열을 재고 「정상」이라고 답했는데, 전체 페이지 스크린샷을 찍으니 제목이 26px 에 굵기 400 이었다. 목록 간격을 바운딩 박스로만 재서 엉뚱한 곳을 결함으로 지목한 적도 있다. 화면이 잘못됐다는 보고는 보이는 것을 재서 확인한다.
|
|
|
|
## 관계
|
|
|
|
- **규칙이 없었던 게 아니라 절반만 있었다**
|
|
이 기준의 근거 사건이다.
|
|
- **구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다**
|
|
같은 화면에서 보이는 것을 재서 확인한 사건이다.
|
|
- **홈의 비교 구역이 세 번 바뀌었다**
|
|
폭마다 측정을 남긴 기록이다.
|
|
|
|
## 목적
|
|
|
|
화면이 잘못됐다는 보고를 확인할 때 엉뚱한 값을 재고 「정상」이라 답하는 것을 막는다.
|
|
|
|
## 규칙
|
|
|
|
### 1. 보고된 증상과 같은 축의 값을 잰다
|
|
|
|
「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이라, 그것이 정상이라는 답으로는 보고한 사람이 본 것을 설명하지 못한다.
|
|
|
|
목록 간격을 바운딩 박스로만 재서 엉뚱한 구역을 결함으로 지목한 적도 있다. 박스가 겹치는 것과 눈에 보이는 간격이 다르기 때문이다.
|
|
|
|
### 2. 촬영을 스크립트로 고정한다
|
|
|
|
손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다. 브라우저 세션이 리셋되면 창은 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 방문자 대부분이 보지 않는 배치를 놓고 디자인을 논하게 된다.
|
|
|
|
### 3. 폭을 고정해 여러 개를 돌고 폭마다 측정도 함께 남긴다
|
|
|
|
스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다. 폭마다 계산된 스타일을 함께 적어 두면 다음에 무엇이 달라졌는지 대조할 수 있다.
|
|
|
|
### 4. 전체 페이지를 한 장으로 찍지 않는다
|
|
|
|
축소되어 글자 크기가 실제와 달라진다. 1425x4466 이 638x2000 으로 들어오면 17px 글자가 7~8px 이 되고, 그 그림에서는 크기 문제를 볼 수 없다. 화면 높이만큼 잘라 찍는다.
|
|
|
|
## 적용 조건
|
|
|
|
- 화면이 잘못됐다는 보고를 확인할 때
|
|
- 배포본의 실제 렌더 결과를 판단 근거로 삼을 때
|
|
- 고쳤다고 답하기 전에 무엇을 쟀는지 대야 할 때
|
|
- 여러 폭에서 배치가 갈리는 사이트를 검토할 때
|
|
|
|
## 예외
|
|
|
|
- 측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.
|
|
- CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.
|
|
|
|
## 예시
|
|
|
|
- 격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다
|
|
- 목록 간격을 바운딩 박스로만 재서 엉뚱한 구역을 결함으로 지목한 적이 있다
|
|
- 브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이다
|
|
- 전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다
|