docs(TechLog): 글감 56개를 기록으로 쓴다

주제 13개 · Case 28 · Concept 5 · Reference 15 · Question 4 · Decision 4. 계약의 노드마다 종류가 요구하는 칸을 채우고, 본문이 있는 두 종류에는 SSOT 가 이미 그려 둔 도식 셋(value-boundaries · decision-path-404 · topic-variant-model)을 tech-log-studio/ 로 옮겨 붙였다. 새로 그린 그림은 없다. 검사 셋 전부 통과한다. check_body.mjs 56 편 중 본문이 있는 33 편 PASS check_prose.mjs 56 편 error 0 check_evidence.mjs --repo 포함 문제 없음 verify-tech-log-tree.py 프로젝트 5 · error 0 · warn 0 인용한 코드블록은 전부 SSOT 에서 찾아 대조했다. check_evidence.mjs 가 본문의 각 줄과 source 앵커와 계약 제목을 다시 확인한다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-07 15:29:33 +09:00
parent 6955611439
commit f6c825e858
62 changed files with 6381 additions and 186 deletions
@@ -0,0 +1,101 @@
+---
+kind: CASE
+slug: a-section-wide-rule-caught-the-heading
+title: 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다
+topic: css-rules-that-leak
+topicName: CSS 규칙이 구역을 넘어 샌다
+project: TechLog
+status: 게시 전
+lastVerifiedOn: 2026-09-04
+sourceRevision: tech-log@2026-09-02
+source:
+  - final/document.md#§11.1
+  - final/document.md#§11.3
+  - final/document.md#§16.3
+---
+
+# 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다
+
+「디자인이 안 된 것처럼 보인다」고 보고된 화면에서 h2 높이가 199px 이었다. 비교 행을 위한 격자 규칙의 선택자가 구역 전체라 제목 안의 링크까지 잡았다. 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
+
+## 관계
+
+- **배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다**
+  이 사건에서 굳힌 기준이다.
+- **프록시 지표가 아니라 보이는 것을 측정한다**
+  이 부류를 어떻게 확인하는지가 그 기준에 있다.
+- **규칙이 없었던 게 아니라 절반만 있었다**
+  같은 화면에서 난 다른 부류의 CSS 결함이다.
+
+## 문제
+
+사용자가 홈 비교 구역의 「디자인이 안 된 것처럼 보인다」고 보고했다.
+
+제목이 접혀 두 줄이 되고 위아래로 크게 벌어져 있었다. 같은 이유로 주제 화면의 안내 문단도 행의 크기와 색으로 덮여 있었다.
+
+## 결론
+
+사용자가 원인을 정확히 짚어 주었다 — 「디자인이 안 된 게 아니라 CSS 선택자가 새고 있습니다」.
+
+```css
+.home-comparison a {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  padding: 27px 2px 28px;
+}
+```
+
+비교 행을 위한 규칙인데 선택자가 구역 전체라 제목 안의 링크까지 잡았다. 제목이 200px 칸에 갇혀 두 줄로 접히고 행용 padding 까지 물려 h2 높이가 199px 이 됐다.
+
+배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다. 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
+
+CSS 로만 막는 것은 임시방편이라 구조도 바꿨다 — 제목 안에 링크를 두지 않고, 주제로 가는 길은 아래 한 줄이 맡는다.
+
+## 검증 환경
+
+tech-log-frontend : 344dadb · 805d400 · 8c5dbe1
+확인 방식 : 배포본에서 전체 페이지 스크린샷과 getComputedStyle 측정
+
+## 재현 조건
+
+1. 구역 클래스 아래에 태그 선택자로 격자를 건다
+2. 그 구역 안 제목에 링크를 넣는다
+3. 제목의 높이를 잰다
+
+## 본문
+
+<!-- body:start -->
+
+## 행을 위한 규칙이 제목을 잡았다
+
+```css
+.home-comparison a {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  padding: 27px 2px 28px;
+}
+```
+
+`a` 는 구역 안의 모든 링크를 잡는다. 제목 안에 링크가 있으면 그 링크도 격자가 되고 첫 칸의 200px 에 갇힌다. 행을 위한 padding 까지 물려 h2 높이가 199px 이 됐다.
+
+## 아홉 구역에 같은 모양이 있었다
+
+같은 형태가 다른 구역 아홉 곳에도 있었다. 선택자 51개를 `li > a` 처럼 그 배치를 쓰는 요소까지 좁혔다.
+
+## CSS 만으로 막지 않았다
+
+선택자를 좁히는 것은 같은 구조가 다시 생기면 다시 새게 한다. 제목 안에 링크를 두지 않도록 구조를 바꿨고, 주제로 가는 길은 아래 한 줄이 맡는다.
+
+## 전역 규칙이 닿지 않는 화면
+
+버튼에서 상자를 걷어내는 변경이 앱 전역 규칙만 고쳤다. 게시 기록·게시 흐름·워크플로 게이트는 CSS module 을 쓰므로 그 규칙이 닿지 않아, 다른 화면에서 상자를 걷어낸 뒤에도 세 버튼만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.
+
+## 검사
+
+`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성(`display: grid|flex`, `grid-template-columns`, `padding`)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 `SETTLED` 로 명시한다. 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
+
+## 확인하지 못한 것
+
+CSS module 을 쓰는 화면은 전역 규칙이 닿지 않아 따로 고쳤다. 「지금 집중하는 것」 탭과 주제 탭의 표시 방식이 아직 다르다 — 한쪽은 파란 밑줄이고 한쪽은 알약이다.
+
+<!-- body:end -->
@@ -0,0 +1,78 @@
+---
+kind: CASE
+slug: the-rule-was-not-missing-it-was-half-there
+title: 규칙이 없었던 게 아니라 절반만 있었다
+topic: css-rules-that-leak
+topicName: CSS 규칙이 구역을 넘어 샌다
+project: TechLog
+status: 게시 전
+lastVerifiedOn: 2026-09-04
+sourceRevision: tech-log@2026-09-02
+source:
+  - final/document.md#§11.2
+---
+
+# 규칙이 없었던 게 아니라 절반만 있었다
+
+한 구역 제목만 26px 에 굵기 400 으로 나왔다. 형제 구역은 30px 에 650 이라 같은 화면에서 이 구역만 급이 낮았다. 규칙이 없었던 것이 아니라 절반만 있었다 — 크기만 각자 적혀 있고 굵기를 아무도 정하지 않아 기본값으로 떨어졌다.
+
+## 관계
+
+- **프록시 지표가 아니라 보이는 것을 측정한다**
+  이 사건에서 굳힌 기준이다.
+- **구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다**
+  같은 화면에서 난 다른 부류의 CSS 결함이다.
+- **배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다**
+  선택자 범위를 다루는 짝이 되는 기준이다.
+
+## 문제
+
+「구조별로 알게 된 것」 구역의 제목만 다른 구역보다 작고 가늘게 보였다.
+
+같은 화면에 나란히 서 있는 구역들이라 이 하나만 급이 낮아 보였다.
+
+## 결론
+
+정본 규칙은 특정 래퍼 안의 h2 를 잡는다. 그 안에 들어가지 않는 두 구역이 크기만 각자 적어 두었고, 굵기를 아무도 정하지 않아 기본값 400 으로 떨어졌다.
+
+정본 : 30px · 650
+문제의 두 구역 : 26px · 400 (크기만 각자 선언, 굵기 미지정)
+
+나란히 서는 구역 제목들이 정본과 같은 크기와 굵기를 쓰는지 CSS 를 파싱해 확인하는 검사를 뒀다. 굵기를 빼 보고 실제로 멈추는 것을 확인했다.
+
+## 검증 환경
+
+tech-log-frontend : 68538f2
+확인 방식 : 전체 페이지 스크린샷과 getComputedStyle 로 실제 렌더된 값 측정
+
+## 재현 조건
+
+1. 정본 규칙의 래퍼 밖에 구역 제목을 하나 만든다
+2. 크기만 선언하고 굵기는 선언하지 않는다
+3. 배포본에서 그 제목의 실제 크기와 굵기를 잰다
+
+## 본문
+
+<!-- body:start -->
+
+## 절반만 있었다
+
+> 규칙이 없었던 게 아니라 **절반만 있었다.** 정본은 `.section-heading-row h2` 인데 그 안에 들어가지 않는 두 구역이 **크기만 각자 적어 두어 굵기를 아무도 정하지 않았고**, 그래서 기본값 400 으로 떨어졌다.
+
+크기를 각자 적어 두었기 때문에 「규칙이 없다」로 보이지 않는다. 선언이 있고 그 선언이 절반만 덮는다.
+
+## 처음에 잘못 판단한 것
+
+> **이때 제가 저지른 판단 오류:** 처음에 grid/columns 만 측정하고 "정상"이라고 답했습니다. 사용자가 다시 지적한 뒤 **전체 페이지 스크린샷**을 찍어서야 26px/400 을 봤습니다. **프록시 지표가 아니라 보이는 것을 측정해야 합니다.**
+
+격자와 열은 정상이었다. 문제는 글자 크기와 굵기였고, 그것은 격자를 재서는 나오지 않는다.
+
+## 검사
+
+`section-heading-rank.test.ts` 가 나란히 서는 구역 제목들이 정본과 같은 `font-size` 와 `font-weight` 를 쓰는지 CSS 를 파싱해 확인한다. 굵기를 빼 보고 실제로 멈추는 것을 확인했다.
+
+## 확인하지 못한 것
+
+이 검사가 보는 것은 CSS 선언이다. 실제로 그려진 크기는 아니다 — 다른 규칙이 덮으면 선언이 같아도 결과가 갈릴 수 있다.
+
+<!-- body:end -->
@@ -0,0 +1,67 @@
+---
+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 이 됐다**
+  같은 화면에서 보이는 것을 재서 확인한 사건이다.
+- **홈의 비교 구역이 세 번 바뀌었다**
+  폭마다 측정을 남긴 기록이다.
+
+## 목적
+
+화면이 잘못됐다는 보고를 확인할 때 엉뚱한 값을 재고 「정상」이라 답하는 것을 막는다.
+
+## 규칙
+
+**보고된 증상과 같은 축의 값을 잰다**
+「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이다.
+
+**촬영을 스크립트로 고정한다**
+손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다.
+
+**폭을 고정해 여러 개를 돌고, 폭마다 측정도 함께 남긴다**
+스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다.
+
+**전체 페이지를 한 장으로 찍지 않는다**
+축소되어 글자 크기가 실제와 달라진다. 화면 높이만큼 잘라 찍는다.
+
+## 적용 조건
+
+화면이 잘못됐다는 보고를 확인하는 일. 배포본의 실제 렌더 결과를 판단 근거로 삼을 때.
+
+## 예외
+
+측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.
+
+CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.
+
+## 예시
+
+격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다.
+
+목록 간격을 바운딩 박스로만 재서 엉뚱한 구역을 결함으로 지목한 적이 있다.
+
+브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 방문자 대부분이 보지 않는 배치를 놓고 디자인을 논하게 된다.
+
+전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다.
@@ -0,0 +1,62 @@
+---
+kind: REFERENCE
+slug: scope-a-layout-rule-to-what-uses-it
+title: 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다
+topic: css-rules-that-leak
+topicName: CSS 규칙이 구역을 넘어 샌다
+project: TechLog
+status: 게시 전
+verifiedOn: 2026-09-04
+sourceRevision: tech-log@2026-09-02
+source:
+  - final/document.md#§11.1
+---
+
+# 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다
+
+구역 클래스 아래에 태그 선택자로 배치를 걸면 그 구역 안의 모든 같은 태그가 걸린다. 제목 안의 링크가 행용 격자에 갇혀 h2 높이가 199px 이 됐다. 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다.
+
+## 관계
+
+- **구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다**
+  이 기준의 근거 사건이다.
+- **프록시 지표가 아니라 보이는 것을 측정한다**
+  이 부류를 확인하는 방법이 그 기준에 있다.
+- **규칙이 없었던 게 아니라 절반만 있었다**
+  같은 화면에서 난 다른 부류의 CSS 결함이다.
+
+## 목적
+
+「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.
+
+## 규칙
+
+**배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다**
+`display: grid|flex`, `grid-template-columns`, `padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
+
+**CSS 만으로 막지 않고 구조도 본다**
+선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.
+
+**이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다**
+예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.
+
+**전역 규칙과 CSS module 이 섞인 화면을 따로 센다**
+전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.
+
+## 적용 조건
+
+구역 클래스 아래에 태그 선택자로 배치를 거는 CSS. 같은 구역 안에 제목과 목록이 함께 있으면 특히 걸린다.
+
+## 예외
+
+색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
+
+구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.
+
+## 예시
+
+비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
+
+같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
+
+`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성이 걸려 있으면 멈춘다.