From 9229c2b990b0d9d523e074aca627f2a56feea650 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 4 Aug 2026 14:08:27 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0]=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=8B=9C=EA=B0=81=EC=A0=81=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=20=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 ++++
 CHANGELOG.md         | 1 +
 styles.css           | 6 +++++-
 tests/test_styles.py | 9 +++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 8a7cf4c..7de10b6 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-04 - Add visual feedback for button clicks
+**Learning:** Users lack immediate visual feedback when interacting with main call-to-action buttons (`.button`), making the interface feel unresponsive during clicks.
+**Action:** Add an `:active` state to interactive elements (e.g., `transform: scale(0.98)`) to provide satisfying, immediate tactile feedback when pressed.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca1847a..a53a643 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # CHANGELOG
 
 ## [Unreleased]
+- **UX 개선**: 메인 버튼(`.button`) 클릭 시 즉각적인 시각적 피드백을 제공하도록 `:active` 상태에 스케일 축소 효과(`transform: scale(0.98)`)를 추가하여 인터랙션 반응성을 높였습니다.
 - **UX/접근성 개선**: 프로젝트 카드의 클릭 영역을 카드 전체로 확장하여 사용자 편의성을 높였습니다. <a> 태그를 확장하는 대신 가상 요소(pseudo-element) 겹침 방식을 사용하여 스크린 리더 접근성을 유지했습니다.
 - **보안 개선**: 컴포넌트 갤러리의 인라인 스크립트와 스타일을 외부 파일로 분리하고, 엄격한 Content-Security-Policy를 적용해 XSS 방어를 강화했습니다.
 - **성능 회귀 복원**: 오프스크린 `.section` 렌더링을 `content-visibility: auto`로 지연하고, 일반 섹션은 600px·콘텐츠가 큰 DIKW/projects 섹션은 1000px의 `contain-intrinsic-size` placeholder를 유지해 초기 렌더링 비용과 스크롤바 이동을 함께 줄였습니다.
diff --git a/styles.css b/styles.css
index e3de699..e7bb508 100644
--- a/styles.css
+++ b/styles.css
@@ -218,13 +218,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.98);
+}
+
 .button.primary {
   background: var(--ink);
   color: var(--white);
diff --git a/tests/test_styles.py b/tests/test_styles.py
index 5b4fb3b..692368f 100644
--- a/tests/test_styles.py
+++ b/tests/test_styles.py
@@ -59,3 +59,12 @@ def test_project_cards_are_fully_clickable_via_pseudo_element():
     after_rule = _rule(".project-grid h3 a::after")
     assert "position: absolute;" in after_rule
     assert "inset: 0;" in after_rule
+
+def test_buttons_have_active_state_for_visual_feedback():
+    """Buttons should scale down when pressed to provide tactile visual feedback."""
+    rule = _rule(".button")
+    assert "transition:" in rule
+    assert "transform" in rule
+
+    active_rule = _rule(".button:active")
+    assert "transform: scale(0.98);" in active_rule