1. 아코디언
홈페이지 내 내용을 펼쳤다 접을 수 있는 컴포넌트. 정보를 숨겼다 제자리에 위치 시키는 기능
2. 드롭다운
선택창에 버튼을 누르면 세부 항목이 펼쳐지고 하나를 선택할 수 있음.
3. 콤보박스
드롭다운 형태에서 입력 필드 기능을 결합한 형태
4. 라디오버튼
여러 옵션 중 한가지만 선택할 수 있는 기능
5. 체크박스
여러 옵션 중 다중 선택할 수 있는 기능
6. 브레드크럼
사이드 이동 경로. 사용자가 어느 경로로 현 페이지에 와 있는지 나타냄 ex) 홈 > 가구 > 패브릭
7. 토클
아이폰 on/off 기능처럼 특정 기능을 키고 끌 때 사용. 스위치와 용
8. 툴팁
i 아이콘과 같은 요소와 함께 마우스를 가져다 대면 설명이 보여짐
9. 스피너
숫자값 입력창. 직접 입력하거나 위아래 버튼으로 조절 가능
10. 슬라이더
입력값에 제한이 있다는 것을 시각적으로 보여주고 양옆으로 움직여 값을 조정
11. 텍스트 입력 필드
키보드로 직접 텍스트 입력하는 칸
12.플레이스 홀더
텍스트 입력 필드에 임시적으로 보여지는 문자값. 이메일 텍스트 필드에 hong@gmail.com을 보여주는 것이 예시
13. CTA(Call to Action)
클릭을 유도하도록 시각적으로 눈에 두드러지게 만든 행동유도버튼
14. 캐러셀
카드뉴스를 슬라이드할 수 있도록 보이는 형식. 영상/이미지가 순환되어 콘텐츠를 노출시킬 수 있음
15. 스플래시
앱 시작 시 가장 먼저 보이는 화면
16. 코치마크
앱 첫 시작 시 온보딩을 보와주는 도움말 화면. 간단한 사용법을 오버레이로 알려주며 최초 실행시에만 보도록 설계
17. Pull to Refresh
당겨서 새로고침
18. FAB(Floating Action Button) 플로팅 버튼
스크롤을 내려도 맨 위 레이어에서 계속 보여지는 버튼. 배달앱의 장바구니, 웹사이트의 채널톡 같은 아이콘
19. 고정값
사용자가 아무 설정도 하지 않은 초기 설정 상태
20. 모달
화면 위에 새로운 레이어로 또다른 화면을 띄움. 기존 페이지와 부모-자식 관계이며 기존 화면은 dim처리로 사용 못 함
21. 메뉴 종류
벤토(와플) : 그리드 목록으로 나열
도너 : 메뉴에 필터그룹 사용
케밥 : 그룹화 된 옵션 세트
미트볼 : 더 많은 옵션을 보여줄 때
햄버거 : 하나의 네비게이션을 안에 담을 때
기타 등등
22. 픽커
시간/날짜 같은 범위 내 특정 숫자 선택 시 사용. 휠 형태라고 부름
23. 스텝퍼
입력 필드 값 안에 -,+으로 값을 변경. 주로 수량 변경에서 사용
24. 페이지네이션
여러 페이지 중 현재 페이지를 보여주는 형태
25. 뱃지
새로운 정보, 업데이트가 있다는 것을 아이콘 혹은 버튼 등의 우측 상단에 컨테이너/점으로 표시
26. 스켈레톤
실제 데이터 로딩 전 윤곽을 먼저 보여주는 로딩 애니메이션
27. 카드형 ui
직관적인 특성을 지녀 유저가 관심 있는 콘텐츠를 쉽게 찾을 수 있게 함
28. 디바이더
그룹화 된 항목 구분, 아코디언에서 탭 영역을 정의하는데 사용
29. 프로그래스 인디케이터
로딩 중임을 알려주는 애니메이션
30. 반응형 웹
접속하는 디스플레이 종류에 따라 화면 크기가 알맞게 변화