2023.12.11 6일차 수업: Button의 종류와 쓰임새
버튼 참고 사이트: https://m3.material.io/components/all-buttons
Button
버튼의 색상은 '컬러 시스템' 안에 있는 컬러를 사용해야 함.
컬러에 따라서 중요도도 인지할 수 있음.
- 텍스트만 있는 경우
- 아이콘이 있는 경우
- 아이콘만 있는 경우
아이콘이란, 그 자체로 레이블 역할을 해야함. 아이콘이 레이블의 역할을 하지 못한다면 텍스트만 사용하는 것이 좋음.
버튼의 아웃라인 여부에 따른 중요도 순위:
2: 진한 색상
3: 연한 색상
4: 색상 없이 아웃라인
[구매, 취소] → [2, 3], [2, 4]
3, 4로 만든다면 [3, 4] 이겠지만 굉장히 애매하기 때문에 지양.
Shadow
예전에는 그림자, 엠보 효과가 유행했지만 요즘은 플랫한 디자인 선호.
그림자가 있을 경우 사용자가 그림자에 집중하느라 컨텐츠에 집중하지 못하는 경우가 발생할 수도 있음.
Button의 종류
1. Floating Action Buttons (플로팅 액션 버튼)
플로팅 액션 버튼은 주요한 정보를 전달합니다.
이 FAB 버튼은 페이지의 모든 콘텐츠 너머에 위치합니다. 이것들은 기본적으로 사용자를 이끄는 역할을 하는데요, 컨텐트 너머 방문자의 주의를 끕니다. FAB 버튼은 페이지의 모든 레이어의 맨 위에서, 흥미로운 디자인으로 배치되어있기 때문에 사용자로 하여금 그냥 지나치지 못하게 하는 역할을 합니다. 또한 때로는 버튼이 상ㅇ자를 따라가도록 디자인을 하는 경우도 있습니다.
이 집요한 디자인의 버튼은 유저들에게 가장 중요한 정보를 전달하는 버튼이기 때문에 무엇보다 눈에 띄어야 한다.
e.g) 당근마켓 글쓰기 아이콘
** 이미지 출처: https://www.daangn.com/wv/faqs/4
2. Filled Buttons (채워진 버튼)
Filled 버튼은 무엇보다 효과적으로 액션을 유도하는 버튼이다.
채워져 있는 디자인과 함께 색상으로 가장 눈에 띄는 디자인을 가지고 있는데, 그 이유는 사용자로 하여금 가능한 빠르게 인식되어야 클릭을 유도할 수 있기 때문이다.
이러한 버튼의 채워져 있는 디자인은 이 버튼을 핵심 CTA(Call to Action) 버튼이 되도록 한다.
💡 FAB VS Filled Buttons(CTA)
플로팅 액션 버튼과 채워진 버튼이 한 페이지가 공존하는 경우는 거의 없다.
둘 중에 하나의 버튼만 있는 것이 그 버튼에 주목도가 올라가서 좋고, 두 개가 공존할 경우 잘 설계되었다고 보긴 어렵다.
3. Ghost Buttons (고스트 버튼)
고스트 버튼은 naked(벌거벗은) 또는 empty(텅 빈)라고도 불린다. 그 이유는 단순한게도, 그 버튼이 그렇게 보이기 때문이다. (텍스트 또는 아이콘이 들어있는 아웃라인 형식의 버튼은 무언가 감춰진 듯한 모양과 섬세한 색감이 있음)
고스트 버튼은 항상 사용자에게 어떤 또 다른 선택지와 더 많은 옵션을 보여준다.
중요도가 살짝 떨어지는 버튼에 사용한다.
4. Raised Buttons (튀어나온 버튼)
'누를 수' 있어 보인다는 특징을 가진다.
사용자에게 비주얼적인 경험을 만들어 준다. 사용자가 버튼을 클릭하고 싶어하도록 유도하기도 더 좋고, 다양한 콘텐츠에 또한 적합하기 때문에 다른 유형의 CTA 버튼을 위로 올리는 방식으로 이용할 수도 있다.
게임에서 많이 사용했고 CTA 버튼에 많이 쓰였다. 요즘은 유행이 좀 지난 ..ㅎㅎ
5. Dropdown Buttons (드롭다운 버튼)
드롭다운 버튼은 사용자들이 한 번의 클릭을 통하여 콘텐츠를 드러내거나, 숨기도록 하는 버튼이다.
이것은 웹/앱 페이지에서 콘텐츠를 줄이고, 또 디자인을 보기 깔끔하게 만드는데 도움을 준다.
버튼이 직접적으로 노출되어 있는 것보단 사용성이 떨어지지만, 공간을 넓게 쓸 수 있고 깔끔하게 보이게 해준다.
** 이미지 출처:
https://design.gs.com/components/dropdown
6. Hamburger Button (햄버거 버튼)
우리가 흔히 메뉴라고 부르는 버튼이다. 햄버거, 메뉴 버튼은 거의 페이지의 맨 위에 있는 요소이다. 이것은 콘텐츠와 사이트의 정보 구조에 대한 정보를 제공해준다.
예전엔 앱에서만 많이 쓰였는데, 요즘에는 웹 페이지에서도 쉽게 볼 수 있다. 처음 햄버거 버튼이 나왔을 때는 사용성이 많이 떨어졌었는데, 이제는 사용자들에게 햄버거 버튼이 메뉴라는 것에 대한 인지가 잘 되어 있다.
이렇게 다양한 햄버거 버튼이 존재한다
** 이미지 출처:
https://alvarotrigo.com/blog/hamburger-menu-css/
7. Toggle Buttons (토글 버튼)
유저가 선택을 반드시 하기를 강요하는 버튼이다. 유저들이 옵션을 선택해야하는 상황에서 사용한다.
Yes/No의 경우가 아닌, 하나의 옵션에 대한 select 개념으로 사용해야 한다.
On/Off 의 개념으로 생각하는 것이 편하겠다.
