휴대폰에서 우리 홈페이지가 제대로 나오는지 확인하기

확대하지 않으면 글자가 안 읽히는 화면

휴대폰 대응이 안 된 홈페이지는 PC 화면을 그대로 축소해서 보여줍니다. 회사 이름도 제품 사양도 손가락으로 확대해야 읽힙니다.

거래처 담당자가 회의 중에 회사 이름을 검색해 홈페이지를 열었다고 해 보겠습니다. 화면이 작게 나오면 그 사람은 확대해서 읽는 대신 그냥 창을 닫습니다. 사양을 확인하려던 일이었으니 다른 회사를 한 번 더 검색하면 그만입니다. 홈페이지가 없어서 놓치는 것이 아니라, 있는데 안 읽혀서 놓치는 쪽이 더 흔합니다.

제조사 홈페이지는 특히 손해가 큽니다. 제품 사양이 표로 들어가 있는 경우가 많은데, 표는 화면이 좁아지면 가장 먼저 깨지는 요소입니다. 오른쪽 열이 잘려 나가면 전압이나 용량 같은 핵심 숫자가 통째로 안 보입니다.

1분이면 됩니다

• 휴대폰으로 회사 홈페이지를 엽니다. 글자를 확대하지 않고 읽을 수 있으면 대응된 것입니다.
• 가로로 밀어야 내용이 다 보이면 대응이 안 된 것입니다.
• 제품 페이지의 사양표에서 맨 오른쪽 열까지 보이는지 확인합니다.
• 메뉴 버튼이 손가락으로 누를 만한 크기인지 봅니다.

위 도구는 이 판정을 자동으로 합니다. 홈페이지 소스에서 viewport 설정이 있는지, 화면 크기별 스타일이 몇 개나 들어가 있는지를 읽습니다. 설정 자체가 없으면 축소되는 것이 확실하고, 있어도 화면 크기별 스타일이 거의 없으면 이름만 대응인 경우가 많습니다.

전부 새로 만들어야 하는 건 아닙니다

이미 반응형으로 만들어져 있는데 설정 한 줄이 빠진 경우가 있습니다. 이때는 반나절이면 끝납니다.

반대로 테이블로 화면을 짠 오래된 홈페이지는 설정을 넣어도 모양이 잡히지 않습니다. 구조 자체가 고정 폭을 전제로 만들어져 있어서입니다. 이 경우에는 다시 만드는 편이 결과적으로 싸게 듭니다. 점검 결과에 어느 쪽인지 표시해 드리고, 수정으로 충분하면 그렇게 말씀드립니다.

이 점검 도구는 누가 만들었나

황현수 (Eddy Hwang) · 중앙대학교 전자전기공학부 · 빛솔엘이디 연구개발 재직

전자공학을 전공했고 지금도 제조사 연구개발에서 일합니다. 그래서 홈페이지를 디자인이 아니라 제품 사양 쪽에서 봅니다. 제조사 홈페이지를 하나씩 열어 문제를 찾던 도구가 940여 곳을 거치면서 쓸 만해졌고, 그걸 그대로 공개한 것이 이 점검기입니다. 점검은 자동이지만 시안을 만들 때는 제가 직접 홈페이지를 열어보고 만듭니다.

이력·작업물 보기 · 제작 사례 · 링크드인

이 점검에 대해