버튼은 버튼에 설명된 작업을 하는 대화형 요소입니다.
버튼에 ‘저장’이라고 적혀 있다면, 클릭했을 때 ‘저장’할 가능성이 크고 모든 디지털 제품에서 가장 중요한 상호작용 요소 중 하나입니다.
버튼에는 여러 중요한 행동들이 있는데, 구매, 다운로드, 전송 등이 있고,
디지털 버튼은 TV리모컨, 레코드 플레이어, 게임 컨트롤러 같은 실제 버튼에서 유래되기도 했습니다.
가장 중요한 것은 버튼은 버튼처럼 보여야 하고, 디자인할 때 다른 요소들과 헷갈리지 않도록 눈에 띄어야 한다는것입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171826/1.png)
(버튼에서 디자인요소를 제거할 수 록 버튼 보다는 일반 텍스트나 장식처럼 보여 버튼의 기능을 점점 잃어버리게 됩니다.)
1.친숙함=좋다
우리는 보통 행동과 관련된 모양과 형태에 익숙하고 버튼은 버튼처럼 보일 때 가장 좋습니다.
그래서 직사각형 (둥근 직사각형)이 항상 버튼에 가장 많이 사용하는 이유입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171827/2.png)
(한 눈에 봐도 버튼이라고 알 수 있는 디자인)
다른 버튼 디자인은(EX. 삼각형, 원, 유기체) 사용자가 버튼이라고 인식하기 어렵습니다.
이부분을 주의해야 하고, 제품의 스타일이 표준에서 벗어나야 할 때만 사용해야합니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171828/3.png)
(실행 가능한 버튼으로 알아보는데 훨씬 더 오래 거리는 디자인)
2.버튼 분석
버튼 디자인을 할 때는 각 요소에 대해 현명하게 선택해야합니다.
브랜드나 스타일 가이드를 기준으로 해서 어떤 버튼이 브랜드와 일치하고 인터페이스에 맞는지 잘 생각해보아야합니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171830/4.png)
위의 예시 그림에서 수직 간격보다 왼쪽 간격이 두 배 크면 가독성이 높아지는 안전한 비율 선택이며,
그리드 번호를 사용해 공간을 설정해야합니다.
3.간격과 정렬
간격이 일정하지 않은 버튼은 인터페이스의 가장 일반적인 문제 중 하나입니다.
버튼이 수평, 수직으로 모두 중심에 있는지 확인해야하며 확실해야할 경우 가이드를 작성해야합니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171831/5.png)
그리드 작성 외에도 버튼 간격을 알 수 있는 안전한 방법은 대문자 “W”를 넣어보는 방법입니다.
버튼 양면에 “W”가 하나 이상 들어가면 되고 “W”가 두배로 들어가게 되면 가독성을 높일 수 있습니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171832/6.png)
버튼과 버튼 사이가 겹치지 않고 개별적인 공간이 있어야합니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171834/7.png)
4.적당한 크기
웹과 모바일 버튼은 모두 최소 크기를 가져야 합니다.
버튼이 너무 작으면 누르거나 클릭하기가 어렵고 사용자가 앱을 제거할 수도 있습니다.
모바일 장치의 요소를 44X44픽셀로 시작하는게 가장 좋은 방법입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171836/8-300x164.png)
(모바일 버튼은 50px 정도가 가장 좋고, 커서 장치 같은 경우 32x32px 로도 작동해야 하며 데스크톱에서도 버튼이 클수록 더 좋습니다.)
5.모범 사례
중요한 버튼은 아이콘과도 잘 작동해야합니다.
“계산”이라는 단어는 장바구니나 카트 아이콘으로 빠르게 알 수 있지만, 아이콘만 있는 것 보단 “계산”이라는 단어가 포함되있을 경우
더욱 빠르게 알아 볼 수 있습니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15173143/9-1.png)
(버튼과 옆에 있는 화살표는 버튼 메세지를 사용자가 ‘클릭’과 ‘진행’을 할 수 있도록 유도합니다.)
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15173144/101.png)
(버튼에 은은한 그림자를 넣어 배경에서 더 눈에 띄게 하면 그림자가 없는 버튼보다 훨씬 버튼이 눈에 띄게됩니다.)
6.둥근 모서리
직사각형 버튼보다 둥근 사각형의 버튼이 더 친근하고 긍정적이게 보여지며 주변 컨텐츠 디자인하는 것을 훨씬 더 어렵게 만듭니다.
버튼 바로 위에 왼쪽 정렬 텍스트가 있으면 모서리가 둥글수록 시각적으로 눈에 덜 띄게됩니다.
버튼이 약간 둥근 경우 왼쪽 여백에 들어맞는것처럼 보입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15174133/111.png)
조금 더 둥근 모서리는 시각적으로 약간 오른쪽으로 움직여 보입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15174134/121.png)
완전히 둥근 모서리는 시각적으로 정렬되어 보이지 않고, 그리드 외부에 있는 것처럼 보입니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15174134/131.png)
7.아이콘 정렬
버튼의 아이콘 정렬이 가장 어려운 작업 중 하나입니다.
많은 경우 글꼴 무게와 아이콘 무게의 관계가 특정되는데 대부분의 경우 효과있고 유용한 규칙이있습니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171841/14-300x204.png)
버튼 코너 크기에 맞는 버튼 높이의 원이나 정사각형을 만듭니다.
그 안에 아이콘을 넣을 또 다른 모양을 만드는데 그 모양은 텍스트 높이와 같은 크기의 모양이여야 합니다.
그리고 생기는 작은 공간에 아이콘을 배치합니다.
8.모서리 균형
둥근 모서리 버튼을 사용할 때 화면의 모서리와 동일한 비율을 가지게 해야 합니다.
비율이 다를 경우 여백의 불균형이 생기게 됩니다.
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171842/15.png)
(시선의 간격이 좌측과 하단의 간격과 동일해서 좋고, 더 빠른 결과를 보여줍니다.)
![](http://s3-ap-northeast-2.amazonaws.com/mixnfix-main/mixnfix/wp-content/uploads/2020/10/15171843/16.png)
왼쪽 – 사선의 간격이 측면 간격보다 크다, 오른쪽 – 사선의 간격이 측면 간격보다 작다.
(위 사진 같은 간격은 화면 끝에 시선이 가서 버튼 자체에 눈길이 가지 않게 됩니다.)
#요약하자면
- 버튼을 버튼처럼 보이게 만드세요.
- 라벨이 수직 및 수평 방향으로 중앙에 오게하세요.
- 버튼 내부에 충분한 공간을 만드세요.
- 아이콘을 사용할 때 적당한 크기와 정렬을 선택하세요.
- 버튼 사용 위치에 따라 테두리 반지름을 설정하세요. 그런 다음 버튼 반지름이 화면 요소와 일치하는지 확인하세요.
- 버튼이 클수록 사용하기 쉽고 적당한 크기로 만드세요 (+데스크톱 포함)