히어로와 파이프라인이 같은 씬을 쓰던 것을 나눈다

게이트 씬을 파이프라인으로 옮기면서 히어로에도 남겨뒀더니 같은 그림이
페이지에 두 번 나왔다. 역할이 다르면 씬도 달라야 한다.

  히어로     shader-plane 흐름 필드   노이즈를 두 번 접어 빛의 결을 만든다
                                      공간을 만드는 재질. 아무것도 반응 안 한다
  파이프라인 gate-scene 유리판 여섯   통과하면 그 단계가 켜진다. 주인공
  재료       shader-plane 스테이지    필터 타일이 앉는 무대

히어로에는 무거운 씬을 임포트하지 않는다 — three.md §0 대로 셰이더 플레인 하나다.
lib/hero-scene.ts -> lib/gate-scene.ts 로 리네임했다. 이름이 용도와 다르면
다음 사람이 히어로 것인 줄 알고 고친다.

대비 실측: 캔버스 배경 최악 8.46:1(가장 밝은 중앙 여백), h1 자리 14.83:1.
readPixels 로 재려다 전부 0 이 나왔다 — preserveDrawingBuffer: false 면
버퍼가 비어 있다. 스크린샷 픽셀로 쟀고, 글자 없는 영역만 골랐다.

스킬 three.md
  씬을 두 자리에 재사용하지 마라. 역할(주인공/재질/무대)로 나눠라
  파일 이름을 용도와 맞춰라
  WebGL 위 대비는 readPixels 가 아니라 스크린샷 픽셀로 잰다.
  0 을 검정으로 착각하면 대비가 통과한 것처럼 보인다

apps/site/design.md

@@ -246,6 +246,27 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다
 | 사례 | `drift` 0.4 | 두 결과물이 흐르는 자리라 배경도 같이 흐른다 |
 | 조판 | `drift` 0.25 | **종이는 손에 닿는 거리다.** 원경으로 두면 거짓말이 된다 |
 
+### three.js 씬 셋은 서로 다른 것이어야 한다
+
+게이트 씬을 파이프라인으로 옮기면서 히어로에도 그대로 남겨뒀더니
+**같은 그림이 페이지에 두 번** 나왔다. 히어로를 다른 것으로 바꿨다.
+
+| 자리 | 씬 | 무엇 |
+|---|---|---|
+| 히어로 | `shader-plane` 흐름 필드 | 노이즈를 두 번 접어 빛이 유리를 지난 결을 만든다. 공간을 만드는 **재질** |
+| 파이프라인 | `gate-scene` 유리판 여섯 장 | 스크롤하면 통과하고 그 단계가 켜진다. 의미를 가진 **주인공** |
+| 재료 | `shader-plane` 스테이지 | SVG 필터 타일이 앉는 무대 |
+
+히어로에는 무거운 씬을 임포트하지 않는다 — `three.md` §0 이 권하는 대로
+**셰이더 플레인 하나**다. 파일 이름도 `hero-scene.ts` → `gate-scene.ts` 로 고쳤다.
+이름이 실제 용도와 다르면 다음 사람이 히어로 것인 줄 알고 고친다.
+
+캔버스 배경 위 본문 대비 실측(스크린샷 픽셀): 최악 **8.46:1**(가장 밝은 중앙 여백),
+h1 자리 14.83:1.
+
+> `readPixels` 로 재려다 전부 0 이 나왔다. `preserveDrawingBuffer: false` 면 버퍼가
+> 비워져 있다. **WebGL 위 대비는 스크린샷 픽셀로 재라.**
+
 ### 게이트 씬을 파이프라인으로 옮겼다
 
 히어로에서 뺐던 유리판 여섯 장을 여기로 되살렸다. **같은 씬인데 자막이 필요 없어졌다.**