버튼 해부

정의

버튼은 얼핏 단순해 보이지만 몇 개의 부품이 겹쳐 만들어진 요소입니다. 가운데에는 무슨 동작인지 알려 주는 라벨(글자)이 있고, 그 라벨을 감싸는 컨테이너가 배경색과 테두리, 모서리 둥글기로 버튼의 모양을 만듭니다. 라벨과 컨테이너 사이의 여백은 글자가 답답하지 않게 숨통을 틔우면서, 동시에 손가락이나 커서로 누를 수 있는 영역의 크기를 결정합니다. 여기에 아이콘이나 로딩 표시가 더해지기도 하지만, 뼈대는 언제나 이 세 부품입니다. 이렇게 라벨, 컨테이너, 여백을 각각 따로 의식하고 조절할 줄 알면, 어떤 버튼이든 원하는 인상과 크기로 정확하게 다듬을 수 있고, 왜 이 버튼이 어색해 보이는지도 부품 단위로 짚어 낼 수 있습니다.

왜 중요한가

버튼은 사용자가 화면에서 가장 자주 누르는 요소이자, 무언가를 실행하는 출발점입니다. 그래서 버튼이 얼마나 잘 눌리는지, 얼마나 중요해 보이는지가 사용성에 곧바로 영향을 줍니다. 특히 여백이 만들어 내는 누를 수 있는 영역이 너무 작으면 사용자는 몇 번씩 헛누르며 답답해합니다. 또한 한 화면에는 보통 여러 버튼이 함께 놓이는데, 이때 모든 버튼이 똑같이 강해 보이면 무엇을 먼저 눌러야 할지 알 수 없습니다. 배경이 꽉 찬 버튼, 테두리만 있는 버튼, 배경도 테두리도 없는 버튼처럼 형태에 차이를 두면 자연스럽게 중요도의 위계가 생겨, 사용자가 가장 중요한 동작으로 시선을 옮기게 됩니다.

흔한 실수

• 누를 수 있는 영역을 너무 작게 만드는 것입니다. 글자에 여백을 거의 주지 않으면 버튼이 작아져 특히 모바일에서 정확히 누르기 어렵습니다. 손가락으로 편하게 누르려면 대략 44px 정도의 터치 영역을 확보하는 것이 안전합니다.
• 한 화면에 강조가 가장 센 버튼을 여러 개 두는 것입니다. 배경이 꽉 찬 버튼이 여기저기 흩어져 있으면 전부 중요해 보여 정작 무엇을 먼저 눌러야 할지 판단이 흐려지고 위계가 무너집니다.
• 버튼마다 여백과 둥글기, 색을 제각각 주는 것입니다. 같은 화면의 버튼들이 미묘하게 다르게 생기면 정돈되지 않은 인상을 주고, 사용자는 같은 종류의 동작인데도 서로 다른 버튼처럼 느껴 매번 새로 판단해야 합니다.

실무 팁

• 중요도에 따라 버튼의 형태를 나누세요. 배경이 꽉 찬 solid는 그 화면의 주요 동작에, 테두리만 있는 outline은 보조 동작에, 배경 없이 글자만 있는 ghost는 취소처럼 약한 동작에 씁니다. 한 화면에 solid는 하나만 두는 것을 기본으로 삼으세요.
• 누를 수 있는 영역은 최소 44px 정도를 목표로 여백을 넉넉히 잡으세요. 보이는 글자가 작더라도 실제 눌리는 범위를 키우면 오조작이 크게 줄어듭니다.
• 버튼의 여백, 둥글기, 색은 개별로 정하지 말고 정해진 토큰으로 통일해, 어느 화면에 놓아도 같은 규칙으로 생기도록 관리하세요.

관련 개념