홈페이지제작, 모바일부터 점검해야 하는 이유는 무엇일까요?

홈페이지제작에서 무엇부터 점검하냐고 물으면, 저는 망설임 없이 "모바일 화면"이라고 답합니다. 상담에서 가장 자주 받는 질문이기도 하고, 실제로 방문자의 대부분이 스마트폰으로 홈페이지에 들어오기 때문입니다.

그런데도 많은 홈페이지가 여전히 PC 화면을 기준으로 만들어집니다. 그 결과 모바일에서는 글자가 작고 버튼이 눌리지 않아, 어렵게 데려온 방문자가 문의까지 오지 못합니다. 제가 상담에서 가장 자주 보는 손실이 여기서 생깁니다.

이 글은 제가 실제로 쓰는 점검 순서와 기준 숫자를 그대로 정리한 것입니다. 전면 리뉴얼 없이 지금 고칠 수 있는 범위, 직접 하셔도 되는 부분과 맡기시는 편이 나은 부분, 리뉴얼을 검토해야 하는 시점까지 함께 다룹니다.

왜 모바일을 기준으로 만들어야 할까요?

방문자의 70~90%가 모바일로 들어오기 때문입니다. 판단은 다수가 보는 화면을 기준으로 해야 하고, 그 화면이 지금은 스마트폰입니다.

사람들은 검색 결과나 광고를 대부분 휴대폰으로 봅니다. 그 흐름 그대로 홈페이지에 들어오기 때문에 첫인상도 모바일에서 결정되고, 불편하면 몇 초 안에 뒤로 가기를 누릅니다. 즉 모바일 경험이 곧 전환율이고, 홈페이지제작의 출발점이 되어야 합니다.

저희가 맡은 곳의 방문 데이터를 열어 보면, 모바일 비중이 여덟에서 아홉 할에 이르는 경우가 흔합니다. 그런데 정작 제작과 검수는 큰 화면의 PC에서 진행되곤 합니다. 만드는 사람과 보는 사람의 화면이 다르니, 문제가 뒤늦게 드러나는 것입니다.

화면 크기 차이도 생각보다 큽니다. 데스크톱 모니터는 가로 1,920px 전후지만 스마트폰은 360~430px 수준입니다. 가로 폭이 4분의 1로 줄어들면, PC에서 한 줄이던 문장이 모바일에서는 네 줄이 되고 나란히 놓였던 3단 구성은 위아래로 길게 늘어집니다.

이 점검을 뒤로 미루면 비용이 두 번 듭니다. PC 기준으로 디자인을 확정한 뒤에 모바일을 손보면 화면 설계를 다시 그려야 하고, 그동안 집행한 광고비는 문 앞에서 돌아서는 방문자에게 그대로 쓰입니다. 하루 3만원씩 한 달이면 90만원인데, 그 사이 문의가 몇 건 덜 들어왔는지는 기록에도 남지 않습니다.

▲ 홈페이지제작 시 모바일 우선 점검 항목

모바일에서 가장 먼저 확인할 것은 무엇일까요?

가장 먼저 볼 것은 로딩 속도입니다. 이미지가 무겁거나 불필요한 요소가 많으면 첫 화면이 늦게 뜨고, 방문자는 화면이 뜨기를 기다려 주지 않습니다.

이미지를 가볍게 하고 꼭 필요한 요소만 남기는 것이 속도 개선의 기본입니다. 확인은 와이파이를 끈 상태에서 해야 실제에 가깝습니다. 저는 상담 자리에서 이 확인을 함께 해 보는데, 사무실 유선 인터넷에서 1초에 뜨던 페이지가 이동 중 LTE에서는 5~6초가 걸리는 경우가 흔합니다.

여기까지 확인되면 다음은 가독성입니다. 속도가 3초 안으로 들어왔는데도 이탈이 줄지 않는다면, 대개 글자 크기와 문의 버튼 위치에 원인이 있습니다.

모바일 점검은 어떤 순서로 하나요?

속도 → 가독성 → 문의 버튼 → 문의 폼 → 정보 순서의 다섯 단계로 봅니다. 앞쪽 두 단계에서 체감 개선의 상당 부분이 나오기 때문에, 순서를 지키면 적은 작업으로도 차이를 만들 수 있습니다.

필요한 도구는 많지 않습니다. 본인 휴대폰 한 대와 무료 측정 도구 하나면 첫 점검은 충분합니다. 다만 한 번에 여러 곳을 바꾸면 무엇이 효과가 있었는지 알 수 없습니다. 한 단계씩 바꾸고 그때마다 다시 확인하는 편이 남는 것이 많습니다.

• 와이파이를 끄고 휴대폰으로 홈페이지를 열어, 흰 화면이 몇 초 지속되는지 셉니다. 3초를 넘으면 속도부터 손봅니다.
• 첫 화면만 보고 "무슨 일을 하는 곳인지" 한 줄로 말할 수 있는지 확인합니다. 말이 안 나오면 문구 순서를 바꿉니다.
• 본문을 확대 없이 읽을 수 있는지 봅니다. 손가락으로 벌려야 읽힌다면 본문이 16px 미만일 가능성이 큽니다.
• 화면을 좌우로 밀어 봅니다. 밀린다면 표나 이미지가 화면 폭을 넘고 있는 상태입니다.
• 문의까지 몇 번 눌러야 하는지 셉니다. 3번을 넘으면 경로를 줄입니다.
• 전화번호를 눌러 통화 화면으로 넘어가는지 확인합니다. 번호가 이미지로 들어가 있으면 눌러도 반응하지 않습니다.
• 문의 폼을 실제로 한 번 작성해 제출까지 해 봅니다. 필수 항목 수와 입력 키보드 종류를 함께 봅니다.
• 가족이나 직원에게 휴대폰을 주고 문의까지 해 보게 합니다. 어디서 멈추는지가 가장 정확한 신호입니다.

점검에 걸리는 시간은 한 페이지당 10~20분입니다. 페이지가 많으면 전부 볼 필요는 없고, 방문이 가장 많은 페이지와 광고가 도착하는 페이지 2~3개만 먼저 보면 됩니다.

이 여덟 가지는 직접 하셔도 되는 범위입니다. 세어 보고 눌러 보는 일이라 전문 지식이 필요하지 않고, 오히려 매일 응대하시는 분이 어디가 불편한지 더 잘 압니다. 반대로 확인된 문제를 고치는 일 가운데 이미지 일괄 경량화, 반응형 구조 수정, 폼 동작 변경은 맡기시는 편이 낫습니다. 잘못 건드리면 PC 화면이 함께 깨지는 작업들입니다.

문의 버튼은 어디에 두어야 할까요?

화면 하단에 고정해 두는 것이 가장 안전합니다. 엄지손가락이 자연스럽게 닿는 영역이 화면 아래쪽이라, 스크롤 위치와 무관하게 언제든 누를 수 있기 때문입니다.

화면을 한참 내려야 버튼이 나오면 대부분은 그 전에 떠납니다. 그래서 저는 전화·상담 버튼을 화면 하단에 고정하고, 전화 걸기와 문자 상담을 함께 두어 상황에 맞게 고를 수 있게 하라고 말씀드립니다. 통화가 부담스러운 시간대에 들어온 분도 그냥 나가지 않게 됩니다.

크기에도 기준이 있습니다. 버튼 높이는 44px 이상, 버튼끼리는 8px 이상 띄웁니다. 나란히 붙은 버튼이 좁으면 전화를 누르려다 상담을 누르는 오조작이 생깁니다.

하단 고정 버튼은 2개까지가 적당합니다. 전화와 카카오톡 상담처럼 성격이 다른 두 개면 충분하고, 3개 이상 늘어나면 각 버튼이 좁아지면서 오히려 누르기 어려워집니다.

모바일 문의 폼은 몇 항목이 적당할까요?

필수 항목 3~5개가 적당합니다. 이름·연락처·문의 내용 세 개가 기본이고, 상담 가능 시간이나 지역처럼 응대에 꼭 필요한 항목만 하나둘 더하는 선에서 멈추는 편이 좋습니다.

모바일은 작은 화면에서 키보드가 절반을 가린 상태로 입력합니다. PC에서는 부담 없던 8~10개 항목이 모바일에서는 중간에 포기하는 이유가 됩니다. 전문직 사무소 쪽에서는 상담 목적, 희망 일정, 관련 서류 보유 여부까지 미리 받으려다 항목이 열 개를 넘긴 경우를 자주 봅니다. 그 정보는 통화 한 번으로 5분 만에 확인되는데, 그 한 번을 얻지 못해 문의 자체가 사라집니다.

선택 항목을 없앨 필요는 없습니다. 필수와 선택을 분명히 나누고, 선택 항목은 아래쪽으로 내리면 됩니다.

• 필수 항목은 3~5개로 제한하고, 나머지는 선택으로 내립니다.
• 연락처 칸에서는 숫자 키보드가 바로 뜨도록 설정합니다.
• 주소는 직접 입력보다 검색으로 넣게 하고, 상세 주소만 타이핑하게 합니다.
• 개인정보 동의는 전문을 펼쳐 놓지 말고 접어 두고, 체크 영역은 크게 만듭니다.
• 제출 후에는 "접수되었습니다"와 예상 연락 시점을 함께 보여 줍니다.
• 제출 실패 시 입력값이 사라지지 않게 합니다. 다시 처음부터 쓰게 하면 대부분 이탈합니다.

리뉴얼 없이 지금 바로 고칠 수 있는 것은?

이미지 용량, 본문 글자 크기, 문의 버튼 고정 이 세 가지는 리뉴얼 없이 대부분 바꿀 수 있습니다. 보통 반나절에서 2일 정도의 작업이고, 체감 차이는 이 단계에서 가장 크게 나타납니다.

전면 리뉴얼이 부담스럽다면 작은 것부터 바꿔도 효과가 있습니다. 무거운 이미지를 줄이고, 본문 글자를 키우고, 문의 버튼을 고정하는 것만으로도 체감이 달라집니다.

저는 이런 점검을 홈페이지제작 이후에도 3~6개월 주기로 운영 일정에 넣어 두라고 권합니다. 콘텐츠가 쌓이면서 다시 무거워지는 것을 미리 잡을 수 있습니다. 작업 전에는 현재 상태 백업을 먼저 받아 둡니다. 이미지 교체나 글자 크기 조정은 대체로 안전하지만, 되돌릴 지점이 없으면 작은 작업이 큰일이 됩니다.

부분 개선과 전면 리뉴얼, 어떻게 고르나요?

구성은 괜찮은데 무겁고 글자만 작은 상태라면 부분 개선으로 충분합니다. 반대로 모바일 전용 화면이 아예 없거나 좌우로 밀어야 내용이 보이는 구조라면, 항목별 수정으로는 한계가 있어 리뉴얼을 검토합니다.

판단이 어렵다면 부분 개선을 먼저 하는 것이 순서상 안전합니다. 이미지와 글자, 버튼을 정리한 뒤에도 문의가 움직이지 않는다면, 그때는 개별 요소가 아니라 구조 문제라는 근거를 갖고 리뉴얼을 결정할 수 있습니다. 순서를 거꾸로 밟아 곧바로 리뉴얼에 들어가면, 100만원 안쪽에서 끝날 일에 300만원과 한 달을 쓰고도 원인은 그대로 모르는 상태가 됩니다.

아래 표에서 자기 상황에 해당하는 줄이 많은 쪽을 고르면 됩니다.

모바일 최적화 효과는 어떻게 확인할까요?

방문 300~500회 또는 2~4주가 쌓인 뒤에 판단합니다. 하루 이틀 숫자로는 요일과 광고 변동 때문에 개선 효과인지 아닌지를 구분하기 어렵기 때문입니다.

바꾸기만 하고 결과를 확인하지 않으면 무엇이 좋아졌는지 알 수 없습니다. 방문자가 얼마나 머무는지, 어느 화면에서 이탈하는지, 문의 버튼을 누른 비율이 개선 전후로 어떻게 달라졌는지를 함께 봅니다. 숫자로 확인해 두면 다음 개선의 방향을 잡기가 훨씬 수월해집니다.

볼 숫자는 네 가지면 충분합니다. 모바일 방문 수, 첫 화면 이탈률, 문의 버튼 클릭 비율, 실제 문의 수입니다. 앞의 두 개는 화면이 제대로 떴는지, 뒤의 두 개는 전환까지 이어졌는지를 알려 줍니다.

같은 기간에는 광고 예산과 키워드를 그대로 두는 것이 중요합니다. 모바일 화면만 바꾸고 다른 조건을 고정해야 비교가 성립합니다. 여기서 화면 문제가 아니라는 결론이 나오면, 다음은 첫 화면 문구와 제안 내용을 손볼 차례입니다.

홈페이지제작은 한 번의 완성이 아니라 데이터를 보며 다듬어 가는 과정에 가깝습니다. 작은 변화라도 방문자의 반응을 확인하며 이어 가는 것이 결국 전환으로 이어집니다.

흔히 하는 실수는 무엇인가요?

PC 화면으로만 확인하고 끝내는 것이 가장 흔한 실수입니다. 제작과 검수는 큰 모니터에서 하고 방문자는 작은 화면으로 보는 상태가 이어지면, 문제가 몇 달 뒤 문의 감소로만 드러납니다. 원인을 다시 찾는 데 또 몇 주가 듭니다.

두 번째는 브라우저 창을 줄여 보고 확인했다고 넘어가는 경우입니다. 창 크기만 줄이면 실제 기기의 글자 크기, 터치 반응, 통신 속도는 확인되지 않습니다. 반드시 실제 휴대폰으로 열어 봐야 합니다.

세 번째는 기능을 계속 더하는 경우입니다. 슬라이드 배너, 팝업, 채팅창, 애니메이션이 하나씩 쌓이면 각각은 작아도 합쳐서 첫 화면을 1~2초 늦춥니다. 모바일에서는 덜어내는 쪽이 대체로 유리합니다.

네 번째는 한 번 고치고 끝내는 경우입니다. 이미지와 콘텐츠는 계속 쌓이기 때문에, 개선 후 6개월이 지나면 원래 상태로 돌아가 있는 경우가 흔합니다. 반년마다 10분씩 보는 것과 다시 처음부터 손보는 것의 차이는 생각보다 큽니다.

정리하면, 홈페이지제작은 PC가 아니라 모바일 화면을 기준으로 점검해야 합니다. 속도와 가독성, 문의 버튼 위치를 먼저 살피는 것이 전환의 출발점입니다. 저희는 홈페이지제작과 리뉴얼에서 모바일 우선 구조를 기준으로 설계합니다. 지금 휴대폰으로 내 홈페이지를 열어, 와이파이를 끄고 3초를 세어 보시길 권합니다. 그것만으로도 먼저 손볼 곳이 대개 분명해집니다.