DongHyeonkaandClaude Opus 5
193da20d09
게시된 Reference 15편이 전부 규칙을 `### N. 제목` 으로 쓰고 적용 조건·예외·예시를 항목으로 쓴다. 내 15편은 규칙을 `**굵게**` 로, 나머지 셋을 문단으로 쓰고 있었다 — Studio 의 rules[]·applyWhen[]·exceptions[]·examples[] 는 배열이라 문단으로 두면 항목이 하나로 접힌다. 규칙 68개를 `### N. 제목` 으로 바꿨다 (편당 3~7개, 게시된 것은 4~10개) 적용 조건·예외·예시를 항목으로 갈랐다. 한 항목뿐이던 아홉 편은 조건을 나눠 적었다 주제 6 은 본문을 다시 썼다 — location = 이 정확히 일치하는 경로만 잡아 27개가 얼어붙은 구조, 여덟 곳이 우는 시점을 셋으로 가른 표, digest 를 다시 계산할 때 옛 값을 먼저 재현하는 이유. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
3.0 KiB
3.0 KiB
kind, slug, title, topic, topicName, project, status, verifiedOn, evidence, sourceRevision, source
| kind | slug | title | topic | topicName | project | status | verifiedOn | evidence | sourceRevision | source | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| REFERENCE | measure-what-is-visible-not-a-proxy | 프록시 지표가 아니라 보이는 것을 측정한다 | css-rules-that-leak | CSS 규칙이 구역을 넘어 샌다 | TechLog | 게시 전 | 2026-09-04 |
|
tech-log@2026-09-02 |
|
프록시 지표가 아니라 보이는 것을 측정한다
격자와 열을 재고 「정상」이라고 답했는데, 전체 페이지 스크린샷을 찍으니 제목이 26px 에 굵기 400 이었다. 목록 간격을 바운딩 박스로만 재서 엉뚱한 곳을 결함으로 지목한 적도 있다. 화면이 잘못됐다는 보고는 보이는 것을 재서 확인한다.
관계
- 규칙이 없었던 게 아니라 절반만 있었다 이 기준의 근거 사건이다.
- 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다 같은 화면에서 보이는 것을 재서 확인한 사건이다.
- 홈의 비교 구역이 세 번 바뀌었다 폭마다 측정을 남긴 기록이다.
목적
화면이 잘못됐다는 보고를 확인할 때 엉뚱한 값을 재고 「정상」이라 답하는 것을 막는다.
규칙
1. 보고된 증상과 같은 축의 값을 잰다
「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이다.
2. 촬영을 스크립트로 고정한다
손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다.
3. 폭을 고정해 여러 개를 돌고, 폭마다 측정값도 남긴다
스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다.
4. 전체 페이지를 한 장으로 찍지 않는다
축소되어 글자 크기가 실제와 달라진다. 화면 높이만큼 잘라 찍는다.
적용 조건
- 화면이 잘못됐다는 보고를 확인할 때
- 배포본의 실제 렌더 결과를 판단 근거로 삼을 때
- 고쳤다고 답하기 전에 무엇을 쟀는지 대야 할 때
- 여러 폭에서 배치가 갈리는 사이트를 검토할 때
예외
-
측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.
-
CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.
예시
-
격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다.
-
목록 간격을 바운딩 박스로만 재서 「판단 기준」을 결함으로 잘못 지목한 적이 있다.
-
브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 877px 에서 본 배치는 방문자 대부분이 보는 배치가 아니다.
-
전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다.