리액트 머티리얼 UI 쿡북

머티리얼 UI를 사용한 룩앤필 개선

아담 보두치 저자(글) · 류영선 번역

에이콘출판 · 2020년 09월 28일

책 소개

머티리얼 UI는 리액트와 구글 머티리얼 디자인의 현대적 모범 사례를 사용해 UI 요소를 렌더링하는 구성요소 라이브러리다. 이 책은 머티리얼 디자인 고려 사항을 구현함으로써 어떻게 인상적이고 매혹적인 모던 앱을 작성할 수 있는지 보여준다. 다양한 머티리얼 UI 구성 요소를 사용해 애플리케이션의 룩앤필을 개선하고, 다양한 규모의 애플리케이션을 구축하는 데 도움이 될 것이다.

작가정보

저자(글) 아담 보두치

거의 10년 동안 대규모 자바스크립트 개발 작업에 참여해왔다. 프론트엔드로 옮기기 전에는 파이썬과 리눅스를 사용하는 여러 가지 대규모 클라우드 컴퓨팅 제품을 연구했다. 복잡성을 잘 알고 있으면서 실제 소프트웨어 시스템과 이들이 제기하는 확장 문제에 대한 실질적인 경험을 갖고 있다. 『리액트 & 리액트 네이티브 통합 교과서』(에이콘, 2019)를 비롯한 여러 자바스크립트 서적을 저술했으며, 혁신적인 사용자 경험과 고성능을 추구하는 데 열정적이다.

번역 류영선

소프트웨어 엔지니어로서 오랫동안 웹 브라우저와 웹 서버를 개발했다. 그 경험을 바탕으로 현재는 W3C를 비롯한 여러 국제 표준화 단체에서 웹과 관련된 표준화 업무를 담당하고 있다. 최근에는 PC에서 벗어나 모바일 환경이나 DTV, 디지털 사이니지(Digital Signage), 웨어러블(Wearable), 오토모티브(Automotive) 등의 다양한 IoT 장치에 웹 기술을 접목하는 오픈 웹 플랫폼에 관심을 갖고 관련 기술을 연구 중이다. 아울러 워크숍, 세미나 강연, 학술 기고를 통해 오픈 웹 플랫폼과 웹 기술을 전파하는 데 힘쓰고 있다. 옮긴 책으로는 에이콘출판사에서 펴낸 『반응형 웹 디자인』(2012), 『HTML5 웹소켓 프로그래밍』(2014), 『WebRTC 프로그래밍』(2015), 『자바스크립트 디자인 패턴』(2016), 『자바스크립트 언락』(2017), 『객체지향 자바스크립트 3/e』(2017), 『사물인터넷 자바스크립트 프로그래밍』(2018), 『모던 C++ 프로그래밍 쿡북』(2019), 『산업인터넷 애플리케이션 개발』(2020) 등 다수가 있다.

작가의 말

머티리얼 UI는 세계에서 가장 인기 있는 리액트 UI 프레임워크이며, 머티리얼 기술은 배울 만한 가치가 있는 자산이다. 무수히 많은 오픈소스 프로젝트와 상업용 프로젝트가 이 프레임워크를 사용하고 있다. 머티리얼 UI가 이렇게 대중적이게 된 이유는 무엇일까?
무엇보다 머티리얼 UI가 최고의 프론트엔드 기술 두 가지를 한데 모으는 훌륭한 작업을 수행한다는 점을 꼽을 수 있다. 간단히 말해 머티리얼 UI는 페이스북의 리액트에서 구글의 머티리얼 디자인을 구성 요소로 사용한다. 많은 개발자가 잘 동작하는 프로젝트를 만들기에 충분할 정도로 리액트에 능숙하며, 또한 많은 디자이너는 대단한 경험을 디자인하기에 충분할 정도로 머티리얼 디자인을 잘 알고 있다. 머티리얼 UI는 이 두 세계를 연결하는 다리이며, 고객을 만족시키는 애플리케이션을 쉽고 간단하게 개발할 수 있도록 해준다.
이런 전략은 여러 전문 분야에 속한 다양한 수준의 개발자들에게서 흥미를 불러일으키기에 충분하다. 개발자들이 머티리얼 UI에 참여하게 만드는 것은 모든 시나리오를 해결하는 데 도움이 되는 다양한 기능과 자원의 수준이다. 이 책이 유용한 자원 중 하나로서 이바지할 수 있길 바란다.

목차

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

출판사 서평

★ 이 책에서 다루는 내용 ★

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

기본정보

ISBN	9791161754550
발행(출시)일자	2020년 09월 28일
쪽수	612쪽
크기	189 * 236 * 36 mm / 1122 g
총권수	1권
시리즈명	웹 프로페셔널
원서(번역서)명/저자명	React Material-UI Cookbook/Boduch, Adam

Klover 리뷰 (4)

[tw****]

잘 배우겠습니다^^

[kd*****]

좋은거 같습니다.

[dy*******]

튜토리얼 번역해 놓은거네요.. 이런..

[lj*****]

정말 좋습니다.