버튼 디자인, 문구·크기·상태 설계로 클릭 뒤의 혼란
온라인으로 배송지를 입력한 뒤 ‘저장’ 버튼을 눌렀는데, 화면이 멈춘 것처럼 보인 경험이 있나요? 반대로 버튼이 너무 작거나 색이 흐려서 어디를 눌러야 할지 한참 찾은 적도 있을 겁니다. 버튼은 화면에서 작게 보이지만, 사용자의 다음 행동을 결정하는 중요한 접점입니다.
버튼 디자인을 정할 때는 예쁜 색과 둥근 모양만 보는 것으로 부족합니다. 이 글을 읽으면 버튼 문구를 어떻게 정할지, 크기와 위치를 어떤 기준으로 잡을지, 누르기 전과 누른 뒤의 상태를 어떻게 보여줄지 알게 됩니다. 결제나 회원가입처럼 실수가 큰 화면에서 확인할 주의사항도 함께 살펴봅니다.
버튼 디자인은 ‘무엇을 하게 하는가’부터 시작한다
버튼은 사용자가 행동을 실행하는 화면 요소입니다. ‘확인’, ‘저장’, ‘신청하기’처럼 누른 뒤 어떤 일이 일어나는지 알려줘야 합니다. 반면 다른 페이지로 이동하는 것이 주된 목적이면 버튼보다 링크가 더 자연스러울 수 있습니다.
예를 들어 상품 상세 화면에서 ‘장바구니에 담기’는 상태를 바꾸는 행동이므로 버튼이 어울립니다. ‘배송 정책 보기’는 정보를 읽으러 이동하는 행동이므로 링크로 표현하는 편이 이해하기 쉽습니다. 모양만 버튼처럼 만들고 실제 역할은 링크인 경우, 사용자는 화면의 규칙을 배우기 어렵습니다.
- 주요 버튼: 화면에서 가장 중요한 행동 하나를 맡깁니다. 예를 들면 ‘주문하기’입니다.
- 보조 버튼: 주요 행동을 돕지만 우선순위는 낮습니다. 예를 들면 ‘임시 저장’입니다.
- 취소·삭제 버튼: 되돌리기 어렵거나 흐름을 멈추는 행동입니다. 주요 버튼과 색과 위치가 섞이지 않게 해야 합니다.
좋은 버튼인지 확인하는 체크리스트
버튼을 만든 뒤에는 디자이너의 취향보다 사용자의 상황을 기준으로 점검해야 합니다. 다음 질문에 ‘아니요’가 나오면 수정할 부분이 있다는 뜻입니다.
- 버튼만 보아도 누른 뒤의 결과를 예상할 수 있나요?
- 배경과 글자의 밝기 차이가 충분해 흐린 화면에서도 읽히나요?
- 휴대전화에서 손가락으로 누르기 쉬운 크기인가요?
- 버튼이 비활성화된 이유를 사용자가 알 수 있나요?
- 누른 뒤 처리 중이라는 표시가 나타나 중복 클릭을 막나요?
- 키보드만 사용하는 사람도 버튼을 찾아 실행할 수 있나요?
색만으로 의미를 전달하는 것도 조심해야 합니다. 빨간색은 삭제를 뜻할 수 있지만, 색을 구별하기 어려운 사람은 차이를 알아채지 못할 수 있습니다. ‘삭제’, ‘오류’ 같은 글자나 아이콘을 함께 사용하고, 아이콘만 놓을 때는 설명을 붙이는 것이 안전합니다.
버튼 크기와 모양, 화면에 따라 어떻게 다를까
큰 버튼이 언제나 좋은 것은 아닙니다. 중요한 행동은 눈에 잘 띄고 누르기 쉬워야 하지만, 모든 버튼을 크게 만들면 화면의 우선순위가 사라집니다. 모바일에서는 손가락으로 누르므로 충분한 터치 영역이 필요하고, 데스크톱에서는 주변 요소와 구분되는 여백이 더 중요할 수 있습니다.
| 상황 | 어울리는 설계 | 주의할 점 |
|---|---|---|
| 회원가입 완료 | 짧고 분명한 주요 버튼 | ‘다음’보다 ‘가입 완료’처럼 결과를 표시 |
| 결제 화면 | 주문 내용 가까이에 둔 강조 버튼 | 최종 금액과 결제 대상을 다시 확인하게 함 |
| 삭제 확인 창 | 삭제와 취소를 명확히 분리 | 실수로 삭제하지 않도록 기본 선택을 신중히 설정 |
| 긴 입력 화면 | 저장 위치를 예측할 수 있는 버튼 | 입력 내용이 사라지는지 여부를 안내 |
모서리를 둥글게 하거나 그림자를 넣는 것은 버튼처럼 보이게 돕지만, 장식이 기능을 대신하지는 않습니다. 배경과 글자의 차이가 약하거나 버튼 주변 여백이 부족하면 모양이 예뻐도 누를 대상을 알아보기 어렵습니다.
버튼 디자인을 만드는 순서
- 행동을 한 문장으로 적습니다. ‘사용자가 다음 화면으로 간다’가 아니라 ‘입력한 주소를 저장한다’처럼 결과를 구체적으로 씁니다.
- 문구를 정합니다. ‘확인’처럼 뜻이 넓은 말보다 ‘주소 저장’, ‘예약 취소’처럼 행동과 대상을 함께 적습니다. 버튼이 좁다면 핵심 동사라도 남깁니다.
- 우선순위를 나눕니다. 한 화면에서 가장 중요한 행동은 하나로 정하고, 보조 행동은 크기·색·위치로 차이를 줍니다.
- 상태를 설계합니다. 기본 상태뿐 아니라 마우스를 올린 상태, 눌린 상태, 비활성 상태, 처리 중 상태를 함께 만듭니다.
- 실제 화면에서 시험합니다. 긴 문구가 두 줄로 바뀌거나 번역 문장이 길어져도 레이아웃이 무너지지 않는지 확인합니다.
특히 처리 중 상태를 빼먹는 실수가 많습니다. 사용자가 버튼을 여러 번 누르면 주문이나 신청이 중복될 수 있습니다. 버튼 문구를 ‘저장 중’으로 바꾸고 잠시 다시 누르지 못하게 하는 방식처럼, 시스템의 진행 상황을 보여주는 설계가 필요합니다.
자주 생기는 실수와 고치는 방법
‘확인’만 반복하는 경우
팝업마다 ‘확인’이라고 쓰면 사용자는 무엇을 확인하는지 추측해야 합니다. 성공 알림에서는 ‘목록으로 이동’, 삭제 창에서는 ‘삭제하기’처럼 결과를 드러내는 문구를 사용하세요.
버튼을 색으로만 구분하는 경우
주요 버튼은 파란색, 취소는 회색처럼 나누더라도 색 차이가 작으면 구별하기 어렵습니다. 문구와 위치를 함께 다르게 하고, 삭제처럼 위험한 행동은 확인 문장과 취소 방법을 가까이 보여줘야 합니다.
비활성 버튼만 보여주는 경우
입력하지 않은 항목이 있어서 버튼을 누를 수 없다면 어떤 조건이 필요한지 안내해야 합니다. 회색 버튼만 덩그러니 놓으면 오류인지 아직 입력하지 않은 것인지 알기 어렵습니다.
결제 버튼을 마음대로 바꾸는 경우
외부 결제 서비스의 버튼은 브랜드 표시와 기능 규칙이 연결되어 있을 수 있습니다. 네이버페이, 톡체크아웃 등 서비스마다 허용 범위가 다르므로 디자인을 적용하기 전에 해당 서비스의 공식 안내를 확인해야 합니다. 오래된 글이나 제작 업체의 설명만 믿지 말고, 현재 제공되는 정책과 연동 문서를 다시 살펴보세요.
버튼 디자인에 관한 질문
버튼 문구는 짧을수록 좋은가요?
짧은 문구가 항상 좋은 것은 아닙니다. 사용자가 행동의 결과를 바로 이해한다면 짧게 써도 되지만, ‘확인’처럼 의미가 넓은 문구는 오히려 혼란을 키웁니다. 짧음보다 예측 가능성을 우선하세요.
버튼에 아이콘을 함께 넣어도 되나요?
아이콘은 의미를 보충할 때 유용합니다. 저장, 검색, 다운로드처럼 익숙한 행동에는 도움이 되지만, 서비스마다 뜻이 달라질 수 있는 아이콘은 글자를 함께 쓰는 편이 안전합니다. 아이콘만 있는 버튼에는 보조 설명도 준비해야 합니다.
버튼 색은 몇 가지가 적당한가요?
정해진 숫자보다 역할을 일관되게 유지하는 것이 중요합니다. 주요 행동, 보조 행동, 위험한 행동의 색을 구분하고 같은 역할에는 같은 규칙을 적용하세요. 화면마다 색의 뜻이 바뀌면 사용자는 다시 배워야 합니다.
접근성을 확인할 때 무엇을 보나요?
글자를 읽을 수 있는 대비, 충분한 터치 영역, 키보드 이동 순서, 화면 읽기 프로그램이 읽을 이름을 확인합니다. 색을 구분하지 못해도 의미를 이해할 수 있어야 합니다. 버튼을 직접 눌러 보는 것과 함께 키보드와 보조 기술로도 시험하면 놓친 문제를 찾기 쉽습니다.
버튼 디자인의 목표는 클릭을 많이 받는 장식이 아닙니다. 사용자가 지금 무엇을 할 수 있고, 누른 뒤 어떤 일이 일어나는지 편하게 이해하도록 돕는 것입니다. 문구, 크기, 우선순위, 상태, 접근성을 한 세트로 점검하면 작은 버튼 하나도 화면 전체의 신뢰를 높일 수 있습니다.