아티클

더 나은 버튼 디자인을 하는 법

2021-12-16

버튼은 버튼에 설명된 작업을 하는 대화형 요소입니다.

버튼에 ‘저장’이라고 적혀 있다면, 클릭했을 때 ‘저장’할 가능성이 크고 모든 디지털 제품에서 가장 중요한 상호작용 요소 중 하나입니다.

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

디지털 버튼은 TV리모컨, 레코드 플레이어, 게임 컨트롤러 같은 실제 버튼에서 유래되기도 했습니다.

가장 중요한 것은 버튼은 버튼처럼 보여야 하고, 디자인할 때 다른 요소들과 헷갈리지 않도록 눈에 띄어야 한다는것입니다. 

(버튼에서 디자인요소를 제거할 수 록 버튼 보다는 일반 텍스트나 장식처럼 보여 버튼의 기능을 점점 잃어버리게 됩니다.)

1.친숙함=좋다

우리는 보통 행동과 관련된 모양과 형태에 익숙하고 버튼은 버튼처럼 보일 때 가장 좋습니다.

그래서 직사각형 (둥근 직사각형)이 항상 버튼에 가장 많이 사용하는 이유입니다.

(한 눈에 봐도 버튼이라고 알 수 있는 디자인)

다른 버튼 디자인은(EX. 삼각형, 원, 유기체) 사용자가 버튼이라고 인식하기 어렵습니다.

이부분을 주의해야 하고, 제품의 스타일이 표준에서 벗어나야 할 때만 사용해야합니다.

(실행 가능한 버튼으로 알아보는데 훨씬 더 오래 거리는 디자인)

2.버튼 분석

버튼 디자인을 할 때는 각 요소에 대해 현명하게 선택해야합니다.

브랜드나 스타일 가이드를 기준으로 해서 어떤 버튼이 브랜드와 일치하고 인터페이스에 맞는지 잘 생각해보아야합니다.

위의 예시 그림에서 수직 간격보다 왼쪽 간격이 두 배 크면 가독성이 높아지는 안전한 비율 선택이며,

그리드 번호를 사용해 공간을 설정해야합니다.

3.간격과 정렬

간격이 일정하지 않은 버튼은 인터페이스의 가장 일반적인 문제 중 하나입니다.

버튼이 수평, 수직으로 모두 중심에 있는지 확인해야하며 확실해야할 경우 가이드를 작성해야합니다.

그리드 작성 외에도 버튼 간격을 알 수 있는 안전한 방법은 대문자 “W”를 넣어보는 방법입니다.

버튼 양면에 “W”가 하나 이상 들어가면 되고 “W”가 두배로 들어가게 되면 가독성을 높일 수 있습니다.

버튼과 버튼 사이가 겹치지 않고 개별적인 공간이 있어야합니다.

4.적당한 크기

웹과 모바일 버튼은 모두 최소 크기를 가져야 합니다.

버튼이 너무 작으면 누르거나 클릭하기가 어렵고 사용자가 앱을 제거할 수도 있습니다.

모바일 장치의 요소를 44X44픽셀로 시작하는게 가장 좋은 방법입니다.

(모바일 버튼은 50px 정도가 가장 좋고, 커서 장치 같은 경우 32x32px 로도 작동해야 하며 데스크톱에서도 버튼이 클수록 더 좋습니다.)

5.모범 사례

중요한 버튼은 아이콘과도 잘 작동해야합니다.

“계산”이라는 단어는 장바구니나 카트 아이콘으로 빠르게 알 수 있지만, 아이콘만 있는 것 보단 “계산”이라는 단어가 포함되있을 경우

더욱 빠르게 알아 볼 수 있습니다.

(버튼과 옆에 있는 화살표는 버튼 메세지를 사용자가 ‘클릭’과 ‘진행’을 할 수 있도록 유도합니다.)

(버튼에 은은한 그림자를 넣어 배경에서 더 눈에 띄게 하면 그림자가 없는 버튼보다 훨씬 버튼이 눈에 띄게됩니다.)

6.둥근 모서리

직사각형 버튼보다 둥근 사각형의 버튼이 더 친근하고 긍정적이게 보여지며 주변 컨텐츠 디자인하는 것을 훨씬 더 어렵게 만듭니다.

버튼 바로 위에 왼쪽 정렬 텍스트가 있으면 모서리가 둥글수록 시각적으로 눈에 덜 띄게됩니다.

버튼이 약간 둥근 경우 왼쪽 여백에 들어맞는것처럼 보입니다.

조금 더 둥근 모서리는 시각적으로 약간 오른쪽으로 움직여 보입니다.

완전히 둥근 모서리는 시각적으로 정렬되어 보이지 않고, 그리드 외부에 있는 것처럼 보입니다.

7.아이콘 정렬

버튼의 아이콘 정렬이 가장 어려운 작업 중 하나입니다.

많은 경우 글꼴 무게와 아이콘 무게의 관계가 특정되는데 대부분의 경우 효과있고 유용한 규칙이있습니다.

버튼 코너 크기에 맞는 버튼 높이의 원이나 정사각형을 만듭니다.

그 안에 아이콘을 넣을 또 다른 모양을 만드는데 그 모양은 텍스트 높이와 같은 크기의 모양이여야 합니다.

그리고 생기는 작은 공간에 아이콘을 배치합니다.

8.모서리 균형

둥근 모서리 버튼을 사용할 때 화면의 모서리와 동일한 비율을 가지게 해야 합니다.

비율이 다를 경우 여백의 불균형이 생기게 됩니다.

(시선의 간격이 좌측과 하단의 간격과 동일해서 좋고, 더 빠른 결과를 보여줍니다.)

왼쪽 – 사선의 간격이 측면 간격보다 크다, 오른쪽 – 사선의 간격이 측면 간격보다 작다.
(위 사진 같은 간격은 화면 끝에 시선이 가서 버튼 자체에 눈길이 가지 않게 됩니다.)


#요약하자면

  1. 버튼을 버튼처럼 보이게 만드세요.
  2. 라벨이 수직 및 수평 방향으로 중앙에 오게하세요.
  3. 버튼 내부에 충분한 공간을 만드세요.
  4. 아이콘을 사용할 때 적당한 크기와 정렬을 선택하세요.
  5. 버튼 사용 위치에 따라 테두리 반지름을 설정하세요. 그런 다음 버튼 반지름이 화면 요소와 일치하는지 확인하세요.
  6. 버튼이 클수록 사용하기 쉽고 적당한 크기로 만드세요 (+데스크톱 포함)

저자 : Michal Malewicz
원문 : thenextweb.com/how to design better buttons <보러가기>
조회수
1

최저비용 · 최대효과 #퍼포먼스 마케팅 .

가장 효율적이고 가장 쉬운 성과 중심의 마케팅 전략을 경험해 보세요.

답글 남기기

함께 읽으면 좋아요
아티클
여러분들은 영감과 인사이트를 어떻게 얻으시나요?
마케팅조언
아티클
✨디지털 시대 감성 마케팅 전략
마케팅전략 브랜딩
아티클
되찾은 주도권, 오히려 개선된 이익, 꾸준히 성장 중인 해외 시장
커머스 트렌드
아티클
지금 너무 잘하고 있어서 오히려 부담스럽기 때문입니다
트렌드
팝업스토어
2월 넷째 주 성수동 팝업스토어 일정, 위픽레터가 알려드릴게요!
팝업스토어 팝업캘린더
아티클
구글이 휴대폰 화면에서 원을 그려 검색 결과를 확인할 수 있는 서클 투 서치(Circle to Search)...
검색마케팅 검색엔진 멀티서치 생성AI
아티클
웹 3.0 시대, 슈퍼볼 광고는 어떤 의미인가.
마케팅사례 브랜딩 콘텐츠마케팅
아티클
이커머스 시장 전체의 경쟁 구도가 완전히 뒤바뀌었음을 뜻합니다
트렌드
아티클
사람들의 시선을 사로잡는 '투머치' 전략
광고털기 레퍼런스
아티클
2024년. 지구인들에게 슈퍼볼 하프타임 쇼는 과연 어떤 의미인가
마케팅사례 브랜딩
서베이
당신의 이상형을 찾아보세요!
마케터 문화콘텐츠 직장인
아티클
귀여움의 심리학이라는 것을 아시나요?
공간마케팅 공감마케팅 마케팅전략

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

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

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

위픽레터 제휴 문의

위픽레터를 통한 제휴 또는 광고를 원하신다면, 아래 양식을 통해 문의해 주세요. 평일 기준, 1~2일 이내로 회신 드리겠습니다.
위픽레터는 마케터들과 함께 호흡하고 함께 만들어 갑니다.

개인정보 수집·이용에 대한 안내 문의를 접수하고 회신하기 위해 최소한의 개인정보(이메일과 문의내용)를 수집하며 후속조치를 위해 1년간 보관합니다. 개인정보 수집·이용을 거부할 수 있으며, 이 경우 답변이 제한됩니다. 더 자세한 내용은 개인정보처리방침을 참고하시기 바랍니다.
위픽

마케터에게 제안하기

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