손님은 이미 휴대폰 안에 들어와 있다
작은 회사 웹사이트의 방문자 열에 일곱은 휴대폰으로 들어온다. 그런데 정작 화면을 열면 글씨는 좁쌀만 하고, 버튼은 손끝보다 작아 옆 링크가 눌리며, 표는 화면 밖으로 삐져나가 좌우로 밀어야 겨우 읽힌다. 손님은 두 손가락으로 화면을 벌려 확대하다 이내 지쳐 창을 닫는다. 모바일 최적화란 '휴대폰에서도 열리게' 하는 일이 아니라, 휴대폰에서 먼저 편하게 만드는 일이다. 오늘은 작은 회사가 반드시 챙겨야 할 다섯 가지를 정리한다.
1. 데스크톱을 줄이지 말고, 모바일부터 그린다
큰 화면용으로 먼저 만든 뒤 휴대폰에서 억지로 우겨넣으면, 좁은 화면엔 늘 무언가가 넘치거나 뭉개진다. 순서를 뒤집어야 한다. 가장 좁은 화면에서 꼭 필요한 것만 남긴 뒤, 화면이 넓어질수록 여백과 요소를 더해 가는 '모바일 퍼스트'가 정석이다. 좁은 화면에서 살아남은 구성은 넓은 화면에서도 흐트러지지 않는다.
2. 손가락은 화살표보다 굵다
마우스 커서는 1픽셀도 정확히 짚지만, 손끝이 닿는 면적은 지름 1cm에 가깝다. 버튼·링크 같은 누를 수 있는 요소는 최소 44×44픽셀, 서로 최소 8픽셀은 떨어뜨린다. 전화 걸기·문의하기처럼 매출로 이어지는 버튼일수록 크고 넉넉하게 둔다. 촘촘히 붙은 메뉴는 손님이 엉뚱한 곳을 눌러 되돌아 나오게 만든다.
3. 글씨는 확대하지 않아도 읽혀야 한다
본문 글씨가 16픽셀보다 작으면 휴대폰에서 눈이 뻑뻑해진다. 본문은 16픽셀 이상, 줄 간격은 글자 크기의 1.5배 안팎으로 둔다. 한 줄이 화면 끝까지 꽉 차기보다 적당히 끊겨야 눈이 다음 줄을 쉽게 찾는다. 확대해야 읽히는 글은, 읽지 않는 글이 된다.
4. 가로 스크롤은 '고장 신호'다
휴대폰에서 화면을 좌우로 밀어야 하는 순간, 손님은 사이트가 깨졌다고 느낀다. 원인은 대개 정해져 있다. 넓은 표, 화면보다 큰 이미지, 고정 픽셀로 박아 둔 상자다. 이미지는 화면 폭에 맞춰 줄어들게 하고, 표는 카드형으로 바꾸거나 가로 스크롤 영역을 따로 감싸며, 폭은 고정값 대신 비율로 잡는다. 세로로만 흐르는 화면이 편안한 화면이다.
5. 진짜 휴대폰으로, 느린 네트워크에서 열어 본다
개발자 도구의 축소 화면은 진짜 손가락도, 진짜 통신 속도도 흉내 내지 못한다. 실제 휴대폰으로, 그것도 데이터가 느린 밖에서 직접 열어 보는 것만큼 확실한 점검은 없다. 로딩이 몇 초나 걸리는지, 문의 폼에 손가락으로 입력이 되는지, 지도와 전화 버튼이 한 번에 눌리는지를 손님의 자리에서 확인해야 한다.
모바일은 '작은 버전'이 아니라 '기본 버전'이다
손님 대부분이 휴대폰으로 들어오는 시대에, 모바일 화면은 데스크톱을 줄인 부록이 아니라 홈페이지의 본체다. 이 다섯 가지는 특별한 기능이 아니라 기본기이고, 기본기가 빠진 사이트는 손님을 문 앞에서 돌려보낸다. CYAN 에이전시는 모든 홈페이지를 모바일 화면에서 먼저 설계하고 실제 기기로 검수해, 손님이 어느 화면에서 들어오든 같은 완성도를 만나도록 만든다. 지금 우리 홈페이지를 휴대폰으로 한번 열어 보는 것부터가 시작이다.
