CTA 버튼 디자인, 눌리는 문구·색·크기 원칙 2026

CTA 버튼은 방문자를 문의·구매·신청 같은 하나의 행동으로 이끄는 버튼입니다. 이 버튼을 빨간색으로 바꾸면 클릭이 늘 거라는 기대는 대개 빗나갑니다. 눌리느냐는 색이 아니라 세 가지가 가릅니다. 주변과 대비되어 눈에 띄는지, 눌렀을 때 무엇을 얻는지 문구가 말해 주는지, 손가락이 정확히 닿는 크기인지입니다. 2026년 기준으로 CTA 버튼의 문구·색·크기·위치·개수를 좋은 예와 나쁜 예로 정리하고 접근성 표준이 정한 버튼 크기가 왜 24px·44px·48dp로 제각각인지까지 짚습니다.

핵심 요약

• CTA 버튼이 눈에 띄는 이유는 빨강 같은 특정 색이 아니라 주변과의 대비와 시각 위계입니다.
• 문구는 '제출·더보기' 같은 범용어 대신 눌렀을 때 얻는 것을 담아야 합니다. 링크는 약속이기 때문입니다.
• 터치 크기 기준은 하나가 아닙니다. 접근성 의무 최소선은 24px(WCAG AA), 44px는 권장(AAA)·애플 기준, 48dp는 안드로이드 기준입니다.
• 버튼은 페이지 곳곳에 반복하되 문구와 목적지는 하나로 통일하고 한 페이지의 주요 목표는 하나로 좁힙니다.
• 'CTA 색만 바꿔 전환 몇 퍼센트 상승' 같은 떠도는 수치는 출처가 없는 경우가 많으니 자기 화면에서 직접 검증합니다.

CTA 버튼이 안 눌리는 진짜 이유

홈페이지를 개편하다 보면 '버튼을 더 눈에 띄는 색으로 바꿔 달라'는 요청을 자주 받습니다. 그런데 화면을 열어 보면 버튼 색이 문제인 경우보다, 버튼이 배경이나 옆 요소와 톤이 비슷해 파묻혀 있는 경우가 더 많습니다. 사람의 눈은 색 이름이 아니라 대비를 먼저 읽습니다. 아무리 선명한 빨강이라도 주변이 온통 빨강이면 그 버튼은 튀지 않습니다.

눈에 띄는 버튼은 페이지에서 가장 대비가 큰 요소여야 합니다. 배경과 명도 차이가 뚜렷하고 주변보다 채도나 크기에서 앞서야 시선이 자연스럽게 그리로 흐릅니다. 여기에 시각 위계가 더해집니다. 주요 버튼 하나는 강하게, 보조 버튼은 테두리만 있는 약한 스타일로 낮춰 두 버튼이 같은 무게로 경쟁하지 않게 합니다.

버튼이 안 눌리는 또 다른 이유는 순서입니다. 버튼은 시선 흐름상 뒤쪽에 놓여 방문자가 '이게 뭔지, 나에게 왜 좋은지'를 납득한 다음에 만나야 손이 갑니다. 아직 설득이 안 된 자리에 버튼만 크게 박아 두면 눌러야 할 이유가 없어 그냥 지나칩니다. 전환이 왜 안 붙는지 더 넓게 보려면 전환율의 개념과 계산법을 정리한 글이 도움이 됩니다.

눌리는 CTA 문구, 이렇게 씁니다

문구는 버튼을 누를지 말지를 반쯤 결정합니다. 가장 흔한 실수는 '제출', '전송', '더보기', '여기 클릭'처럼 아무 정보도 주지 않는 범용어입니다. 이런 문구는 눌렀을 때 무슨 일이 생기는지 알려 주지 않아 방문자가 손을 멈칫하게 만듭니다.

좋은 문구는 두 가지를 담습니다. 행동을 나타내는 동사로 시작하고 눌렀을 때 얻는 것을 구체적으로 말합니다. '무료 견적 받기', '30초 상담 신청', '샘플 먼저 보기'처럼 말이죠. 닐슨 노먼 그룹은 링크와 버튼을 하나의 약속으로 봅니다. '시작하기' 같은 모호한 문구는 클릭은 끌지만 정보를 기대하고 눌렀다가 복잡한 가입 절차로 빠지면 오히려 신뢰를 잃는다고 짚습니다(Nielsen Norman Group). 클릭 수가 늘어도 그 클릭이 기대와 어긋나면 전환이 아니라 이탈로 이어집니다.

약한 문구	나은 문구	왜 나은가
제출	무료 견적 받기	눌렀을 때 얻는 것을 말해 준다
더보기	요금제 3가지 비교하기	다음 화면을 구체적으로 예고한다
시작하기	30초 상담 신청	걸리는 시간과 부담을 낮춰 준다
여기 클릭	샘플 강의 먼저 보기	행동 동사와 대상이 분명하다

버튼 아래 작은 보조 문구도 같이 씁니다. '카드 없이 가입', '언제든 해지 가능'처럼 망설임을 덜어 주는 한 줄이 붙으면 버튼을 누르는 심리적 문턱이 내려갑니다. 버튼 문구를 점검할 때 담당자에게 이렇게 물어보면 빠릅니다. "이 버튼 문구가 눌렀을 때 뭘 얻는지 말해 주고 있나요, 아니면 그냥 제출인가요?"

버튼 크기, 24px·44px·48dp 근거가 다른 이유

버튼 크기에서 가장 많이 도는 말이 '최소 44px'입니다. 그런데 이 숫자의 근거를 따라가 보면 기준이 하나가 아니라 넷이고 단위도 서로 다릅니다. 근거를 섞어 쓴 채 '웹 표준이 44px를 요구한다'고 말하면 사실과 어긋납니다.

웹 접근성 표준인 WCAG는 터치 영역 크기를 두 단계로 나눕니다. 실무에서 지켜야 하는 의무 수준(AA)의 최소는 24×24 CSS 픽셀이고(WCAG 2.5.8) 44×44는 더 높은 권장 수준(AAA)입니다. 애플의 인터페이스 지침은 44×44 포인트, 구글 머티리얼은 48×48 dp에 요소 사이 간격 8dp 이상을 권합니다. 픽셀·포인트·밀도독립픽셀은 서로 다른 단위라 숫자를 그대로 비교할 수 없습니다.

기준	권장 크기	성격
WCAG 2.5.8	24px	접근성 의무(AA) 최소
WCAG 2.5.5	44px	접근성 권장(AAA)
애플 HIG	44pt	iOS 앱 기준
머티리얼	48dp	안드로이드 기준

따져 보면 의무 관점의 최소선은 24px이고 손가락으로 편하게 누르게 하려는 실무 관행은 44~48px입니다. 여기서 놓치기 쉬운 건 버튼 사이 간격입니다. 버튼이 커도 서로 딱 붙어 있으면 옆 버튼을 잘못 누르니 요소 사이에 8px 안팎의 여백을 둡니다. 모바일 방문이 많은 사이트라면 보이는 크기와 별개로 실제 탭 영역을 44px 이상 확보하는 편이 안전합니다. 공공기관이나 일정 규모 사이트는 한국형 웹 접근성 지침(KWCAG) 준수 대상이 될 수 있어 버튼 크기와 색 대비를 접근성 항목으로 함께 챙기면 좋습니다.

색과 대비로 시각 위계 잡기

색을 고를 때 '무슨 색이 잘 눌리나'를 먼저 묻지만 정작 중요한 건 그 색이 배경과 얼마나 대비되느냐입니다. 버튼 안 글자와 버튼 배경의 명도 대비는 WCAG 1.4.3 기준으로 일반 글자 4.5대 1, 큰 글자 3대 1 이상을 권합니다. 대비가 이 선을 못 넘기면 색이 예뻐도 글자가 읽히지 않아 버튼 구실을 못 합니다.

희소성도 함께 봐야 합니다. 강한 색을 여기저기 쓰면 그 색의 힘이 흩어집니다. 페이지에서 가장 강한 색은 주요 CTA 하나에만 몰아 주고 보조 버튼은 테두리만 있는 약한 스타일로 낮춥니다. 예를 들어 파란 톤이 주조인 화면이라면 문의 버튼만 대비가 큰 색으로 두고 나머지 링크는 파란 계열로 눌러 둡니다. 그래야 방문자의 눈이 어디를 눌러야 하는지 헷갈리지 않습니다.

실무에서 자주 부딪히는 건 브랜드 색과 대비가 맞지 않을 때입니다. 브랜드 색이 옅은 파스텔이라 배경 위에서 힘이 약하면, 버튼만큼은 채도를 높이거나 더 진한 보조 색을 따로 두는 편이 낫습니다. 브랜드 가이드를 지키느라 정작 버튼이 안 보이면 본말이 뒤집힙니다. 어두운 배경에서는 밝고 채도 높은 색이, 밝은 배경에서는 진한 색이 대비를 만든다는 점만 기억해도 대체로 무난합니다.

버튼 위치와 개수, 어디에 몇 개

버튼은 첫 화면 안에 하나가 보여야 합니다. 무엇을 주는 페이지인지 말하는 한 줄과 함께 다음 행동 버튼이 스크롤 없이 눈에 들어와야, 마음이 급한 방문자를 놓치지 않습니다. 긴 페이지라면 중간과 끝에도 같은 버튼을 반복해 둡니다. 사람마다 결심이 서는 지점이 다르기 때문입니다.

반복하되 문구와 목적지는 하나로 통일합니다. 위쪽 버튼은 '상담 신청', 아래 버튼은 '문의하기'처럼 제각각이면 방문자가 둘을 다른 것으로 여겨 결정을 미룹니다. 한 페이지의 주요 목표도 하나로 좁히는 편이 낫습니다. 문의도 받고 뉴스레터도 받고 다운로드도 시키려 들면 시선이 갈라져 어느 것도 제대로 눌리지 않습니다. 페이지 전체를 전환되는 순서로 짜는 법은 랜딩페이지 구조를 5단계로 정리한 글에서 이어집니다.

모바일에서는 화면 하단에 문의·구매 버튼을 고정해 두는 방식이 잘 통합니다. 엄지가 자연스럽게 닿는 자리라, 방문자가 페이지 어디를 보고 있든 결심이 서는 순간 바로 누를 수 있습니다. 다만 이 고정 바가 본문을 가리지 않게 높이를 낮게 잡고 팝업이나 채팅 버튼과 자리가 겹치지 않도록 조율합니다.

CTA 버튼 종류와 자주 쓰는 예시

CTA 버튼은 생김새에 따라 몇 가지로 나뉩니다. 가장 기본은 글자를 채운 채움 버튼으로 페이지의 주요 행동에 씁니다. 테두리만 있는 외곽선 버튼은 '자세히 보기'처럼 부차적인 행동에 두어 주요 버튼과 위계를 나눕니다. 화면 아래에 붙어 따라오는 플로팅 버튼은 긴 페이지에서 스크롤과 상관없이 문의·구매를 늘 손닿는 곳에 두고 싶을 때 유용합니다. 글자 없이 아이콘만 쓴 버튼은 장바구니처럼 뜻이 분명한 경우가 아니면 피하는 편이 낫습니다. 무엇을 하는 버튼인지 한눈에 읽히지 않기 때문입니다.

상황별 예시를 들면 이렇습니다. 상담이 중심인 사이트라면 '무료 상담 신청'을 채움 버튼으로 첫 화면에 두고 후기나 오시는 길은 외곽선 버튼으로 낮춥니다. 쇼핑몰이라면 '장바구니 담기'와 '바로 구매'의 위계를 나눠 바로 구매를 채움 버튼으로 앞세웁니다. 인스타그램이나 유튜브에서 프로필 링크를 눌러 도착한 방문자를 받을 때는, 페이지 첫 화면 버튼 문구가 그 채널에서 약속한 내용과 이어지게 맞춰야 이탈이 줄어듭니다. 광고 문구는 '무료 체험'인데 도착한 페이지 버튼은 '회원가입'이면 방문자는 속은 기분으로 나가 버립니다.

CTA 버튼, 자주 하는 오해 세 가지

첫째, '버튼은 무조건 44px 이상이어야 한다'는 말입니다. 접근성 의무(AA) 최소선은 24px이고 44px는 권장 수준이거나 애플 기준입니다. 웹 표준이 44px를 강제한다고 쓰면 근거가 어긋나니 우리 사이트가 어떤 기준을 목표로 하는지부터 정하는 편이 낫습니다.

둘째, '시작하기 같은 강력한 문구 하나면 전환이 오른다'는 생각입니다. 모호한 문구는 클릭만 끌어모으고 눌렀을 때 기대와 다르면 그대로 이탈로 이어집니다. 클릭 수와 실제 전환은 다른 숫자라, 클릭이 늘었다고 좋아하기 전에 그 뒤 행동까지 봐야 합니다.

셋째, '빨강이나 주황이면 잘 눌린다'는 통념입니다. 특정 색이 아니라 주변과의 대비와 시각 위계가 클릭을 만듭니다. 온통 파란 화면에서는 오히려 주황보다 대비가 큰 다른 색이 눈에 띌 수 있습니다. 색을 정하기 전에 그 색이 우리 페이지 배경 위에서 얼마나 도드라지는지부터 눈으로 확인하는 게 순서입니다.

상황별 결정 기준과 점검 순서

상황에 따라 버튼 설계가 달라집니다. 뉴스레터 구독처럼 부담이 낮은 행동이면 짧은 문구로 즉시 누르게 만드는 편이 맞습니다. 반대로 큰 금액의 계약이나 상담처럼 결정이 무거운 행동이면 '무료 상담 신청'처럼 문턱을 낮춘 문구로 심리적 부담을 덜어 줍니다. 모바일 방문이 많은 사이트라면 문구보다 크기와 탭 영역을 먼저 챙깁니다. 버튼 하나 문구와 색을 바꾸는 일은 개발 부담이 크지 않으니 감으로 고르지 말고 아래 순서로 점검해 보세요.

1. 이 페이지의 주요 목표 행동 하나를 먼저 정한다.
2. 버튼 문구에 눌렀을 때 얻는 것이 들어갔는지 확인한다.
3. 버튼이 배경·주변과 대비가 뚜렷한지, 페이지에서 가장 눈에 띄는지 본다.
4. 모바일에서 실제 탭 영역이 44px 이상 확보됐는지 점검한다.
5. 첫 화면에 버튼이 보이는지, 긴 페이지면 중간·끝에 같은 버튼을 반복했는지 확인한다.
6. 보조 버튼의 위계를 낮춰 주요 버튼과 경쟁하지 않게 한다.

노바랩이 홈페이지나 랜딩페이지를 만들 때는 페이지마다 주요 CTA를 하나로 정하고 그 버튼을 첫 화면·중간·끝에 같은 문구로 반복하는 것을 기본 원칙으로 둡니다. 문의 전환이 목표인 페이지라면 강한 색은 그 버튼에만 쓰고 나머지는 위계를 낮춥니다. 특정 색이 전환을 올린다는 근거보다, 방문자가 누를 곳을 헷갈리지 않게 하는 설계가 더 안정적으로 작동했기 때문입니다.

가상 예시로 온라인 강의 신청 페이지를 생각해 봅니다. 처음에는 첫 화면에 '더보기'와 '수강신청' 두 버튼이 같은 크기로 나란히 있었습니다. 주요 목표를 수강신청 하나로 좁히고 문구를 '샘플 강의 먼저 보기'와 '수강 신청하기'로 나눠 역할을 분리한 뒤, 신청 버튼만 강한 색으로 두고 위쪽·중간·끝에 반복했습니다. 방문자가 어디를 눌러야 할지 헷갈릴 여지를 줄인 설계입니다. 버튼 설계를 포함해 전환되는 페이지가 필요하면 홈페이지 제작 서비스에서 상담으로 이어집니다.