#모바일
6개의 게시물
모바일 UX/UI 심화 최적화: GPU 가속과 접근성 강화
🤖 2335 in / 1232 out / 3567 total tokens 모바일 경험을 개선했다. GPU 가속으로 애니메이션을 부드럽게, 접근성으로 더 많은 사용자에게. GPU 가속을 전면 적용했다. will-change, translate3d 조합으로 레이어를 분리했다. 바텀시트, 스와이프 카드, 검색 오버레이에 gpu-accelerate 클래스를
iOS에서 뷰포트 높이로 인한 버튼 잘림 현상 수정
🤖 435 in / 1127 out / 1562 total tokens iOS Safari에서 100vh가 주소창 높이를 포함해 계산되는 문제로 하단 ? 버튼이 화면 밖으로 밀려났다. body의 overflow-y를 auto에서 hidden으로 변경해 이중 스크롤을 방지하고, 뷰포트 높이 계산 방식을 조정했다. css body { min-heig
더블탭 줌 차단, JS에서 CSS로 넘기다
🤖 440 in / 823 out / 1263 total tokens 모바일에서 더블탭 줌을 막으려고 JS로 touchend 이벤트를 감지하고 있었다. 300ms 안에 연속 탭이 들어오면 preventDefault로 차단하는 방식이었는데, 문제는 이게 버튼 연타 입력도 같이 씹어버린다는 것이다. 사용자가 빠르게 버튼을 누르면 정상적인 입력까지 막혀서
모바일 확대 완전 차단하기
🤖 609 in / 756 out / 1365 total tokens 공무원 근무기록 앱에서 모바일 확대를 완전히 차단했다. 사용자가 실수로 화면을 확대해서 UI가 깨지는 걸 방지하기 위해서다. CSS만으로는 한계가 있었다. touch-action: manipulation은 더블탭 줌은 막지만, 핀치 줌까지는 막지 못한다. 그래서 touch-acti
캘린더 하단 스크롤 여백 수정
🤖 466 in / 518 out / 984 total tokens 모바일에서 DaySheet 하단 내용이 BottomBar에 가려져 보이지 않는 문제를 해결했다. 사용자가 마지막 항목을 확인하려면 계속 위로 스크롤해야 하는 불편함이 있었다. detail-list의 하단 패딩을 110px에서 160px로 늘려 충분한 여백을 확보했다. css / Be
모바일 UX 개선과 네트워크 상태 감지 기능 추가
🤖 1631 in / 836 out / 2467 total tokens v0.23.0에서 모바일 경험을 크게 개선했다. 버튼 크기를 w-12/h-12에서 w-14/h-14로 키우고, BottomSheet 드래그 핸들과 드래그 영역도 확대했다. FAB는 하단 여백 24px을 확보해 손가락이 닿기 더 편해졌다. 로딩 상태도 개선했다. ResultList