사장님은 큰 모니터로 사이트를 보며 "잘 나오는데?" 하십니다. 하지만 실제 손님 대부분은 지하철에서, 점심을 기다리며, 한 손에 쥔 휴대폰으로 들어옵니다. PC에서 멀쩡하던 화면이 작은 화면에서는 글자가 잘리고 버튼이 겹치고 가로로 비어져 나옵니다. 모바일에서 무너진 첫인상은 그 자리에서 손님을 돌려보냅니다. 작은 회사일수록 더 그렇습니다. 아래 다섯 가지 원칙으로 점검해 보십시오.
1. 모바일을 '곁다리'가 아니라 '본문'으로 설계한다
많은 사이트가 PC 화면을 먼저 만들고 모바일은 나중에 줄여서 끼워 맞춥니다. 그 결과 모바일 화면은 늘 어딘가 어색합니다. 순서를 바꾸십시오. 좁은 화면을 기준으로 먼저 설계하고, 넓은 화면에서 여백을 더하는 방식이 자연스럽습니다. 방문자의 다수가 모바일이라면, 모바일이야말로 본문입니다.
2. 손가락이 닿는 크기로 만든다
마우스 화살표는 1픽셀도 정확히 찍지만 손가락 끝은 그렇지 않습니다. 버튼이 작거나 서로 붙어 있으면 옆 버튼이 눌리고, 손님은 짜증을 냅니다. 핵심은 간단합니다.
- 버튼·링크의 터치 영역은 최소 44픽셀 이상으로 넉넉하게 둔다.
- 누를 수 있는 요소끼리는 충분히 띄워 오작동을 막는다.
- 전화·문의처럼 중요한 버튼일수록 크고 분명하게 만든다.
3. 글자는 늘리지 않아도 읽혀야 한다
손님이 화면을 두 손가락으로 늘리고 있다면, 그건 글자가 너무 작다는 신호입니다. 본문 글자는 16픽셀 이상을 기준으로 잡고, 줄 간격을 넉넉히 주십시오. 한 줄이 너무 길면 눈이 다음 줄을 놓치므로, 모바일에서는 한 줄에 글자가 적당히 끊기도록 폭을 제한하는 것이 좋습니다. 읽기 편한 글이 곧 오래 머무는 손님을 만듭니다.
4. 가로 스크롤은 절대 만들지 않는다
모바일에서 손가락을 옆으로 밀어야 내용이 보인다면 설계가 틀어진 것입니다. 원인은 대개 화면보다 넓은 이미지, 줄바꿈 없는 긴 표, 고정 폭으로 박아 둔 요소입니다. 이미지는 화면 너비에 맞춰 줄어들게 하고, 표는 모바일에서 카드 형태로 풀어 주십시오. 모든 콘텐츠는 위아래 스크롤만으로 닿을 수 있어야 합니다.
5. 중요한 것은 엄지손가락이 닿는 곳에 둔다
한 손으로 휴대폰을 쥐면 엄지가 닿는 범위는 화면 아래쪽입니다. 정작 중요한 전화 걸기·문의하기 버튼이 맨 위에만 있으면 손님은 한참 스크롤을 올려야 합니다. 화면 하단에 항상 떠 있는 문의 버튼 하나가 전화 한 통의 차이를 만듭니다. 손님이 '연락하고 싶다'고 느낀 순간, 그 손길이 닿는 자리에 버튼을 두십시오.
작은 화면이 진짜 매장입니다
작은 회사에게 모바일 화면은 부차적인 버전이 아니라 손님이 실제로 마주하는 매장입니다. 글자 크기, 버튼 간격, 스크롤 방향처럼 사소해 보이는 것들이 모여 "믿을 만한 곳"이라는 인상을 만듭니다. CYAN은 작은 회사의 사이트를 만들 때 큰 모니터가 아니라 손님의 휴대폰을 먼저 펼쳐 봅니다. 지금 사장님 휴대폰으로 회사 사이트를 열어, 두 손가락으로 글자를 늘리고 있지는 않은지 한번 확인해 보시길 권합니다.