소상공인 웹사이트 점검: 한 태권도장의 오래된 워드프레스 사이트에서 발견한 것

Google Lighthouse로 성능·접근성·SEO를 측정하고, 내 문의 폼으로 실제 문의를 하나 보내 어디에 도착하는지 확인하세요. 이번 주 고객 미팅에서 이 두 가지를 해 봤습니다. 점수도 낮았지만, 더 큰 문제는 도장으로 오는 문의 메일이 스팸함에 쌓이고 있었다는 점이었습니다.

고객은 캘거리에서 태권도장을 운영하는 분입니다. 웹사이트는 몇 년 전 다른 개발자가 워드프레스로 만들었고, 그 뒤로는 사장님이 사진 업로드와 글 수정만 직접 해 오셨습니다. 오픈 이후 누구도 사이트 전체를 점검한 적이 없었습니다. 이후 리뉴얼을 저희에게 맡기셨고, 새 사이트가 오픈하면 전후 비교를 공개할 예정입니다. 이 글은 그 "전"에 해당합니다.

점수, 그리고 그 의미

홈페이지를 Lighthouse(13.4 버전, 데스크톱)로 측정했습니다. 모바일도 낮게 나왔습니다.

사장님은 이 숫자를 처음 보셨고, 무엇에 영향을 주는지도 모르셨습니다. 흔한 일입니다. 각 점수 뒤에 무엇이 있었는지 정리했습니다.

성능: 53점

두 가지 측정값이 점수를 끌어내렸습니다.

• 최대 콘텐츠 페인트(LCP): 5.1초. 화면에서 가장 큰 요소, 보통 메인 사진이 나타나기까지 걸리는 시간입니다. 구글 기준은 2.5초 이하입니다. "근처 태권도장"을 검색한 학부모가 5초 동안 반쯤 로드된 화면을 보고 있는 셈입니다.
• 누적 레이아웃 이동(CLS): 0.211. 로딩 중에 화면이 들썩입니다. 이미지에 크기가 지정되지 않아, 이미지가 도착하면서 내용을 아래로 밀어내기 때문입니다. 구글 기준은 0.1 이하입니다. 사람들이 엉뚱한 버튼을 누르게 되는 이유입니다.

그 밑바탕에는 7.5MB짜리 홈페이지가 있었습니다. Lighthouse는 이미지를 알맞은 크기와 형식으로 바꾸기만 해도 약 3.5MB를 줄일 수 있다고 추정했습니다. 또 1MB 정도는 불러오기만 하고 쓰지 않는 CSS와 자바스크립트였습니다. 테마와 플러그인이 흔히 남기는 찌꺼기입니다. 휴대폰 데이터로 접속하면 그 1MB 하나하나가 기다림입니다.

접근성: 77점

특정 사람만의 문제처럼 들리지만, 실제로 잡힌 항목을 보면 다릅니다.

• 확대가 막혀 있었습니다. 페이지가 휴대폰에서 손가락으로 확대하지 못하게 설정되어 있었습니다. 돋보기안경을 차에 두고 온 학부모는 작은 글씨를 아예 읽을 수 없습니다.
• 폼 입력칸에 라벨이 없었습니다. 화면 낭독기가 어느 칸이 이름이고 어느 칸이 전화번호인지 알려 줄 수 없습니다.
• 대비가 낮은 글자가 있어, 낮에 휴대폰으로 읽기 어렵습니다.
• 이름이 없는 링크와 순서가 뒤섞인 제목도 있었습니다.

특별한 문제는 하나도 없습니다. 한 번도 점검하지 않은 테마의 기본 결과입니다.

SEO: 85점

85점은 괜찮아 보입니다. 하지만 지적된 두 가지는 괜찮지 않았습니다.

• 홈페이지에 메타 설명이 없었습니다. 그러면 구글이 페이지에서 찾은 아무 문장으로 검색 결과 설명을 만듭니다. 사장님이 고를 문장인 경우는 드뭅니다.
• 검색엔진이 따라갈 수 없는 링크가 있었습니다. 일부 메뉴가 진짜 링크가 아니어서, 크롤러가 그 뒤의 페이지에 닿지 못했습니다.

어떤 점수보다 중요했던 발견

웹사이트 문의가 어떻게 들어오는지 여쭤보니 "이메일로 온다"고 하셨습니다. 실제 경로를 살펴보니, 문의 폼이 이전 개발자 본인의 이메일 계정을 통해 SMTP로 메일을 보내고, 그 계정이 도장으로 전달하는 구조였습니다. 그리고 그 메일들이 도장의 스팸함으로 들어가고 있었습니다.

얼마나 오래 그랬는지는 알 수 없지만, 그동안 체험 수업 신청 폼을 작성한 학부모들은 아무 답도 받지 못했을 수 있습니다. 사장님이 무시해서가 아니라, 아무도 보지 않는 곳에 메일이 쌓여 있었기 때문입니다.

흔한 원인은 단순합니다. 메일이 어디서 왔다고 주장하는 것과 실제로 보낸 계정이 다르고 그 계정에 발송 권한이 없으면, 받는 쪽에서 진짜인지 확인할 수 없어 의심스러운 메일로 분류합니다. 구글의 발신자 가이드라인에는 도메인이 자기 메일이 진짜임을 증명하는 데 필요한 레코드(SPF, DKIM)가 정리되어 있습니다.

저희가 사이트를 만들 때는 항상 폼이 고객의 도메인으로 인증된 상태에서 발송되고, 고객 본인의 메일함으로 도착하게 구성합니다. 사업장이 자기 고객의 연락을 받는 데 개발자 개인 계정에 기대서는 안 됩니다.

이 글을 읽고 딱 하나만 하신다면, 다른 사람 휴대폰으로 내 문의 폼을 제출하고 받은편지함과 스팸함을 확인해 보세요.

웹사이트는 간판입니다

사장님의 질문은 타당했습니다. 사이트가 돌아가기만 하면 이런 게 정말 중요한가요?

저희는 웹사이트가 가게 앞 간판과 같다고 말씀드렸습니다. 식당을 찾아 길을 걸을 때, 음식에 대해 아무것도 모르면서도 간판이 깔끔하고 외관이 단정한 곳으로 마음이 기웁니다. 의식적으로 그렇게 정하는 사람은 없습니다. 그냥 더 믿음이 갑니다.

웹사이트는 사람들이 방문하기 전에 보는 간판입니다. 느리고, 어수선하고, 한눈에 봐도 옛날 사이트라면 세 도장을 비교하는 학부모는 망설입니다. 수업이 도시에서 가장 좋더라도요. 그 망설임은 어떤 보고서에도 나타나지 않습니다. 그냥 걸려 오지 않은 전화 한 통일 뿐입니다.

사장님은 바로 공감하셨습니다. 이미 느끼고 계셨지만, 그걸 설명할 말과 숫자가 없었을 뿐이었습니다.

15분이면 내 사이트도 점검할 수 있습니다

1. PageSpeed Insights에 홈페이지 주소를 넣고 모바일과 데스크톱 탭을 모두 보세요.
2. 최대 콘텐츠 페인트(LCP)(2.5초 이하 목표)와 누적 레이아웃 이동(CLS)(0.1 이하 목표)을 적어 두세요.
3. 접근성 항목에서 확대 차단과 라벨 없는 입력칸이 있는지 보세요.
4. SEO 항목에서 메타 설명이 빠져 있는지 확인하세요.
5. 내 것이 아닌 휴대폰으로 문의 폼을 제출하고, 받은편지함과 스팸함을 확인하세요.
6. 폼이 누구의 메일 계정으로 발송되는지 알아보세요. 내 계정이 아니라면 그것부터 고치세요.

점수도 유용하지만, 지금 고객을 놓치고 있는지 알려 주는 건 5번입니다.

함께 읽기

• 고친 뒤 매달 계속 확인할 것: 월 웹사이트 유지보수 비용
• 폼은 작동하는데 사람들이 작성하지 않는다면: 문의 폼 전환을 높이는 4가지 수정
• 리뉴얼을 누군가에게 맡기기 전에: 웹 개발 파트너 선정 체크리스트
• 저희가 로컬 비즈니스 사이트를 만드는 방식: 로컬 비즈니스 웹사이트