이 페이지는 Cloud Translation API를 통해 번역되었습니다.

MDC-101 웹: 머티리얼 구성요소 (MDC) 기본사항 (웹)

1. 소개

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

웹용 Material Design 및 Material 구성요소란 무엇인가요?

머티리얼 디자인은 대담하고 멋진 디지털 제품을 빌드하는 시스템입니다. 일련의 일관된 원칙과 구성요소 아래 스타일과 브랜딩, 상호작용, 모션을 통합하여 제품팀은 가능한 최고의 디자인을 실현할 수 있습니다.

데스크톱 및 모바일 웹의 경우 Material 구성요소 웹 (MDC Web)은 앱과 웹사이트 전반에서 일관성을 유지하기 위해 디자인 및 엔지니어링을 구성요소 라이브러리와 통합합니다. MDC 웹 구성요소는 각각 자체 노드 모듈에 상주하므로, 머티리얼 디자인 시스템이 발전함에 따라 이러한 구성요소를 쉽게 업데이트하여 일관된 픽셀 완벽 구현과 Google의 프런트엔드 개발 표준 준수를 보장할 수 있습니다. MDC는 Android, iOS, Flutter에도 사용할 수 있습니다.

이 Codelab에서는 여러 MDC 웹 구성요소를 사용하여 로그인 페이지를 빌드합니다.

빌드할 항목

이 Codelab은 의류와 가정용품을 판매하는 전자상거래 웹사이트인 Shrine 앱을 빌드하는 방법을 설명하는 세 가지 Codelab 중 첫 번째 Codelab입니다. MDC 웹을 사용하여 브랜드 또는 스타일을 반영하도록 구성요소를 맞춤설정하는 방법을 보여줍니다.

이 Codelab에서는 다음이 포함된 Shrine의 로그인 페이지를 빌드합니다.

텍스트 입력란 두 개. 하나는 사용자 이름 입력용, 하나는 비밀번호 입력용
'취소' 버튼 2개 다른 하나는 '다음'
웹사이트 이름 (Shrine)
Shrine의 로고 이미지

이 Codelab의 MDC 웹 구성요소

텍스트 필드
버튼
물결 효과

필요한 항목

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

Google은 튜토리얼을 개선하기 위해 항상 노력하고 있습니다. 웹 개발 경험 수준을 평가해 주세요.

<ph type="x-smartling-placeholder"></ph> 초보자

중급

숙련도

2. 개발 환경 설정

시작 Codelab 앱 다운로드

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

...또는 GitHub에서 클론

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

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

프로젝트 종속 항목 설치

시작 디렉터리에서 다음을 실행합니다.

npm install

많은 활동이 표시될 것이며 최종적으로 터미널에 설치가 완료된 것으로 표시됩니다.

그렇지 않으면 npm audit fix를 실행합니다.

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

코드가 IE 11과 같은 이전 브라우저에서 작동하도록 Babel이라는 트랜스파일러를 사용하여 MDC 웹의 ES2015 JavaScript 구문을 ES5 JavaScript 구문으로 변환 컴파일합니다.

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

시작 앱 실행

동일한 디렉터리에서 다음을 실행합니다.

npm start

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

완료되었습니다. Shrine의 로그인 페이지를 위한 시작 코드가 브라우저에서 실행 중이어야 합니다. 'Shrine'이라는 이름이 표시됩니다. 바로 아래에 Shrine 로고가 있습니다.

코드 살펴보기

`index.html`의 메타데이터

시작 디렉터리에서 원하는 코드 편집기로 index.html를 엽니다. 다음이 포함되어 있어야 합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

여기서 <link> 태그는 webpack에서 생성한 bundle-login.css 파일을 로드하는 데 사용되고 <script> 태그에는 bundle-login.js 파일이 포함됩니다. 또한 일관된 브라우저 간 렌더링을 위한 normalize.css와 Google Fonts의 Roboto 글꼴이 포함되어 있습니다.

`login.scss` 맞춤 스타일

MDC 웹 구성요소는 mdc-text-field 클래스와 같은 mdc-* CSS 클래스를 사용하여 스타일이 지정됩니다. MDC 웹은 DOM 구조를 공개 API의 일부로 취급합니다.

일반적으로 자체 클래스를 사용하여 구성요소에 맞춤 스타일을 수정하는 것이 좋습니다. 위 HTML에서 shrine-logo와 같은 몇 가지 맞춤 CSS 클래스를 발견했을 수 있습니다. 이러한 스타일은 페이지에 기본 스타일을 추가하도록 login.scss에 정의되어 있습니다.

login.scss를 열면 로그인 페이지의 스타일이 다음과 같이 표시됩니다.

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

시작 코드를 알아봤으므로 이제 첫 번째 구성요소를 구현해 보겠습니다.

3. 텍스트 입력란 추가

먼저 로그인 페이지에 두 개의 텍스트 입력란을 추가하여 사용자가 사용자 이름과 비밀번호를 입력할 수 있도록 할 것입니다. 플로팅 라벨을 표시하고 터치 물결 효과를 활성화하는 기능이 포함된 MDC 텍스트 필드 구성요소를 사용하겠습니다.

MDC 텍스트 필드 설치

MDC 웹 구성요소는 NPM 패키지를 통해 게시됩니다. 텍스트 필드 구성요소의 패키지를 설치하려면 다음을 실행합니다.

npm install @material/textfield@^6.0.0

HTML 추가

index.html에서 본문의 <form> 요소 내에 다음을 추가합니다.

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDC 텍스트 필드 DOM 구조는 여러 부분으로 구성됩니다.

기본 요소, mdc-text-field
하위 요소 mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label, mdc-line-ripple

CSS 추가

login.scss에서 기존 가져오기 뒤에 다음 가져오기 문을 추가합니다.

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

같은 파일에서 다음 스타일을 추가하여 텍스트 필드를 정렬하고 가운데에 배치합니다.

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

JavaScript 추가

현재 비어 있는 login.js를 엽니다. 텍스트 필드를 가져오고 인스턴스화하려면 다음 코드를 추가합니다.

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

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

HTML5 유효성 검사 추가

텍스트 필드는 HTML5의 양식 유효성 검사 API에서 제공하는 속성을 사용하여 필드 입력이 올바른지 또는 오류가 포함되어 있는지를 나타냅니다.

다음을 준수해야 합니다.

사용자 이름 및 비밀번호 텍스트 입력란의 mdc-text-field__input 요소에 required 속성을 추가합니다.
비밀번호 텍스트 입력란에서 mdc-text-field__input 요소의 minlength 속성을 "8"로 설정합니다.

두 <label class="mdc-text-field mdc-text-field--filled"> 요소를 다음과 같이 조정합니다.

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

http://localhost:8080/에서 페이지를 새로고침합니다. 이제 사용자 이름과 비밀번호에 사용할 텍스트 입력란 두 개가 포함된 페이지가 표시됩니다.

텍스트 입력란을 클릭하여 플로팅 라벨 애니메이션과 선 물결 효과 애니메이션 (바깥쪽으로 물결이 흐르는 하단 테두리 선)을 확인합니다.

4. 버튼 추가

이제 '취소'와 '다음' 버튼 두 개를 로그인 페이지에 추가합니다. MDC 버튼 구성요소와 MDC 물결 효과를 함께 사용하여 상징적인 Material Design 잉크 물결 효과를 완성해 보겠습니다.

MDC 설치 버튼

버튼 구성요소의 패키지를 설치하려면 다음을 실행합니다.

npm install @material/button@^6.0.0

HTML 추가

index.html에서 <label class="mdc-text-field mdc-text-field--filled password"> 요소의 닫는 태그 아래에 다음을 추가합니다.

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

'취소' 기본 버튼 스타일이 사용됩니다. 하지만 '다음' 버튼은 mdc-button--raised 클래스로 표시된 raised 스타일 변형을 사용합니다.

나중에 쉽게 정렬할 수 있도록 두 개의 mdc-button 요소를 <div> 요소에 래핑합니다.

CSS 추가

login.scss에서 기존 import 문 뒤에 다음 import 문을 추가합니다.

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

버튼을 정렬하고 주변에 여백을 추가하려면 다음 스타일을 login.scss에 추가합니다.

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

버튼에 잉크 물결 효과 추가하기

사용자가 버튼을 터치하거나 클릭하면 잉크 물결 모양의 피드백이 표시되어야 합니다. 잉크 물결 효과 구성요소에는 JavaScript가 필요하므로 페이지에 추가합니다.

물결 효과 구성요소의 패키지를 설치하려면 다음을 실행합니다.

npm install @material/ripple@^6.0.0

login.js 상단에서 다음 import 문을 추가합니다.

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

물결 효과를 인스턴스화하려면 login.js에 다음을 추가합니다.

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

물결 효과 인스턴스에 대한 참조를 유지할 필요가 없으므로 변수에 할당할 필요가 없습니다.

작업이 끝났습니다. 페이지를 새로고침합니다. 각 버튼을 클릭하면 잉크 물결 효과가 표시됩니다.

텍스트 필드에 유효한 값을 입력하고 'NEXT'를 누릅니다. 버튼을 클릭합니다. 축하합니다. MDC-102에서 이 페이지에서 계속 작업합니다.

5. 요약

웹 라이브러리의 머티리얼 구성요소는 기본 HTML 마크업과 CSS 및 JavaScript 몇 줄을 사용하여 Material Design 가이드라인을 준수하고 모든 기기에서 일관되게 보이고 동작하는 멋진 로그인 페이지를 만드는 데 도움이 되었습니다.

다음 단계

텍스트 필드, 버튼, 물결 효과는 MDC 웹 라이브러리의 세 가지 핵심 구성요소이지만, 이외에도 훨씬 더 많은 기능이 있습니다. MDC 웹의 나머지 구성요소도 살펴볼 수 있습니다.

MDC-102: 머티리얼 디자인 구조 및 레이아웃으로 이동하여 탐색 창 및 이미지 목록에 관해 알아보세요. 머티리얼 구성요소를 사용해 주셔서 감사합니다. 이 Codelab에 만족하셨길 바랍니다.

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

매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

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

<ph type="x-smartling-placeholder"></ph> 매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

MDC-101 웹: 머티리얼 구성요소 (MDC) 기본사항 (웹)

1. 소개

웹용 Material Design 및 Material 구성요소란 무엇인가요?

빌드할 항목

이 Codelab의 MDC 웹 구성요소

필요한 항목

Google은 튜토리얼을 개선하기 위해 항상 노력하고 있습니다. 웹 개발 경험 수준을 평가해 주세요.

2. 개발 환경 설정

시작 Codelab 앱 다운로드

...또는 GitHub에서 클론

프로젝트 종속 항목 설치

시작 앱 실행

코드 살펴보기

index.html의 메타데이터

login.scss 맞춤 스타일

3. 텍스트 입력란 추가

MDC 텍스트 필드 설치

HTML 추가

CSS 추가

JavaScript 추가

HTML5 유효성 검사 추가

4. 버튼 추가

MDC 설치 버튼

HTML 추가

CSS 추가

버튼에 잉크 물결 효과 추가하기

5. 요약

다음 단계

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

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

`index.html`의 메타데이터

`login.scss` 맞춤 스타일