리플러스 라이브 정리 - 10.28
안드로이드와 iOS 컴포넌트 비교분석
10월 28일에 진행한 - 안드로이드 / iOS 컴포넌트 분석방송 내용입니다.
이번 라이브에서 들여다본 내용들
1. 안드로이드 마테리얼 UI
https://material.io/components
2. iOS 휴먼 인터페이스 가이드라인
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
3. iOS 14 - 피그마 UI 키트
https://www.figma.com/community/file/858143367356468985
이 주제와 같이 읽어두면 좋을 문서들
https://brunch.co.kr/@clay1987/154
https://brunch.co.kr/@clay1987/155
안드로이드 기준, 꼭 알아둬야할 컴포넌트 정리본
앱 내부 이동, 네비게이션을 위한 필수 UI
- Appbars (top) : 여러 형태로 변형되 쓰이는 상단 앱바
https://material.io/components/app-bars-top
- Bottom Navagation : 하단 앱바와 자주 헷갈리는 네비게이션 바
https://material.io/components/bottom-navigation
- Navigation drawer : 좌측메뉴, 슬라이딩 메뉴 등으로 불리는 그것
https://material.io/components/navigation-drawer
사용자에게 메시지나, 알림을 줄 수 있는 UI
- Dialog : 전체 화면을 가리면서 등장하는 팝업
https://material.io/components/dialogs
- Snackbars : 화면 하단에 톡 튀어나오는 임시 메시지
https://material.io/components/snackbars
- Banners : 컨텐츠 내부 - 상단 영역에 고정되는 형태의 알림 메시지
https://material.io/components/banners
- Text input (에러시) : 입력창 자체에 색상 + 하단 에러 메시지의 조합
https://material.io/components/text-fields
작은 UI 요소들을 담을수 있는 컨테이너 개념의 UI
- 리스트 : 기본중의 기본, 리스트 UI
https://material.io/components/lists
- Cards : 모바일에서 다양하게 변형 사용되고있는 카드 UI
https://material.io/components/cards
- Bottom Sheets : 화면 아래쪽에서 튀어나오는 변형규격
https://material.io/components/sheets-bottom
컨테이너 안에 담거나, 다른 곳에 조합해 배치 가능한 UI 요소
- Buttons : 여러 크기로변형할 수 있고, 3가지 강조도를 가진 기본 UI.
https://material.io/components/buttons
- Chips : 작은 버튼과 헷갈리기 쉬워요! 카드 UI나 상단 앱바 등에서 조합 가능한 칩 UI.
https://material.io/components/chips
- Selection Controls : 체크박스, 라디오버튼, 스위치 - 혼자서는 의미가 없는 세가지 UI
https://material.io/components/selection-controls
- Sliders : 볼륨조절, 비디오 재생위치 변경 등. 여러 형태로 쓰이는 U
https://material.io/components/sliders
완전히 새로 만들지 않는 한, 커스터마이징이 거의 불가능한 UI
- Time pickers : 시간을 설정하는 UI
https://material.io/components/time-pickers
- Date pickers : 날짜를 설정하는 UI
https://material.io/components/date-pickers
이 자료는 리플러스의 UI 디자인 연구소에서 만들어진 자료입니다.
