아티클

‘더 나은 버튼’ 디자인 하기

버튼을 버튼답게!
2023-01-25

버튼에는 여러 중요한 행동들이 있습니다. 구매, 다운로드, 전송 등등..

하지만 가장 중요한 것은 버튼은 버튼처럼 보여야 하고, 눈에 띄도록 디자인 해야 한다는 것인데요. 더 나은 버튼을 디자인 하려면 어떻게 해야 할까요?

지금부터 더 나은 버튼을 디자인 하는 법에 대해 완.벽.하.게 정리해드리겠습니다!

1. 버튼을 버튼처럼 만들기

우리는 행동과 관련된 모양과 형태에 익숙합니다. 그렇기 때문에 버튼은 버튼처럼 보일 때가 가장 좋습니다. 이것이 바로 직사각형 (둥근 직사각형)이 버튼에 가장 많이 사용되는 이유입니다.

한 눈에 알아보기 쉬운 디자인 / 한 눈에 알아보기 어려운 디자인

2. 버튼을 분석하기

중요한 버튼은 아이콘과도 잘 작동해야 합니다. 예를 들어, ‘계산’이라는 단어는 장바구니 아이콘으로 빠르게 알 수 있지만, ‘계산’이라는 단어 없이 아이콘만 있는 경우는 빠르게 알아보기 어려울 것입니다.

3. 적당한 크기를 설정하기

웹과 모바일 버튼은 모두 최소 크기를 가져야 합니다. 버튼이 너무 작으면 클릭이 어렵고, 사용자가 앱을 제거할 수도 있기 때문이죠. 그렇기 때문에 모바일 장치의 요소를 44X44 픽셀로 시작하는 것이 가장 좋은 방법입니다.

1. 라벨을 중앙에 오게 하기

간격이 일정하지 않은 버튼은 가장 일반적인 문제 중 하자입니다. 버튼이 수평, 수직으로 모두 중심에 있는지 확인해야 합니다. 만약 확실해야 할 경우라면, 가이드를 작성해주세요.

2. 아이콘 정렬하기

버튼 코너 크기에 맞는 높이의 원 또는 정사각형을 만드세요. 그 안에 아이콘을 넣을 또 다른 모양의 도형을 만드는데 그 모양은 텍스트 높이와 같은 크기의 모양이어야 합니다. 그 후 생기는 작은 공간에 아이콘을 배치해주세요.

3. 모서리와 균형 맞추기

둥근 모서리 버튼을 사용할 때는 화면의 모서리와 동일한 비율을 가지게 해야 합니다. 비율이 다를 경우 여백의 불균형이 생기게 되어요.

조회수
1

콜 센터 없이 매출 달성하려면? #콜센터 아웃소싱 .

콜 직원 따로 둘 필요없이 매출을 높일 수 있는 차별화된 콜 필살기를 경험해 보세요.

답글 남기기

함께 읽으면 좋아요
아티클
파이어플라이, 텍스트로 AI 이미지 생성하기 하편
아티클
나의 피드백은 너의 좋은 길라잡이가 되었을까
아티클
파이어플라이, 텍스트로 AI 이미지 생성하기
아티클
31. 괜히 한번 긁어보고 싶네.. [토스] 여기를 긁어보세요 광고나 광고 배너에 대해 어떻게 생각하시나요?  저는...
디자인 레퍼런스
아티클
그래픽 모티브와 비주얼 아이덴티티를 이용한 차별화
아티클
1. 7년 만에 바뀐 카카오 ‘다음’ PC화면 카카오가 운영하는 포털사이트 ‘다음’이 7년 만에 PC화면을 개편했어요. 먼저 검색창 하단에...
디자인 트렌드
아티클
인테리어 소품 중에서 집의 분위기에 가장 많은 영향을 미치는 게 뭘까요? 저는 두말할 것 없이...
디자인 레퍼런스
아티클
‘이제 이 비행기는 나리타공항에 착륙할 예정입니다’  이 방송은 도쿄에 도착했다는 말과 같다. 비행기가 착륙한 후,...
디자인 브랜딩

위픽레터,
아직 구독 안하셨나요?

🌤️ 매주 1회 아침 8시!
세상을 달리고, 세상을 바꾸는
마케터들의 기록에 위픽레터가 함께 합니다.

이름*
이메일*
비밀번호*
위픽

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요