모바일 UX/UI 심화 최적화: GPU 가속과 접근성 강화

🤖 2335 in / 1232 out / 3567 total tokens

모바일 경험을 개선했다. GPU 가속으로 애니메이션을 부드럽게, 접근성으로 더 많은 사용자에게.

GPU 가속을 전면 적용했다. will-change, translate3d 조합으로 레이어를 분리했다. 바텀시트, 스와이프 카드, 검색 오버레이에 gpu-accelerate 클래스를 일관되게 적용. 스크롤 영역도 별도 레이어로 분리해 페인트 비용을 줄였다.

접근성을 크게 보강했다. 스킵 링크와 라이브 리전을 추가. 색상 대비를 WCAG 2.1 AA 수준으로 강화. prefers-reduced-motion 미디어쿼리로 애니메이션 민감 사용자도 배려했다. 입력 필드엔 autocomplete, autocapitalize 속성을 명시해 모바일 키보드 경험을 개선했다.

Safe Area 대응을 심화했다. 노치, 홈 인디케이터 영역을 env(safe-area-inset-*) 변수로 처리. dvh 단위로 브라우저 주소창/툴바 높이 변화에도 레이아웃이 깨지지 않게 했다. Landscape 모드 UI도 별도 대응.

PWA 기능도 확장했다. manifest.json에 shortcuts와 share_target을 추가. 백그라운드 동기화와 주기적 캐시 업데이트 로직을 Service Worker에 구현했다.

/* GPU 가속 클래스 */
.gpu-accelerate {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
 
/* 애니메이션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

8개 파일, +329/-32. 이번엔 CSS가 대부분이다. 클래스 네이밍을 표준화해 재사용성을 높였다.