release: v0.10.0

packages/skill/references/layout.md

@@ -55,6 +55,43 @@
 3. **시선을 한 번은 멈춰라** — 전부 같은 리듬으로 흐르면 아무것도 강조되지 않는다. 섹션 하나는 리듬을 깨야 한다
 4. **스크롤은 보상이어야 한다** — 다음 화면에 무언가 새로운 것이 있어야 한다. 같은 카드 그리드가 세 번 반복되면 거기서 이탈한다
 
+### 의미가 다르면 섹션 토폴로지도 달라야 한다
+
+일관성은 같은 거시 그리드를 복제하는 것이 아니다. **연속한 섹션의 역할이 다른데 모두 `왼쪽 큰 제목 + 오른쪽 목록`이면 구조 슬롭**이다. 색·배경·카드 radius를 바꿔도 읽는 동작은 같다.
+
+2단계에서 섹션 역할과 토폴로지를 나란히 적는다.
+
+| 역할 | 맞는 토폴로지 예 |
+|---|---|
+| 장소·관계 | 지도/도식 + 접근 가능한 목록 쌍둥이 |
+| 비용·사양 | 원장·명세서·비교표 |
+| 절차·판정 | 흐름·분기·상태 전이 |
+| 이미지·재질 | 풀블리드·필름스트립·캡션 |
+| 입력·결과 | 폼 + 결과 인스펙터 |
+
+**다르게 보이기 위해 억지로 바꾸지는 마라.** 같은 데이터 묶음을 반복하는 목록은 같은 구조가 맞다. 규칙은 `의미 역할이 다르면 읽는 동작도 달라야 한다`다. 연속 3개 섹션의 DOM 골격과 회색조 실루엣이 같다면, 그중 둘의 정보 구조부터 다시 설계한다.
+
+### 같은 액션 행의 직접 자식은 클릭 박스 중심을 잰다
+
+한 액션 묶음의 **같은 행에 놓인 직접 자식**인 채운 버튼과 텍스트 링크는 `align-items:center`만으로 시각 중심이 맞지 않을 수 있다. 중첩된 아이콘·배지까지 한꺼번에 비교하거나, 모바일에서 세로로 쌓인 액션에 이 규칙을 적용하면 오탐이다.
+
+- 두 액션 모두 `inline-flex; align-items:center; min-height:44px`의 실제 hitbox를 가진다
+- `getBoundingClientRect()`의 중심 y 차이가 브라우저 CSS 픽셀 기준 2px 이하여야 한다
+- 텍스트 baseline이 아니라 클릭 가능한 박스 전체를 비교한다
+- 보조 링크를 44px로 키우면서 빈 padding이 과해지면 액션을 세로로 쌓는다
+
+### 패널을 숨기면 그리드 트랙도 회수한다
+
+데스크톱 목록+인스펙터 분할 작업대에서 패널만 `display:none`으로 숨기고 2열 `grid-template-columns`를 유지하면 큰 빈 면이 남는다. 닫힌 상태는 가시성 변화가 아니라 **레이아웃 상태 변화**다. 모바일에서 인스펙터가 시트·전체 화면으로 열리는 구조에는 데스크톱 2px 트랙 계약을 그대로 적용하지 않고, 시트 닫힘·배경 복귀·포커스 복원을 별도로 잰다.
+
+```css
+.workbench { grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr); }
+.workbench.is-inspector-closed { grid-template-columns: minmax(0, 1fr); }
+.workbench.is-inspector-closed .inspector { display: none; }
+```
+
+닫힘 상태에서 목록 오른쪽 끝과 작업대 오른쪽 끝의 차이를 2px 이하로 재고, 행 선택 뒤 2열이 복원되는 것도 함께 단언한다.
+
 ---
 
 ## 3. 타이포그래피
@@ -183,9 +220,12 @@ new Set([...document.querySelectorAll('.nav a')]
 - [ ] CSS/HTML만으로 페이지가 완성됐다. JS를 꺼도 읽힌다
 - [ ] 모든 값이 3단계 토큰에서 나온다. 하드코딩된 px/색이 없다
 - [ ] 첫 화면에 메시지가 셋 이하다
+- [ ] 의미 역할이 다른 연속 섹션이 같은 거시 그리드를 3회 반복하지 않는다. 반복 데이터면 같은 구조를 유지한 이유가 적혀 있다
 - [ ] 본문에 `--measure` 가 적용됐다
 - [ ] 모바일 폭 **320px**(iPhone SE 세로)에서 가로 스크롤이 없다
 - [ ] 키보드 Tab 만으로 모든 인터랙티브 요소에 도달한다. 포커스 링이 보인다
+- [ ] 같은 행 액션 묶음의 직접 자식 hitbox가 44px 이상이고 중심 y 차이가 CSS 픽셀 2px 이하다
+- [ ] 데스크톱 분할 패널을 숨긴 상태에서 빈 그리드 트랙이 남지 않고 주 표면이 전체 폭을 회수한다. 모바일 시트는 닫힘·배경·포커스 복원을 따로 검증한다
 - [ ] 한글이 있다면 조판 규칙이 적용됐다
 
 > 근거: research/references/02-methodology.md, 03-trends-2026.md, 04-ai-slop-signatures.md (조사일 2026-08-20)