메뉴 종류

1. GNB

2. LNB

3. SNB

4. FNB,Footer

5. Tap Menu

병렬형 콘텐츠를 보여줄 경우 상단에 Tab 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있습니다.

6. FAB

플로팅 버튼은 페이지 내에서 관련성이 높거나 자주 사용되는 동작을 주로 우측 하단에 표시합니다.

7. Spalsh Screen

앱이 시작할 때 보여주는 화면으로 앱의 로고나 성격이 보이는 콘텐츠로 홍보합니다(3초내외)

8. Hambuger

웹이나 모바일 상단에 위치한 버튼으로 이 버튼은 전체 메뉴를 한 눈에 볼 수 있는 역할을 합니다

9. Drawer

드로어는 평상시에는 닫혀있다가 클릭하면 열리는 방식으로 보통 앱의 상단에 위치합니다

10. Accodian

내용을 펼쳤다 접을 수 있는 컴포넌트로 모바일에서 리스트 형식을 효과적으로 표현합니다

11. BTN, Button

버튼은 크게 활성화 된 상태와 비활성화된 상태 2가지로 나뉩니다

11-1. Enabled=Default 디폴트

사용자가 터치하기 전으로, 상호작용이 가능한 상태일 때

11-2. Hover 호버

사용자가 버튼 위에 마우스를 올렸을 때 상태

11-3. Focus 포커스

사용자의 키보드 혹은 음성입력을 통해 강조된 상태

11-4. Pressed 프레스드

사용자가 버튼을 눌렀을 때 상태

11-5. Disabled 비활성화

비활성화 상태로, 버튼을 탭할 수 없는 상태

11-6. Progress 프로그레서

버튼 클릭 시 진행 중인 상태 보통[다운로드],[저장]등 전환중인 상태에 표현

12. Label

주로 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해 주는 문구