버튼 하나를 바꿨을 뿐인데 클릭이 생겼습니다. 저도 처음엔 그 차이가 버튼에서 나온다는 걸 몰랐습니다. 배경색에 텍스트만 얹으면 된다고 생각했으니까요. 그런 믿음이 꽤 오래 갔습니다. CTA(Call to Action)란 사용자에게 특정 행동을 유도하는 요소로, "지금 구매하기"나 "더 알아보기" 같은 버튼이 대표적입니다. 처음 블로그에 달았던 CTA 버튼은 배경이 연한 파란색이었고 텍스트는 회색이었습니다. 당연히 클릭이 없었습니다. 나중에 보니 버튼이 있는 건지 없는 건지 구분조차 안 될 정도였습니다. 그때 처음으로 버튼 디자인이 단순히 예쁨의 문제가 아니라는 걸 알았습니다.
버튼 유형별 설계 전략 — 직접 써보기 전까지 몰랐던 것들
Solid 버튼으로 교체하면서 배경을 진한 파란색으로, 텍스트는 흰색으로 바꿨습니다. 그것만으로도 체감이 달랐습니다. Solid 버튼은 배경을 단색으로 채운 가장 기본형 버튼인데, 색 대비가 충분할 때 시선을 가장 먼저 끌어당깁니다. WCAG 2.1 기준에서는 텍스트와 배경 사이의 명도 대비비를 최소 4.5:1 이상으로 규정하고 있습니다. 명도 대비비란 두 색상 간의 밝기 차이를 수치화한 것으로, 숫자가 낮을수록 글자가 배경에 묻혀 읽기 어려워집니다. 흰색 텍스트에 진한 파란색 배경을 조합하면 이 기준을 가볍게 충족합니다. 이 경험을 하고 나서야 명도 대비가 왜 중요한지 실감했습니다. 그전까지는 그냥 보기 좋으면 된다는 생각이었으니까요.
Outline 버튼은 처음엔 "이걸 왜 쓰지?" 싶었습니다. 배경이 없으니 존재감이 약해 보였거든요. 그런데 Solid 버튼 옆에 나란히 놓아보면서 생각이 바뀌었습니다. 두 버튼이 나란히 있을 때 Solid는 "지금 바로 하세요", Outline은 "관심 있으면 더 보세요"라는 위계를 자연스럽게 만들어냅니다. Outline 버튼의 역할은 그 자체의 강조가 아니라 Solid 버튼을 더 강조하게 만드는 데 있습니다. 이건 직접 배치해보기 전까지는 느끼기 어려운 부분이었습니다. 버튼 하나만 보면 약해 보여도, 두 버튼의 관계 안에서는 위계를 설계하는 도구가 됩니다.
Glow 버튼은 다크 배경 섹션에서 써봤는데, 처음 예상보다 훨씬 자연스러웠습니다. Glow 효과란 버튼 주변에 발광하는 듯한 빛 번짐을 표현하는 방식입니다. 다만 밝은 배경에서는 효과가 거의 눈에 들어오지 않습니다. 저는 강조 섹션에만 제한적으로 사용하고 있는데, 이 버튼이 자기 역할을 제대로 하려면 어두운 배경이라는 조건이 먼저 갖춰져야 합니다. 배경 없이 Glow 버튼만 쓰는 건 효과 없이 복잡성만 더하는 선택이라고 봅니다.
Pulse 버튼은 처음에 두 개를 동시에 썼다가 곤란한 피드백을 받았습니다. "눈이 어지럽다"는 반응이었는데, 지금 생각하면 당연한 결과였습니다. Pulse 애니메이션이란 버튼 주변에 파동 효과를 반복 재생하는 것을 말합니다. 이 움직임이 두 곳에서 동시에 일어나면 주의가 분산되고 피로감을 줍니다. 한 페이지에 하나만 쓰는 것을 원칙으로 삼고 있습니다. 사실 이 원칙은 피드백을 받고 나서야 세웠습니다. 직접 만들어놓고는 왜 문제인지 몰랐으니까요. 만드는 사람 눈에는 강조로 보이는 것이, 독자 눈에는 혼란으로 보일 수 있습니다. 아이콘과 화살표가 결합된 버튼도 써봤습니다. "다음 글 읽기 →" 형식으로 달았더니 단순 텍스트 링크보다 클릭률이 눈에 띄게 높았습니다. HubSpot 연구에 따르면 이미지나 아이콘이 포함된 CTA가 텍스트 단독 CTA보다 클릭률이 높게 집계되는 경향이 있습니다. 화살표 하나가 "이건 클릭할 수 있는 요소"라는 신호를 줍니다. 이 신호를 주는 것과 주지 않는 것의 차이가 생각보다 컸습니다.
접근성과 hover 효과 — 빠뜨리면 반드시 문제가 생긴다
버튼 디자인에서 가장 빠지기 쉬운 부분이 hover 상태입니다. 저도 한동안 hover를 신경 안 썼는데, 예상 밖의 문제를 만들었습니다. hover 피드백이 없으면 사용자가 버튼 위에 마우스를 올렸을 때 아무런 반응이 없어서, 클릭 가능한 요소인지 단순한 장식인지 헷갈리게 됩니다. 독자 입장에서는 불안한 경험입니다. "이게 눌리는 건가?"라는 의심이 생기면 클릭을 안 하는 쪽으로 결정이 기웁니다. transition 속성을 쓰면 이 문제를 간단하게 해결할 수 있습니다. 요소의 상태가 변할 때 그 변화를 일정 시간에 걸쳐 부드럽게 처리하는 속성입니다. 예를 들어 hover 시 배경색이 0.2초에 걸쳐 바뀌도록 설정하면, 사용자는 버튼이 반응한다는 것을 즉각 느낍니다. 0.2초라는 짧은 시간이지만, 이 피드백이 있고 없고의 차이는 생각보다 큽니다. 직접 비교해보면 분명히 느껴집니다.
접근성 측면에서도 짚어야 할 부분이 있습니다. Pulse 애니메이션은 전정계 장애가 있는 사용자에게 어지러움이나 불쾌감을 줄 수 있습니다. 전정계 장애란 귀 내부의 균형 기관에 문제가 생겨 움직이는 시각 자극에 민감하게 반응하는 상태를 말합니다. 이런 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 함께 적용해야 합니다. 운영체제의 "애니메이션 줄이기" 설정을 CSS에서 감지하여, 해당 사용자에게는 애니메이션을 비활성화하는 방식입니다. 이 처리를 빠뜨리고 단순히 애니메이션을 넣는 것은 절반짜리 설계입니다. 좋은 디자인이 일부 사용자에게 불편을 주는 디자인이 되어서는 안 됩니다.
버튼 개수를 줄이는 것도 클릭률과 직결됩니다. 힉의 법칙에 따르면 선택지가 많아질수록 사용자의 결정 시간이 늘어나고, 결국 아무것도 선택하지 않을 가능성도 커집니다. 버튼이 세 개보다 하나일 때 사람은 더 빠르게 클릭합니다. Pulse 버튼을 두 개에서 하나로 줄였을 때 효과가 달라진 것도 같은 맥락입니다. 버튼 하나를 더 없애는 결정이 클릭 하나를 더 만드는 경우가 실제로 있습니다. 추가하고 싶은 충동을 억제하는 것도 설계의 일부입니다.
터치 영역도 빠뜨리기 쉬운 부분입니다. Apple HIG에서는 터치 가능한 요소의 최소 크기를 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 접근성