From 190e3902155a856638d6ea6682ddcb697106a69a Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Fri, 31 Jul 2026 14:16:26 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=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=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: `.button` 및 언어 전환 스위치에 `:active` 상태 (`transform: scale`) 추가
🎯 Why: 버튼을 클릭할 때 직관적인 물리적 피드백(버튼이 눌리는 느낌)이 없어서 인터랙션의 인지력이 다소 떨어지는 문제를 해결하기 위함
📸 Before/After: 시각적인 터치 피드백이 없어 클릭 여부 파악이 어려웠으나, 적용 후 확실한 피드백이 생겼습니다.
♿ Accessibility: 호버가 불가능한 터치 디바이스(모바일 환경) 사용자에게도 확실한 반응을 제공합니다.
---
 .jules/palette.md |  4 ++++
 CHANGELOG.md      |  1 +
 styles.css        | 12 ++++++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..6aa424b
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,4 @@
+
+## 2026-07-31 - 버튼 터치(클릭) 피드백 시각화
+**Learning:** 클릭 가능한 요소(`.button`, `button`)에 호버 상태만 있고 클릭 시 시각적 피드백이 없어 버튼이 눌렸는지 직관적으로 알기 어려웠습니다.
+**Action:** `:active` 가상 클래스에 `transform: scale(0.97)`을 추가하여 사용자가 터치/클릭하는 순간 버튼이 눌리는 듯한 물리적인 피드백을 제공합니다.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56ad628..561c676 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # CHANGELOG
 
 ## [Unreleased]
+- **UX 개선**: 버튼과 언어 전환 스위치 클릭 시 `:active` 상태에서 축소(`scale`) 애니메이션을 추가하여 직관적인 터치 피드백을 제공하도록 개선했습니다.
 - **보안 개선**: 컴포넌트 갤러리의 인라인 스크립트와 스타일을 외부 파일로 분리하고, 엄격한 Content-Security-Policy를 적용해 XSS 방어를 강화했습니다.
 - **성능 회귀 복원**: 오프스크린 `.section` 렌더링을 `content-visibility: auto`로 지연하고, 일반 섹션은 600px·콘텐츠가 큰 DIKW/projects 섹션은 1000px의 `contain-intrinsic-size` placeholder를 유지해 초기 렌더링 비용과 스크롤바 이동을 함께 줄였습니다.
 - **보안 개선**: Trusted Types 기반 CSP 강화: 잠재적인 DOM 기반 XSS 공격을 방지하기 위해 `require-trusted-types-for 'script'` 지시어 추가
diff --git a/styles.css b/styles.css
index 02cfeb6..b3bda0c 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;
+}
+
+.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;
+}
+
+.button:active {
+  transform: scale(0.97);
 }
 
 .button:hover {