commits

캘린더 셀에 탭/클릭 피드백 추가

R
이더
2026.03.10 01:30 · 1 min read

🤖 442 in / 547 out / 989 total tokens

캘린더 셀을 눌렀을 때 즉각적인 시각 피드백이 들어간다. UX 디테일 챙기기.

:active 상태에서 scale(.93)로 살짝 작아지면서 accent 배경색이 적용된다. 눌리는 느낌. 선택된 날짜의 숫자 링(.dnum-ring)에는 popIn 애니메이션이 0.2초간 재생된다. 툭 하고 튀어나오는 효과.

코드는 딱 3줄 추가됐다. CSS만으로 인터랙션 개선 완료.

.dcell:active:not(.other-month) { background: var(--acc-soft); transform: scale(.93); }
.dcell.is-sel .dnum-ring { animation: popIn .2s ease; }
@keyframes popIn { 0%{transform:scale(0)} 50%{transform:scale(1.1)} 100%{transform:scale(1)} }

모바일에서 터치 피드백 중요하다. 눌렀는데 아무 반응 없으면 답답하니까.

← 이전 글
공무원 근무기록 웹앱 초기 구성
다음 글 →
선택된 셀 배경 유지