모바일 친화성 검사에서 버튼 간격이 너무 좁은 문제를 어떻게 점검할까요?

모바일에서 ‘문의 보내기’를 누르려다 옆의 WhatsApp 아이콘을 터치하거나, 메뉴를 펼칠 때 인접한 항목을 잘못 누르는 문제는 실제 클릭 가능 영역, 인접 영역 간 거리, 페이지 레이아웃의 세 가지 측면에서 점검해야 합니다. 버튼 사이에 간격이 있어 보인다고 해서 터치 영역이 서로 겹치지 않는 것은 아닙니다. 아이콘이 시각적으로 작더라도 충분히 넓은 클릭 영역을 가지고 있을 수 있습니다.

check for mobile friendly를 통해 점검 방법을 찾을 때는 도구의 통과 또는 오류 결과에만 머물지 마세요. 먼저 어떤 페이지, 어떤 화면 너비, 어떤 조작 상태에서 오터치가 발생하기 쉬운지 파악한 다음, 브라우저에서 요소 크기를 확인하고 실제 기기로 검증해야 합니다. 그래야 안쪽 여백을 늘릴지, 간격을 벌릴지, 버튼 전체의 배열을 조정할지 판단할 수 있습니다.

오터치가 발생하는 위치와 상태부터 찾기

해외 무역 웹사이트나 마케팅 랜딩 페이지를 점검할 때는 문의와 구매에 직접 영향을 주는 조작부터 살펴보세요. 상단 내비게이션, 제품 필터, 양식 제출, 장바구니 수량 조절, 하단에 고정된 전화·채팅·문의 버튼 등이 이에 해당합니다. 특히 플로팅 고객 지원 버튼, 쿠키 안내, 하단 작업 표시줄이 동시에 나타나는 경우에 주의하세요. 이 요소들이 원래 정상적으로 클릭할 수 있던 버튼을 가릴 수 있습니다.

홈페이지의 초기 화면만 확인하지 마세요. 제품 상세 페이지에 들어가 메뉴를 펼치고, 필터 패널을 열고, 양식에 유효성 검사 안내가 표시되도록 해 보세요. 같은 버튼 그룹도 기본 상태에서는 간격이 충분하지만, 펼친 뒤에는 새로 나타난 콘텐츠에 밀려 서로 가까워질 수 있습니다. 다국어 사이트에서는 텍스트가 긴 언어 버전도 확인해 번역 후 버튼 텍스트가 줄바꿈되거나 인접한 링크와 가까워지지 않는지 살펴보세요.

문제를 기록할 때는 페이지 주소, 화면 너비, 조작 단계, 잘못 터치된 대상을 최소한으로 남기세요. 예를 들어 “제품 상세 페이지에서 하단 문의 바를 연 뒤 닫기 버튼을 누르면 채팅 버튼이 함께 눌리기 쉽다”는 설명은 “모바일 버튼이 너무 촘촘하다”보다 개발자가 문제를 재현하기 쉽습니다.

클릭 경계를 확인한 뒤 크기가 적절한지 판단하기

브라우저 개발자 도구에서 모바일 기기 에뮬레이션 보기로 전환하고, 요소 선택기로 버튼을 찾아 박스 모델, 너비와 높이, 주변 요소를 확인하세요. 측정 대상은 실제 클릭을 처리하는 링크나 버튼이어야 합니다. 내부 아이콘이나 텍스트만 확인해서는 안 되며, 바깥쪽 장식 컨테이너의 크기를 클릭 영역의 크기로 간주해서도 안 됩니다.

예를 들어 아이콘이 넓은 색상 영역의 중앙에 있어도 아이콘만 클릭할 수 있다면 색상 영역이 터치 범위를 넓혀 주지는 않습니다. 반대로 안쪽 여백을 늘려 버튼을 확장하면 아이콘은 그대로여도 손가락으로 더 쉽게 누를 수 있습니다. 절대 위치 지정 요소와 투명 오버레이도 확인해 시각적으로 비어 있는 공간을 다른 컨트롤이 차지하고 있지는 않은지 점검하세요.

크기를 판단할 때는 WCAG 2.2의 ‘대상 크기(최소)’ 요구사항을 참고할 수 있습니다. 포인터 입력 대상은 원칙적으로 최소 24×24 CSS 픽셀이어야 하며, 간격이나 인라인 링크 등에 대한 예외가 있습니다. 작은 대상이 간격 예외에 해당하는지는 표준에 규정된 원형 영역을 기준으로 판단해야 합니다. “버튼 사이에 몇 픽셀만 띄우면 기준을 충족한다”라고 단순하게 이해해서는 안 됩니다.

문의 제출, 장바구니 담기처럼 자주 사용하는 조작은 손가락으로 누를 여유를 확보할 수 있도록 44×44 CSS 픽셀에 가깝거나 그 이상을 설계 목표로 삼을 수 있습니다. 크기 기준을 충족해도 조작 검증을 대신할 수는 없습니다. 인접한 버튼의 기능이 혼동되기 쉬울수록 간격을 분명히 두고 시각적으로 구분해야 합니다.

원인에 따라 수정해 크기를 키우면서 더 복잡해지는 상황 방지하기

버튼 간격이 너무 좁다고 해서 반드시 바깥쪽 여백만 늘려야 하는 것은 아닙니다. 먼저 터치 영역이 너무 작은지, 컨테이너 공간이 부족한지, 플로팅 레이어가 가리고 있는지 판단한 뒤 수정 방법을 선택하세요.

• 아이콘이나 텍스트의 작은 일부만 클릭할 수 있음: 링크나 버튼의 안쪽 여백을 늘리고 적절한 최소 너비와 높이를 설정하세요. 아이콘 주변의 빈 공간도 동일한 클릭 대상에 포함되도록 합니다.
• 버튼 한 줄이 이미 화면을 가득 채움: 줄바꿈이나 세로 배열로 변경하거나 한 화면에 표시하는 부가 항목을 줄이세요. 버튼을 계속 키우면 가로 넘침이 발생할 수 있습니다.
• 인접한 대상을 잘못 누르기 쉬움: 레이아웃 간격이나 바깥쪽 여백으로 거리를 벌리는 동시에, 확장된 클릭 영역이 겹치지 않는지 확인하세요. 텍스트 간격만 늘려서는 클릭 경계가 개선되지 않을 수 있습니다.
• 플로팅 버튼이 페이지 조작을 가림: 위치, 공간 확보 방식 또는 표시 조건을 조정해 고객 지원 버튼과 하단 바가 시스템 안전 영역과 적절한 관계를 유지하도록 하세요.

운영 담당자는 내비게이션 메뉴, 페이지 번호, 양식 주변의 작은 텍스트 링크를 놓치기 쉽습니다. 본문 단락 안의 인라인 링크는 판단 조건이 다르므로 모두 큰 버튼으로 바꿀 필요는 없습니다. 하지만 ‘뒤로’, ‘제출’, ‘초기화’처럼 나란히 배치된 독립적인 조작은 각각 클릭 범위를 확인해야 합니다.

수정할 때는 조작의 우선순위도 분명하게 유지해야 합니다. 문의 양식의 제출 버튼과 초기화 버튼이 바짝 붙어 있으면 둘 다 크게 만들어도 오작동 가능성이 높아질 수 있습니다. 먼저 부가 조작을 꼭 유지해야 하는지 판단한 다음 레이아웃을 조정하세요. 검사 결과를 통과시키기 위해 모든 버튼을 일괄적으로 확대한 뒤 끝내서는 안 됩니다.

스크린샷만 보지 말고 실제 조작을 포함해 재검증하기

브라우저 에뮬레이션은 레이아웃 문제를 찾는 데 유용하지만, 마우스 클릭의 정확도는 손가락 터치와 다릅니다. 수정한 뒤에는 실제 기기에서 주요 조작을 한 차례 완료해야 합니다. 내비게이션을 열고, 제품을 전환하고, 양식을 작성하고, 팝업을 닫은 뒤 제출해 보세요. 스크롤한 뒤 고정 바의 위치와 소프트 키보드가 나타났을 때 제출 버튼이 가려지는지도 확인하세요.

재검증에는 좁은 화면, 화면이 비교적 넓은 휴대전화, 텍스트가 긴 언어 버전을 포함해야 합니다. 가로 스크롤, 버튼 텍스트 줄바꿈, 페이지 확대·축소, 화면 방향 전환 후의 레이아웃을 확인하세요. 페이지에 viewport가 올바르게 설정되어 있지 않거나 더 많은 내용을 넣기 위해 전체 화면을 축소해 표시한다면, 먼저 이러한 기본 문제를 해결해야 합니다. 그렇지 않으면 일부 요소의 간격을 늘리는 것만으로는 사용성을 개선하기 어렵습니다.

자동 검사 보고서는 일부 크기와 레이아웃 문제를 찾는 데 도움이 되지만, 손가락 조작의 느낌을 완전히 판단할 수 없으며 상호작용 후에 나타나는 컨트롤을 놓칠 수도 있습니다. 초기 튜토리얼에서 언급되던 Google 모바일 친화성 테스트 도구는 제공이 중단되었습니다. 점검 시에는 브라우저 개발자 도구, 접근성 검사 도구, 실제 기기 조작을 함께 활용할 수 있습니다.

검수 시에는 “버튼 간격을 조정했다”는 표현을 재현 가능한 점검 결과로 바꾸세요. 어떤 페이지와 화면 너비, 언어에서 어떤 조작을 완료했고 기존 오터치가 사라졌는지 기록해야 합니다. 광고 트래픽이나 문의 전환을 담당하는 페이지라면 부차적인 버튼보다 제출, 연락, 구매 경로의 장애 요소를 먼저 수정하는 편이 비즈니스 손실에 맞는 작업 순서입니다.