MDC-111 웹: 머티리얼 구성요소를 코드베이스에 통합 (웹)

1. 소개

머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter.material.io/develop에서 제공됩니다.

Material Components for the web (MDC Web)은 프레임워크에 구속되지 않으며 일반 JavaScript를 사용하여 빌드됩니다. 이렇게 하면 MDC Web이 개발 프로세스와 원활하게 작동합니다. 이러한 구성요소는 필요에 따라 설치하여 기존 앱에서 애자일 설계 개선을 지원할 수 있습니다.

빌드할 항목

이 Codelab에서는 양식의 기존 구성요소를 MDC Web에서 제공하는 구성요소로 대체합니다.

이 Codelab의 MDC Web 구성요소

버튼
선택
텍스트 필드

필요한 항목

최신 버전의 Node.js (JavaScript 패키지 관리자인 npm과 함께 제공됨)
샘플 코드 (다음 단계에서 다운로드)
HTML, CSS, JavaScript에 대한 기본 지식

웹 개발 경험 수준을 평가해 주세요.

초급

중급

고급

2. 개발 환경 설정

시작 Codelab 앱 다운로드

시작 앱은 material-components-web-codelabs-master/mdc-111/starter 디렉터리에 있습니다. 시작하기 전에 해당 디렉터리로 cd해야 합니다.

...또는 GitHub에서 클론

이 Codelab을 GitHub에서 클론하려면 다음 명령어를 실행하세요.

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-111/starter

프로젝트 종속 항목 설치

시작 디렉터리 (material-components-web-codelabs/mdc-111/starter)에서 다음을 실행합니다.

npm install

많은 활동이 표시되고 마지막에 터미널에 설치가 완료되었다고 표시됩니다.

MDC Web은 Sass라는 CSS 전처리기를 사용합니다. 다른 CSS 전처리기를 사용하거나 전혀 사용하지 않아도 괜찮습니다. sass CLI를 설치하거나 빌드 도구 체인에서 플러그인 (예: Webpack의 경우 sass-loader, Gulp의 경우 gulp-sass, Grunt의 경우 grunt-sass)을 사용하여 현재 전처리기와 함께 Sass를 사용할 수 있습니다.

코드가 IE 11과 같은 이전 브라우저에서 작동하도록 하기 위해 Babel이라는 변환기를 사용하여 MDC Web의 ES2015 JavaScript 구문을 ES5 JavaScript 구문으로 변환합니다.

webpack을 사용하여 파일을 번들로 묶고 사이트를 로컬로 제공합니다. 이 프로젝트의 webpack 구성은 webpack.config.js 파일에서 이미 설정되어 있습니다. 구성 방법에 관한 자세한 내용은 시작 가이드를 참고하세요.

시작 앱 실행

스타터 디렉터리에서 다음을 실행합니다.

npm start

webpack-dev-server이 시작됩니다. 브라우저에서 http://localhost:8080/으로 이동하여 페이지를 확인합니다.

완료되었습니다. 앱의 배송지 주소 양식이 표시됩니다.

3. 버튼 업데이트

MDC 버튼 설치

Ctrl+C를 눌러 개발 서버를 종료합니다. 그런 다음 MDC 버튼 NPM 패키지를 설치하고 서버를 다시 시작합니다.

npm install @material/button
npm start

CSS 가져오기

_theme.scss 상단에서 .crane-button { ... } 블록을 삭제하고 그 자리에 다음을 추가합니다.

$mdc-theme-primary: $crane-primary-color;

@import "@material/button/mdc-button";

마크업 업데이트

index.html에서 <button> 요소에서 crane-button 클래스를 삭제하고 mdc-button 및 mdc-button--raised 클래스를 추가하고 mdc-button__label 클래스가 있는 <span> 요소 내에 라벨을 중첩합니다.

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

리플 추가

MDC 버튼은 JavaScript 없이 사용할 수 있습니다. 하지만 버튼에 대화형 리플을 추가하면 사용자 환경이 더욱 풍부해집니다.

Ctrl+C를 눌러 개발 서버를 종료합니다. 그런 후 다음을 실행합니다.

npm install @material/ripple
npm start

app.js의 맨 위에 다음 import 문을 추가합니다.

import {MDCRipple} from '@material/ripple';

버튼에 리플을 인스턴스화하려면 app.js 하단에 다음을 추가합니다.

new MDCRipple(document.querySelector('.mdc-button'));

Roboto 글꼴 가져오기

기본적으로 Material Design은 구성요소 서체에 Roboto를 사용합니다.

index.html에서 <head> 요소에 다음을 추가하여 Roboto 웹 글꼴을 가져옵니다.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

페이지를 새로고침하면 다음과 같이 표시됩니다.

이제 버튼을 누르면 시각적 피드백으로 미묘한 물결 효과가 표시됩니다.

4. 선택 요소 업데이트

MDC 선택 구성요소는 기본 HTML <select> 요소를 래핑합니다. 일반적으로 <select>를 사용하는 곳에 사용합니다. 'State' 필드를 업데이트해 보겠습니다.

MDC 노드 모듈 설치

Ctrl+C를 눌러 개발 서버를 종료합니다. 그런 후 다음을 실행합니다.

npm install @material/select
npm start

CSS 가져오기

버튼 가져오기 바로 뒤에 _theme.scss에 다음을 추가합니다.

@import "@material/select/mdc-select";

마크업 업데이트

index.html에서 <select> 요소를 찾습니다. crane-input 클래스를 mdc-select__native-control로 바꿉니다.

<select class="mdc-select__native-control" id="crane-state-input" required>

<select> 태그 바로 위에 MDC 선택 구성요소의 드롭다운 화살표에 다음 마크업을 추가합니다.

<i class="mdc-select__dropdown-icon"></i>

닫는 </select> 태그 바로 아래에서 crane-label 클래스를 mdc-floating-label로 바꿉니다.

<label class="mdc-floating-label" for="crane-state-input">

그런 다음 라벨 바로 뒤에 다음 마크업을 추가합니다.

<div class="mdc-line-ripple"></div>

마지막으로 <select> 요소 주위에 다음 태그를 추가합니다 (crane-field 요소 내).

<div class="mdc-select">
  ...
</div>

결과 마크업은 다음과 같습니다.

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

JS 가져오기

app.js의 맨 위에 다음 import 문을 추가합니다.

import {MDCSelect} from '@material/select';

선택을 인스턴스화하려면 app.js 하단에 다음을 추가합니다.

new MDCSelect(document.querySelector('.mdc-select'));

페이지를 새로고침하면 다음과 같이 표시됩니다.

MDC 선택 구성요소는 사용자에게 친숙한 형식으로 옵션 목록을 표시하지만 스타일은 모던합니다.

5. 텍스트 필드 업데이트

Material Design 텍스트 필드는 일반 <input> 요소보다 사용성이 크게 향상되었습니다. 복잡한 콘텐츠 내에서 쉽게 식별할 수 있도록 설계되었으며 사용자가 상호작용할 때 미묘한 시각적 피드백을 표시합니다.

MDC 노드 모듈 설치

Ctrl+C를 눌러 개발 서버를 종료합니다. 그런 후 다음을 실행합니다.

npm install @material/textfield
npm start

CSS 추가

select 가져오기 바로 뒤에 _theme.scss에 다음을 추가합니다.

@import "@material/textfield/mdc-text-field";

마크업 업데이트

index.html에서 '이름' 필드의 <input> 요소를 찾습니다. crane-input 클래스를 mdc-text-field__input로 바꿉니다.

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

다음으로 crane-label 클래스를 mdc-floating-label로 바꿉니다.

<label class="mdc-floating-label" for="crane-name-input">

그런 다음 라벨 바로 뒤에 다음 마크업을 추가합니다.

<div class="mdc-line-ripple"></div>

마지막으로 다음으로 3개 요소를 모두 래핑합니다.

<div class="mdc-text-field">
  ...
</div>

결과 마크업은 다음과 같습니다.

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

페이지의 다른 모든 <input> 요소에 대해 동일한 절차를 반복합니다.

'주소', '도시', '우편번호' 필드의 마크업은 다음과 같습니다.

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

이제 더 이상 사용하지 않는 _theme.scss에서 .crane-label 및 .crane-input 스타일을 삭제할 수 있습니다.

JS 가져오기

app.js의 맨 위에 다음 import 문을 추가합니다.

import {MDCTextField} from '@material/textfield';

텍스트 필드를 인스턴스화하려면 app.js 하단에 다음을 추가합니다.

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

페이지를 새로고침하면 다음과 같이 표시됩니다.

이제 텍스트 필드가 모두 Material 테마를 사용하도록 업데이트되었습니다.

6. 요약

앱을 완전히 재설계하지 않고 몇 가지 일반적인 구성요소 (텍스트 필드, 선택, 버튼)를 대체했습니다. 잘하셨습니다.

큰 차이를 만들 수 있는 다른 구성요소로는 상단 앱 바와 탐색 창이 있습니다.

다음 단계

MDC Web 카탈로그를 방문하면 MDC Web의 더 많은 구성요소를 살펴볼 수 있습니다.

특정 프레임워크에서 MDC Web을 사용하는 데 관심이 있다면 MDC-112: 웹 프레임워크와 MDC 통합을 참고하세요.

적절한 시간과 노력을 들여 이 Codelab을 완료할 수 있었습니다.

매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

앞으로 머티리얼 구성요소를 계속 사용하고 싶습니다.

매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

MDC-111 웹: 머티리얼 구성요소를 코드베이스에 통합 (웹) 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 소개

빌드할 항목

이 Codelab의 MDC Web 구성요소

필요한 항목

웹 개발 경험 수준을 평가해 주세요.

2. 개발 환경 설정

시작 Codelab 앱 다운로드

...또는 GitHub에서 클론

프로젝트 종속 항목 설치

시작 앱 실행

3. 버튼 업데이트

MDC 버튼 설치

CSS 가져오기

마크업 업데이트

리플 추가

Roboto 글꼴 가져오기

4. 선택 요소 업데이트

MDC 노드 모듈 설치

CSS 가져오기

마크업 업데이트

JS 가져오기

5. 텍스트 필드 업데이트

MDC 노드 모듈 설치

CSS 추가

마크업 업데이트

JS 가져오기

6. 요약

다음 단계

적절한 시간과 노력을 들여 이 Codelab을 완료할 수 있었습니다.

앞으로 머티리얼 구성요소를 계속 사용하고 싶습니다.

MDC-111 웹: 머티리얼 구성요소를 코드베이스에 통합 (웹)