From ea1249429a44b20249018874b8cba3422ce7c2e5 Mon Sep 17 00:00:00 2001 From: Haewon Kam Date: Thu, 6 Aug 2026 11:00:46 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20landing:=20=EB=AC=B4=EB=8C=80=20?= =?UTF-8?q?=EC=9C=84=202=EC=B0=A8=20CTA=20=EC=97=90=20=EC=9C=A0=EB=A6=AC?= =?UTF-8?q?=20=EC=9E=AC=EC=A7=88=20=E2=80=94=20=EB=8D=B0=EB=AA=A8=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=C2=B7=EC=83=81=EB=8B=B4=20=EC=8B=A0=EC=B2=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 두 버튼 모두 무대에서 stageGhost 를 쓰므로 변형 하나로 해결된다. 구성은 넷 — 옅은 흰 채움, 뒤를 흐리는 backdrop-blur(12px), 위쪽 1px 안쪽 하이라이트 (유리 모서리에 빛이 걸리는 부분), 아래로 깔리는 부드러운 그림자. 채도를 살짝 올리면 뒤가 흐려지며 빠지는 색기가 돌아온다(saturate 1.5). 테두리는 white/40 에서 더 내리지 않았다. /30 이면 무대 광원부(#16205A) 대비가 2.60:1 로 떨어져 WCAG 1.4.11(UI 경계 3:1)에 미달한다 — 유리 느낌 때문에 버튼이 안 보이던 원래 문제(대비 1.09:1)로 되돌아간다. 투명감은 채움과 blur 로 내고 테두리는 지킨다. hover 는 흰색 반전이 아니라 채움을 밝힌다. 유리는 뒤가 비치는 게 정체성이라 불투명하게 뒤집으면 그 순간 유리가 아니게 된다. Co-Authored-By: Claude Opus 5 --- landing/app/components/ui/button.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/landing/app/components/ui/button.tsx b/landing/app/components/ui/button.tsx index 40d8a63..b497737 100644 --- a/landing/app/components/ui/button.tsx +++ b/landing/app/components/ui/button.tsx @@ -24,7 +24,21 @@ const buttonVariants = cva( 사라진다. 채움도 없으면 남는 건 흰 글자뿐이라 옆 nav 링크와 구분되지 않는다. 그래서 무대색 토큰이 아니라 흰색 알파로 잡는다 — 무대 어디에 놓여도 같이 성립한다. 옅은 채움이 테두리보다 "누를 수 있는 것"을 더 강하게 전달하므로 둘 다 준다. */ - stageGhost: "bg-white/10 hover:bg-white text-white hover:text-stage border border-white/40 hover:border-white", + /* 유리(glassmorphism). 배경 영상이 비쳐 보이되 글자는 읽히는 상태를 만든다. + 구성은 넷이다 — 옅은 흰 채움, 뒤를 흐리는 backdrop-blur, 위쪽 1px 안쪽 하이라이트 + (유리 모서리에 빛이 걸리는 부분), 아래로 깔리는 부드러운 그림자(떠 있는 느낌). + 채도를 살짝 올리면(saturate) 뒤가 흐려지며 빠지는 색기가 돌아온다. + + 테두리는 white/40 에서 더 못 내린다. /30 으로 낮추면 무대 광원부(#16205A) 대비가 + 2.60:1 로 떨어져 WCAG 1.4.11(UI 경계 3:1)에 미달한다 — 유리 느낌 때문에 버튼이 + 안 보이던 원래 문제로 돌아간다. 투명감은 채움과 blur 로 내고 테두리는 지킨다. + + hover 는 흰색 반전이 아니라 채움을 밝힌다. 유리는 뒤가 비치는 게 정체성이라 + 불투명하게 뒤집으면 그 순간 유리가 아니게 된다. */ + stageGhost: + "bg-white/12 hover:bg-white/25 text-white border border-white/40 hover:border-white/60 " + + "backdrop-blur-md backdrop-saturate-150 " + + "shadow-[inset_0_1px_0_0_rgba(255,255,255,0.30),0_8px_24px_-10px_rgba(3,6,15,0.7)]", }, /* 레퍼런스(statworx) 실측: 10.4px / 600 / 알약(radius 39px) / 패딩 12·24 / 높이 33px. 작고 조밀한 버튼이 확신 있어 보인다 — 크고 굵은 버튼은 설득이 아니라 호소로 읽힌다.