스마트폰으로 우리 사이트에 들어온 고객은 손가락 한 번 움직임으로 떠납니다. 그런데 정작 우리 사이트의 가장 중요한 버튼인 '전화하기' '문의하기' '예약하기'는 스크롤을 한참 내려야 보이거나, 헤더에 작게 박혀 손가락이 닿지 않는 위치에 있는 경우가 많습니다. 모바일 트래픽이 70%를 넘는 시대에 작은 회사 사이트의 매출을 좌우하는 것은 결국 화면 어디에서나 항상 떠 있는 단 한 개의 버튼입니다.
1. 가장 중요한 행동 단 하나만 고정한다
고정 CTA의 첫 번째 원칙은 하나만 고정한다입니다. 전화, 카카오톡, 예약, 견적 요청, 카탈로그 다운로드를 모두 띄우면 결국 아무것도 눌리지 않습니다. 우리 사이트에서 가장 큰 매출을 만드는 단 하나의 행동을 정해야 합니다. 음식점이라면 '전화 예약', 인테리어 시공사라면 '무료 상담 신청', 의류 쇼핑몰이라면 '장바구니 보기'처럼 한 가지여야 합니다. 보조 행동이 꼭 필요하다면 본문 안 콘텐츠 옆에 두고, 화면 하단 고정 자리에는 절대 두 개 이상을 띄우지 않습니다.
2. 손가락이 닿는 자리에 둔다
한 손으로 스마트폰을 쥔 고객의 엄지가 가장 편하게 닿는 영역은 화면 하단입니다. 고정 CTA는 정확히 그 자리에 있어야 합니다. 단, iOS 사파리의 하단 주소창과 안드로이드 제스처 바와 겹치지 않도록 env(safe-area-inset-bottom)을 적용해 약 16~24px 여백을 확보해야 합니다. 이 한 줄을 빠뜨리면 가장 중요한 버튼이 시스템 UI 뒤로 가려져 절반쯤 잘려 보입니다.
3. 위계가 보이는 색과 크기로 만든다
고정 CTA는 본문 안 다른 어떤 버튼보다 시각적으로 강해야 합니다. 본문 보조 버튼이 회색 테두리 고스트 버튼이라면, 고정 CTA는 브랜드 컬러로 가득 채운 가장 진한 채도를 씁니다. 최소 높이는 48~56px, 텍스트는 16~18px 이상이어야 손가락과 눈에 모두 닿습니다. 그림자나 가벼운 블러 배경을 깔아 본문 위로 살짝 떠 보이게 하면 버튼임이 더 분명해집니다.
버튼 안 텍스트에는 동사를 넣는다
'문의' 대신 '지금 견적 받기', '상담' 대신 '30초 안에 상담 신청'처럼 누른 직후 무엇을 얻게 되는지가 텍스트 안에 들어 있어야 합니다. 명사로 끝나는 라벨은 그저 메뉴처럼 느껴져 클릭을 미루게 만듭니다.
4. 스크롤할수록 본문을 가리지 않게 한다
고정 CTA가 항상 화면의 20% 이상을 가린다면 오히려 콘텐츠를 읽는 데 방해가 됩니다. 스크롤 방향에 따라 자동으로 숨고 나타나는 패턴을 적용하면 좋습니다. 아래로 빠르게 스크롤할 때는 부드럽게 사라지고, 위로 올리거나 스크롤이 멈춘 순간 다시 떠오릅니다. 자바스크립트에 25~50ms 정도의 throttle을 걸어 깜빡임을 방지하고, transform과 opacity로만 애니메이션해 성능 부하를 줄입니다.
5. 푸터와 겹치는 순간을 따로 설계한다
가장 흔한 모바일 사이트 버그는 페이지 끝까지 스크롤한 순간 푸터의 약관, 사업자 정보, 저작권 표기 위로 고정 CTA가 그대로 떠 있는 경우입니다. 고객이 마지막 정보를 읽으려는 순간 가장 큰 버튼이 그것을 가립니다. 푸터 영역에 들어오면 고정 CTA는 화면 아래로 사라지고, 푸터 안에 동일한 CTA가 더 크게 박혀 있도록 설계해야 합니다. IntersectionObserver로 푸터 진입을 감지하면 자바스크립트 한 줄이면 끝나는 일입니다.
작은 차이가 만드는 큰 결과
고정 CTA 한 자리만 제대로 설계해도 같은 사이트에서 모바일 문의 전환율이 1.5~3배 늘어나는 사례를 종종 봅니다. 디자인은 화면을 아름답게 만드는 일이 아니라 고객이 행동을 시작하기에 가장 쉬운 위치를 찾는 일입니다. CYAN 에이전시는 작은 회사 사이트가 모바일에서 실제로 매출을 만들 수 있도록, 화면 안 모든 버튼의 위계와 위치, 그리고 푸터까지 이어지는 흐름을 함께 설계합니다.