From c327fb99a1a13eefd38db58b61d728d08211f2bb Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 3 Aug 2026 13:40:45 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=EC=97=90=20=EB=88=84=EB=A6=84(:active)=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=81=EC=A0=81=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
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 8a7cf4c..a909979 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -21,3 +21,7 @@
 ## 2024-07-15 - Expand clickable area of project cards
 **Learning:** Using an anchor tag to wrap an entire card (block-level element) can result in verbose and confusing screen reader output. However, restricting the clickable area to just the title makes the UI harder to interact with (violating Fitts's Law).
 **Action:** Apply `position: relative` to the card container and use a `::after` pseudo-element with `position: absolute; inset: 0;` on the title's anchor tag. This expands the clickable area to the whole card while keeping semantic and accessible HTML structure.
+
+## 2026-08-03 - Add active state for buttons
+**Learning:** 단일 버튼과 링크(.button, .language-switch button) 요소들에 hover 상태는 존재하지만, 클릭하는 순간의 시각적 피드백(:active)이 누락되어 있어 물리적인 인터랙션 경험이 다소 밋밋합니다.
+**Action:** 인터랙티브 요소에는 상태 변화(focus, hover, active)마다 적절한 시각적 단서를 제공하여 사용자가 의도한 조작이 시스템에 잘 전달되었음을 알 수 있도록 transform: scale()을 활용해 마이크로 인터랙션을 구현합니다.
diff --git a/styles.css b/styles.css
index e3de699..83e9c75 100644
--- a/styles.css
+++ b/styles.css
@@ -108,7 +108,11 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
+}
+
+.language-switch button:active {
+  transform: scale(0.96);
 }
 
 .language-switch button:not([aria-pressed="true"]):hover {
@@ -218,7 +222,11 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, transform 0.1s ease;
+}
+
+.button:active {
+  transform: scale(0.98);
 }
 
 .button:hover {