From 77d96cd4a4c3c059c0d966b159a8fb79d616992c Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewon.sv@gmail.com>
Date: Fri, 7 Aug 2026 09:47:07 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20landing:=20=ED=9E=88=EC=96=B4=EB=A1=9C?=
 =?UTF-8?q?=20CTA=20=EB=AC=B8=EA=B5=AC=20=E2=80=94=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=9D=BC=EC=96=B4=EB=82=98=EB=8A=94=20=EC=9D=BC?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=98=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  여기서 직접 체험  →  협상 예시 체험
  데모 요청        →  실제 데모 받기

두 버튼은 성격이 전혀 다른데 문구가 그걸 구분하지 못했다.
1차는 페이지 안에서 바로 조작하는 인터랙티브 데모고, 2차는 이름·이메일을 받는
리드 폼이다. 클릭 직후 경험이 다르므로 문구도 갈라야 한다.

협상 예시 체험
  고정 데이터 시뮬레이션이라 "예시"를 밝힌다. 다만 "보기"로 낮추지는 않았다 —
  도착 섹션이 "직접 경험해 보세요" 이고 역할 카드가 "공급사로 해보기" 라,
  버튼만 구경하는 말이면 클릭 전 기대와 도착 후 요구가 어긋난다.

실제 데모 받기
  누르면 폼이 뜨고 데모는 이메일로 온다. "직접 체험" 이라 쓰면 눌렀을 때 바로
  만질 줄 알았다가 입력을 요구받아 낚인 느낌이 된다. "받기" 는 이메일로 온다는
  사실이 드러나서 폼이 뜨는 게 자연스럽다.

모달 제목도 "데모 요청" → "실제 데모 받기" 로 맞췄다. 버튼이 "받기" 인데 열린 창이
"요청" 이면 전환 순간에 다른 화면처럼 읽힌다.

제출 버튼은 "데모 신청" 그대로 둔다. 같은 원칙을 적용하면 그 클릭으로 실제 일어나는
일은 신청 접수이지 데모 수령이 아니다(수령은 이메일로 나중에).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 landing/app/components/sections/hero-dataflow.tsx | 12 +++++++++---
 landing/app/components/ui/demo-request-modal.tsx  |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/landing/app/components/sections/hero-dataflow.tsx b/landing/app/components/sections/hero-dataflow.tsx
index 5273c7d..7f1e986 100644
--- a/landing/app/components/sections/hero-dataflow.tsx
+++ b/landing/app/components/sections/hero-dataflow.tsx
@@ -108,14 +108,20 @@ export function HeroDataFlow() {
           </p>
 
           {/* 2차 CTA 는 상담 신청(#contact-section)과 목적지가 겹쳐 사실상 같은 버튼이었다.
-              데모 요청으로 갈라서, 고관여 폼(상담 신청) 앞단에 저관여 리드 캡처를 둔다. */}
+              데모 경로로 갈라서, 고관여 폼(상담 신청) 앞단에 저관여 리드 캡처를 둔다.
+
+              문구는 "클릭하면 무슨 일이 일어나는가"에 맞춘다.
+                협상 예시 체험 — 페이지 안에서 바로 조작한다. 고정 데이터라 "예시"를 밝히되,
+                              도착 섹션이 "직접 경험해 보세요"·"해보기" 라 "보기"로 낮추면 어긋난다.
+                실제 데모 받기 — 누르면 폼이 뜨고 이메일로 온다. "체험"이라 쓰면 눌렀을 때
+                              바로 만질 줄 알았다가 입력을 요구받아 낚인 느낌이 된다. */}
           <div className={`${CTA_GAP} flex flex-col sm:flex-row gap-3 justify-center`}>
             <Button href="#how-it-works" variant="stage" size="stageRound" className="group">
-              <span>여기서 직접 체험</span>
+              <span>협상 예시 체험</span>
               <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
             </Button>
             <Button type="button" variant="stageGhost" size="stageRound" onClick={() => setDemoOpen(true)}>
-              데모 요청
+              실제 데모 받기
             </Button>
           </div>
         </div>
diff --git a/landing/app/components/ui/demo-request-modal.tsx b/landing/app/components/ui/demo-request-modal.tsx
index 1a31dc0..f3e1136 100644
--- a/landing/app/components/ui/demo-request-modal.tsx
+++ b/landing/app/components/ui/demo-request-modal.tsx
@@ -135,8 +135,10 @@ export function DemoRequestModal({ open, onClose }: { open: boolean; onClose: ()
               </div>
             ) : (
               <>
+                {/* 제목은 여는 버튼과 같은 말을 쓴다. 버튼이 "받기"인데 여기가 "요청"이면
+                    전환 순간에 다른 화면에 온 것처럼 읽힌다. */}
                 <Typography variant="cardTitle" as="h2" id={titleId} className="mb-2">
-                  데모 요청
+                  실제 데모 받기
                 </Typography>
                 <Typography variant="small" className="mb-8">
                   성함과 이메일만 남겨주시면, 사용해보실 수 있는 Demo를 보내드립니다!