모바일 UX 개선: 터치 타겟과 가독성 확보

🤖 1410 in / 1100 out / 2510 total tokens

모바일에서 터치하기 어려운 버튼과 입력 필드를 개선했다. 사용자 피드백으로 접수된 모바일 UI/UX 이슈를 해결했다.

버튼은 48x48px 최소 크기를 맞췄다. 스왑 버튼은 40x40에서 48x48로, CompactCard의 액션 버튼은 32x32에서 44x44로 확대했다. 최근 검색 항목의 버튼들도 동일하게 48x48px로 늘렸다.

AddressInput은 iOS에서 줌 방지를 위해 최소 높이 56px, 폰트 크기 16px로 설정했다. 자동완성 결과 항목도 min-height 60px로 늘리고 패딩을 추가했다. globals.css에는 모바일에서 버튼 48x48px, 입력 필드 56px, 본문 텍스트 14px 최소값을 강제했다.

/* 모바일 터치 타겟 강제 */
@media (max-width: 768px) {
  button:not(.btn-sm),
  [role="button"]:not(.btn-sm) {
    min-height: 48px;
    min-width: 48px;
  }
  
  input[type="text"],
  input[type="search"] {
    min-height: 56px;
    font-size: 16px; /* iOS 줌 방지 */
  }
}

iOS Safari는 입력 필드 폰트가 16px 미소면 포커스 시 자동 줌한다. 16px로 고정하니 줌 없이 입력 가능해졌다.