Web Guide버튼 디자인CTA 버튼클릭 유도
버튼 디자인: 크기, 색, 위치, 상태
버튼처럼 안 보이는 버튼은 눌리지 않습니다.
세련되게 만들려다 버튼인지 알 수 없게 되는 경우가 있습니다. 눌러야 할 것은 눌러 보이게 만드는 것이 먼저입니다.
01버튼처럼 보이게 만든다
테두리도 배경색도 없이 글자만 있으면 그것이 버튼인지 알 수 없습니다. 최근 유행하는 미니멀한 디자인에서 자주 생기는 문제입니다.
배경색이 채워진 형태가 가장 확실하고, 최소한 테두리라도 있어야 합니다.
채운 버튼 — 배경색 있음
가장 확실합니다. 주요 행동에 사용
테두리 버튼 — 선만 있음
보조 행동. 주 버튼보다 약하게
텍스트 버튼 — 글자만
부가 행동. 밑줄이나 화살표를 더합니다
구분 없는 글자 — 위험
버튼인지 알 수 없습니다. 피해야 합니다
02크기와 여백
버튼이 작으면 누르기 어렵고, 특히 모바일에서 문제가 됩니다. 손가락으로 정확히 누를 수 있는 크기여야 합니다.
글자 주변에 충분한 여백이 있어야 버튼처럼 보입니다. 글자에 딱 붙은 테두리는 답답해 보입니다.
1
최소 터치 크기
모바일에서 손가락으로 누를 수 있는 크기를 확보합니다.
2
좌우 여백
글자 좌우에 충분한 공간. 글자 길이에 따라 버튼 폭이 달라집니다.
3
상하 여백
위아래도 충분히. 납작한 버튼은 누르기 어렵습니다.
4
버튼 간 간격
버튼이 나란히 있으면 사이에 여백을 둡니다. 붙어 있으면 잘못 누릅니다.
5
위계에 따른 크기
주 버튼을 보조 버튼보다 크게 만들 수 있습니다.
03상태를 모두 만든다
버튼은 기본 상태만 있는 것이 아닙니다. 마우스를 올렸을 때, 눌렀을 때, 비활성일 때, 처리 중일 때 각각 다르게 보여야 합니다.
특히 '처리 중' 상태가 없으면 방문자가 버튼을 여러 번 누르게 됩니다.
기본
평상시 모습.
마우스 올림
색이 조금 진해지거나 그림자가 생깁니다. 클릭 가능함을 알려줍니다.
누름
눌린 느낌. 살짝 어두워지거나 들어가 보이게 합니다.
포커스
키보드로 이동했을 때. 테두리가 보여야 접근성이 확보됩니다.
비활성
누를 수 없는 상태. 흐리게 표시하고 이유를 알려주면 좋습니다.
처리 중
제출 후 응답 대기. 버튼을 비활성화하고 표시를 바꿉니다.
04위치와 개수
한 화면에 강조된 버튼이 여러 개면 어느 것도 강조되지 않습니다. 화면마다 주 버튼은 하나로 제한하세요.
그리고 긴 페이지에서는 버튼을 여러 번 반복해 두는 것이 좋습니다. 아래까지 내려간 사람이 다시 올라가지 않아도 되게.
주 버튼은 하나화면당 하나. 나머지는 약한 스타일로.
긴 페이지는 반복상단, 중간, 하단에 같은 버튼을 둡니다.
모바일 고정 바스크롤해도 버튼이 화면에 남게 합니다.
취소는 약하게'취소'와 '확인'이 같은 무게면 실수가 생깁니다.
위험한 행동삭제 같은 되돌릴 수 없는 행동은 다른 색으로 구분합니다.
CHECK POINT
□ 버튼이 버튼처럼 보이는가
□ 모바일에서 손가락으로 누르기 충분한 크기인가
□ 글자 주변에 충분한 여백이 있는가
□ 마우스 올림·누름·포커스 상태가 있는가
□ 처리 중 상태에서 중복 클릭이 막히는가
□ 한 화면에 강조된 버튼이 하나인가
□ 긴 페이지에 버튼이 반복되어 있는가
□ 삭제 같은 위험한 행동이 구분되어 있는가
#버튼 디자인#CTA 버튼#클릭 유도#터치 영역#버튼 상태#접근성#전환율#홈페이지 디자인#웹비스타#홈페이지 제작