광고 랜딩페이지 모바일 점검표: 손가락 도달 거리와 입력 피로를 줄이는 화면 설계

TL;DR

모바일 광고 랜딩페이지는 버튼을 크게 만드는 것만으로 충분하지 않습니다. 사용자가 한 손으로 자연스럽게 닿고, 잘못 누르지 않으며, 입력 후 화면이 반응했다는 확신을 얻도록 CTA·폼·고정 영역을 함께 점검해야 합니다.

• 주요 CTA와 폼 조작 버튼은 실제 탭 영역까지 확인합니다.
• 자주 쓰는 전환 행동은 엄지 도달이 쉬운 위치에 두고, 보조 기능은 경쟁하지 않게 분리합니다.
• 작은 링크와 아이콘은 충분히 떨어뜨리며, 고정 CTA는 시스템 UI와 겹치지 않게 설계합니다.
• 폼은 필드 수뿐 아니라 키보드 전환, 오류 수정, 제출 피로까지 살펴야 합니다.

모바일 랜딩페이지에서 먼저 볼 것은 ‘보이는 버튼’이 아니라 실제 탭 영역입니다

광고 랜딩페이지의 CTA, 문의 제출, 닫기, 메뉴, 옵션 선택처럼 손가락으로 누르는 주요 컨트롤은 화면에 보이는 도형 크기와 실제 탭 가능 영역이 다를 수 있습니다. 따라서 디자인 시안의 버튼 크기만 보지 말고, 사용자가 실제로 누를 수 있는 hit region을 확인해야 합니다.

WCAG 2.2 AA의 대상 크기 기준은 포인터 입력 대상에 최소 24×24 CSS px를 제시합니다. 이는 작은 아이콘, 닫기 버튼, 텍스트 링크까지 포함해 점검할 수 있는 최소 기준입니다. 대상 크기 최소 기준

광고 전환과 직접 연결되는 버튼이라면 최소 기준에만 맞추기보다 더 여유 있는 크기를 목표로 잡는 편이 안전합니다. WCAG 2.1 AAA는 44×44 CSS px를 강화된 목표치로 제시하며, Apple도 손가락으로 쉽게 선택할 수 있도록 일반적으로 최소 44×44 pt의 hit region을 권장합니다. 대상 크기 강화 기준 버튼 hit region 가이드

여기서 주의할 점은 24×24 CSS px와 44×44 CSS px가 같은 수준의 규정이 아니라는 것입니다. 전자는 WCAG 2.2 AA의 최소 기준이고, 후자는 WCAG 2.1 AAA의 강화 기준입니다. 문서나 디자인 가이드에 둘을 같은 준수 수준처럼 적지 않는 편이 좋습니다. 두 기준의 차이

점검표: 탭 영역

• CTA 버튼의 글자 영역이 아니라 실제 클릭·탭 가능 영역을 확인했는가
• 문의 제출, 다음 단계, 옵션 선택, 닫기 버튼이 지나치게 작지 않은가
• 아이콘만 있는 버튼에도 충분한 탭 영역이 설정되어 있는가
• 버튼 배경은 작아도 내부 또는 주변의 탭 가능 영역이 넓게 설정되어 있는가
• 주요 CTA와 자주 쓰는 폼 조작 버튼은 44×44 CSS px 수준을 목표로 검토했는가

작은 버튼은 줄이는 대신, 서로 떨어뜨려야 오작동이 줄어듭니다

모바일에서는 손가락 끝이 마우스 커서보다 넓고 정밀도가 낮습니다. 그래서 버튼 자체가 작으면 작은 대상을 연속으로 배치하는 방식보다, 대상 사이의 여백을 넓히는 방식이 필요합니다.

WCAG는 24×24 CSS px보다 작은 대상도 주변 대상과 충분히 떨어져 있다면 간격 예외를 인정합니다. 작은 대상의 중심에 지름 24 CSS px 원을 두었을 때 다른 터치 대상과 겹치지 않아야 한다는 방식입니다. 작은 대상의 간격 예외

특히 다음 조합은 자주 오작동을 만듭니다.

• CTA 바로 옆의 작은 텍스트 링크
• 카드 상단에 붙은 저장·공유·닫기 아이콘
• 한 줄에 여러 개를 넣은 필터·옵션 버튼
• 약관 동의 영역에 몰아넣은 상세 보기와 체크 조작
• 제출 버튼 주변의 취소, 이전, 초기화 버튼

Apple 역시 컨트롤의 크기뿐 아니라 컨트롤 사이의 간격과 패딩을 중요하게 다룹니다. 잘못된 컨트롤을 누르는 일을 줄이려면 버튼을 키우는 것과 별개로 주변 여백을 확인해야 합니다. 컨트롤 간 간격과 패딩

테두리나 배경이 있는 컨트롤은 주변 약 12pt, 테두리가 없는 요소는 보이는 가장자리 주변 약 24pt의 여백을 검토 기준으로 삼을 수 있습니다. 이는 모든 화면에 기계적으로 적용할 값이라기보다, 빽빽한 모바일 화면을 발견하는 실무 기준으로 활용하기 좋습니다. 터치 대상 주변 여백 가이드

점검표: 버튼 간 충돌

• CTA 바로 옆에 작은 링크, X 버튼, 보조 조작이 붙어 있지 않은가
• 한 줄에 아이콘 버튼이 과도하게 밀집되어 있지 않은가
• 카드 전체를 누르는 영역 안에 별도 아이콘 버튼이 겹쳐 있지 않은가
• 체크박스, 상세 보기, 약관 링크가 서로 오작동하기 쉬운 간격으로 배치되지 않았는가
• 삭제·취소 같은 되돌리기 어려운 행동이 제출·구매 같은 주 행동과 너무 가깝지 않은가

광고 랜딩의 주 CTA는 엄지 도달 거리 기준으로 배치합니다

모바일 광고 유입은 한 손 조작 상황이 많습니다. 사용자가 제품 설명을 읽다가 다음 행동을 할 때 손을 바꿔 잡거나 화면 상단까지 다시 이동해야 한다면, 그 자체가 입력 피로가 됩니다.

자주 쓰는 버튼은 엄지 근처에 배치할수록 터치 조작이 더 편안할 수 있습니다. 엄지 근처 배치 원칙 따라서 광고 랜딩에서는 사용자가 반복적으로 선택하는 행동을 구분해야 합니다. 예를 들어 상담 신청, 견적 요청, 장바구니, 구매 진행, 다음 단계 같은 행동은 주 CTA로 다루고, 공유·저장·상세 메뉴 같은 보조 행동과 위계를 분명히 나누는 방식입니다.

중요한 것은 단순히 모든 버튼을 하단에 붙이는 것이 아닙니다. 화면 안에서 가장 중요한 행동이 무엇인지 먼저 정하고, 그 행동이 본문 흐름에서 자연스럽게 반복되도록 배치해야 합니다. 설명을 읽은 뒤 바로 행동할 수 있어야 하며, 사용자가 화면을 다시 위로 올려 CTA를 찾지 않게 해야 합니다.

반대로 보조 기능은 주 CTA와 같은 크기, 색상, 위치를 차지하지 않게 설계하는 편이 좋습니다. 자주 쓰는 컨트롤은 크게, 메뉴처럼 덜 중요한 컨트롤은 더 작은 최소 크기로 구분하는 방식이 권장됩니다. 주요·보조 컨트롤의 위계

점검표: 엄지 도달과 행동 우선순위

• 랜딩의 핵심 전환 행동이 한 화면에서 명확히 하나로 보이는가
• 사용자가 설명을 읽은 직후 CTA를 찾기 위해 긴 거리를 이동하지 않아도 되는가
• 문의, 구매, 신청처럼 자주 쓰는 행동이 보조 메뉴보다 더 쉽게 누를 수 있는가
• 공유, 저장, 메뉴, 닫기 같은 보조 기능이 주 CTA와 같은 시각적 비중을 차지하지 않는가
• 화면 하단 CTA를 쓸 경우, 스크롤 중에도 내용과 행동의 맥락이 끊기지 않는가

고정 CTA는 편리하지만 안전 영역과 콘텐츠 가림을 함께 점검해야 합니다

하단 고정 CTA는 사용자가 긴 랜딩을 읽는 중에도 행동을 유지하게 해 주지만, 잘못 설계하면 홈 인디케이터나 시스템 UI와 겹치거나 본문 내용을 가릴 수 있습니다.

Apple은 자주 쓰는 버튼을 배치할 때 기기 경계와 safe area를 고려하고, Home indicator나 Dynamic Island 같은 시스템 기능과 겹치지 않도록 안내합니다. 안전 영역 고려

랜딩페이지에서는 특히 다음 문제가 자주 생깁니다.

• 하단 CTA가 마지막 안내 문구나 약관 동의를 덮음
• 입력창에 포커스가 생겼을 때 키보드가 CTA와 제출 버튼을 가림
• 브라우저 하단 UI가 나타날 때 고정 버튼 위치가 불안정해짐
• 하단 CTA 위에 챗봇, 쿠폰, 알림 버튼이 겹침
• 닫기 버튼이나 뒤로 가기 성격의 조작이 화면 가장자리에 너무 붙음

고정 CTA를 적용했다면 일반 화면만 보지 말고, 스크롤 중인 화면·폼 입력 중인 화면·키보드가 열린 화면·오류 메시지가 나타난 화면까지 확인해야 합니다. CTA가 항상 노출되는 것보다, 필요한 상황에서 정확히 누를 수 있는 것이 더 중요합니다.

점검표: 고정 영역과 안전 영역

• 상단·하단 고정 CTA가 시스템 UI 또는 안전 영역을 침범하지 않는가
• 고정 CTA가 본문의 마지막 문장, 약관, 오류 메시지를 가리지 않는가
• 키보드가 열린 상태에서도 현재 입력칸과 다음 행동이 보이는가
• 챗봇, 플로팅 버튼, 쿠폰 버튼과 CTA가 서로 겹치지 않는가
• 화면 가장자리의 닫기·뒤로가기 조작이 손가락으로 누르기 충분한가

문의 폼의 입력 피로는 필드 수보다 ‘되돌아가는 횟수’에서 커집니다

모바일 문의 폼은 필드가 적다고 항상 편한 것은 아닙니다. 사용자가 입력 형식을 추측해야 하거나, 키보드를 여러 번 바꾸거나, 오류를 찾기 위해 화면을 위아래로 오가면 짧은 폼도 피로하게 느껴집니다.

폼을 점검할 때는 다음 흐름을 실제 모바일에서 끝까지 수행해 보는 것이 좋습니다.

1. 광고에서 들어온 사용자가 무엇을 문의하는지 즉시 이해하는가
2. 각 입력 항목의 목적이 필드 위 또는 가까운 위치에 설명되어 있는가
3. 필수 항목과 선택 항목이 구분되는가
4. 전화번호, 이메일, 날짜 등 입력 성격에 맞는 키보드가 열리는가
5. 오류가 발생했을 때 어느 항목을 어떻게 고쳐야 하는지 바로 알 수 있는가
6. 제출 버튼을 누른 뒤 접수 상태가 분명히 보이는가

제출·다음 단계·닫기 같은 맞춤 버튼에는 명확한 눌림 상태가 필요합니다. 눌렀을 때 변화가 없으면 사용자는 입력이 접수됐는지 의심하고, 버튼이 반응하지 않는다고 느낄 수 있습니다. 명확한 눌림 상태

따라서 제출 버튼은 탭 순간의 시각적 반응만이 아니라, 제출 처리 중 상태와 완료 또는 오류 상태까지 설계해야 합니다. 같은 문의가 중복 제출되는 문제를 막는 데도 도움이 됩니다.

점검표: 폼 입력 피로

• 항목명이 짧아도 무엇을 입력해야 하는지 모호하지 않은가
• 필수·선택 여부가 분명한가
• 긴 설명이 입력칸 안의 placeholder에만 들어가 있지 않은가
• 오류 메시지가 페이지 상단에만 뜨지 않고 해당 필드 근처에서도 확인되는가
• 오류 수정 후 다시 제출하기 쉬운가
• 제출 버튼을 누른 뒤 눌림·처리 중·완료 상태가 구분되는가
• 제출 이후 사용자가 다음에 무엇을 하면 되는지 알 수 있는가

가로 스크롤과 불필요한 확대는 모바일 입력 피로를 키웁니다

광고 랜딩페이지의 주요 콘텐츠는 가로 스크롤이나 확대 없이 볼 수 있어야 합니다. Apple은 사용자가 확대하거나 가로로 스크롤하지 않고도 주요 콘텐츠를 볼 수 있도록 화면에 맞는 레이아웃을 설계하라고 권장합니다. 화면에 맞는 레이아웃

특히 광고 랜딩에서는 작은 표, 비교표, 옵션표, 긴 약관, 여러 열로 구성된 카드가 문제를 만들기 쉽습니다. 데스크톱 구조를 그대로 축소하면 글자가 작아지고, 사용자는 필요한 조건을 확인하기 위해 확대와 이동을 반복하게 됩니다.

모바일에서 표나 복잡한 비교 정보를 꼭 보여줘야 한다면, 모든 항목을 한 화면에 넣으려 하기보다 다음처럼 구조를 바꾸는 편이 낫습니다.

• 중요한 차이를 먼저 요약하고 세부 항목은 펼쳐 보기로 분리하기
• 가로 열이 많은 표를 항목별 카드 구조로 재구성하기
• 선택에 필요한 정보와 참고 정보의 우선순위를 나누기
• 버튼과 링크가 텍스트 줄 사이에 끼어들지 않게 배치하기

점검표: 화면 밀도와 확대 필요성

• 주요 정보가 가로 스크롤 없이 읽히는가
• CTA와 폼 입력칸이 화면 폭을 벗어나지 않는가
• 표, 가격 비교, 옵션 목록이 작은 글씨와 가로 스크롤에 의존하지 않는가
• 버튼 안의 문구가 지나치게 길어 두 줄로 어색하게 꺾이지 않는가
• 광고에서 약속한 핵심 조건이 확대 없이 확인 가능한가

모바일 점검은 ‘첫 화면’과 ‘제출 직전’을 따로 확인해야 합니다

광고 랜딩의 모바일 경험은 첫 화면에서 끝나지 않습니다. 첫 화면에서는 메시지와 CTA를 이해할 수 있어야 하고, 제출 직전에는 오작동 없이 입력을 마칠 수 있어야 합니다. 둘 중 하나만 좋아도 전환 동선 전체가 매끄럽다고 보기 어렵습니다.

실무에서는 다음 순서로 점검하면 빠뜨릴 항목을 줄일 수 있습니다.

1. 광고 문구를 보고 랜딩 첫 화면을 열어 메시지와 CTA가 바로 연결되는지 확인합니다.
2. CTA를 손가락으로 눌러 실제 탭 영역과 인접 요소의 충돌을 확인합니다.
3. 스크롤하면서 고정 CTA, 플로팅 버튼, 카드 내 아이콘이 콘텐츠를 가리는지 봅니다.
4. 문의 폼 또는 구매 단계에서 키보드를 열고, 입력·오류 수정·제출까지 진행합니다.
5. 제출 후 버튼 상태와 완료 화면이 사용자의 불안을 남기지 않는지 확인합니다.

이 과정은 디자인 화면만 보는 검토보다 실제 사용자 행동에 가까운 점검입니다. 특히 CTA의 크기, 간격, 위치, 눌림 상태는 각각 따로가 아니라 한 번의 손가락 동작 안에서 함께 작동해야 합니다.

마무리

광고 랜딩페이지의 모바일 전환은 화려한 화면보다 손가락이 편하게 움직이는 구조에서 시작합니다. 주요 CTA와 폼 조작은 충분한 실제 탭 영역을 확보하고, 작은 요소는 간격으로 보호하며, 자주 쓰는 행동은 엄지 도달이 쉬운 위치에 두는 것이 핵심입니다. 여기에 고정 영역의 안전 영역, 폼의 오류 수정 흐름, 제출 후 반응까지 점검하면 사용자의 입력 피로와 오작동 가능성을 함께 줄일 수 있습니다.