Files
document-haness/docs/TechLog/tech-log-studio/css-rules-that-leak/case/case-the-rule-was-not-missing-it-was-half-there.md
T
DongHyeonkaandClaude Opus 5 0650d91def docs(TechLog): 설명 뒤에 붙은 평가·예고·되풀이를 걷어낸다
rewriting-technical-prose-naturally 를 서브에이전트 셋으로 나눠 56편에 적용했다.
ai-tells.md 의 첫 절대로 다른 표현으로 바꾸는 대신 문장을 통째로 지웠다.

  설명한 것의 중요성을 다시 평가하는 꼬리   19
  이미 설명한 것을 추상어로 되풀이           19
  독자에게 읽는 법을 지시하거나 오해를 가정   9
  자료가 뒷받침하지 않는 덧붙인 이득          4

문서군 전체의 문형 편중도 풀었다 — 함께 27→7(한 묶음), 그대로 22→12(두 묶음),
하게 된다 1→0. 한 편에서 세 번 반복되던 「같은 병이 ~에서도 났다」와 두 기록에
같은 문장으로 있던 세 쌍을 갈랐다.

계약 제목 「여덟 자리」가 본문의 「여덟 곳」과 어긋나 있었다. 제목이 spatial-metaphor
규칙에도 걸리므로 계약과 기록을 함께 「여덟 곳」으로 맞췄다.

검사 넷 전부 통과한다 — check_prose 56편 error 0 · check_body PASS ·
check_evidence --repo 문제 없음 · verify-tech-log-tree error 0 warn 0.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-07 16:03:16 +09:00

3.5 KiB

kind, slug, title, topic, topicName, project, status, lastVerifiedOn, sourceRevision, source
kind slug title topic topicName project status lastVerifiedOn sourceRevision source
CASE the-rule-was-not-missing-it-was-half-there 규칙이 없었던 게 아니라 절반만 있었다 css-rules-that-leak CSS 규칙이 구역을 넘어 샌다 TechLog 게시 전 2026-09-04 tech-log@2026-09-02
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. 배포본에서 그 제목의 실제 크기와 굵기를 잰다

본문

절반만 있었다

규칙이 없었던 게 아니라 절반만 있었다. 정본은 .section-heading-row h2 인데 그 안에 들어가지 않는 두 구역이 크기만 각자 적어 두어 굵기를 아무도 정하지 않았고, 그래서 기본값 400 으로 떨어졌다.

크기를 각자 적어 두었기 때문에 「규칙이 없다」로 보이지 않는다.

처음에 잘못 판단한 것

이때 제가 저지른 판단 오류: 처음에 grid/columns 만 측정하고 "정상"이라고 답했습니다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px/400 을 봤습니다. 프록시 지표가 아니라 보이는 것을 측정해야 합니다.

격자와 열은 정상이었다. 어긋난 것은 글자 크기와 굵기였고, 격자를 재서는 그 값이 나오지 않는다.

검사

section-heading-rank.test.ts 가 나란히 서는 구역 제목들이 정본과 같은 font-sizefont-weight 를 쓰는지 CSS 를 파싱해 확인한다. 굵기를 빼 보고 실제로 멈추는 것을 확인했다.

확인하지 못한 것

이 검사가 보는 것은 CSS 선언이다. 실제로 그려진 크기는 아니다 — 다른 규칙이 덮으면 선언이 같아도 결과가 갈릴 수 있다.