From 8267905c0c7ca3407eb9a18d0f7b71ddaf445e73 Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Thu, 20 Aug 2026 16:37:49 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EB=91=90=EB=A6=AC=20=EA=B4=91?=
 =?UTF-8?q?=EC=9D=84=20=ED=9A=8C=EC=A0=84=EC=8B=9C=ED=82=A4=EA=B3=A0=20thr?=
 =?UTF-8?q?ee.js=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=8C=80=EC=9D=91?=
 =?UTF-8?q?=EC=9D=84=20=EA=B3=A0=EC=B9=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

회전 테두리
  conic 의 각도를 @property 로 돌리면 매 프레임 배경을 다시 칠한다 —
  컴포지터에서 못 돌고 메인 스레드가 페인트한다(하드 게이트 8).
  정사각형 원뿔 레이어를 마스크 안에서 rotate 시켰다. transform 만 움직인다.
  aspect-ratio: 1 이라야 회전 중 밝기가 일정하고,
  width: 200% 라야 1178x52 헤더에서 모서리까지 닿는다. 주기 11초.

three.js 모바일
  세로 화면에서 게이트가 통째로 안 보이고 있었다.
  수직 시야는 화면 비율과 무관하지만 수평 시야는 aspect 에 비례한다.
  데스크톱(2.5:1)에서 정한 판 폭 15 가 세로 화면(0.45:1)의 수평 시야
  2.5 에 비해 여섯 배라, 첫 판이 화면을 완전히 덮었다.
  fit() 에서 camera.aspect 를 갱신할 때 판의 scale.x 도 같이 잡는다.

  저사양 판정도 고쳤다. hardwareConcurrency <= 4 만 보면 요즘 폰이 전부
  고사양으로 잡힌다(8코어가 흔하다). innerWidth < 760 을 함께 본다.
  DPR 1.5 -> 1.25, 캔버스 불투명도 0.7 -> 0.45(세로는 화면 전체를 덮는다).

스킬
  svg-filters.md  테두리 광 회전은 각도가 아니라 정사각형 레이어 rotate
  three.md        지오메트리를 화면 비율에 맞춰 다시 잡아라
                  저사양 판정에 화면 폭을 넣어라
---
 apps/site/design.md                      | 22 +++++++++++
 apps/site/src/components/Materials.astro |  1 +
 apps/site/src/components/Pipeline.astro  |  4 ++
 apps/site/src/layouts/Base.astro         |  1 +
 apps/site/src/lib/gate-scene.ts          | 25 ++++++++++--
 apps/site/src/styles/base.css            | 48 ++++++++++++++++++++++++
 packages/skill/references/svg-filters.md | 32 ++++++++++++++++
 packages/skill/references/three.md       | 41 ++++++++++++++++++++
 8 files changed, 171 insertions(+), 3 deletions(-)

diff --git a/apps/site/design.md b/apps/site/design.md
index 27f855f..b513a46 100644
--- a/apps/site/design.md
+++ b/apps/site/design.md
@@ -286,6 +286,28 @@ conic 은 중심에서 각도로 도는데, 1180×54 처럼 납작한 형태에
 유리가 차갑게만 보이지 않게 하는 정도이고, 밝은 밴드에서는 흰빛 대신
 그림자로 뒤집는다(`--glass-rim`·`--glass-bloom` 을 `.band-inverse` 에서 재정의).
 
+### 테두리 광을 회전시켰다
+
+정지한 헤어라인 위에 **도는 빛**을 얹었다. `conic` 의 각도를 `@property` 로 돌리면
+매 프레임 배경을 다시 칠하므로(하드 게이트 #8), **정사각형 원뿔 레이어를 마스크 안에서
+`rotate` 시킨다.** 움직이는 것은 transform 뿐이다.
+
+`aspect-ratio: 1` 로 정사각형을 유지해야 회전 중 밝기가 일정하고,
+`width: 200%` 로 크게 잡아야 1178×52 짜리 헤더에서도 모서리까지 닿는다. 주기 11초.
+
+### three.js 모바일 대응
+
+**세로 화면에서 게이트가 통째로 안 보이고 있었다.** 수직 시야는 화면 비율과 무관하지만
+수평 시야는 aspect 에 비례한다 — 데스크톱(2.5:1)에서 정한 판 폭 15 가
+세로 화면(0.45:1)의 수평 시야 2.5 에 비하면 **여섯 배**라, 첫 판이 화면을 완전히 덮었다.
+
+`fit()` 에서 `camera.aspect` 를 갱신할 때 판의 `scale.x` 도 같이 잡는다.
+
+그리고 저사양 판정을 고쳤다. `hardwareConcurrency <= 4` 만 보면 **요즘 폰이 전부
+고사양으로 잡힌다**(8코어가 흔하다). `innerWidth < 760` 을 함께 본다 —
+좁은 화면은 대개 배터리로 돌고 열이 더 난다. DPR 도 1.5 → **1.25**,
+캔버스 불투명도도 0.7 → **0.45**(세로에서는 화면 전체를 덮으므로).
+
 ### three.js 씬 셋은 서로 다른 것이어야 한다
 
 게이트 씬을 파이프라인으로 옮기면서 히어로에도 그대로 남겨뒀더니
diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro
index f8a631e..2dfd10b 100644
--- a/apps/site/src/components/Materials.astro
+++ b/apps/site/src/components/Materials.astro
@@ -17,6 +17,7 @@ const { c } = Astro.props;
   <p class="lead mat-lead reveal">{c.lead}</p>
 
   <div class="full stage glass par-slow">
+    <span class="rim" aria-hidden="true"></span>
     <div class="stage-fallback" aria-hidden="true"></div>
     {/* GPU 가 만드는 재질. WebGL 이 없으면 위 그라디언트가 그대로 결과물이다 */}
     <canvas id="mat-canvas" class="stage-canvas" aria-hidden="true"></canvas>
diff --git a/apps/site/src/components/Pipeline.astro b/apps/site/src/components/Pipeline.astro
index 4360c71..239c2ce 100644
--- a/apps/site/src/components/Pipeline.astro
+++ b/apps/site/src/components/Pipeline.astro
@@ -91,6 +91,10 @@ const { c } = Astro.props;
   }
   .gate-canvas { opacity: 0; transition: opacity 1s var(--ease-soft); }
   .gate-canvas.is-live { opacity: 0.7; }
+  /* 세로 화면에서는 캔버스가 화면 전체를 덮는다. 같은 밝기면 본문이 묻힌다 */
+  @media (max-width: 760px) {
+    .gate-canvas.is-live { opacity: 0.45; }
+  }
 
   /* 통과한 단계가 켜진다. 3D 와 텍스트를 잇는 유일한 연결이다 */
   .stop { transition: opacity var(--dur-quick) var(--ease-out); }
diff --git a/apps/site/src/layouts/Base.astro b/apps/site/src/layouts/Base.astro
index 2049791..5176b0c 100644
--- a/apps/site/src/layouts/Base.astro
+++ b/apps/site/src/layouts/Base.astro
@@ -87,6 +87,7 @@ const FAVICON =
 
     <header class="site-header">
       <div class="header-inner glass">
+        <span class="rim" aria-hidden="true"></span>
         <a class="wordmark" href={lang === "ko" ? "/" : "/en/"} aria-label="designpaca">
           <svg class="mark" viewBox="0 0 32 32" width="20" height="20" aria-hidden="true">
             <path d="M11 7v18" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" />
diff --git a/apps/site/src/lib/gate-scene.ts b/apps/site/src/lib/gate-scene.ts
index 285dab2..f5bc865 100644
--- a/apps/site/src/lib/gate-scene.ts
+++ b/apps/site/src/lib/gate-scene.ts
@@ -84,11 +84,15 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
   const accent = color(accentVar, "#4FD6C4");
   const glow = color(glowVar, "#6E7BFF");
 
-  // 저사양이면 판을 줄인다. 코어 수는 거친 지표지만 라이브러리를 더 받지 않는다
-  const lean = (navigator.hardwareConcurrency ?? 4) <= 4;
+  // 저사양 판정.
+  // 코어 수만 보면 요즘 폰(8코어)이 전부 고사양으로 잡힌다. 화면 폭을 같이 본다 —
+  // 좁은 화면은 대개 배터리로 돌아가고, 같은 씬이라도 열이 더 난다.
+  const narrow = innerWidth < 760;
+  const lean = narrow || (navigator.hardwareConcurrency ?? 4) <= 4;
   const PANE_COUNT = lean ? 3 : 6;
 
-  const dpr = Math.min(devicePixelRatio, 1.5);
+  // 좁은 화면에서는 DPR 도 한 단계 더 내린다. 폰의 DPR 은 3 까지 간다.
+  const dpr = Math.min(devicePixelRatio, narrow ? 1.25 : 1.5);
   renderer.setPixelRatio(dpr);
 
   /* ---- 1) 배경을 렌더 타겟에 그린다 ------------------------- */
@@ -251,6 +255,20 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
   const pointer = new THREE.Vector2(0.5, 0.5);
   const pointerTarget = new THREE.Vector2(0.5, 0.5);
 
+  // 판이 화면을 덮는 데 필요한 최소 폭.
+  // 수직 시야는 화면 비율과 무관하지만 수평 시야는 aspect 에 비례한다.
+  // 데스크톱(2.5:1)에 맞춘 폭 15 를 세로 화면(0.45:1)에 그대로 쓰면
+  // 수평 시야의 여섯 배가 되어 첫 판이 화면을 완전히 덮는다 —
+  // 게이트가 보이지 않고 그냥 밝은 화면이 된다.
+  const GEO_W = 15;
+  const fitPanes = (aspect: number) => {
+    const halfH = Math.tan((camera.fov * Math.PI) / 360);
+    const viewW = 2 * 7.2 * halfH * aspect;
+    const want = Math.max(6.5, viewW * 1.12);
+    const sx = Math.min(1, want / GEO_W);
+    for (const m of panes) m.scale.x = sx;
+  };
+
   const fit = () => {
     const r = canvas.getBoundingClientRect();
     if (!r.width || !r.height) return;
@@ -262,6 +280,7 @@ async function boot({ canvas, accentVar, glowVar, onGate, progressFrom }: GateSc
     camera.aspect = r.width / r.height;
     camera.updateProjectionMatrix();
     bgUniforms.uAspect.value = r.width / r.height;
+    fitPanes(camera.aspect);
   };
   fit();
   // window resize 만 듣던 것을 ResizeObserver 로 바꾼다.
diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css
index c642fd5..842bd08 100644
--- a/apps/site/src/styles/base.css
+++ b/apps/site/src/styles/base.css
@@ -247,6 +247,54 @@ a:hover { color: var(--accent); }
    (실측: computed backdrop-filter 가 none 이 된다).
    굴절은 재료 섹션의 SVG 타일이 진짜로 보여준다. 여기서는 두께를 만든다. */
 
+/* ---- 테두리를 도는 빛 --------------------------------------
+   `conic-gradient` 의 각도를 `@property` 로 애니메이션하면 매 프레임 배경을
+   다시 칠한다 — 컴포지터에서 못 돌고 메인 스레드가 페인트한다(하드 게이트 #8).
+
+   대신 **정사각형 원뿔 레이어를 마스크 안에서 회전**시킨다. 움직이는 것은
+   `rotate` 뿐이라 GPU 에서 돈다. 정사각형이라 회전해도 밝기가 균일하고,
+   요소보다 크게(200%) 잡아 납작한 헤더에서도 모서리까지 닿는다. */
+.rim {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+  padding: 1px;
+  -webkit-mask:
+    linear-gradient(black 0 0) content-box,
+    linear-gradient(black 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(black 0 0) content-box,
+    linear-gradient(black 0 0);
+  mask-composite: exclude;
+}
+.rim::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200%;
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  background: conic-gradient(
+    from 0deg,
+    transparent 0 58%,
+    color-mix(in oklab, var(--accent) 70%, white) 74%,
+    transparent 86%
+  );
+  opacity: 0.55;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .rim::before {
+    animation: rim-spin 11s linear infinite;
+  }
+}
+@keyframes rim-spin {
+  to { rotate: 360deg; }
+}
+
 /* 가장자리를 도는 빛. 유리판 테두리의 굴절을 흉내낸다 */
 .glass::after {
   content: "";
diff --git a/packages/skill/references/svg-filters.md b/packages/skill/references/svg-filters.md
index 714438f..ebfe690 100644
--- a/packages/skill/references/svg-filters.md
+++ b/packages/skill/references/svg-filters.md
@@ -402,3 +402,35 @@ if (reduceEffects()) document.documentElement.classList.add('reduce-effects');
 글로우를 더한다면 테두리에서 얕게 번지는 정도로 충분하다 —
 `0 0 22px -8px` 처럼 **음수 spread** 를 써서 형태 밖으로 새지 않게 한다.
 밝은 배경에서는 흰빛 대신 그림자로 뒤집어야 같은 인상이 난다.
+
+### 테두리 광을 회전시키려면
+
+`conic-gradient(from var(--angle), …)` 를 `@property` 로 애니메이션하는 방법이 흔히 보이는데,
+**그건 매 프레임 배경을 다시 칠한다.** 컴포지터에서 못 돌고 메인 스레드가 페인트한다.
+`transform`·`opacity` 만 애니메이션하라는 규칙에 걸린다.
+
+**정사각형 원뿔 레이어를 마스크 안에서 회전시켜라.** 움직이는 것은 `rotate` 뿐이다.
+
+```css
+.rim {                      /* 테두리만 남기는 마스크 */
+  position: absolute; inset: 0; border-radius: inherit;
+  overflow: hidden; padding: 1px;
+  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
+  mask-composite: exclude;
+}
+.rim::before {              /* 실제로 도는 것 */
+  content: ""; position: absolute; top: 50%; left: 50%;
+  width: 200%; aspect-ratio: 1;      /* 정사각형이라 회전해도 밝기가 균일하다 */
+  translate: -50% -50%;
+  background: conic-gradient(from 0deg, transparent 0 58%, var(--glow) 74%, transparent 86%);
+  animation: rim-spin 11s linear infinite;
+}
+@keyframes rim-spin { to { rotate: 360deg; } }
+```
+
+**두 가지를 지켜라.**
+
+- `aspect-ratio: 1` — 정사각형이어야 회전 중 밝기가 일정하다. 납작하면 변마다 달라진다
+- `width: 200%` — 요소보다 크게 잡아야 납작한 형태에서도 모서리까지 닿는다
+
+`prefers-reduced-motion` 에서는 애니메이션만 빼면 된다. 정지 상태의 광은 그대로 남는다.
diff --git a/packages/skill/references/three.md b/packages/skill/references/three.md
index c424b1f..3e5cb8f 100644
--- a/packages/skill/references/three.md
+++ b/packages/skill/references/three.md
@@ -75,6 +75,47 @@ h1 이 36px 이어도 히어로가 압도적이다.
 **파일 이름을 용도와 맞춰라.** `hero-scene.ts` 를 파이프라인에서 쓰기 시작한 순간
 다음 사람은 그것을 히어로 것인 줄 알고 고친다. `gate-scene.ts` 로 바꿔라.
 
+### 지오메트리는 화면 비율에 맞춰 다시 잡아라
+
+데스크톱에서 정한 크기를 세로 화면에 그대로 쓰면 씬이 통째로 안 보인다.
+
+수직 시야는 화면 비율과 무관하지만 **수평 시야는 aspect 에 비례한다.**
+
+```
+수직 시야 = 2 · d · tan(fov/2)
+수평 시야 = 수직 시야 × aspect
+```
+
+실측 사례: 판 폭 15 를 데스크톱(2.5:1)에서 정했다. 세로 화면(0.45:1)에서 수평 시야는
+**2.5** 로 줄어드는데 판은 그대로 15 라 **여섯 배**가 됐다. 첫 판이 화면을 완전히 덮어
+게이트가 보이지 않고 그냥 밝은 화면이 됐다.
+
+```js
+const fitPanes = (aspect) => {
+  const halfH = Math.tan((camera.fov * Math.PI) / 360);
+  const viewW = 2 * camDist * halfH * aspect;
+  const want = Math.max(MIN_W, viewW * 1.12);   // 살짝만 덮는다
+  for (const m of panes) m.scale.x = Math.min(1, want / GEO_W);
+};
+```
+
+`fit()` 안에서 `camera.aspect` 를 갱신할 때 **같이 부른다.**
+
+### 저사양 판정에 화면 폭을 넣어라
+
+```js
+const narrow = innerWidth < 760;
+const lean = narrow || (navigator.hardwareConcurrency ?? 4) <= 4;
+const dpr = Math.min(devicePixelRatio, narrow ? 1.25 : 1.5);
+```
+
+**`hardwareConcurrency` 만 보면 요즘 폰이 전부 고사양으로 잡힌다** — 8코어가 흔하다.
+좁은 화면은 대개 배터리로 돌아가고, 같은 씬이라도 열이 더 난다.
+폰의 DPR 은 3 까지 가므로 좁은 화면에서는 한 단계 더 내린다.
+
+**세로 화면에서 캔버스가 화면 전체를 덮는다면 불투명도도 낮춰라.**
+가로에서 적당하던 밝기가 세로에서는 본문을 묻는다. 실측 교정: `0.7 → 0.45`.
+
 ### WebGL 위의 대비는 `readPixels` 로 못 잰다
 
 `preserveDrawingBuffer: false`(기본값)면 프레임을 그린 뒤 버퍼가 비워진다.