웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB)

 

 

 

이 게시글은 공부하면서 정리한 내용입니다.
잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

---

 

디자인 시스템 구축 과정에서 필요한 컴포넌트.
그 중 버튼 컴포넌트에 대해 정리해보았다.

 

버튼 그룹 (Button Group)

버튼이 여러 개일 때 간격을 공통으로 설정해야 한다.
간격이 매번 다르면 일관성이 떨어지고 유지보수하기 어려워진다.
사용자 경험 또한 좋아지지 않을 것이다.

 

 

 

버튼 그룹의 일정한 간격 예시

 

간격이 너무 좁거나 넓지 않도록 유의한다.

머터리얼 가이드 3에서는 8 dp 이상의 간격을 권장하고 있다.

8 dp 미만으로 설정해도 문제 없지만 가급적 4의 배수를 추천한다.

 

참고: 머터리얼 가이드 2 - 4 dp & 8dp 그리드, 머터리얼 가이드 3 - 타겟 간격

 

 

 

버튼 그룹의 응용 예시

 

 

위 예시처럼 다양하게 응용 가능하다.

다양한 종류의 버튼이지만 동일한 간격이기 때문에 일관성을 유지할 수 있다.

 

 

 

플로팅 액션 버튼 (Floating Action Button, FAB)

 

 

플로팅 액션 버튼 예시

 

 

플로팅 액션 버튼은 화면 맨 앞에 고정되어 떠 있는 버튼이다.

일반적으로 가장자리에 위치하며 상위 레벨의 중요도를 가졌으므로 신중하게 사용해야 한다.

 

 

💡 어떤 경우 사용해야 할까?

 

• 비즈니스 목적에 따라 사용자에게 특정 기능으로 액션을 유도
  예: 웹사이트 메인페이지 - 챗봇 버튼
  
  
• 사용자 편의에 따라 사용량이 많은 핵심 기능을 강조
  예: 쇼핑 웹사이트 상품페이지 - 탑/다운 버튼

 

 

 

버튼이 차지하는 비중의 차이 예시

 

 

사이즈는 버튼이 화면을 차지하는 비중을 고려하여 정한다.

잘 보여야 하지만 컨텐츠를 보는 데 방해가 되지 않는 크기가 좋다.

특히 모바일 화면은 태블릿/데스크탑 화면보다 작기 때문에 이 점을 유의해야 한다.

1개의 사이즈로 통일하거나 브레이크 포인트마다 2~3개로 나누어 사용하기도 한다. (모바일, 태블릿, 데스크탑)

 

 

 

 

버튼의 시각적 구분 예시

 

 

주변 배경 색과 대비되는 색을 사용하여 시각적으로 구분한다.

또는 그림자를 적용하여 배경에서 떠있는 것처럼 표현하기도 한다.

참고: 머터리얼 가이드 3 - 표면 거리

 

 

 

 

확장 FAB (Extended Floating Action Button)

 

 

• 아이콘 & 텍스트
  
  호버 시 텍스트가 나타나거나 스크롤 다운 시 텍스트가 사라진다.
  

호버 시 텍스트 나타나는 동작 예시

스크롤 다운 시 텍스트 사라지는 동작 예시

 

 

 

 

• 버튼 리스트
  
  호버 또는 누를 시 파생되는 기능의 버튼이 리스트로 나타난다.
  

버튼 리스트 팝업 동작 예시

 

 

 

 

• 레이어 팝업
  
  누를 시 레이어 팝업이 나타난다.
  

레이어 팝업 동작 예시