docs(TechLog): 주제 7~10 을 다시 쓴다

주소가 게시 시점에 굳어 저장되는 구조, 축 링크를 두 번 옮긴 순서, 한글 slug 가 간헐적으로 보인 두 가지 어긋남을 표로 갈랐다. 화면이 실패를 없음으로 그릴 때 작성 도구에서 왜 더 오래 숨는지, Promise.all 이 거절과 던짐에서 다른 경로를 타는 이유를 채웠다. CSS module 이 왜 전역 규칙에 닿지 않는지, 403 과 404 가 원인을 어떻게 좁혔는지도 적었다. link-audit.py 를 감사 Case 의 evidence 로 걸어 배정한 증거 하나를 메웠다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-07 19:06:20 +09:00
parent 193da20d09
commit b1653dbba8
15 changed files with 204 additions and 92 deletions
@@ -76,23 +76,33 @@ tech-log-frontend : 344dadb · 805d400 · 8c5dbe1
 }
 ```

-`a` 는 구역 안의 모든 링크를 잡는다. 제목 안에 링크가 있으면 그 링크도 격자가 되고 첫 칸의 200px 에 갇힌다. 행을 위한 padding 까지 물려 h2 높이가 199px 이 됐다.
+선택자가 구역 클래스 아래의 `a` 이므로 그 구역 안의 모든 링크가 걸린다. 제목 안에 링크가 있으면 그 링크도 격자가 되고 첫 칸의 200px 에 갇힌다.
+
+제목은 한 줄로 들어갈 길이였는데 200px 안에서 두 줄로 접혔고, 행을 위한 위아래 padding 까지 물려 h2 높이가 199px 이 됐다. 같은 이유로 주제 화면의 안내 문단도 행의 크기와 색으로 덮여 있었다.
+
+사용자가 원인을 정확히 짚어 주었다 — 「디자인이 안 된 게 아니라 CSS 선택자가 새고 있습니다」.

 ## 아홉 구역에 같은 모양이 있었다

 같은 형태가 다른 구역 아홉 곳에도 있었다. 선택자 51개를 `li > a` 처럼 그 배치를 쓰는 요소까지 좁혔다.

+`li > a` 는 목록 항목의 바로 아래 링크만 잡는다. 제목 안의 링크는 목록 항목의 자식이 아니므로 걸리지 않는다.
+
 ## CSS 만으로 막지 않았다

-선택자를 좁혀도 같은 구조가 다시 생기면 다시 샌다. 제목 안에 링크를 두지 않도록 구조를 바꿨고, 주제로 가는 길은 아래 한 줄이 맡는다.
+선택자를 좁히는 것은 같은 구조가 다시 생기면 다시 샌다. 제목 안에 링크를 두지 않도록 구조를 바꿨고, 주제로 가는 길은 아래 한 줄이 맡는다.

 ## 전역 규칙이 닿지 않는 화면

-버튼에서 상자를 걷어내는 변경이 앱 전역 규칙만 고쳤다. 게시 기록·게시 흐름·워크플로 게이트는 CSS module 을 쓰므로 그 규칙이 닿지 않아, 다른 화면에서 상자를 걷어낸 뒤에도 「Snapshot 보기」·「게시 취소」·「적용」만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.
+버튼에서 상자를 걷어내는 변경이 앱 전역 규칙만 고쳤다. 게시 기록·게시 흐름·워크플로 게이트는 CSS module 을 쓰므로 그 규칙이 닿지 않는다 — module 은 클래스 이름을 빌드 때 바꿔 전역 선택자와 겹치지 않게 만드는 방식이라, 전역에서 그 클래스를 가리킬 방법이 없다.
+
+다른 화면에서 상자를 걷어낸 뒤에도 「Snapshot 보기」·「게시 취소」·「적용」 세 버튼만 테두리와 파란 채움으로 남았다. 한 화면 안에서 두 언어가 섞여 더 눈에 띄었다.

 ## 검사

-`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성(`display: grid|flex`, `grid-template-columns`, `padding`)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 `SETTLED` 로 명시한다. 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
+`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성(`display: grid|flex`, `grid-template-columns`, `padding`)이 걸려 있으면 멈춘다. 이미 좁혀 둔 곳은 `SETTLED` 로 명시한다.
+
+색이나 글꼴만 거는 규칙은 대상이 아니다. 새어도 티가 나지 않으므로 검사에 넣으면 결과가 늘 빨갛고, 그러면 곧 읽히지 않는다.

 ## 확인하지 못한 것

@@ -59,17 +59,26 @@ tech-log-frontend : 68538f2

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

-크기를 각자 적어 두었기 때문에 「규칙이 없다」로 보이지 않는다.
+크기를 각자 적어 두었기 때문에 「규칙이 없다」로 보이지 않는다. 선언이 있고 그 선언이 절반만 덮는다.
+
+| | 정본 | 문제의 두 구역 |
+|---|---|---|
+| 크기 | 30px | 26px (각자 선언) |
+| 굵기 | 650 | 400 (아무도 선언하지 않음) |
+
+같은 화면에 나란히 서 있는 구역들이라 이 둘만 급이 낮아 보였다.

 ## 처음에 잘못 판단한 것

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

-격자와 열은 정상이었다. 어긋난 것은 글자 크기와 굵기였고, 격자를 재서는 그 값이 나오지 않는다.
+격자와 열은 정상이었다. 보고된 증상은 글자 크기와 굵기였는데 다른 축을 재고 답했다.

 ## 검사

-`section-heading-rank.test.ts` 가 나란히 서는 구역 제목들이 정본과 같은 `font-size` 와 `font-weight` 를 쓰는지 CSS 를 파싱해 확인한다. 굵기를 빼 보고 실제로 멈추는 것을 확인했다.
+`section-heading-rank.test.ts` 가 나란히 서는 구역 제목들이 정본과 같은 `font-size` 와 `font-weight` 를 쓰는지 CSS 를 파싱해 확인한다.
+
+굵기를 빼 보고 실제로 멈추는 것을 확인한 뒤 커밋했다. 확인하지 않았다면 그 구역들이 원래 정본을 쓰고 있어서 통과한 것인지 검사가 그 구역을 안 보는 것인지 구별되지 않는다.

 ## 확인하지 못한 것

@@ -36,19 +36,21 @@ source:

 ### 1. 보고된 증상과 같은 축의 값을 잰다

-「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이다.
+「제목이 작아 보인다」는 글자 크기와 굵기다. 격자와 열은 다른 축이라, 그것이 정상이라는 답으로는 보고한 사람이 본 것을 설명하지 못한다.
+
+목록 간격을 바운딩 박스로만 재서 엉뚱한 구역을 결함으로 지목한 적도 있다. 박스가 겹치는 것과 눈에 보이는 간격이 다르기 때문이다.

 ### 2. 촬영을 스크립트로 고정한다

-손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다.
+손으로 찍으면 뷰포트와 축소 배율이 매번 달라진다. 브라우저 세션이 리셋되면 창은 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 방문자 대부분이 보지 않는 배치를 놓고 디자인을 논하게 된다.

-### 3. 폭을 고정해 여러 개를 돌고, 폭마다 측정값도 남긴다
+### 3. 폭을 고정해 여러 개를 돌고 폭마다 측정도 함께 남긴다

-스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다.
+스크린샷만 남기면 나중에 그 값이 얼마였는지 다시 잴 수 없다. 폭마다 계산된 스타일을 함께 적어 두면 다음에 무엇이 달라졌는지 대조할 수 있다.

 ### 4. 전체 페이지를 한 장으로 찍지 않는다

-축소되어 글자 크기가 실제와 달라진다. 화면 높이만큼 잘라 찍는다.
+축소되어 글자 크기가 실제와 달라진다. 1425x4466 이 638x2000 으로 들어오면 17px 글자가 7~8px 이 되고, 그 그림에서는 크기 문제를 볼 수 없다. 화면 높이만큼 잘라 찍는다.

 ## 적용 조건

@@ -60,15 +62,11 @@ source:
 ## 예외

 - 측정 대상이 좌표나 간격 자체라면 바운딩 박스는 프록시가 아니라 대상이다.
-
 - CSS 선언이 정본과 같은지를 보는 검사는 렌더 결과를 재지 않는다. 그 검사가 덮는 범위를 알고 쓰면 된다.

 ## 예시

- 격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다.
-
- 목록 간격을 바운딩 박스로만 재서 「판단 기준」을 결함으로 잘못 지목한 적이 있다.
-
- 브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이라, 877px 에서 본 배치는 방문자 대부분이 보는 배치가 아니다.
-
- 전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다.
+- 격자와 열만 재고 「정상」이라 답했다. 사용자가 다시 지적한 뒤 전체 페이지 스크린샷을 찍어서야 26px 과 400 을 봤다
+- 목록 간격을 바운딩 박스로만 재서 엉뚱한 구역을 결함으로 지목한 적이 있다
+- 브라우저 세션이 리셋되면 창이 약 877px 로 돌아가는데 이 사이트의 분기는 1179·1050·900·767 이다
+- 전체 페이지를 한 장으로 찍으면 1425x4466 이 638x2000 으로 들어와 17px 글자가 7~8px 이 된다
@@ -27,25 +27,29 @@ source:

 ## 목적

-「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.
+「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다.
+
+이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다. 그래서 규칙을 읽어서는 틀린 것을 찾을 수 없고, 그려진 결과를 봐야 한다.

 ## 규칙

 ### 1. 배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다

-`display: grid|flex`, `grid-template-columns`, `padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
+`display: grid|flex`·`grid-template-columns`·`padding` 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
+
+행을 위한 격자를 구역 전체에 걸면 제목 안의 링크도 그 격자가 된다. 첫 칸 너비에 갇혀 접히고 행용 padding 까지 물린다.

 ### 2. CSS 만으로 막지 않고 구조도 본다

-선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.
+선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫고, 주제로 가는 길은 별도의 한 줄이 맡는다.

 ### 3. 이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다

-예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.
+예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다. 뺀 것이 코드에 이름으로 남아 다음 사람이 세어 볼 수 있어야 한다.

 ### 4. 전역 규칙과 CSS module 이 섞인 화면을 따로 센다

-전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.
+module 은 클래스 이름을 빌드 때 바꿔 전역 선택자와 겹치지 않게 만든다. 그래서 전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않고, 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.

 ## 적용 조건

@@ -56,14 +60,11 @@ source:

 ## 예외

- 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
-
+- 색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다. 검사에 넣으면 결과가 늘 빨갛다.
 - 구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.

 ## 예시

- 비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
-
- 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
-
-`section-selector-scope.test.ts` 가 `.클래스 태그` 모양에 배치 속성이 걸려 있으면 멈춘다.
+- 비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇히고 h2 높이가 199px 이 됐다
+- 같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다
+- 전역 규칙만 고쳐서 CSS module 을 쓰는 세 버튼만 테두리와 파란 채움으로 남았다