홈페이지를 찾은 손님은 사실 딱 한 가지를 기다립니다. '그래서 지금 뭘 누르면 되나요?' 그런데 많은 작은 회사 사이트에서 정작 그 답이 되는 버튼이 본문 글자와 비슷한 색으로 박혀 있거나, 똑같이 생긴 버튼이 한 화면에 대여섯 개씩 흩어져 있습니다. 버튼은 단순한 장식이 아니라 손님의 다음 행동을 안내하는 유일한 손짓입니다. 그 손짓이 흐릿하면 문의도 흐려집니다.
1. 가장 중요한 버튼은 화면에 단 하나만 또렷이 세운다
한 화면 안의 모든 버튼이 똑같이 진하면, 그건 아무것도 강조하지 않은 것과 같습니다. 손님이 결국 해주길 바라는 행동(상담 신청, 견적 문의, 전화 걸기)을 정한 뒤, 그 버튼 하나만 가장 눈에 띄는 색으로 채웁니다.
- 주 버튼(Primary)은 꽉 찬 배경색으로 단 하나만 둡니다.
- 보조 버튼은 테두리만 있는 형태로 한 단계 낮춰 경쟁시키지 않습니다.
- '더보기', '목록' 같은 부수적 동작은 아예 버튼이 아닌 작은 링크로 처리합니다.
2. 글자는 '확인'이 아니라 손님이 얻을 결과를 말한다
버튼 안의 글자는 무엇을 누르는지가 아니라 누르면 무슨 일이 일어나는지를 알려줘야 합니다. '확인', '제출', '클릭' 같은 말은 손님에게 아무 약속도 하지 않습니다.
- '제출' → '무료 상담 신청하기'
- '확인' → '견적 받아보기'
- '클릭' → '전화로 바로 문의'
동사로 시작하고 손님이 얻는 가치를 담으면, 같은 버튼이라도 누르고 싶은 버튼이 됩니다.
3. 손가락이 닿을 만큼 충분히 크게 만든다
PC 마우스로는 작은 버튼도 잘 눌리지만, 손님 대부분은 휴대폰에서 엄지손가락으로 화면을 누릅니다. 버튼이 작으면 옆 버튼이 같이 눌리거나 헛손질이 반복됩니다.
높이는 최소 44~48px 이상을 확보하고, 글자 주변에 넉넉한 안쪽 여백을 둡니다. 버튼과 버튼 사이에도 손가락 하나가 들어갈 만큼 간격을 띄워, 잘못 누르는 일이 없게 합니다.
4. 눈이 머무는 자리, 손이 닿는 자리에 둔다
아무리 잘 만든 버튼도 손님이 찾지 못하면 없는 것과 같습니다. 설명을 다 읽고 마음이 움직이는 바로 그 지점에 버튼을 놓아야 합니다.
- 첫 화면, 그리고 본문 중간과 끝에 같은 문구의 버튼을 반복해 어디서든 행동할 수 있게 합니다.
- 모바일에서는 화면 아래에 늘 떠 있는 고정 버튼 하나로 문의 창구를 끊지 않습니다.
5. 누른 뒤 반응을 보여줘 손님을 안심시킨다
버튼을 눌렀는데 아무 반응이 없으면 손님은 '안 눌렸나?' 싶어 두 번 세 번 누르거나 떠나버립니다. 손끝의 동작에 화면이 즉시 응답해야 합니다.
- 마우스를 올리면 색이 살짝 진해지는 호버 반응으로 '누를 수 있는 것'임을 알립니다.
- 누르는 순간 살짝 눌리는 효과로 동작이 접수됐음을 보여줍니다.
- 전송에 시간이 걸리면 '전송 중...' 표시로 중복 클릭을 막습니다.
버튼 하나가 문의 한 통을 가른다
버튼은 화면에서 가장 작은 요소지만, 손님의 행동을 실제로 일으키는 마지막 한 칸입니다. 색·글자·크기·위치·반응 다섯 가지만 정돈해도, 같은 방문자 수에서 더 많은 문의가 들어옵니다. CYAN은 작은 회사의 홈페이지를 만들 때 '손님이 무엇을 누르길 바라는가'에서 출발해, 그 행동까지 가는 길을 가장 짧고 또렷하게 설계합니다. 지금 운영 중인 사이트의 버튼이 손님에게 분명히 말을 걸고 있는지, 한번 화면을 열어 직접 눌러보시길 권합니다.