PLATON

병원 홈페이지 모바일 전화 버튼, 보이는 번호보다 누르기·연결·가림을 검사합니다

플라톤마케팅 사내 원고 회의 기록, 2023년 12월

모바일 화면에 `전화 상담` 버튼이 크게 보여도 링크에는 이전 번호가 들어 있거나, 누르면 바로 통화가 시작돼 취소하기 어렵거나, 고정 바가 개인정보 동의 버튼을 가릴 수 있습니다. 클릭 이벤트가 기록돼도 실제 대표번호 연결을 증명하지는 않습니다. 표시·링크·조작·배치·착신을 서로 다른 단계로 검사해야 합니다.

보이는 문구와 실제 링크 값을 대조합니다

버튼 이름, 화면에 보이는 번호, HTML의 `tel:` 값과 병원 기준표의 대표번호를 비교합니다. 국가번호·내선·추적 번호가 필요한 경우 기기에서 해석되는 결과를 확인합니다. 운영시간 밖에도 버튼을 유지한다면 자동 안내나 대체 문의 경로를 함께 보여 줍니다.

홈, 진료 안내, 글 상세, 문의 페이지와 광고 랜딩처럼 버튼이 나타나는 템플릿을 모두 확인합니다. 한 공통 컴포넌트처럼 보여도 오래된 페이지에 별도 링크가 남을 수 있습니다.

노트북을 앞에 두고 자료를 설명하는 플라톤마케팅 구성원들
버튼의 표시 번호와 실제 tel 값을 대조합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

누르기 크기와 인접 동작을 검사합니다

WCAG 2.2의 대상 크기 최소 기준은 포인터 입력 대상이 원칙적으로 최소 24×24 CSS 픽셀이거나 작은 대상 사이에 충분한 간격이 있어야 한다고 설명합니다. 대상 크기 최소 기준 해설 기준 충족만으로 사용성이 완성되는 것은 아니므로 중요한 전화 버튼은 실제 한 손 조작도 시험합니다.

예약·채팅·닫기 버튼이 붙어 있으면 잘못 누르지 않는지 봅니다. 320px 너비, 200% 확대, 가로 방향과 큰 글자 설정에서 버튼의 텍스트와 터치 영역이 잘리지 않는지 확인합니다.

표시 / 버튼 이름·보이는 번호·운영시간 안내 · 동작 / tel 값·전화 앱·대표번호 착신과 취소 · 조작 / 터치 크기·간격·키보드 초점·화면낭독 이름 · 배치 / 본문·쿠키창·키보드·확대 시 가림과 중첩
플라톤마케팅 모바일 버튼 제안 · WCAG 2.2 대상 크기 안내 참고 · 2026-10-26

키보드와 화면낭독 이름을 확인합니다

외부 키보드로 초점이 버튼에 도달하고 현재 위치가 보이는지, Enter나 Space 동작이 예측 가능한지 봅니다. 화면낭독기가 `버튼`만 읽지 않고 `대표번호로 전화 상담`처럼 목적을 전달하는지 확인합니다. 아이콘만 있는 버튼에는 접근 가능한 이름이 필요합니다.

초점이 고정 바 뒤에 가려지거나 페이지 이동 때 버튼으로 강제 이동하지 않는지 확인합니다. 통화 앱이 열렸을 때 사용자가 취소하고 원래 페이지로 돌아올 수 있어야 합니다.

회의 테이블에서 각자 노트북 자료를 검토하는 플라톤마케팅 구성원들
작은 화면과 확대 상태에서 터치·초점을 검사합니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

다른 고정 요소와 가림을 점검합니다

쿠키 안내, 채팅창, 브라우저 하단 영역, 화면 키보드와 전화 버튼이 겹치는지 봅니다. 마지막 문단, 폼 제출, 개인정보 동의와 오류 메시지를 가리지 않도록 하단 여백과 중첩 순서를 검사합니다. 세로 스크롤 끝에서 특히 확인합니다.

실기기 3대와 주요 브라우저에서 각각 2회씩 눌러 전화 앱 표시, 번호, 취소와 실제 착신을 기록합니다. 테스트 통화는 실제 문의 집계에서 제외하고, 수정 뒤 같은 URL과 기기 조합으로 재검증합니다.

출처 확인일: 2026-10-26. 화면 너비·확대율·기기 수는 설명 및 검수용 예시입니다. 전화번호와 운영시간은 병원의 최신 승인 자료를 기준으로 해야 합니다.

긴 테이블에 마주 앉아 논의하는 플라톤마케팅 구성원들
고정 버튼이 본문과 다른 팝업을 가리지 않는지 봅니다. 회의 참고 사진 · 플라톤마케팅 · 자사 촬영.

이 글과 이어지는 주제

이 글에 공감하셨다면, 상담 전에 다른 글도 한 번 보십시오. 저희와 맞는지 먼저 확인하시는 편이 서로에게 낫습니다.

카톡으로 물어보기
카카오톡 상담지금 바로 답변드립니다