320px-414px: 모바일 메뉴의 스위트 스팟 너비

QR 메뉴가 로드될 때 중요한 것은 휴대폰의 실제 픽셀 너비뿐입니다. 이즈미르 코나크의 24테이블 레스토랑은 모바일 우선 리디자인 후 모바일 전환율이 38% 상승했습니다 — 유일한 변화는 320-414px 범위에 대한 밀리미터 단위 적합이었습니다.

왜 320-414px인가

StatCounter 2024에 따르면 QR 메뉴 방문자의 72%가 이 범위의 기기를 사용합니다: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). 태블릿은 12%, 데스크톱은 16%에 불과합니다.

thMenu 테마는 "mobile-only-priority" 접근 방식을 사용합니다. 태블릿과 데스크톱에는 자체 브레이크포인트가 있지만 모든 중요한 UX 결정은 375px에서 이루어집니다.

디자인 규칙

타협 불가능한 세 가지 규칙:

• 탭 타깃 ≥ 44×44px — Apple HIG 및 WCAG 2.5.5 요구사항.
• Padding ≥ 16px — 내부 여백 필수.
• 본문 폰트 ≥ 14px, input ≥ 16px — iOS Safari는 16px 미만에서 자동 줌.

흔한 실수

가장 흔한 실수: 1200px에서 완벽하게 보이는 메뉴가 360px에서 가로 스크롤을 발생시킴. thMenu 테마 편집기에는 배포 전 이를 감지하는 "320px 테스트" 미리보기가 있습니다.

해결책: 단일 열 카드 레이아웃, aspect-ratio: 4/3 이미지, sticky 필터 바. 페이지 체류 시간이 1:42에서 3:18로 늘었고 add-to-cart는 38% 상승했습니다.

자주 묻는 질문

320px는 여전히 중요한가요? 네 — iPhone SE와 구형 Android가 여전히 사용하며, 이들을 무시하면 매출의 5-8%를 잃습니다.

태블릿 전용 디자인이 필요한가요? 아니요 — Flexbox/Grid는 768px 이상에서 자동으로 확장됩니다.

가로 모드가 레이아웃을 깨나요? 그럴 수 있습니다 — thMenu는 가로 모드에서 헤더 높이를 40% 자동 축소합니다.

도움이 되셨나요? 공유해 주세요.