소개 페이지 전면 재디자인 — Ethereal Glass

design-taste-frontend, high-end-visual-design, redesign-existing-projects 를
로드해 리디자인 모드로 진행했다. 이전 페이지는 디자인 스킬을 파는 자리가
문서처럼 생겼다는 지적을 받았다.

Design Read
- redesign-overhaul / 개발자 대상 / 정밀기기 언어
- DESIGN_VARIANCE 8 · MOTION_INTENSITY 6 · VISUAL_DENSITY 3

방향
- 다크 잉크 바탕에 three.js 셰이더 광원. 유리 패널이 그 위에 뜬다
- 리퀴드 글래스는 이 브리프에서 장식이 아니라 제품 시연이다.
  SVG 필터와 three.js 의 결합 그 자체이기 때문이다
- 밝은 밴드는 조판 섹션 하나뿐. 한글이 종이 위에 있어야 하는 자리다

제품 증명
- 히어로 배경에 셰이더(초기 번들 밖, 첫 페인트 후 지연 로드)
- 재료 섹션에 SVG 필터 3종을 실제로 먹인 타일: 그레인, 굴절, 듀오톤
- 도그푸딩 산출물 2개를 실제 스크린샷으로. 가짜 목업이 아니다

감사에서 걸려 고친 것
- backdrop-filter 에 SVG 를 얹으면 Chrome 이 선언 전체를 버린다.
  CSS.supports 는 참을 주면서 computed 는 none 이 된다
- main 에서 그리드 클래스가 빠져 subgrid 가 붕괴, 가로 444px 오버플로
- 진입 연출이 두 번 콘텐츠를 삼켰다. opacity 를 버리고 transform 만 남겼다
- eyebrow 4개, 제목 em-dash 2건

수치는 불리해진 것도 그대로 싣는다
- 반투명 패널 1개 -> 29개. 유리가 주제가 됐으므로
- three.js 185KB(gzip). 데모라서 JS 예산을 올렸고 그 사실을 페이지에 적었다

apps/site/src/components/Pipeline.astro

@@ -15,19 +15,19 @@ const { c } = Astro.props;
              role="list" 는 list-style:none 일 때 Safari/VoiceOver 가 목록 의미를 버리는 것을 되돌린다
 */}
 <section class="section" aria-labelledby="pipeline-h">
-  <p class="eyebrow">{c.eyebrow}</p>
-  <h2 id="pipeline-h">{c.h2}</h2>
-  <p class="lead pipeline-lead">{c.lead}</p>
+  <p class="eyebrow reveal">{c.eyebrow}</p>
+  <h2 id="pipeline-h" class="reveal">{c.h2}</h2>
+  <p class="lead pipeline-lead reveal">{c.lead}</p>
 
-  <div class="brief">
+  <div class="brief glass reveal"><div class="brief-core">
     <span class="brief-label">{c.briefLabel}</span>
     <p class="brief-text">{c.brief}</p>
-  </div>
+  </div></div>
 
   <ol role="list" class="spine">
     {
       c.stages.map((s) => (
-        <li class="stop">
+        <li class="stop reveal">
           <h3 class="stop-name">{s.name}</h3>
           <p class="stop-does">{s.does}</p>
           <p class:list={["stop-becomes", { mono: s.mono }]}>{s.becomes}</p>
@@ -36,7 +36,7 @@ const { c } = Astro.props;
     }
   </ol>
 
-  <p class="after muted">{c.after}</p>
+  <p class="after muted reveal">{c.after}</p>
 </section>
 
 <style>
@@ -44,12 +44,8 @@ const { c } = Astro.props;
     margin-bottom: var(--space-6);
   }
 
-  .brief {
-    border: 1px solid var(--line-strong);
-    border-radius: var(--radius-md);
-    padding: var(--space-4);
-    margin-bottom: var(--space-2);
-  }
+  .brief { margin-bottom: var(--space-2); }
+  .brief-core { padding: var(--space-4); }
   .brief-label {
     display: block;
     font-size: var(--step-0);