From 0f5e7ecf5fc2d3a23de17102c51a63cd9783b34c Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 28 Jul 2026 14:08:15 +0000
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9A=94=EC=86=8C?=
 =?UTF-8?q?=EC=97=90=20:active=20=EC=83=81=ED=83=9C=20=EC=8A=A4=EC=BC=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EC=8B=9C=EA=B0=81=EC=A0=81=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EB=B0=B1=20=EC=A0=9C=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .Jules/palette.md |  4 ++++
 styles.css        | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7fb6a23..5978fb2 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -17,3 +17,7 @@
 ## 2024-07-10 - prefers-reduced-motion 지원 추가
 **Learning:** 시스템 레벨에서 애니메이션 줄이기(prefers-reduced-motion)를 설정한 사용자를 위해 과도한 애니메이션과 부드러운 스크롤을 비활성화하는 것이 필요합니다. 이때 `0s` 대신 `0.01ms`를 사용하여 `transitionend`와 같은 브라우저 이벤트가 정상적으로 발생하도록 해야 자바스크립트 콜백이 멈추는(hanging) 문제를 방지할 수 있습니다.
 **Action:** 항상 `styles.css` 하단에 `prefers-reduced-motion: reduce` 미디어 쿼리를 추가하여 모든 요소의 `animation-duration`과 `transition-duration`을 `0.01ms`로 설정하고 `scroll-behavior: auto`를 적용합니다.
+
+## 2026-07-28 - 버튼 active 시각적 피드백
+**Learning:** 버튼을 클릭할 때 즉각적인 피드백이 없으면 터치나 클릭이 제대로 인가되었는지 인지하기 어렵습니다. `:active` 가상 클래스와 약간의 `scale` 변환(예: `transform: scale(0.97)`)을 결합하면 간단하면서도 효과적인 마이크로 UX 개선이 가능합니다.
+**Action:** 인터랙티브한 버튼 요소에는 가벼운 `:active` 스케일 애니메이션을 넣어 사용자가 누르는 감각(tactile feedback)을 느낄 수 있도록 합니다.
diff --git a/styles.css b/styles.css
index 02cfeb6..43c905a 100644
--- a/styles.css
+++ b/styles.css
@@ -108,13 +108,17 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
   opacity: 0.8;
 }
 
+.language-switch button:active {
+  transform: scale(0.95);
+}
+
 .language-switch button[aria-pressed="true"] {
   background: var(--ink);
   color: var(--white);
@@ -218,13 +222,17 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
 }
 
 .button:hover {
   opacity: 0.8;
 }
 
+.button:active {
+  transform: scale(0.97);
+}
+
 .button.primary {
   background: var(--ink);
   color: var(--white);