From d10fe981f06042572b91ffe3ce98bcbc48d22fee Mon Sep 17 00:00:00 2001 From: gahusb Date: Fri, 26 Jun 2026 18:21:39 +0900 Subject: [PATCH] =?UTF-8?q?fix(deepfield):=20=ED=9E=88=EC=96=B4=EB=A1=9C?= =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=8C=80=EB=B9=84=20=EB=B3=B5?= =?UTF-8?q?=EA=B5=AC=20=E2=80=94=20=EC=A2=8C=EC=B8=A1=20=EC=95=B5=EC=BB=A4?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A6=BC=20+=20=ED=8C=8C=ED=8B=B0?= =?UTF-8?q?=ED=81=B4=20=EB=B8=94=EB=A3=B8=20=EC=99=84=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 세로 중앙이 투명한 스크림 위에 헤드라인이 놓여(items-center) 글자 뒤 받침이 없었고, AdditiveBlending 파티클 3000개가 텍스트 뒤를 밝게 씻어내 흰 글씨가 안 보이던 문제 수정. - page.tsx: 스크림을 좌측 앵커 다크(좌→우 0.94→0) + 상하 비네트 2겹으로 교체 - HeroField: StaticField radial 광원 밝기 완화(0.45→0.30, 0.16→0.10) + 우측 이동 - HeroField: 파티클 수 3000→1600(lite 800→500), 셰이더 알파 0.45+0.25→0.28+0.18 Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01YQNcycdLJVtoSKN1tHZU6Q --- app/components/deepfield/HeroField.tsx | 15 ++++++++------- app/page.tsx | 10 +++++++--- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/app/components/deepfield/HeroField.tsx b/app/components/deepfield/HeroField.tsx index 55180b2..5e9e045 100644 --- a/app/components/deepfield/HeroField.tsx +++ b/app/components/deepfield/HeroField.tsx @@ -23,10 +23,10 @@ function StaticField() { style={{ backgroundColor: 'var(--jsm-dark-bg, #070d1a)', backgroundImage: [ - // 광원1: 우상단 — accent blue-700 - 'radial-gradient(60% 55% at 75% 25%, rgba(29,78,216,0.45) 0%, transparent 45%)', - // 광원2: 좌하단 — bright blue (sky-400) - 'radial-gradient(55% 50% at 15% 85%, rgba(56,189,248,0.16) 0%, transparent 40%)', + // 광원1: 우상단 — accent blue-700 (텍스트 컬럼에서 떨어진 우측에 배치, 밝기 완화) + 'radial-gradient(58% 52% at 78% 22%, rgba(29,78,216,0.30) 0%, transparent 46%)', + // 광원2: 우하단 — bright blue (sky-400), 좌측 텍스트와 겹치지 않게 우측 이동 + 밝기 완화 + 'radial-gradient(52% 48% at 82% 88%, rgba(56,189,248,0.10) 0%, transparent 42%)', ].join(','), }} /> @@ -83,9 +83,9 @@ const VERTEX_SHADER = /* glsl */ ` // 색: seed로 두 파랑 사이 보간 vColor = mix(C_DEEP, C_BRIGHT, aSeed); - // 불투명도: 스크롤로 소멸, 깊이로 약간 페이드 + // 불투명도: 스크롤로 소멸, 깊이로 약간 페이드 (전체 톤 다운 — 텍스트 가독성 우선) float depthFade = smoothstep(-3.0, 0.5, mvPosition.z); - vAlpha = (1.0 - uScroll) * (0.45 + depthFade * 0.25); + vAlpha = (1.0 - uScroll) * (0.28 + depthFade * 0.18); } `; @@ -121,7 +121,8 @@ export default function HeroField({ className }: Props) { if (!canvas) return; const isFull = effectiveMode === 'full'; - const COUNT = isFull ? 3000 : 800; + // 밀도 완화 — 가산 혼합 파티클이 겹쳐 텍스트 뒤를 밝게 씻어내는(화이트 블룸) 현상 억제 + const COUNT = isFull ? 1600 : 500; let disposed = false; let rafId = 0; diff --git a/app/page.tsx b/app/page.tsx index 5e090fa..876f188 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -84,13 +84,17 @@ export default async function Home() { {/* -mt-16 pt-16: 고정 헤더 아래로 끌어올려 상단 라이트 띠 제거 + 풀 뷰포트 확보 */}
- {/* 콘텐츠 가독성용 하단 스크림 (radial 광원 위 텍스트 대비) */} + {/* 콘텐츠 가독성용 스크림 — 좌측 앵커 다크(텍스트 컬럼 받침) + 상하 비네트. + 텍스트는 좌측 정렬(max-w-4xl)이므로 좌→우 어둠 그라데이션으로 글자 뒤를 항상 어둡게 깔고, + 우측은 파티클 필드가 비치게 둔다. 모바일(좁은 폭)에선 좌측 스크림이 거의 전체를 덮어 가독성 확보. */}