From 7f15bc10d120b8492fc67be9da60bf6d469baa02 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 6 Aug 2026 09:22:54 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20landing:=20=ED=9E=88=EC=96=B4=EB=A1=9C?= =?UTF-8?q?=20=EC=B9=B4=ED=94=BC=EC=99=80=20=EC=9E=85=EC=9E=90=20=EB=B0=B4?= =?UTF-8?q?=EB=93=9C=20=EA=B2=B9=EC=B9=A8=20=E2=80=94=20=EA=B2=BD=EA=B3=84?= =?UTF-8?q?=EB=A5=BC=20=EA=B5=AC=EC=A1=B0=EB=A1=9C=20=EA=B0=95=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼 행이 입자 밴드를 파고들었다. 1280x720 에서 34px, 무리 라벨과는 7px. 1440x900 에서만 여유가 있어(45px) 안 보이던 문제다. 원인은 두 값이 서로 다른 기준으로 움직인 것: 카피 상단 여백 19vh 화면 비율 카피 높이 351px 고정 밴드 시작 0.63×높이 화면 비율 카피만 px 고정이라 화면이 짧아지면 밴드가 카피를 덮는다. 0.19H + 351 > 0.63H → H < 798px 이면 전부 겹친다. 1280x720, 1366x768 같은 흔한 노트북 높이가 여기 들어간다. pt-[19vh] 는 위치만 잡을 뿐 경계를 강제하지 못한다. 그래서: - 카피 영역 높이를 밴드 시작선에 묶었다. 뷰포트와 무관하게 구조적으로 못 겹친다. - BAND_TOP 을 export 해 캔버스와 카피가 같은 값을 쓴다. 라벨 좌표가 이미 쓰던 방식이다. - 높이·밴드를 한 식에서 뽑는다. 따로 두면 어긋난다 — 밴드를 63vh 로 두고 높이만 키웠더니 짧은 화면에서 변수가 실제 밴드보다 위를 가리켰다. - min-h 바닥 780px. 밴드 위 공간에 헤더(104)+카피(351)+여유(24)=479px 가 들어가려면 높이 760px 이 하한이라, 정렬만으로는 짧은 화면을 못 구한다. 살짝 스크롤될 뿐이다. - pt-[104px] 를 md 이상에서도 유지. 빼면 가운데 정렬이 카피를 fixed 헤더 밑으로 민다. 검증(실측, 음수 = 밴드 밖): 1280x620 +20 → -30, 헤더 여유 +12, 라벨 75px 1280x720 +34 → -30, 헤더 여유 +12, 라벨 75px 1440x900 -45 → -68, 헤더 여유 +50, 라벨 122px 375x812 -57, 헤더 여유 +6 Co-Authored-By: Claude Opus 5 --- .../app/components/sections/hero-dataflow.tsx | 30 ++++++++++++++++--- .../app/components/ui/data-flow-canvas.tsx | 4 ++- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/landing/app/components/sections/hero-dataflow.tsx b/landing/app/components/sections/hero-dataflow.tsx index 48c12bb..13018fe 100644 --- a/landing/app/components/sections/hero-dataflow.tsx +++ b/landing/app/components/sections/hero-dataflow.tsx @@ -1,10 +1,14 @@ +import type * as React from "react" import { useRef, useState } from "react" import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { CTA_GAP, DISPLAY_LEAD_GAP } from "@/components/ui/section-heading" import { Typography } from "@/components/ui/typography" -import { CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas" +import { BAND_TOP, CLUSTER_ANCHORS, DataFlowCanvas, type DataFlowPhase } from "@/components/ui/data-flow-canvas" + +/** 히어로 최소 높이. 밴드 위에 헤더·카피가 들어갈 세로 예산의 하한(계산은 section 주석 참조). */ +const HERO_MIN_H = "780px" /** * 다크 무대 히어로 — 배경 모션이 negotium 파이프라인 자체를 그린다. @@ -20,7 +24,17 @@ export function HeroDataFlow() { return (
@@ -43,8 +57,15 @@ export function HeroDataFlow() { ))} - {/* 카피는 상단 55%, 데이터 흐름은 하단 밴드. 둘이 겹치지 않게 층을 나눈다. */} -
+ {/* 카피는 밴드 위 영역, 데이터 흐름은 하단 밴드. + 예전엔 pt-[19vh] 로 위치만 잡았는데 그건 경계를 강제하지 못한다 — 카피 높이는 + px 로 고정인데 밴드는 화면 비율로 내려오니, 뷰포트가 798px 보다 낮으면 버튼이 + 밴드를 파고들었다(1280x720 에서 34px, 라벨과는 7px). 1440x900 에서만 안 보였다. + 카피 영역 높이를 밴드 시작선에 묶으면 뷰포트와 무관하게 구조적으로 겹칠 수 없다. + 1.5rem 은 밴드 위 최소 숨통. + pt-[104px] 는 md 이상에서도 유지한다 — 헤더가 fixed 라 이걸 빼면 짧은 뷰포트에서 + 가운데 정렬이 카피를 헤더 밑으로 밀어올린다(620px 높이에서 제목 상단 8px). */} +
{/* 히어로 카피에는 진입 애니메이션을 걸지 않는다. 여기가 LCP 요소라 opacity:0 으로 시작하면 하이드레이션 전까지 첫 화면이 비고, 광고 유입처럼 JS 가 느린 환경에서 그대로 손실이 된다. 모션은 배경 캔버스가 맡는다. */} @@ -72,6 +93,7 @@ export function HeroDataFlow() { 도입 문의
+
diff --git a/landing/app/components/ui/data-flow-canvas.tsx b/landing/app/components/ui/data-flow-canvas.tsx index 6db037f..2f22a24 100644 --- a/landing/app/components/ui/data-flow-canvas.tsx +++ b/landing/app/components/ui/data-flow-canvas.tsx @@ -58,7 +58,9 @@ export type DataFlowPhase = (typeof PHASES)[number]["key"] /* 구도는 화면 하단 밴드에 앉힌다. 헤드라인·CTA 는 그 위에 서고, 데이터는 무대 바닥을 흐르는 그림. 아래 목표 좌표는 전부 밴드 기준 지역 좌표(0..1)로 쓰고 band() 로 옮긴다. */ -const BAND_TOP = 0.63 +/* 히어로 카피도 이 값을 읽어 자기 높이를 잡는다 — 카피가 밴드를 침범하지 않는 건 + 두 숫자가 우연히 안 만나서가 아니라 같은 값을 공유하기 때문이어야 한다. */ +export const BAND_TOP = 0.63 const BAND_H = 0.30 /* 히어로 하단 전체. 순환 링은 강화학습 섹션으로 옮겼다. */ const band = (localY: number) => BAND_TOP + localY * BAND_H