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 {