모바일 구매 버튼이 가려질 때: 맨 위로 버튼과 고정 요소 겹침 해결

모바일에서 구매 버튼 오른쪽이 가려지거나, 누르면 결제 화면 대신 페이지 맨 위로 이동하는 경우가 있습니다. 이때 구매 기능 자체를 고치기 전에 같은 위치에 놓인 고정 버튼과 그 터치 영역을 확인해야 합니다. 원형 아이콘은 작아 보여도 실제 링크 영역이 더 넓을 수 있습니다.

1. 실제 사례: 맨 위로 버튼의 위치 수정

2026년 9월 완료된 작업에는 구매 버튼이 다른 요소에 가려지는 문제를 수정했고, 맨 위로 이동 버튼의 위치를 조정했다는 완료 기록이 있습니다. 구매 버튼 위에 놓인 보조 기능의 위치를 바꿔 가림 문제를 해결한 사례입니다.

2. 아이콘 대신 실제로 눌리는 영역 확인

같은 화면 상태에서 재현하기

문제가 난 상품 주소, 화면 방향, 스크롤 위치, 옵션 선택 여부를 먼저 맞춥니다. 구매 바가 처음부터 보이는지, 스크롤한 뒤 나타나는지도 기록하세요. 로그인 상태나 쿠키 배너 표시 여부가 달라지면 같은 화면 폭에서도 결과가 달라질 수 있습니다.

브라우저 개발자 도구에서 구매 버튼과 맨 위로 버튼의 position, bottom, right, 너비·높이와 여백을 확인합니다. fixed는 보통 화면을 기준으로 배치되지만, 부모의 transform 등으로 기준이 달라질 수 있습니다. MDN의 position 설명처럼 실제 배치 기준을 먼저 확인하세요.

구매 버튼의 가운데와 가장자리 모두 확인하기

getBoundingClientRect()로 확인한 사각형은 패딩과 테두리를 포함합니다. 두 요소의 사각형이 겹치는지 살펴보고, 가려진 지점에 어떤 요소가 올라와 있는지 개발자 도구의 요소 선택 기능으로 확인합니다. 개발자라면 document.elementsFromPoint(x, y)로 해당 화면 좌표의 요소 순서를 확인할 수도 있습니다. 좌표는 현재 뷰포트 기준입니다. 크기·좌표 측정과 겹친 요소 조회 문서를 참고하세요.

단순한 사각형 비교만으로 클릭 가능 여부를 확정하지는 않습니다. 투명한 배경, 가상 요소, 다른 오버레이가 이벤트를 받을 수 있으므로 실제 버튼 동작을 함께 확인해야 합니다.

3. z-index를 올리기 전에 부모 요소 확인

z-index: 999999를 넣어도 해결되지 않을 수 있습니다. 부모가 별도의 쌓임 맥락(stacking context)을 만들면 자식의 숫자는 그 안에서 비교됩니다. transform, 1보다 작은 opacity, 특정 위치·z-index 조합 등이 그 경계를 만듭니다. 자세한 기준은 MDN stacking context 문서에 정리돼 있습니다.

먼저 구매 바와 보조 버튼의 부모를 비교하고, 같은 자리에서 서로 덮는 배치 자체를 해소하세요. 무작정 구매 바를 최상위로 올리면 옵션 창이나 결제 확인창을 가릴 수 있습니다. 반대로 맨 위로 버튼 전체에 클릭을 통과시키는 설정을 넣으면 그 버튼의 기능을 잃을 수 있습니다.

4. 구매 바 위에 간격을 확보하는 예제

원리 설명용 그림이며 실제 고객 사이트의 변경 전후 화면이 아닙니다.

다음 예제는 구매 바가 화면 아래 0px에 고정되고, 맨 위로 버튼도 같은 화면을 기준으로 배치되는 경우를 전제로 합니다. 가상의 클래스 이름을 실제 선택자로 바꾸고, 1024px 기준은 구매 바가 나타나는 사이트의 분기점에 맞추세요. 구매 바의 하단 위치가 다르거나 부모에 변형이 있으면 그대로 적용할 수 없습니다.

/* 설명용 예제: 클래스·높이·분기점은 사이트에 맞게 변경 */
:root {
  --example-bar-total-height: 72px;
  --example-button-gap: 12px;
}

@media (max-width: 1024px) {
  .example-back-to-top {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(
      var(--example-bar-total-height) +
      var(--example-button-gap)
    );
  }
}

여기서 72px은 예시 값입니다. 구매 바의 패딩·테두리·하단 안전 영역을 포함한 실제 전체 높이로 바꿔야 합니다. 이 값에 안전 영역이 포함돼 있다면 safe-area-inset-bottom을 다시 더하지 않습니다. 구매 버튼 크기는 그대로 두고 보조 버튼의 위치를 옮기는 예제입니다.

옵션·줄바꿈으로 구매 바 높이가 변하는 경우

고정된 숫자만 넣으면 가격 안내가 두 줄이 되거나 옵션 영역이 늘어났을 때 다시 겹칠 수 있습니다. 그런 구조에서는 높이 변화에 맞춰 값을 갱신하거나 두 요소를 하나의 배치 컨테이너에서 관리합니다. 아래는 ResizeObserver를 사용하는 별도의 예제입니다. border-box 관찰 옵션으로 패딩과 테두리 변화도 감지합니다.

// 설명용 예제: 해당 요소가 만들어진 뒤 한 번 실행
const bar = document.querySelector('.example-purchase-bar');
if (bar) {
  const syncHeight = () => {
    document.documentElement.style.setProperty(
      '--example-bar-total-height',
      `${Math.ceil(bar.getBoundingClientRect().height)}px`
    );
  };
  syncHeight();
  const observer = new ResizeObserver(syncHeight);
  observer.observe(bar, { box: 'border-box' });
}

이는 단일 구매 바를 위한 예제입니다. 테마가 요소를 교체하면 새 요소에 다시 연결하고 기존 관찰을 해제해야 합니다. 위치 이동만 하는 애니메이션, 여러 배너의 동시 표시, 키보드에 가려지는 문제까지 자동으로 해결하지는 않습니다. 기존 테마 설정이나 위젯 위치 옵션으로 해결되면 그 방법부터 사용하고, 코드는 백업 후 스테이징에 적용하세요.

5. 안전 영역·쿠키 배너·키보드를 따로 점검

env(safe-area-inset-bottom, 0px) 등은 화면 가장자리에서 콘텐츠를 안전하게 놓을 여백을 가져오는 수단입니다. 구매 바가 홈 표시 영역까지 확장되는 디자인이라면 바의 패딩과 측정한 전체 높이를 함께 검토하세요. MDN env() 문서의 의미를 확인하고, 기존 테마가 이미 반영한 여백을 중복으로 넣지 않습니다.

쿠키 배너는 앱 화면 가장자리 정보가 아니라 웹페이지 안의 별도 요소입니다. 안전 영역 값만으로 피할 수 없습니다. 배너가 보일 때 보조 버튼을 다른 위치로 옮기거나, 구매 기능을 유지하면서 보조 기능의 표시 조건을 조정해야 합니다. 동의 버튼이나 필수 안내를 덮어서는 안 됩니다.

키보드를 열면 실제로 보이는 화면인 visual viewport가 줄어들 수 있고 브라우저별 동작도 다릅니다. MDN VisualViewport 설명처럼 레이아웃 화면과 실제 표시 영역을 구분하세요. 키보드 문제를 안전 영역 CSS 한 줄로 모든 기기에서 해결했다고 판단하지 않습니다.

6. 수정 후 구매 동작까지 확인하는 검수표

겹침을 없애려고 버튼을 너무 작게 줄이지 마세요. WCAG 2.2의 최소 대상 크기 기준은 예외 조건과 함께 24×24 CSS 픽셀을 제시합니다. 실무에서는 크기와 주변 간격을 같이 보고, 손가락으로 구분해 누를 여유를 확보해야 합니다. 자세한 적용 범위는 W3C의 대상 크기 해설을 참고하세요.

PC 브라우저에서 폭을 줄인 검수는 초기 확인용입니다. 실제 기기의 터치·주소창·키보드 동작을 대신하지 않습니다. 테스트 상품과 테스트 결제 환경에서 구매 흐름을 확인하고, 운영 구매를 점검할 때는 실제 결제가 발생하지 않는 범위를 먼저 정하세요.

7. 고정 요소의 위치 규칙을 한곳에서 관리

맨 위로 버튼, 채팅, 쿠키 배너, 구매 바를 각각 추가하면 같은 모서리에 쌓이기 쉽습니다. 모바일 화면에서 항상 필요한 기능과 조건부로 나타나는 기능을 정하고, 간격·높이·표시 분기점을 함께 관리하세요. 테마나 구매 위젯 업데이트 후에는 옵션 문구가 길어진 상태까지 다시 확인합니다.

이 사례의 확인된 해결 방식은 맨 위로 버튼의 위치 조정입니다. 비슷한 증상이 있다면 실제로 겹치는 영역과 배치 기준을 찾고, 중요한 버튼을 가리지 않도록 간격을 확보한 뒤 구매 동작까지 검수하는 순서가 도움이 됩니다.

함께 읽기: 아이폰에서만 워드프레스 오류가 날 때 · 우커머스 주문 메일이 도착하지 않을 때

작성·공식 문서 확인: 2026년 11월 6일. 예제는 사이트 구조에 맞게 조정하고 실제 기기에서 검증해야 합니다.