사장님은 보통 큰 모니터 앞에서 본인 사이트를 확인합니다. 그런데 정작 고객의 7할 이상은 지하철에서, 식당 줄에서, 침대에 누워 한 손으로 휴대폰을 들고 우리를 만납니다. 데스크톱에서 완벽해 보이던 화면이 그 작은 유리판 위에서는 전혀 다른 얼굴이 되는 이유입니다. 작은 회사가 모바일 화면에서 고객을 놓치지 않으려면 챙겨야 할 다섯 가지를 정리했습니다.
1. 손가락은 마우스 커서보다 굵다
마우스 커서는 1픽셀도 정확히 찍지만, 손끝은 그렇지 않습니다. 버튼이나 링크가 너무 작거나 다닥다닥 붙어 있으면 고객은 옆 버튼을 잘못 누르고, 한 번 실수한 화면에서는 짜증이 먼저 남습니다.
- 터치 영역은 최소 44~48px를 확보합니다. 글자만 작게 두지 말고 버튼 자체에 넉넉한 여백(padding)을 줍니다.
- 나란히 놓이는 버튼 사이에는 최소 8px 이상의 간격을 둬 오타치를 막습니다.
- 전화·예약처럼 가장 중요한 동작일수록 버튼을 크게 키웁니다.
2. 중요한 버튼은 엄지가 닿는 곳에 둔다
한 손으로 휴대폰을 쥐면 엄지가 편하게 닿는 영역은 화면 아래쪽 절반입니다. 정작 핵심 버튼이 화면 맨 위에 있으면 고객은 손을 고쳐 잡아야 합니다. 그 사소한 불편이 이탈로 이어집니다.
이렇게 해보세요
- ‘전화 문의’, ‘카톡 상담’ 같은 핵심 행동은 화면 하단에 고정(sticky)해 스크롤해도 늘 손끝에 두게 합니다.
- 긴 페이지라면 맨 아래에 한 번 더 같은 버튼을 반복해 둡니다.
3. 가로로 늘어놓던 것을 세로로 다시 쌓는다
데스크톱에서 가로 3열로 예쁘게 놓였던 카드가, 모바일에서 억지로 줄어들면 글자가 깨지고 이미지가 찌그러집니다. 모바일은 ‘축소판’이 아니라 세로로 다시 설계한 화면이어야 합니다.
- 여러 열은 모바일에서 한 줄(1열)로 자연스럽게 쌓이도록 합니다.
- 가격표나 비교표처럼 가로로 넓은 표는 좌우 스크롤보다 항목별 카드 형태로 바꿔 보여줍니다.
- 가로로 긴 메뉴는 햄버거 메뉴로 정리하되, 핵심 메뉴 한두 개는 밖으로 꺼내 둡니다.
4. 글자는 16px 아래로 내려가지 않는다
본문 글씨가 작으면 고객은 두 손가락으로 화면을 확대하며 읽어야 합니다. 게다가 입력칸 글자가 16px보다 작으면 일부 휴대폰은 입력할 때 화면을 멋대로 확대해버려 더 어수선해집니다.
- 본문은 최소 16px를 기준으로 잡습니다.
- 줄 간격은 1.5 안팎으로 넉넉히 둬 답답함을 덜어줍니다.
- 한 줄이 너무 길지 않게, 좌우 여백을 충분히 확보합니다.
5. 진짜 휴대폰으로 직접 눌러본다
가장 흔한 실수는 PC 브라우저 창만 줄여 보고 ‘모바일도 괜찮네’ 하고 넘기는 것입니다. 실제 손가락의 두께, 햇빛 아래 화면 밝기, 느린 데이터 속도는 모니터 앞에서 절대 보이지 않습니다.
- 출시 전 본인 휴대폰으로 처음부터 끝까지 직접 눌러봅니다. 전화 걸기, 문의 보내기까지 끝까지 해봅니다.
- 가능하면 안드로이드·아이폰 양쪽, 화면이 작은 기기에서도 확인합니다.
- 주변 사람에게 휴대폰을 건네고 ‘예약 한번 해보세요’라고 시켜보면 막히는 지점이 금세 드러납니다.
작게 보이는 화면이 매출의 대부분을 결정한다
모바일 화면은 작지만, 그 작은 화면이 우리 회사의 첫인상과 매출의 대부분을 좌우합니다. 손가락 굵기를 배려한 버튼, 엄지가 닿는 위치, 세로로 다시 짠 레이아웃, 충분히 큰 글자, 그리고 실기기 점검. 이 다섯 가지만 지켜도 고객이 문 앞에서 돌아서는 일은 크게 줄어듭니다.
CYAN 에이전시는 사이트를 만들 때 데스크톱이 아니라 모바일 화면을 먼저 그리고(mobile-first) 실제 기기에서 끝까지 눌러본 뒤 넘겨드립니다. ‘우리 사이트가 휴대폰에서 제대로 보이고 있을까’ 궁금하시다면, 지금 들고 계신 그 휴대폰으로 한번 직접 눌러보시는 것부터 시작해 보세요.