버튼 하나를 바꿨을 뿐인데 클릭이 생겼습니다. 저도 처음엔 그 차이가 버튼에서 나온다는 걸 몰랐습니다. 배경색에 텍스트만 얹으면 된다고 생각했으니까요. CTA 버튼은 디자인 유형마다 작동하는 맥락이 다르고, hover 피드백과 접근성까지 함께 설계해야 비로소 제 역할을 합니다.
버튼 유형별 설계 전략
처음 블로그에 CTA(Call to Action) 버튼을 달았을 때, 버튼 배경은 연한 파란색이었고 텍스트는 회색이었습니다. 여기서 CTA란 사용자에게 특정 행동을 유도하는 요소로, "지금 구매하기"나 "더 알아보기" 같은 버튼이 대표적입니다. 당연히 클릭이 없었습니다. 나중에 보니 버튼이 있는 건지 없는 건지 구분이 안 될 정도였으니까요.
Solid 버튼으로 교체하면서 배경을 진한 파란색으로, 텍스트는 흰색으로 바꿨습니다. 그것만으로도 체감이 달랐습니다. Solid 버튼은 배경을 단색으로 채운 가장 기본형 버튼인데, 색 대비가 충분할 때 시선을 가장 먼저 끌어당깁니다. 이 경험을 하고 나서야 명도 대비가 왜 중요한지 실감했습니다.
WCAG 2.1 기준에서는 텍스트와 배경 사이의 명도 대비비(Contrast Ratio)를 최소 4.5:1 이상으로 규정하고 있습니다. 여기서 명도 대비비란 두 색상 간의 밝기 차이를 수치화한 것으로, 숫자가 낮을수록 글자가 배경에 묻혀 읽기 어려워집니다. 흰색 텍스트에 진한 파란색 배경을 조합하면 이 기준을 가볍게 충족합니다(출처: W3C WCAG 2.1).
Outline 버튼은 처음엔 "이걸 왜 쓰지?" 싶었습니다. 배경이 없으니 존재감이 약해 보였거든요. 그런데 Solid 버튼 옆에 나란히 놓으면서 생각이 바뀌었습니다. 두 버튼이 나란히 있을 때 Solid는 "지금 바로 하세요", Outline은 "관심 있으면 더 보세요"라는 위계를 자연스럽게 만들어냅니다. 이건 직접 배치해보기 전까지는 느끼기 어려운 부분이었습니다.
Glow 버튼은 다크 배경 섹션에서 써봤는데, 처음 예상보다 훨씬 자연스러웠습니다. Glow 효과란 버튼 주변에 CSS의 box-shadow 속성을 활용해 발광하는 듯한 빛 번짐을 표현하는 방식입니다. 다만 밝은 배경에서는 효과가 거의 눈에 들어오지 않아서, 저는 강조 섹션에만 제한적으로 사용하고 있습니다.
Pulse 버튼은 처음에 두 개를 동시에 썼다가 곤란한 피드백을 받았습니다. "눈이 어지럽다"는 반응이었는데, 지금 생각하면 당연한 결과였습니다. Pulse 애니메이션이란 버튼 주변에 CSS @keyframes를 이용한 파동 효과를 반복 재생하는 것을 말합니다. 이 움직임이 두 곳에서 동시에 일어나면 주의가 분산되고 피로감을 줍니다. 한 페이지에 하나만 쓰는 것이 원칙이라고 봅니다.
아이콘+화살표 버튼도 써봤습니다. "다음 글 읽기 →" 형식으로 달았더니 단순 텍스트 링크보다 클릭률이 눈에 띄게 높았습니다. HubSpot 연구에 따르면 이미지나 아이콘이 포함된 CTA가 텍스트 단독 CTA보다 클릭률이 높게 집계되는 경향이 있습니다(출처: HubSpot Research). 화살표 하나가 "이건 클릭할 수 있는 요소"라는 신호를 주는 셈입니다.
버튼 유형별 핵심 특성을 정리하면 다음과 같습니다.
- Solid 버튼: 단색 배경에 높은 대비 텍스트. 페이지 내 가장 중요한 단일 CTA에 사용
- Outline 버튼: 배경 없이 테두리만. Solid 버튼의 보조 역할, 위계 설계에 활용
- Glow 버튼: box-shadow로 빛 번짐 표현. 다크 배경 전용으로 효과 극대화
- Pulse 버튼: @keyframes 파동 애니메이션. 한 페이지 최대 1개, 최고 우선순위 CTA에만 적용
- 아이콘+화살표 버튼: 클릭 가능성을 시각적으로 명시. 콘텐츠 흐름 유도에 효과적
접근성과 hover 효과
버튼 디자인에서 가장 빠지기 쉬운 부분이 hover 상태입니다. 저도 한동안 hover를 신경 안 썼는데, 솔직히 이건 예상 밖의 문제를 만들었습니다. hover 피드백이 없으면 사용자가 버튼 위에 마우스를 올렸을 때 아무런 반응이 없어서, 이게 클릭 가능한 요소인지 단순한 장식인지 헷갈리게 됩니다.
CSS의 transition 속성을 쓰면 이 문제를 간단하게 해결할 수 있습니다. transition이란 요소의 상태가 변할 때 그 변화를 일정 시간에 걸쳐 부드럽게 처리하는 속성입니다. 예를 들어 hover 시 배경색이 0.2초에 걸쳐 바뀌도록 설정하면, 사용자는 버튼이 반응한다는 것을 즉각 느낍니다. MDN Web Docs에 따르면 transition은 ease, ease-in, ease-out, linear 등 다양한 타이밍 함수를 지원하여 피드백의 느낌을 세밀하게 조절할 수 있습니다.
접근성 측면에서도 짚어야 할 부분이 있습니다. Pulse 애니메이션은 전정계 장애(vestibular disorder)가 있는 사용자에게 어지러움이나 불쾌감을 줄 수 있습니다. 여기서 전정계 장애란 귀 내부의 균형 기관에 문제가 생겨 움직이는 시각 자극에 민감하게 반응하는 상태를 말합니다. 이런 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 함께 적용해야 합니다. prefers-reduced-motion이란 운영체제의 "애니메이션 줄이기" 설정을 CSS에서 감지하여, 해당 사용자에게는 애니메이션을 비활성화하는 방식입니다(출처: web.dev - prefers-reduced-motion). 참고 자료를 정리하면서 이 부분이 빠진 것이 아쉬웠는데, 실제로 이를 적용하지 않으면 접근성 기준에서 미흡한 설계가 됩니다.
버튼 개수를 줄이는 것도 클릭률과 직결됩니다. 힉의 법칙(Hick's Law)에 따르면 선택지가 많아질수록 사용자의 결정 시간이 늘어나고, 결국 아무것도 선택하지 않을 가능성도 커집니다. 쉽게 말해 버튼이 세 개보다 하나일 때 사람은 더 빠르게 클릭합니다. Pulse 버튼을 두 개에서 하나로 줄였을 때 효과가 달라진 것도 같은 맥락으로 볼 수 있습니다. 버튼 하나를 더 없애는 결정이 클릭 하나를 더 만드는 경우가 실제로 있습니다.
터치 영역도 빠뜨리기 쉬운 부분입니다. Apple HIG(Human Interface Guidelines)에서는 터치 가능한 요소의 최소 크기를 44×44pt 이상으로 권장합니다. 버튼이 시각적으로 아무리 잘 설계되어 있어도 실제 탭 영역이 작으면 모바일에서 클릭 실패가 잦아집니다.
버튼은 결국 사용자와 서비스 사이의 접점입니다. 어떤 유형을 쓸지 고민하기 전에, 지금 쓰고 있는 버튼의 명도 대비와 hover 피드백부터 점검해보는 것을 권합니다. 저도 그 순서로 하나씩 바꿔왔고, 그때마다 체감할 수 있는 변화가 있었습니다. 버튼 하나에 이렇게 고민할 게 많다는 걸, 직접 써보기 전까지는 저도 몰랐습니다.
참고
MDN Web Docs — CSS transition
MDN Web Docs — @keyframes 애니메이션
W3C WCAG 2.1 — 명도 대비 기준 AA 4.5:1
Apple HIG — 버튼 터치 영역 가이드
HubSpot Research — CTA 클릭률 통계 및 연구
web.dev — prefers-reduced-motion 접근성