손님이 가게를 처음 만나는 곳은 이제 데스크톱 모니터가 아니라 손안의 휴대폰이다. 그런데 많은 작은 회사 웹사이트는 여전히 넓은 PC 화면을 기준으로만 짜여 있어, 휴대폰에서 열면 글자는 깨알처럼 작아지고 버튼은 손끝을 자꾸 빗나간다. 손님은 두 손가락으로 화면을 벌려 가며 겨우 읽다가, 결국 창을 닫는다. 반응형(화면 자동 맞춤) 설계는 멋을 위한 것이 아니라, 대다수 손님을 놓치지 않기 위한 기본기다.
1. 모바일을 먼저 그리고 데스크톱을 나중에 늘린다
좁은 화면에서 꼭 필요한 것만 남기고 설계를 시작하면, 정말 중요한 정보가 무엇인지 저절로 걸러진다. 반대로 PC 화면을 먼저 채운 뒤 휴대폰으로 구겨 넣으면 내용이 넘치고 배치가 무너진다. 작은 화면을 출발점으로 삼는 편이 훨씬 안전하다.
2. 손가락이 편히 닿는 버튼을 만든다
마우스 커서는 점이지만 손가락은 넓적하다. 버튼과 링크는 최소 44픽셀 안팎의 넉넉한 크기로, 서로 충분히 떨어뜨려 배치해야 한다. 특히 전화 걸기·문의하기 같은 핵심 버튼은 엄지가 자연스럽게 닿는 화면 아래쪽에 두는 것이 좋다.
3. 글자는 확대 없이 바로 읽히게 한다
본문 글자는 16픽셀 이상으로 잡아 손님이 화면을 벌리지 않고도 읽게 한다. 줄 간격을 여유 있게 주고, 한 줄이 너무 길지 않도록 폭을 제한하면 작은 화면에서도 눈이 편안하다. 읽기 힘든 글은 아무리 좋은 내용이라도 전달되지 않는다.
4. 이미지는 화면에 맞춰 가볍게 내려보낸다
PC용 큰 사진을 그대로 휴대폰에 보내면 데이터도 낭비되고 로딩도 느려진다. 화면 폭에 맞춰 알맞은 크기의 이미지를 내려보내고, 가로세로 비율을 미리 지정해 두면 사진이 늦게 떠도 화면이 덜컹거리지 않는다.
5. 진짜 기기로 눌러 보며 확인한다
브라우저 축소만으로는 실제 손가락 터치의 불편함이 드러나지 않는다. 가장 흔한 기종의 실제 휴대폰으로 문의 폼까지 직접 눌러 보는 점검을 배포 전 습관으로 삼아야 한다. 손님이 겪을 길을 먼저 걸어 보는 것이 가장 확실한 검수다.
반응형은 '있으면 좋은 기능'이 아니라, 손님 대다수가 서 있는 자리에 맞춰 문을 여는 일이다. CYAN에서는 작은 회사 웹사이트를 만들 때 모바일 화면을 첫 기준으로 삼아, 어느 기기에서 열어도 정보가 또렷하고 버튼이 손끝에 닿도록 설계한다. 홈페이지가 휴대폰에서 어떻게 보이는지 한 번쯤 점검하고 싶다면, 지금 손님의 눈으로 직접 열어 보는 것에서 시작해 보길 권한다.
