[내일배움캠프] 사전캠프 Day 10 - Material Design

 

구성 요소

사용자 인터페이스를 만드는 데 사용되는 상호 작용적인 빌딩 블록

목적에 따라 액션, 컨테인먼트, 커뮤니케이션, 탐색, 선택 및 텍스트 입력과 같은 범주로 구성

 

 

버튼 만들기

플로팅 액션 버튼 (FAB)

- 화면 맨 앞에 고정되어 떠 있는 버튼

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

- 비즈니스 목적에 따라 사용자에게 특정 기능으로 액션을 유도 : 웹사이트 메인페이지 챗봇 버튼

- 사용자 편의에 따라 사용량이 많은 핵심 기능을 강조 : 쇼핑 웹사이트 상품페이지 : 탑/다운 버튼

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

 

확장 FAB

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

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

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