휴대폰 화면

좁은 화면 기준으로 만듭니다

넓은 화면을 먼저 짜고 줄이는 게 아니라, 좁은 화면을 먼저 짜고 넓힙니다. 반대로 하면 폰에서 무너집니다.

7건을 만들면서 매번 390px 폭으로 모든 화면을 봤습니다. 옆으로 밀린 곳은 한 군데도 없었습니다.

같은 화면을 데스크톱에서도 함께 쟀습니다. 양쪽 다 밀린 곳이 없었습니다.

손님처럼 한 번 해 보세요

폰에서 예약을 넣어 보고 장바구니에 담아 보세요. 손가락으로 해 보면 마우스로는 안 보이던 것이 보입니다.

글을 읽는 것만으로는 모릅니다. 눌러 보는 데서 대부분 드러납니다.

옆으로 밀리는지

폰에서 좌우로 손가락을 밀어 보세요. 화면 전체가 손가락을 따라오면 뭔가 삐져나온 겁니다.

긴 표나 큰 사진에서 잘 생깁니다. '요금표가 폰에서 옆으로 밀려요'처럼 어디서 봤는지 말하면 고칩니다.

입력칸 글자는 16px 이상

아이폰은 입력칸 글자가 16px보다 작으면 누를 때마다 화면을 확대합니다. 확대된 채로 남아서 손님이 당황합니다.

우리 화면에서 실제로 겪은 일이라 지금은 입력칸 글자를 전부 16px 이상으로 두었습니다.

누르는 자리는 24×24 이상

손가락은 마우스 화살표보다 훨씬 뭉툭합니다. 링크가 작고 촘촘하면 옆의 것이 눌립니다.

가로세로 24px가 하한입니다. 문장 안에 섞여 있는 링크는 예외로 둡니다.

작은 글자는 폰에서 더 작습니다

12px보다 작은 글자는 폰에서 읽기 힘듭니다. 가격이나 영업시간처럼 꼭 읽어야 하는 글은 하한보다 키우는 편이 낫습니다.

확인하는 법

미리보기 주소는 폰에서도 그대로 열립니다. 다 만들어지면 내 폰으로 한 번 여세요. 10초면 세 가지가 다 보입니다.