모바일 랜딩 페이지가 망가지는 이유

트래픽 대부분은 모바일 랜딩 페이지에 도착해요

Meta, Instagram, TikTok에서 오는 유료 트래픽은 휴대폰으로 도착해요. 대개 Safari나 Chrome이 아니라 앱 안에 들어 있는 브라우저로요. 이 웹뷰는 생각보다 좁고, 자기 상단바와 하단바에 화면을 내줘요. 그런데 디자이너는 아직도 27인치 모니터에서 전체 너비로 모바일 랜딩 페이지를 검토하고 승인해요. 호텔 와이파이에 물린 중급 안드로이드 폰에서는 한 번도 안 열어보고요. 이제는 데스크톱 버전이 예외예요. 휴대폰 레이아웃을 먼저 그리고, 데스크톱이 거기서 물려받게 하세요.

히어로가 가장 먼저 망가져요

3단 칼럼이 세로로 쌓여 아무것도 없는 긴 띠가 돼요. 64픽셀로 잡은 헤드라인은 여섯 줄로 접히면서 버튼을 화면 밖으로 밀어내요. 넓은 히어로 이미지는 축소되다가 안에 있던 제품이 얼룩처럼 뭉개져요. 데스크톱에서 120픽셀 간격으로 띄운 섹션은 휴대폰 사용자에게 빈 공간만 스크롤하게 만들고요. 100vh로 잡은 섹션은 iOS에서 브라우저 툴바에 잘려요. svh와 dvh 단위가 나온 이유가 바로 그거예요. 휴대폰 브레이크포인트에는 글자 크기 체계와 여백을 따로 잡아주세요.

폼은 탭 하나씩 사람을 잃어요

Apple은 터치 영역을 최소 44 x 44포인트로 요구하고, Material Design은 48dp를 요구해요. 그런데 모바일 CTA 중에는 아직도 높이 32픽셀로 나가면서 6픽셀 옆에 다른 링크가 붙어 있는 경우가 많아요. 입력창 글자가 16픽셀 아래면 iOS Safari가 포커스될 때 화면을 확대해서 레이아웃이 옆으로 튀어요. input type을 잘못 잡으면 전화번호 칸에 QWERTY 자판이 통째로 올라오고요. 그다음에는 화면 키보드가 전송 버튼을 덮어서, 방문자는 폼이 다 끝났다는 걸 몰라요. input type과 autocomplete 속성을 제대로 지정하세요.

진짜 휴대폰에서 테스트하세요

흔한 페이지에서 휴대폰 화면을 덮는 것들을 세어보세요. 고정 헤더, 쿠키 배너, 프로모션 바, 구석의 채팅 버블, 그리고 하단 고정 CTA요. 이것들이 합쳐지면 내용이 나오기도 전에 화면의 3분의 1을 가져가요. 계속 떠 있을 요소는 하나만 고르고 나머지는 내리세요. 그다음 본인 휴대폰에서 모바일 데이터로, 실제 광고 링크를 눌러, 앱 안 브라우저로 페이지를 열어보세요. Chrome 기기 에뮬레이션은 웹뷰 툴바도, 느린 네트워크도 보여주지 않아요.