긴 상세페이지에서 CTA를 정보 이정표 뒤에 놓는 기준

페이지 높이보다 독자의 결정 순서를 그립니다

긴 상세페이지의 첫 번째 버튼을 몇 픽셀 아래에 둘지는 상품마다 다릅니다. 트레이를 처음 보는 사람은 크기와 구성을 알아야 하고, 이미 제품을 아는 재구매자는 옵션을 바로 고르고 싶을 수 있습니다. 먼저 “지금 이 위치에서 무엇을 결정할 수 있는가”를 적으면 버튼이 필요한 곳과 아직 이른 곳을 나눌 수 있습니다.

상단의 링크는 읽기를 건너뛰라고 강요하지 않으면서 다음 자료로 안내합니다. 옵션 구간의 행동은 실제 선택과 연결하고, 주문으로 넘어가는 행동은 현재 구성과 비용을 알아볼 수 있는 위치에 둡니다. 이 예제에는 실제 주문·결제 기능이 없습니다.

같은 구매 버튼을 세 번 놓기 전에 역할을 나눕니다

첫 화면·중간·마지막에 모두 같은 색의 “지금 구매”를 놓으면 정보가 어디까지 준비됐는지를 표현하기 어렵습니다. 반대로 모든 버튼을 없애면 규격을 확인한 독자가 옵션까지 다시 찾아가야 합니다. 읽는 흐름을 유지하는 보조 링크와 선택을 실행하는 주 행동을 구별합니다.

주 행동 하나를 고른다는 말은 긴 페이지에 버튼을 오직 하나만 두라는 규칙이 아닙니다. 같은 화면에서 서로 경쟁하는 기본 행동을 줄이고, 각 구간에 필요한 자료 이동을 구분한다는 뜻으로 읽으면 됩니다. 구체적인 레이블을 고르는 작업은 버튼 문구 비교에서 따로 다룹니다.

바로 앞에 있어야 할 정보를 점검합니다

장바구니로 보내는 버튼이라면 상품, 옵션, 수량과 현재 금액을 확인할 수 있어야 합니다. 문의 버튼이라면 어떤 문의를 받는지와 필요한 자료가 가까워야 합니다. 페이지 어딘가에 정보가 있다는 사실보다 행동을 결정하는 순간 그 정보로 돌아갈 수 있는지가 중요합니다.

트레이 예제에서 치수표를 읽은 뒤에는 옵션으로 갈 길을 두고, 옵션을 바꾼 뒤에는 선택 요약을 둡니다. 추가 배송비가 아직 정해지지 않았다면 상품가만 최종 총액처럼 표시하지 않습니다. 배송·교환의 요약 범위를 정할 때는 선택 상태와 배송 조건을 함께 대조할 수 있습니다.

이미 정보를 아는 독자의 빠른 길도 남깁니다

모든 방문자가 첫 문단부터 차례로 읽는 것은 아닙니다. 규격과 비용을 이미 확인한 사람에게 긴 설명을 다시 강제하면 필요한 행동이 멀어집니다. 상단에 “옵션과 가격 확인” 같은 바로가기를 둘 수 있지만 도착한 구간에는 현재 판매 조건과 선택 정보가 있어야 합니다. 바로가기는 필요한 자료를 생략하는 기능이 아닙니다.

본문 중간에서 선택한 옵션이 페이지 끝에서도 유지되는지도 봅니다. “구성 확인” 버튼마다 별도의 오래된 요약을 만들면 같은 페이지에서 다른 상품을 보여줄 수 있습니다. 현재 선택을 하나의 정보원에서 읽도록 연결하고, 되돌아와 고친 값이 다음 단계에 반영되는지 확인합니다.

마지막 링크까지 읽을 공간을 확보합니다

하단 고정 구매 바가 배송·반품 안내를 가리면 버튼 위치를 더 늘리는 것으로 해결할 수 없습니다. 짧은 화면, 긴 옵션명, 글자 확대에서 실제 바의 높이와 본문 끝 공간을 비교해야 합니다. 구체적인 좌표와 여백은 고정 구매 바의 겹침 예제를 참고하세요.

배치안을 검토할 때는 각 버튼 위에서 독자가 아는 정보, 버튼이 수행할 일, 실행 뒤 확인할 결과를 한 행에 씁니다. 앞 정보가 부족한데 즉시 주문만 반복되는 위치와, 판단은 끝났는데 이동 경로가 없는 위치를 각각 찾을 수 있습니다. 이것이 이 글에서 정리할 배치의 범위입니다.

참고 자료

• Button
• Understanding Success Criterion 2.4.4: Link Purpose (In Context)