랜딩페이지 행동 버튼 문구: 클릭 유도보다 다음 단계의 불안을 줄이는 법

행동 문구를 쓰기 전에 클릭 뒤 일어나는 일을 한 문장으로 고정합니다

‘지금 시작’, ‘놓치지 마세요’, ‘바로 확인’은 긴급함을 만들 수 있지만 목적지와 결과를 설명하지 못할 수 있습니다. 이 글에서는 먼저 행동 계약을 씁니다. 누가 조작하는지, 다른 페이지로 이동하는지 현재 화면에서 기능을 실행하는지, 비용·로그인·제출이 발생하는지, 완료 뒤 무엇이 보이는지를 한 문장으로 정의합니다. 예를 들어 ‘치수표 보기 링크를 누르면 같은 페이지의 치수표 제목으로 이동하며 정보 제출은 없다’처럼 씁니다. 이 계약이 확정되기 전에는 버튼 색이나 문구를 결정하지 않습니다.

USWDS는 버튼을 사용자가 수행해야 할 중요한 행동에 사용하고, 사이트의 다른 페이지로 이동할 때는 일반 링크를 사용하라고 안내합니다. 또한 버튼 텍스트를 짧게 하고 동사로 시작해 선택했을 때 무슨 일이 일어나는지 설명하라고 권합니다. 이 기준에 따라 페이지 이동 링크를 무조건 button 요소로 만들지 않고, 폼 제출이나 패널 열기 같은 현재 기능 실행과 구분합니다. 시각적으로 같은 모양을 사용할 수 있어도 요소의 의미와 키보드 동작은 목적에 맞게 유지합니다.참고: U.S. Web Design System · Button

이동은 링크로, 현재 맥락의 실행은 버튼으로 구분합니다

자체 재구성 예제는 책상 정리함 소개 페이지입니다. ‘치수표 보기’는 같은 문서의 치수표로 이동하므로 링크, ‘구성 선택 열기’는 현재 페이지의 선택 패널을 여는 버튼, ‘선택 내용 저장’은 폼 값을 저장하는 submit 버튼, ‘문의 방법 보기’는 문의 페이지로 이동하는 링크로 정의합니다. 각 요소의 목적이 다르므로 Enter, Space, 뒤로 가기, URL 변화도 다르게 예상합니다. 자바스크립트가 꺼졌을 때 핵심 정보에 접근할 수 있는 대체 경로가 있는지도 기록합니다.참고: U.S. Web Design System · Button

W3C의 링크 목적 해설은 링크의 목적이 텍스트 자체 또는 허용된 문맥에서 파악될 수 있어야 한다는 기준을 설명합니다. 카드 전체가 링크인 경우 제목과 연결된 문맥이 목적을 제공할 수 있지만, 화면 곳곳에 ‘자세히 보기’가 반복되면 링크 목록만 탐색하는 사용자는 목적을 구분하기 어렵습니다. 자체 예제에서는 ‘자세히 보기’를 치수표 보기, 구성품 확인, 배송 조건 보기처럼 도착 내용으로 바꿉니다. 짧게 만들더라도 핵심 명사를 제거하지 않습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.4: Link Purpose (In Context)

버튼 앞의 질문과 버튼 뒤의 답을 한 쌍으로 설계합니다

행동 버튼을 섹션마다 반복하기 전에 사용자가 그 위치에서 아직 확인하지 못한 내용을 적습니다. 첫 화면에서는 제품이 어떤 책상 폭에 맞는지, 구성 설명 뒤에는 무엇이 포함되는지, 가격 구간에서는 배송과 반품 조건이 무엇인지가 질문일 수 있습니다. 각 질문에 답하는 자료가 없으면 구매 버튼을 추가해도 정보 공백은 남습니다. 이 글의 자체 예제는 행동을 치수표 보기, 구성품 확인, 배송 조건 보기, 구성 선택 열기의 순서로 두며 실제 구매나 결제 단계는 만들지 않습니다.

문구, 접근 가능한 이름, 도착 제목, 실제 결과를 같은 행에서 대조합니다

화면에 ‘무료 견적 받기’라고 보이는데 클릭 뒤 회원가입과 결제 정보 입력이 먼저 나오면 문구와 결과가 다릅니다. ‘다운로드’가 새 페이지 미리보기인지 파일 저장인지도 구분해야 합니다. 검수표에는 화면 문구, 접근 가능한 이름, 요소 종류, href 또는 실행 함수, 도착 H1이나 패널 제목, 비용·로그인·제출 여부, 완료 메시지를 기록합니다. 아이콘의 aria-label이 화면 문구와 다른 행동을 약속하지 않는지, 음성 입력 사용자가 보이는 이름으로 조작할 수 있는지도 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.4: Link Purpose (In Context) · U.S. Web Design System · Button

1. 페이지의 모든 주요 링크와 버튼을 DOM 순서대로 목록화합니다.
2. 화면 문구와 접근 가능한 이름을 대조해 숨은 이름이 다른 행동을 약속하지 않는지 확인합니다.
3. 링크는 최종 URL과 H1, 버튼은 실행 뒤 상태와 메시지를 기록합니다.
4. 비용, 로그인, 개인정보 제출, 새 창, 파일 형식이 있으면 행동 전에 보이는지 확인합니다.
5. 오류 상태와 취소·뒤로 가기 경로를 재현해 사용자가 선택을 되돌릴 수 있는지 봅니다.
6. 로딩 중 재클릭과 중복 제출을 막는 상태가 있는지 확인합니다.

표시 문구는 행동 직전의 실제 상태에 따라 달라질 수 있습니다. 아직 선택하지 않았다면 ‘구성 선택 열기’, 선택이 끝났다면 ‘선택 내용 확인’, 최종 제출이라면 ‘문의 보내기’처럼 현재 단계와 결과를 맞춥니다. 모든 단계에 ‘구매하기’를 반복하지 않습니다. 버튼 텍스트가 짧더라도 바로 앞의 제목과 설명이 충분한 문맥을 제공하는지 확인하고, 문맥 없이 버튼만 모아 읽었을 때도 치명적인 오해가 생기지 않도록 핵심 목적을 남깁니다.참고: U.S. Web Design System · Button · W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.4: Link Purpose (In Context)

모바일에서는 글자 크기보다 실제 조작 영역과 이웃 요소의 간격을 측정합니다

W3C WCAG 2.2의 최소 타깃 크기 해설은 포인터 입력 대상이 원칙적으로 24×24 CSS 픽셀 이상이거나 정의된 간격 예외 등을 충족해야 한다고 설명합니다. 본문 안의 인라인 링크 같은 예외도 있으므로 모든 링크를 무조건 24픽셀 정사각형으로 만들라는 뜻은 아닙니다. 자체 예제에서는 독립된 주요 행동 버튼의 실제 bounding box, 인접 버튼과의 거리, 320픽셀에서 두 줄이 될 때 높이, 확대 상태를 측정합니다. 예외에 기대기보다 실수로 이웃 행동을 누르지 않게 충분한 영역과 간격을 확보합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.5.8: Target Size (Minimum)

USWDS는 버튼에 보이는 focus 상태를 제공하고 표준 마크업을 사용하며, button의 type 속성으로 동작을 명확히 하라고 안내합니다. 실제 검수에서는 hover 캡처만 남기지 않고 Tab으로 focus 상태를 만들고 색상·윤곽·배경에서 구분되는지 확인합니다. 비활성 버튼은 왜 사용할 수 없는지 가까운 설명을 제공하고, aria-disabled만 사용했다면 이벤트가 실제로 막히는지 확인합니다. 스타일 클래스가 비활성처럼 보인다는 사실만으로 기능이 비활성이라고 보지 않습니다.참고: U.S. Web Design System · Button

선택 뒤의 대기·성공·오류·취소 문구도 행동 계약에 포함합니다

행동 문구가 정확해도 실행 뒤 화면이 조용하면 사용자는 다시 누르거나 페이지를 떠날 수 있습니다. 자체 예제의 ‘선택 내용 저장’에는 대기 중 ‘저장 중’, 성공 시 ‘선택 내용을 저장했습니다’, 오류 시 ‘저장하지 못했습니다. 입력 내용은 유지됩니다’, 취소 시 ‘저장 전 상태로 돌아가기’를 정의합니다. 이 문구는 실제 서버 동작을 검증한 결과가 아니라 구현할 상태 계약입니다. 개발 뒤 네트워크 성공과 실패를 각각 재현하고 화면 메시지, 버튼 상태, 입력 보존 여부를 확인해야 합니다.

W3C의 On Focus 해설은 인터페이스 요소가 초점을 받는 것만으로 문맥을 바꾸지 않아야 예측 가능한 탐색이 가능하다고 설명합니다. 따라서 버튼에 Tab 초점이 왔다는 이유만으로 폼을 제출하거나 새 창을 열지 않습니다. 실제 활성화 뒤에도 초점이 어디로 이동하는지 정의합니다. 오류가 발생하면 첫 오류 또는 오류 요약으로 이동할 수 있지만 사용자가 읽던 입력을 잃지 않게 하고, 성공 페이지로 이동한다면 뒤로 가기에서 중복 제출이 생기지 않는지도 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 3.2.1: On Focus

검수 결과는 클릭 수가 아니라 문구와 동작이 일치하는지부터 기록합니다

분석 도구가 없어도 문구·목적·상태의 무결성은 재현할 수 있습니다. 각 행동에 ID를 부여하고 화면 문구, 요소 종류, 도착점, 320·390·1440픽셀 크기, 키보드 조작, 기본·대기·성공·오류 상태, 비용·로그인·제출 고지를 표로 남깁니다. 자동 검사는 href, button type, 타깃 크기, 중복 id를 찾고 사람 검수는 문구와 실제 결과의 의미가 같은지 확인합니다. 자동 통과를 사용자의 이해도 통과로 확대하지 않습니다.

• 페이지 이동과 현재 기능 실행에 맞는 HTML 요소를 사용했는가
• 문구의 첫 동사가 실제 결과를 설명하는가
• 링크 목적과 도착 H1 또는 앵커 제목이 일치하는가
• 비용·로그인·제출·파일 형식·새 창을 행동 전에 알 수 있는가
• 320·390픽셀에서 타깃과 이웃 요소가 겹치지 않는가
• Tab 초점만으로 자동 실행이나 문맥 변화가 일어나지 않는가
• 대기·성공·오류·취소 상태에서 문구와 회복 경로가 있는가
• 실제 클릭률과 전환은 별도 자료가 없으면 미확인으로 남겼는가

공개 전에는 행동의 의미, 조건, 조작, 회복 경로를 모두 닫습니다

최종 게이트는 문구가 강한지보다 사실인지 묻습니다. 사용자가 문구만 보고 다음 화면이나 동작을 예상할 수 있고, 중요한 조건을 행동 전에 확인할 수 있으며, 모바일·키보드에서 조작할 수 있고, 오류 뒤 되돌아갈 수 있어야 합니다. 반복 버튼마다 같은 목적지가 필요하지 않다면 제거하고, 다른 목적지를 가리킨다면 문구도 달리합니다. 버튼 수를 줄였다는 사실이나 접근성 검사를 통과했다는 사실을 전환 개선 결과로 표현하지 않습니다.참고: U.S. Web Design System · Button · W3C Web Accessibility Initiative · Understanding Success Criterion 2.4.4: Link Purpose (In Context) · W3C Web Accessibility Initiative · Understanding Success Criterion 2.5.8: Target Size (Minimum) · W3C Web Accessibility Initiative · Understanding Success Criterion 3.2.1: On Focus

1. 모든 주요 행동에 클릭 뒤 결과와 비용·로그인·제출 여부를 적습니다.
2. 페이지 이동은 링크, 현재 기능 실행은 버튼으로 의미를 맞춥니다.
3. 질문과 답의 위치를 연결하고 답이 없는 반복 버튼을 제거합니다.
4. 화면 문구, 접근 가능한 이름, 도착 제목, 완료 메시지를 대조합니다.
5. 320·390·1440픽셀과 키보드에서 크기, 간격, 초점, 상태를 확인합니다.
6. 오류와 취소를 재현해 입력 보존과 회복 경로를 기록합니다.
7. 클릭률·구매 전환은 측정 자료가 없으면 결과에서 제외합니다.

클릭 뒤 결과를 설명하는 CTA을 확인한 순서

1. 치수표 확인·옵션 확인·주문 전 정보 검토 링크를 실행해 서로 다른 제목의 구간에 도착하는지 봅니다.
2. 문구가 도착 자료를 예고하는지 대조합니다. 주문하지 않는 예제에 구매 완료처럼 읽히는 상태를 붙이지 않습니다.
3. 키보드와 좁은 화면에서도 문구·초점이 남아야 합니다. 이동 링크·실행 버튼·수동 상태 표시의 역할을 구분합니다.

클릭 뒤 결과를 설명하는 CTA 판단에서 제외한 범위

• 자체 예제는 실제 상품, 고객, 결제, 문의, A/B 테스트 또는 전환 성과를 나타내지 않습니다.
• 24×24 CSS 픽셀 기준에는 WCAG가 정의한 예외가 있으며 크기 하나만으로 전체 접근성을 판정할 수 없습니다.
• USWDS와 W3C 지침을 따른 구조도 실제 코드, 브라우저, 보조기술 조합에서 별도 검사가 필요합니다.
• 목적이 분명한 문구가 실제 클릭률이나 구매 전환을 높인다는 인과관계를 이 글은 주장하지 않습니다.
• 결제·구독·개인정보 제출이 있는 실제 흐름은 법률, 보안, 데이터 처리 검토가 추가로 필요합니다.

클릭 뒤 결과를 설명하는 CTA에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. ButtonU.S. Web Design System · 확인 2026-08-20

   버튼과 링크의 역할 구분, 동사로 시작하는 짧은 레이블, 표준 마크업, focus 상태, type 속성 지침을 참고했습니다.

2. Understanding Success Criterion 2.4.4: Link Purpose (In Context)W3C Web Accessibility Initiative · 확인 2026-08-20

   링크 텍스트 또는 허용된 문맥에서 링크 목적을 파악하는 기준을 도착 페이지 대조에 사용했습니다.

3. Understanding Success Criterion 2.5.8: Target Size (Minimum)W3C Web Accessibility Initiative · 확인 2026-08-20

   포인터 입력 대상의 24×24 CSS 픽셀 최소 크기와 간격·인라인 등 예외 조건을 모바일 검수에 참고했습니다.

4. Understanding Success Criterion 3.2.1: On FocusW3C Web Accessibility Initiative · 확인 2026-08-20

   인터페이스 요소가 초점을 받는 것만으로 문맥을 바꾸지 않아야 한다는 예측 가능성 기준을 참고했습니다.