From 54ec6fa582bb7a45e6c36e83051fdf7b5a31d22f Mon Sep 17 00:00:00 2001 From: Yun Chan Date: Thu, 20 Aug 2026 16:16:49 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=A8=EB=9F=B4=EB=9E=99=EC=8A=A4=EB=A5=BC?= =?UTF-8?q?=20=EB=A7=88=EB=AC=B4=EB=A6=AC=ED=95=9C=EB=8B=A4=20=E2=80=94=20?= =?UTF-8?q?=EC=9B=90=EA=B2=BD=C2=B7=EC=A4=91=EA=B2=BD=C2=B7=EA=B7=BC?= =?UTF-8?q?=EA=B2=BD=20=EC=84=B8=20=EA=B9=8A=EC=9D=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 전 레이어를 실측하고 지도를 design.md 에 남겼다. 히어로 배경 셰이더 흐름 필드 scroll() +56px 하강 히어로 글자 scroll() -88px 상승 (반대 방향) 파이프라인 게이트 씬 sticky 6단계 통과 단계명 — 0 고정 산출물 view() ±14px 재료·설치·프리플라이트 사진 fixed 0 — 원경 사례 사진 drift 0.4 이미지 높이의 28.6% 조판 종이 drift 0.25 -122px — 근경 재료 타일 view() ±26 / ±58px 프리플라이트 항목 view() 6 -> 10px 수치 없음 의도적 정지 세 깊이가 다 있다. 종이를 원경으로 두지 않은 것은 손에 닿는 거리의 재질이기 때문이다. 한 층(단계명·수치)은 고정이어야 기준이 생긴다. 모바일 390px 에서도 fixed 가 유지된다 — background-attachment 를 안 쓴 덕이다. prefers-reduced-motion 에서는 게이트 씬이 시작하지 않고, 고정 배경은 absolute 로 돌아가며, view() 애니메이션이 전부 꺼진다. 최종 검사: 토큰 밖 색상 0 · radius 2종 · 100vh 0 · scroll 리스너 0 · 하드코딩 웨이트 0 · 가로 스크롤 0(390/1440) · 테스트 22개 통과 --- apps/site/design.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/apps/site/design.md b/apps/site/design.md index 4607976..27f855f 100644 --- a/apps/site/design.md +++ b/apps/site/design.md @@ -189,6 +189,33 @@ WebGL 게이트: `prefers-reduced-motion` 이면 **아예 시작하지 않는다 `ResizeObserver` 로 캔버스를 따라가게 했다. `window.resize` 만 듣던 동안 히어로 높이 변화를 놓쳐 배경이 화면의 3분의 2만 덮고 아래가 검게 비었다. +## 패럴랙스 지도 (실측) + +깊이가 다른 층을 겹쳐 시차를 만든다. **한 층은 반드시 고정이다** — +전부 움직이면 기준이 없어 그냥 흔들리는 페이지가 된다. + +| 자리 | 층 | 방식 | 실측 이동 | +|---|---|---|---| +| 히어로 배경 | 셰이더 흐름 필드 | `scroll(root)` | **+56px** ↓ | +| 히어로 글자 | | `scroll(root)` | **−88px** ↑ (반대 방향) | +| 파이프라인 | 게이트 씬(three.js) | `sticky` + 카메라 | 6단계를 통과 | +| ㅤ└ 단계명 | | — | **0** 고정 | +| ㅤ└ 산출물 | | `view()` | ±14px | +| 재료 · 설치 · 프리플라이트 | 배경 사진 | `fixed` | **0 — 원경** | +| 사례 | 배경 사진 | `drift` 0.4 | 이미지 높이의 28.6% | +| 조판 | 종이 | `drift` 0.25 | −122px (근경) | +| 재료 타일 | | `view()` | ±26 / ±58px | +| 프리플라이트 항목 | | `view()` | 6 → 10px (뒤일수록 늦게) | +| **수치** | | **없음** | 의도적 정지 | + +세 가지 깊이가 다 있다 — **원경**(fixed) · **중경**(drift) · **근경**(콘텐츠와 함께). +종이를 원경으로 두지 않은 이유는 손에 닿는 거리의 재질이기 때문이다. + +모바일(390px)에서도 `fixed` 가 유지된다. `background-attachment: fixed` 를 안 쓴 덕이다. + +`prefers-reduced-motion` 에서는 게이트 씬이 아예 시작하지 않고, 고정 배경은 +`position: absolute` 로 흐름에 돌아가며, 모든 `view()` 애니메이션이 꺼진다. + ## 모션 문법 — 섹션마다 다른 말 같은 패럴랙스를 전부에 걸면 벽지다. 각 섹션의 주장을 움직임으로 옮겼다.