From 63717f5eb981503d6664987f95809234ecde4536 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 6 Aug 2026 09:28:23 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20landing:=20=EB=AC=B4=EB=8C=80=20?= =?UTF-8?q?=EC=9C=84=202=EC=B0=A8=20CTA=20=EA=B0=80=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=95=88=20=EC=9D=BD=ED=9E=98=20=E2=80=94?= =?UTF-8?q?=20stageGhost=20=EB=8C=80=EB=B9=84=20=ED=99=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit GNB "상담 신청" 이 기본 상태에서 버튼으로 인식되지 않았다. 채움이 없고 테두리는 사실상 안 보여서, 남는 건 흰 글자와 화살표뿐 — 옆 nav 링크와 구분될 근거가 없었다. 테두리를 stage-line(#1E2A52)으로 잡은 게 원인이다. 그 색은 무대 바닥(#070E24) 위 카드용인데, 헤더는 방사형 그라데이션의 광원부(#16205A)에 앉는다. 같은 색 가족이라 하필 헤더 자리에서만 선이 배경에 묻힌다. 수정 전 테두리 대비 1.09:1 (배경과 사실상 동일) 수정 후 테두리 대비 3.56:1 (WCAG 1.4.11 UI 경계 3:1 통과) 무대색 토큰 대신 흰색 알파로 잡았다 — 무대 어디에 놓여도 같이 성립한다. 옅은 채움(white/10)도 함께 준다. "누를 수 있는 것"은 테두리보다 면이 더 강하게 전달한다. 히어로 "도입 문의" 도 같은 변형이라 함께 해결된다. 1차 CTA(파란 채움)와의 위계는 그대로다. Co-Authored-By: Claude Opus 5 --- landing/app/components/ui/button.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/landing/app/components/ui/button.tsx b/landing/app/components/ui/button.tsx index b0b14d6..40d8a63 100644 --- a/landing/app/components/ui/button.tsx +++ b/landing/app/components/ui/button.tsx @@ -18,8 +18,13 @@ const buttonVariants = cva( glass: "bg-white/70 hover:bg-white text-ink-soft hover:text-ink border border-white shadow-sm", // 다크 무대 위 1차 CTA stage: "bg-primary hover:bg-primary-deep text-white", - // 다크 무대 위 2차 CTA — 흰 알약 - stageGhost: "bg-transparent hover:bg-white text-white hover:text-stage border border-stage-line hover:border-white", + /* 다크 무대 위 2차 CTA — 흰 알약. + 테두리를 stage-line(#1E2A52)으로 두면 안 된다. 그 색은 무대 바닥(#070E24) 위 + 카드용이라, 방사형 광원부(#16205A)에 앉는 GNB 자리에서는 배경과 대비가 1.09:1 로 + 사라진다. 채움도 없으면 남는 건 흰 글자뿐이라 옆 nav 링크와 구분되지 않는다. + 그래서 무대색 토큰이 아니라 흰색 알파로 잡는다 — 무대 어디에 놓여도 같이 성립한다. + 옅은 채움이 테두리보다 "누를 수 있는 것"을 더 강하게 전달하므로 둘 다 준다. */ + stageGhost: "bg-white/10 hover:bg-white text-white hover:text-stage border border-white/40 hover:border-white", }, /* 레퍼런스(statworx) 실측: 10.4px / 600 / 알약(radius 39px) / 패딩 12·24 / 높이 33px. 작고 조밀한 버튼이 확신 있어 보인다 — 크고 굵은 버튼은 설득이 아니라 호소로 읽힌다.