요즘 작은 회사 웹사이트로 들어오는 손님 열 명 중 일고여덟 명은 컴퓨터가 아니라 휴대폰으로 화면을 엽니다. 그런데 정작 홈페이지는 큼직한 모니터에서만 점검하고 끝나는 경우가 많습니다. 그 결과 손님의 작은 화면에서는 제목이 칸 밖으로 삐져나오고, 누르려던 버튼은 손가락을 비껴가고, 사진 한 장이 화면을 가로로 밀어버립니다. 가장 많은 손님이 보는 화면에서 첫인상이 무너지는 셈입니다.
'반응형(responsive)'이란 화면 크기에 맞춰 글자·사진·버튼의 배치가 알아서 다시 짜이는 설계를 말합니다. 거창한 기술이 아니라, 좁은 화면을 손님의 기본값으로 두고 설계하느냐의 문제입니다. 작은 회사 웹사이트가 모바일에서 무너지지 않도록 챙겨야 할 5가지 원칙을 정리했습니다.
1. 가장 좁은 화면을 먼저 그린다
대부분의 사고는 '큰 화면으로 멋지게 만든 뒤 휴대폰에 욱여넣는' 순서에서 생깁니다. 순서를 뒤집어, 가장 좁은 휴대폰 화면을 기준으로 먼저 설계하고 넓은 화면으로 늘려가는 편이 안전합니다. 이를 '모바일 우선(mobile-first)'이라 부릅니다.
좁은 화면에서 먼저 그리면 자연스럽게 질문하게 됩니다. 이 손님이 가장 먼저 알아야 할 한 가지는 무엇인가? 모든 것을 한 화면에 다 담으려는 욕심이 빠지고, 핵심만 또렷하게 남습니다.
2. 버튼과 링크는 손가락 크기에 맞춘다
마우스 화살표는 1픽셀도 정확히 짚지만, 손가락 끝은 그렇지 않습니다. 작게 붙여 둔 메뉴나 버튼은 옆 항목이 같이 눌리거나 두세 번 헛손질을 부릅니다.
- 최소 크기를 지킨다. 누를 수 있는 영역은 한 변이 손끝만 한 크기(약 44픽셀 안팎) 이상으로 잡습니다.
- 충분히 띄운다. 버튼과 버튼, 링크와 링크 사이에 여백을 둬 오작동을 막습니다.
- 중요한 버튼은 엄지가 닿는 곳에. 한 손으로 쥔 휴대폰에서 가장 누르기 쉬운 자리는 화면 아래쪽입니다. 전화·문의 같은 핵심 버튼을 그쪽에 두면 전환이 올라갑니다.
3. 글자는 키우고, 한 줄은 좁힌다
데스크톱 기준으로 잡은 작은 글씨는 휴대폰에서 그대로 답답해집니다. 손님이 손가락으로 화면을 확대해 읽어야 한다면 이미 진 싸움입니다.
본문 글씨는 휴대폰에서 16픽셀 이상을 기준으로 삼고, 줄 간격을 넉넉히 둬 한 줄 한 줄이 숨 쉬게 합니다. 한 줄에 글자가 너무 많이 들어가도 눈이 다음 줄을 놓치니, 좁은 화면에서는 한 줄이 적당히 짧게 끊기는 편이 오히려 잘 읽힙니다.
4. 가로 스크롤을 없앤다
모바일에서 가장 흔한 사고는 화면이 좌우로 밀리는 가로 스크롤입니다. 폭을 고정값으로 박아 둔 큰 사진 한 장, 칸을 줄이지 못한 표 하나가 화면 밖으로 비어져 나오면서 생깁니다.
- 사진은 칸에 맞춰 줄어들게. 이미지가 담긴 영역의 폭을 넘지 않도록 설정해 항상 화면 안에 들어오게 합니다.
- 표·가격표는 다시 짠다. 칸이 많은 표는 휴대폰에서 위아래로 풀어 보여주거나, 정말 필요할 때만 그 영역만 좌우로 넘기게 합니다.
- 여러 칸 배치는 한 줄로 접는다. 데스크톱에서 가로로 늘어선 카드들은 휴대폰에서 위에서 아래로 한 줄씩 쌓이게 합니다.
5. 진짜 휴대폰에서 직접 눌러본다
컴퓨터 브라우저 창을 좁히는 것만으로는 부족합니다. 실제 손가락의 두께, 느린 통신, 화면 위쪽을 가리는 주소창, 노치(화면 상단 홈) 같은 변수는 진짜 기기에서만 드러납니다.
새 페이지를 열 때마다 내 휴대폰으로 직접 들어가 처음 보는 손님처럼 위에서 아래로 한 번 훑어보세요. 글자가 잘리는지, 버튼이 한 번에 눌리는지, 옆으로 밀리는 곳은 없는지. 가능하면 안드로이드와 아이폰을 모두 확인하면 더 좋습니다. 이 5분이 가장 많은 손님의 첫인상을 지킵니다.
가장 많은 손님이 보는 화면부터
모바일 반응형은 멋을 내는 작업이 아니라, 대다수 손님이 실제로 마주하는 화면을 기본값으로 대접하는 일입니다. 좁은 화면을 먼저 그리고, 손가락에 버튼을 맞추고, 글자를 키우고, 가로 스크롤을 없애고, 진짜 기기에서 확인하는 것. 이 다섯 가지만 지켜도 휴대폰에서 무너지는 사고는 대부분 사라집니다.
CYAN 에이전시는 작은 회사 웹사이트를 만들 때 데스크톱과 휴대폰을 따로 그리지 않고, 가장 좁은 화면에서부터 손님의 동선을 함께 설계합니다. '우리 사이트가 휴대폰에서 어떻게 보일까' 궁금하다면, 지금 이 글을 본 그 휴대폰으로 회사 홈페이지를 한번 열어보는 것에서 점검을 시작해 보세요.