★ 이 책에서 다루는 내용 ★

■ 머티리얼 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를 디자인한다.


★ 지은이의 말 ★

머티리얼 UI는 세계에서 가장 인기 있는 리액트 UI 프레임워크이며, 머티리얼 기술은 배울 만한 가치가 있는 자산이다. 무수히 많은 오픈소스 프로젝트와 상업용 프로젝트가 이 프레임워크를 사용하고 있다. 머티리얼 UI가 이렇게 대중적이게 된 이유는 무엇일까?

무엇보다 머티리얼 UI가 최고의 프론트엔드 기술 두 가지를 한데 모으는 훌륭한 작업을 수행한다는 점을 꼽을 수 있다. 간단히 말해 머티리얼 UI는 페이스북의 리액트에서 구글의 머티리얼 디자인을 구성 요소로 사용한다. 많은 개발자가 잘 동작하는 프로젝트를 만들기에 충분할 정도로 리액트에 능숙하며, 또한 많은 디자이너는 대단한 경험을 디자인하기에 충분할 정도로 머티리얼 디자인을 잘 알고 있다. 머티리얼 UI는 이 두 세계를 연결하는 다리이며, 고객을 만족시키는 애플리케이션을 쉽고 간단하게 개발할 수 있도록 해준다.

이런 전략은 여러 전문 분야에 속한 다양한 수준의 개발자들에게서 흥미를 불러일으키기에 충분하다. 개발자들이 머티리얼 UI에 참여하게 만드는 것은 모든 시나리오를 해결하는 데 도움이 되는 다양한 기능과 자원의 수준이다. 이 책이 유용한 자원 중 하나로서 이바지할 수 있길 바란다.


★ 옮긴이의 말 ★

머티리얼 UI는 리액트 컴포넌트들을 모아 놓은 UI 프레임워크다. 세계에서 가장 인기있는 두 가지 프론트엔드 기술인 페이스북의 리액트와 구글의 머티리얼 디자인을 한데 모은 덕분에 애플리케이션 개발을 쉽고 간단하게 해준다. 책 제목에서 알 수 있듯이, 이 책의 목적은 개발자들이 다양한 머티리얼 UI 구성 요소를 사용해 다양한 규모의 여러 가지 애플리케이션을 구축하는 데 도움을 주는 것이다.

이미 무수히 많은 오픈소스 프로젝트와 상업용 프로젝트에서 이 프레임워크를 사용하고 있음에도, 국내에서는 머티리얼 UI가 상대적으로 많이 알려져 있지 않다. 이 책이 부디 국내 개발자들이 머티리얼 UI로 애플리케이션에서 더 나은 사용자 경험을 제공하는 데 작게나마 도움이 될 수 있길 기대해본다.

다소 상투적으로 들릴 수도 있겠지만, 작업을 마치고 나면 미흡한 부분에 대해 아쉬움이 남기 마련이다. 꽤 많은 시간과 노력을 기울여 작업했지만, 저자의 의도를 충분히 전달하지 못했거나 잘못 번역된 부분이 있을 수 있다. 잘못된 점을 비롯해 책 내용과 관련된 어떤 의견이라도 보내주시면 소중히 다룰 것을 약속한다.