모바일 홈페이지 CTA 버튼 UX: 상담과 구매를 막지 않는 설계 체크리스트

모바일 홈페이지의 CTA(Call to Action, 행동 유도) 버튼은 "크고 눈에 띄게"만 만들면 끝나지 않습니다. 한 화면의 주 행동을 하나로 정하고, 버튼 문구에 다음 결과를 쓰고, 손가락으로 누르기 충분한 영역과 키보드 초점 상태를 확보해야 합니다. 상담·구매 버튼을 고정할지는 화면을 가리는 정도와 실제 완료율을 함께 보고 결정하세요.

먼저 한 화면의 주 행동을 하나로 정합니다

상품 상세에서 구매하기, 서비스 소개에서 상담 신청하기, 예약 화면에서 예약 시간 선택하기처럼 지금 단계의 다음 행동을 하나 고릅니다. 전화, 카카오톡, 문의, 견적 요청을 모두 같은 색과 크기로 놓으면 방문자는 무엇부터 눌러야 할지 다시 판단해야 합니다.

미국 정부 웹 디자인 시스템은 중요한 행동을 다른 버튼보다 뚜렷하게 구분하고, 한 페이지에 버튼을 너무 많이 두지 말라고 안내합니다.[2] 주 버튼 하나를 정한 뒤 나머지는 보조 링크나 낮은 강조의 버튼으로 내리는 편이 낫습니다.

버튼 우선순위는 색보다 순서에서 시작합니다. 방문자가 이 화면에서 해결하려는 일을 한 문장으로 적고, 그 일을 끝내는 행동에만 가장 강한 스타일을 주세요.

버튼 문구에는 누른 뒤 일어날 일을 씁니다

확인, 바로가기, 클릭은 짧지만 결과가 모호합니다. 상담 내용 보내기, 배송지 저장하기, 결제하기처럼 동사와 대상을 함께 쓰면 다음 화면을 짐작하기 쉽습니다. GOV.UK 디자인 시스템도 버튼 문구가 수행할 행동을 설명하도록 권하며, 저장 여부에 따라 Continue와 Save and continue를 구분합니다.[6]

다음 순서로 문구를 점검해 보세요.

1. 버튼을 누르면 서버에 저장되는지, 단순히 다음 화면으로 이동하는지 구분합니다.
2. 결제·신청·삭제처럼 되돌리기 어려운 행동은 결과를 구체적으로 적습니다.
3. 화면 밖 맥락 없이 버튼만 읽어도 뜻이 통하는지 확인합니다.
4. 같은 행동에는 사이트 전체에서 같은 표현을 씁니다.

예시: 문의 내용을 아직 보내지 않는 단계라면 다음보다 연락처 입력하기가 정확합니다. 마지막 제출 버튼은 상담 신청 보내기처럼 실제 전송을 드러낼 수 있습니다.

터치 영역은 보이는 글자보다 넓어야 합니다

WCAG 2.2의 AA 기준은 포인터 입력 대상이 원칙적으로 최소 24×24 CSS 픽셀이어야 하며, 작은 대상은 주변 간격으로 예외 조건을 만족할 수 있다고 설명합니다.[1] 이 수치는 목표선의 출발점입니다. 손가락으로 자주 누르는 핵심 버튼은 글자 주변 여백을 넉넉히 두고, 서로 붙은 아이콘 버튼 사이에도 간격을 둬야 합니다.

버튼 검수에서는 눈대중 대신 브라우저 개발자 도구로 실제 영역을 확인합니다.

• 버튼의 클릭 가능한 전체 사각형을 측정합니다.
• 아이콘만 있는 닫기·공유·찜 버튼도 같은 방식으로 봅니다.
• 200% 확대에서 버튼이 겹치거나 화면 밖으로 밀리지 않는지 확인합니다.
• 세로·가로 화면 모두에서 인접 버튼을 잘못 누르기 쉬운지 직접 눌러 봅니다.

미국 정부 웹 디자인 시스템은 완성된 구성 요소를 가져다 써도 실제 프로젝트 맥락에서 다시 접근성 테스트를 하라고 명시합니다.[4] 디자인 파일의 크기만 확인하지 말고, 운영 화면에서 링크·고정 바·브라우저 확대까지 함께 검사해야 하는 이유입니다.

하단 고정 버튼은 가림과 상태 변화를 함께 봅니다

모바일 하단 고정 CTA는 긴 페이지에서도 행동을 바로 시작하게 해 줍니다. 다만 쿠키 안내, 채팅 버튼, 브라우저 하단 UI와 겹치면 본문이나 다른 조작을 가릴 수 있습니다. 무조건 고정하기보다 아래 조건을 먼저 확인하세요.

• 본문 마지막 줄과 입력 필드를 가리지 않는가
• 기기 안전 영역을 반영했는가
• 키보드가 열렸을 때 버튼이 입력칸 위를 덮지 않는가
• 제출 중, 완료, 오류 상태가 화면과 보조 기술에 전달되는가
• 같은 목적의 버튼이 본문과 고정 영역에 중복돼 혼란을 만들지 않는가

고정 버튼을 넣었다면 완료율만 보지 말고 오클릭, 즉시 이탈, 뒤로 가기, 입력 오류도 함께 봐야 합니다. 클릭 수가 늘어도 상담 내용이 비거나 잘못된 접수가 늘었다면 개선으로 보기 어렵습니다.

키보드와 오류 상태까지 실제로 작동해야 합니다

버튼은 마우스와 터치뿐 아니라 키보드로도 도달하고 실행할 수 있어야 합니다. WCAG는 키보드 초점을 받은 요소에 보이는 표시가 있어야 한다고 설명합니다.[5] 브랜드 색에 맞춘다는 이유로 기본 outline을 없애고 대체 표시를 넣지 않으면 현재 위치를 알 수 없습니다.

출시 전에는 다음 경로를 직접 수행합니다.

1. Tab 키만으로 주 버튼까지 이동합니다.
2. 초점 테두리가 배경과 구분되는지 봅니다.
3. Enter 또는 Space로 기대한 행동이 실행되는지 확인합니다.
4. 제출 중에는 중복 전송을 막되 진행 상태를 알립니다.
5. 오류가 나면 버튼 근처 안내와 문제가 있는 입력칸을 함께 표시합니다.
6. 완료 화면에서는 접수·구매·예약이 끝났다는 사실과 다음 행동을 보여 줍니다.

버튼처럼 보이는 링크와 실제 버튼의 역할도 구분해야 합니다. 다른 주소로 이동하면 링크가 자연스럽고, 현재 화면의 데이터 제출이나 상태 변경은 버튼이 맞습니다. USWDS는 표준 마크업과 명시적인 버튼 type 사용을 권합니다.[2]

출시 전 10분 점검표

아래 항목을 데스크톱이 아닌 실제 모바일 너비에서 확인하세요.

• [ ] 한 화면에서 가장 중요한 버튼이 하나만 뚜렷하다.
• [ ] 문구가 누른 뒤의 결과를 설명한다.
• [ ] 모든 터치 대상의 실제 영역과 간격을 측정했다.
• [ ] 200% 확대와 긴 글자에서도 버튼이 잘리지 않는다.
• [ ] 하단 고정 영역이 본문·입력칸·다른 플로팅 UI를 가리지 않는다.
• [ ] 키보드 초점이 보이고 순서가 자연스럽다.
• [ ] 로딩·중복 클릭·오류·완료 상태를 모두 확인했다.
• [ ] 분석 도구에서 클릭과 최종 완료를 별도 이벤트로 측정한다.

화면별 버튼 우선순위와 모바일 검수 기준을 함께 정리해야 한다면 POEMORA 웹 제작 서비스에서 현재 사용자 여정부터 점검할 수 있습니다. CTA 개선은 버튼 색을 고르는 일이 아니라, 방문자가 다음 단계까지 막힘없이 도달하도록 경로를 다듬는 작업입니다.