Skip to content

🎨 Palette: λ²„νŠΌμ— tactile ν”Όλ“œλ°± μΆ”κ°€ #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
seonghobae wants to merge 1 commit into
base: main
Choose a base branch
from
+15 βˆ’2
Open

🎨 Palette: λ²„νŠΌμ— tactile ν”Όλ“œλ°± μΆ”κ°€ #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-10 - Add tactile feedback to buttons
**Learning:** Found that buttons (`.button`, `.language-switch button`) lacked an `:active` state. Without visual feedback upon clicking (tactile feedback), users might wonder if their interaction registered, especially before network or async operations complete.
**Action:** Always add an `:active` state with a slight `transform: scale(0.98)` to buttons to mimic real-world physical buttons and provide immediate interaction feedback.
Comment on lines +25 to +27

@coderabbitai coderabbitai Bot Aug 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ“ Maintainability & Code Quality | 🟑 Minor | ⚑ Quick win

λ¬Έμ„œμ˜ scale() κ°’κ³Ό κ΅¬ν˜„μ„ μΌμΉ˜μ‹œν‚€μ„Έμš”.

.Jules/palette.md의 Line 27은 .buttonκ³Ό .language-switch button λͺ¨λ‘ scale(0.98)을 μ‚¬μš©ν•œλ‹€κ³  μ„€λͺ…ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ styles.css의 Line 115λŠ” .language-switch button에 scale(0.96)을 μ μš©ν•©λ‹ˆλ‹€. 값을 ν†΅μΌν•˜κ±°λ‚˜ μ„ νƒμžλ³„ 값을 λ¬Έμ„œμ— λͺ…μ‹œν•˜μ„Έμš”.

μˆ˜μ • μ˜ˆμ‹œ 
-**Action:** Always add an `:active` state with a slight `transform: scale(0.98)` to buttons to mimic real-world physical buttons and provide immediate interaction feedback.
+**Action:** Add an `:active` state to buttons. Use `transform: scale(0.98)` for `.button` and `transform: scale(0.96)` for `.language-switch button`.
πŸ“ Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## 2026-08-10 - Add tactile feedback to buttons
**Learning:** Found that buttons (`.button`, `.language-switch button`) lacked an `:active` state. Without visual feedback upon clicking (tactile feedback), users might wonder if their interaction registered, especially before network or async operations complete.
**Action:** Always add an `:active` state with a slight `transform: scale(0.98)` to buttons to mimic real-world physical buttons and provide immediate interaction feedback.
## 2026-08-10 - Add tactile feedback to buttons
**Learning:** Found that buttons (`.button`, `.language-switch button`) lacked an `:active` state. Without visual feedback upon clicking (tactile feedback), users might wonder if their interaction registered, especially before network or async operations complete.
**Action:** Add an `:active` state to buttons. Use `transform: scale(0.98)` for `.button` and `transform: scale(0.96)` for `.language-switch button`.
πŸ€– Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.Jules/palette.md around lines 25 - 27, Align the documented active-state
transform in the β€œAdd tactile feedback to buttons” entry with the implementation
in styles.css: either make both .button and .language-switch button use
scale(0.98), or explicitly document the selector-specific scale(0.96) value for
.language-switch button.

1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# CHANGELOG

## [Unreleased]
- **UX/μ ‘κ·Όμ„± κ°œμ„ **: λ²„νŠΌ(`.button`, `.language-switch button`)에 `:active` μƒνƒœμ™€ `transform: scale()` νŠΈλžœμ§€μ…˜μ„ μΆ”κ°€ν•˜μ—¬ μ‚¬μš©μžκ°€ 클릭할 λ•Œ 즉각적인 μ‹œκ°μ  ν”Όλ“œλ°±(Tactile feedback)을 μ œκ³΅ν•˜λ„λ‘ κ°œμ„ ν–ˆμŠ΅λ‹ˆλ‹€.
- **μ„±λŠ₯ κ°œμ„ **: `.skip-link` μ• λ‹ˆλ©”μ΄μ…˜μ„ `top`μ—μ„œ `transform: translateY()`둜 λ³€κ²½ν•˜μ—¬ μ „ν™˜ 쀑 λ ˆμ΄μ•„μ›ƒ μž¬κ³„μ‚°μ„ 쀄일 수 μžˆλ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€. μ‹€μ œ νš¨κ³ΌλŠ” λΈŒλΌμš°μ €λ³„ μΈ‘μ • λŒ€μƒμž…λ‹ˆλ‹€.
- **λ Œλ”λ§ 힌트 μ •ν•©μ„±**: 첫 ν™”λ©΄μ˜ eager 이미지와 단일 LCP ν›„λ³΄μ—μ„œ κ°•μ œ `decoding="async"`λ₯Ό μ œκ±°ν•΄ HTML ν‘œμ€€μ˜ κΈ°λ³Έ `auto` νŒλ‹¨μ— 맑기고, 지연 λ‘œλ“œ μ΄λ―Έμ§€μ—λŠ” 비동기 λ””μ½”λ”© 힌트λ₯Ό μœ μ§€ν–ˆμŠ΅λ‹ˆλ‹€. 정적 ν…ŒμŠ€νŠΈκ°€ eager, lazy, LCP 후보 μ§‘ν•©μ˜ μ‘΄μž¬μ™€ 쑰합을 κ²€μ¦ν•˜λ©°, μ‹€μ œ LCP νš¨κ³ΌλŠ” 배포 ν›„ μ‹€μΈ‘ λŒ€μƒμœΌλ‘œ μœ μ§€ν•©λ‹ˆλ‹€.
- **UX/μ ‘κ·Όμ„± κ°œμ„ **: ν”„λ‘œμ νŠΈ μΉ΄λ“œμ˜ 클릭 μ˜μ—­μ„ μΉ΄λ“œ μ „μ²΄λ‘œ ν™•μž₯ν•˜μ—¬ μ‚¬μš©μž νŽΈμ˜μ„±μ„ λ†’μ˜€μŠ΅λ‹ˆλ‹€. <a> νƒœκ·Έλ₯Ό ν™•μž₯ν•˜λŠ” λŒ€μ‹  가상 μš”μ†Œ(pseudo-element) κ²ΉμΉ¨ 방식을 μ‚¬μš©ν•˜μ—¬ 슀크린 리더 접근성을 μœ μ§€ν–ˆμŠ΅λ‹ˆλ‹€.
Expand Down
12 changes: 10 additions & 2 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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.98);
}

.button:hover {
Expand Down
Loading