히어로를 국소 레퍼런스로 다시 잡고, 국소 경로에 1′ 단계를 넣는다

히어로를 고치면서 레퍼런스를 다시 보지 않았다. lusion 하나에서 얻은
원리만 들고 판 폭과 액자 비율을 네 번 고쳤다 — 전부 계산이지 근거가 아니었다.

국소 레퍼런스 실측
  lusion.co         3D 가 첫 화면의 71%, h1 36px, 텍스트는 캔버스 위
  basement.studio   3D 가 100%, h1 87px 은 캔버스 아래(y=916)
  railway.com       h1 54px 1줄, 미디어는 그 아래
  우리(고치기 전)   3D 52% / 텍스트 43% — 둘 다 어중간

셋 다 3D 와 텍스트를 세로로 분리하고 3D 에 70% 이상을 준다.
CTA 가 첫 화면에 있어야 하므로 basement 형이 아닌 lusion 비율을 택했다.
현행 텍스트 24% / 액자 59%, 링크는 액자 캡션 줄로 내렸다.

3D 형태
  판 15x6 으로 액자 비율과 일치시켰다. 좁으면 통과 내내 좌우 테두리가
  남아 세로 기둥으로 보이고, 낮으면 액자 경계와 겹쳐 이중선이 된다
  sway 를 0.16+0.05i 로 되돌렸다. 키우니 문이 아니라 쌓아둔 사각형이 됐다
  모바일 액자 4/3 -> 1/1 (화면의 27% -> 36%)

스킬
  SKILL.md 0단계: 연장·국소 경로에 1′(국소 레퍼런스 1개) 추가.
  design.md 는 방향과 토큰까지만 답하고 형태를 답하지 않는다. 그 빈칸을
  메우는 것이 기본값이고 기본값의 총합이 슬롭이다. galleries.md 의
  국소 브리프 표에 진입점이 없던 것을 연결했다
This commit is contained in:
Yun Chan 2026-08-20 13:44:29 +09:00
parent 9648d1d82a
commit 4b853355e3
4 changed files with 83 additions and 16 deletions

View file

@ -37,6 +37,28 @@
**접근 실패 기록** — `iglooinc.com` 은 hugedomains 파킹으로 302, `lasvit.com` 은 403.
`reference-method.md` §3-b 가 경고한 그대로였다. 왕복 세 번에서 끊고 우회했다.
### 히어로 국소 레퍼런스 (1)
R1~R3 로 구조를 잡은 뒤에도 히어로가 어색해서 **국소 브리프 표**로 두 곳을 더 실측했다.
`design.md` 는 "3D 는 액자 안"까지만 답하고 **액자가 화면의 몇 %여야 하는지는 답하지 않는다.**
| 사이트 | 3D 영역 | 텍스트 위치 | h1 |
|---|---|---|---|
| lusion.co | 1440×645 = 첫 화면의 **71%** | 캔버스 **위**, 조밀하게 | 36px |
| basement.studio | 1425×900 = **100%** | 캔버스 **아래**(y=916) | 87px, weight 600 |
| railway.com | SVG 1062×755, h1 아래 | 중앙 상단 | 54px, **1줄** |
| **우리(고치기 전)** | 1352×465 = **52%** | 위 380px | 41.5px |
셋 다 3D 와 텍스트를 세로로 완전히 분리하고, 3D 가 첫 화면의 **70% 이상**을 먹는다.
우리는 텍스트 43% / 3D 52% 로 **둘 다 어중간했다.** basement 형(첫 화면 전체 3D)은 CTA 가
첫 화면에서 밀려나므로 전환이 목적인 우리에게 맞지 않는다. lusion 비율을 택했다.
**현행: 텍스트 24% · 액자 59% · 캡션과 링크가 액자 아래 한 줄.**
링크(저장소·npm)를 텍스트 블록에서 액자 캡션 줄로 내려 상단을 비웠다.
**레퍼런스를 보기 전에 네 번 고쳤다.** 판 폭 7.4 → 15, 액자 비율 16/7 → 16/5.5 → 16/6.6 → 16/6,
sway 0.5 → 0.9 → 0.16. 전부 계산이지 근거가 아니었다. 레퍼런스 두 곳을 재자 한 번에 정리됐다.
## 한 문장 컨셉
> **검사대 위의 물체.** 액자가 게이트고, 안에 든 것이 검사 중인 디자인이고, 밖의 글자가 판정 기록이다.
@ -146,6 +168,15 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다
- **언어 자동 리다이렉트 / 국기 아이콘** — 사용자를 놀라게 하고, 언어는 국가가 아니다
- **두 판을 번역으로 만들기** — 각 언어판을 따로 썼다
## 히어로 3D 의 형태 결정
- 판 **15 × 6** (액자 비율 2.5:1 과 일치). 첫 판이 화면을 완전히 덮어 이미 첫 게이트 안에 들어와 있다
- 판이 화면보다 좁으면 통과하는 내내 좌우 테두리가 남아 **세로 기둥 두 개**로 보인다. 실제로 그렇게 보였다
- 판 높이가 시야보다 작으면 위아래 테두리가 액자 경계에 겹쳐 **이중선**이 된다
- 어긋남(sway)은 `0.16 + 0.05i` 로 아주 작게. 키우면 '통과하는 문'이 아니라 **쌓아둔 사각형**이 된다.
중심축이 살아야 원근이 터널로 읽힌다
- `GATE_GAP` 6.4, 카메라 시작 z 7.2
## 다음 실행이 해야 할 일
1. **배포 후 Lighthouse 로 첫 인터랙션·LCP·CLS 를 재고 "미측정" 을 채운다.** 채우기 전까지 비워둔다