★ 이 책에서 다루는 내용 ★ ■ 머티리얼 UI 앱의 전체적인 구조와 내비게이션 구축 방법 ■ 다양한 방법으로 단순하거나 복잡한 정보를 제공하는 방법 ■ 상호적이고 직관적인 컨트롤 구축 ■ 모든 머티리얼 UI 앱에 유용한 테마와 스타일 구축 ■ 탭과 확장 패널을 사용해 콘텐츠를 섹션으로 그룹화하는 방법 ■ 머티리얼 UI 그리드를 사용한 일반적인 데이터 레이아웃 설계 ■ 복잡한 데이터에 대한 리스트 사용과 자세한 정보에 대한 카드 사용 ★ 이 책의 대상 독자 ★ 머티리얼 UI로 애플리케이션에서 더 나은 사용자 경험을 제공하려는 모든 개발자를 대상으로 한다. 노련한 전문가부터 초보 개발자까지 모두에게 적합한 책이며, 머티리얼 UI에 대해 상세한 설명을 가득 담고 있다. 여러분이 머티리얼 디자인에 익숙하지 않다고 가정해 설명하지만, 이 책을 최대한 활용하려면 리액트와 현대 자바스크립트에 대한 최소한의 실무 지식은 갖춰야 한다. 리액트를 가르치는 것이 이 책의 목적은 아니지만, 예제를 따라 하는 데 도움이 된다면 리액트 특화 메커니즘도 설명한다 ★ 이 책의 구성 ★ 1장. ‘그리드 - 페이지에 구성 요소 배치하기’에서는 그리드 시스템을 사용해 페이지에 구성 요소를 배치한다. 2장. ‘앱바 - 모든 페이지의 최상위 수준’에서는 앱바를 UI의 상단에 추가한다. 3장. ‘드로어 - 내비게이션 제어를 위한 장소’에서는 드로어를 사용해 메인 내비게이션을 표시한다. 4장. ‘탭 - 콘텐츠를 탭 섹션으로 그룹화하기’에서는 콘텐츠를 탭으로 구성한다. 5장. ‘확장 패널 - 콘텐츠를 패널 섹션으로 그룹화하기’에서는 콘텐츠를 패널로 구성한다. 6장. ‘리스트 - 간단한 수집 데이터 표시’에서는 사용자가 읽고 상호작용할 수 있는 항목의 리스트를 렌더링한다. 7장. ‘테이블 - 복잡한 수집 데이터 표시’에서는 데이터 수집에 대한 자세한 정보를 보여준다. 8장. ‘카드 - 상세 정보 표시’에서는 카드를 사용해 특정 엔티티/사물/객체에 대한 세부 정보를 표시한다. 9장. ‘스낵바 - 임시 메시지’에서는 사용자에게 애플리케이션의 현재 상황을 알린다. 10장. ‘버튼 - 동작 시작하기’에서는 사용자가 작업을 수행하는 가장 일반적인 방법인 버튼을 설명한다. 11장. ‘텍스트 - 텍스트 입력 수집’에서는 사용자가 정보를 입력할 수 있게 한다. 12장. ‘자동 완성과 칩 - 여러 항목에 대한 텍스트 입력 제안’에서는 사용자가 입력할 때 선택 사항을 제공한다. 13장. ‘선택 - 선택 사항의 결정’에서는 사용자가 미리 정의된 옵션 집합에서 선택할 수 있다. 14장. ‘선택 도구 - 날짜와 시간 선택’에서는 읽기 쉬운 형식을 사용해 날짜와 시간 값을 선택한다. 15장. ‘대화상자 - 사용자 상호작용을 위한 모달 화면’에서는 입력을 수집하거나 정보를 나타내는 모달 화면을 표시한다. 16장. ‘메뉴 - 팝 아웃되는 동작 표시하기’에서는 메뉴에 동작을 추가해 화면 공간을 절약한다. 17장. ‘타이포그래피 - 폰트의 룩앤필 제어하기’에서는 체계적인 방식으로 UI의 폰트를 제어한다. 18장. ‘아이콘 - 룩앤필에 맞게 아이콘 향상시키기’에서는 머티리얼 UI 아이콘을 사용자 정의하고 새 아이콘을 추가한다. 19장. ‘테마 - 앱의 룩앤필을 중앙집중화하기’에서는 테마를 사용해 구성 요소의 룩앤필을 변경한다. 20장. ‘스타일 - 구성 요소에 스타일 적용하기’에서는 많은 스타일 솔루션 중 하나를 사용해 UI를 디자인한다.

1장 그리드 - 페이지에 구성 요소 배치하기 __소개 __브레이크포인트 적용 __공간 채우기 __컨테이너와 항목의 추상화 __고정열 레이아웃 __열 방향 변경 2장 앱바 - 모든 페이지의 최상위 수준 __소개 __고정된 위치 __스크롤 시 숨기기 __툴바 추상화 __내비게이션과 함께 사용하기 3장 드로어 - 내비게이션 제어를 위한 장소 __소개 __드로어 타입 __드로어 항목 상태 __드로어 항목 내비게이션 __드로어 섹션 __앱바 상호작용 4장 탭 - 콘텐츠를 탭 섹션으로 그룹화하기 __소개 __앱바 통합 __탭 정렬 __상태에 기반한 탭 렌더링 __탭 콘텐츠 추상화 __경로로 탭 탐색하기 5장 확장 패널 - 콘텐츠를 패널 섹션으로 그룹화하기 __소개 __상태 저장 확장 패널 __패널 헤더 서식 지정 __스크롤 가능한 패널 콘텐츠 __패널 콘텐츠 지연 로딩 6장 리스트 - 간단한 수집 데이터 표시 __소개 __상태를 사용한 리스트 항목 렌더링 __리스트 아이콘 __리스트 아바타와 텍스트 __리스트 섹션 __중첩된 리스트 __리스트 제어 __리스트 스크롤 7장 테이블 - 복잡한 수집 데이터 표시 __소개 __상태 테이블 __정렬 가능한 열 __행 필터링 __행 선택 __행 동작 8장 카드 - 상세 정보 표시 __소개 __메인 콘텐츠 __카드 헤더 __동작 수행하기 __미디어 표현 __확장 카드 9장 스낵바 - 임시 메시지 __소개 __스낵바 콘텐츠 __상태로 가시성 제어하기 __스낵바 전환 __스낵바 위치 지정 __오류 경계와 오류 스낵바 __스낵바 동작 __스낵바 큐 10장 버튼 - 동작 시작하기 __소개 __버튼 변형 __버튼 강조 __링크 버튼 __플로팅 동작 __아이콘 버튼 __버튼 크기 11장 텍스트 - 텍스트 입력 수집 __소개 __상태로 입력 제어하기 __자리표시자와 헬퍼 텍스트 __유효성 검사 및 오류 표시 __패스워드 필드 __멀티라인 입력 __입력 꾸미기 __입력 마스킹 12장 자동 완성과 칩 - 여러 항목에 대한 텍스트 입력 제안 __소개 __자동 완성 구성 요소 만들기 __자동 완성 제안 선택 __API 기반 자동 완성 __검색 결과 강조 __독립형 칩 입력 13장 선택 - 선택 사항의 결정 __소개 __체크박스 그룹 추상화 __체크박스 항목 사용자 정의 __라디오 버튼 그룹 추상화 __라디오 버튼 유형 __체크박스를 스위치로 바꾸기 __상태로 선택 제어하기 __여러 항목 선택 14장 선택 도구 - 날짜와 시간 선택 __소개 __날짜 선택 도구 사용 __시간 선택 도구 사용 __초기 날짜 값과 시간 값 설정 __날짜 및 시간 구성 요소 결합 __다른 날짜 및 시간 패키지 통합 15장 대화상자 - 사용자 상호작용을 위한 모달 화면 __소개 __양식 입력 수집 __동작 확인 __경고 표시 __API 통합 __전체 화면 대화상자 만들기 __대화상자 콘텐츠 스크롤 16장 메뉴 - 팝 아웃되는 동작 표시하기 __소개 __상태로 메뉴 구성하기 __메뉴 스크롤 옵션 __메뉴 전환 사용하기 __메뉴 항목 사용자 정의 17장 타이포그래피 - 폰트의 룩앤필 제어하기 __소개 __타이포그래피 유형 __테마 색상 사용 __텍스트 정렬 __텍스트 래핑 18장 아이콘 - 룩앤필에 맞게 아이콘 향상시키기 __소개 __아이콘 색상 __아이콘 크기 조정 __동적으로 아이콘 로드하기 __테마 아이콘 __더 많은 아이콘 설치하기 19장 테마 - 앱의 룩앤필 중앙집중화하기 __소개 __팔레트 이해하기 __밝은 테마와 어두운 테마 비교 __타이포그래피 사용자 정의 __테마 중첩 __구성 요소 테마 설정 이해 20장 스타일 - 구성 요소에 스타일 적용하기 __소개 __기본 구성 요소 스타일 __범위 구성 요소 스타일 __구성 요소 스타일 확장 __스타일을 테마로 이동하기 __그 외 스타일링 옵션