머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter용으로 제공됩니다. material.io/develop |
웹의 머티리얼 디자인 및 머티리얼 구성요소란 무엇인가요?
머티리얼 디자인은 대담하고 멋진 디지털 제품을 빌드하는 시스템입니다. 일련의 일관된 원칙과 구성요소 아래 스타일과 브랜딩, 상호작용, 모션을 통합하여 제품팀은 가능한 최고의 디자인을 실현할 수 있습니다.
데스크톱과 모바일 웹의 경우 Material Components Web (MDC Web)은 디자인과 엔지니어링을 앱 및 웹사이트 전반에서 일관성을 유지할 수 있는 구성요소 라이브러리와 결합합니다. MDC 웹 구성요소는 각각 자체 노드 모듈에 상주하므로 머티리얼 디자인 시스템이 발전함에 따라 이러한 구성요소를 손쉽게 업데이트하여 일관된 픽셀 완벽 구현과 Google의 프런트엔드 개발 표준을 준수하도록 할 수 있습니다. MDC는 Android, iOS, Flutter에서도 사용할 수 있습니다.
이 Codelab에서는 여러 MDC Web 구성요소를 사용하여 로그인 페이지를 빌드합니다.
빌드할 항목
이 Codelab은 의류 및 가정용품을 판매하는 전자상거래 웹사이트인 Shrine 앱을 빌드하는 방법을 안내하는 세 가지 Codelab 중 첫 번째입니다. MDC Web을 사용하여 모든 브랜드나 스타일을 반영하도록 구성요소를 맞춤설정하는 방법을 보여줍니다.
이 Codelab에서는 다음이 포함된 Shrine의 로그인 페이지를 빌드합니다.
- 텍스트 입력란 두 개. 하나는 사용자 이름 입력용, 하나는 비밀번호 입력용
- 각각 "취소" 버튼과
- 웹사이트 이름 (Shrine)
- Shrine의 로고 이미지
이 Codelab의 MDC 웹 구성요소
- 텍스트 입력란
- 버튼
- 물결 효과
필요한 항목
YouTube는 튜토리얼을 개선하기 위해 항상 노력하고 있습니다. 웹 개발 경험 수준을 평가해 주세요.
시작 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를 실행합니다.
시작 앱 실행
같은 디렉터리에서 다음을 실행합니다.
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 웹은 공개 API의 일부로 DOM 구조를 취급합니다.)
일반적으로 자체 클래스를 사용하여 구성요소의 맞춤 스타일을 수정하는 것이 좋습니다. 위 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;
}시작 코드를 알아봤으므로 이제 첫 번째 구성요소를 구현하겠습니다.
우선 사용자가 사용자 이름과 비밀번호를 입력할 수 있는 텍스트 입력란 두 개를 로그인 페이지에 추가합니다. 플로팅 라벨을 표시하고 터치 물결 효과를 활성화하는 기능이 포함된 MDC 텍스트 입력란 구성요소를 사용합니다.
MDC 텍스트 필드 설치
MDC 웹 구성요소는 NPM 패키지를 통해 게시됩니다. 텍스트 필드 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/textfield
HTML 추가
index.html에서 본문의 <form> 요소 내부에 다음을 추가합니다.
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>MDC 텍스트 필드 DOM 구조는 여러 부분으로 구성됩니다.
- 기본 요소인
mdc-text-field - 하위 요소
mdc-text-field__input,mdc-floating-label,mdc-line-ripple
CSS 추가
login.scss에서 기존 가져오기 뒤에 다음 import 문을 추가합니다.
@import "@material/textfield/mdc-text-field";같은 파일에서 다음 스타일을 추가하여 텍스트 필드를 정렬하고 중앙에 배치합니다.
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}자바스크립트 추가하기
현재 비어 있는 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"로 설정합니다.
두 <div class="mdc-text-field"> 요소를 다음과 같이 조정합니다.
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>http://localhost:8080/에서 페이지를 새로고침합니다. 이제 사용자 이름과 비밀번호에 사용할 텍스트 입력란 두 개가 포함된 페이지가 표시됩니다.
텍스트 필드를 클릭하여 플로팅 라벨 애니메이션과 선 물결 효과 애니메이션 (바깥쪽으로 물결되는 하단 테두리 선)을 확인합니다.
이제 '취소'와 '다음' 버튼 두 개를 로그인 페이지에 추가합니다. MDC 물결 효과 구성요소와 함께 MDC 버튼 구성요소를 사용하여 유명한 머티리얼 디자인 잉크 물결 효과를 완성합니다.
MDC 설치 버튼
버튼 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/button
HTML 추가
index.html에서 <div class="mdc-text-field 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>'취소' 버튼의 경우 기본 버튼 스타일을 사용합니다. 그러나 "Next" 버튼은 mdc-button--raised 클래스로 표시되는 Raised 스타일 변형을 사용합니다.
나중에 쉽게 정렬할 수 있도록 두 mdc-button 요소를 <div> 요소에 래핑합니다.
CSS 추가
login.scss에서 기존 가져오기 뒤에 다음 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;
}버튼에 잉크 물결 효과 추가
사용자가 버튼을 터치하거나 클릭하면 피드백이 잉크 물결 형식으로 표시됩니다. 잉크 물결 효과 구성요소에는 자바스크립트가 필요하므로 페이지에 이를 추가합니다.
물결 효과 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/ripple
login.js 상단에 다음 import 문을 추가합니다.
import {MDCRipple} from '@material/ripple';물결 효과를 인스턴스화하려면 login.js에 다음을 추가합니다.
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));물결 효과 인스턴스에 대한 참조를 유지할 필요가 없으므로 변수에 할당할 필요가 없습니다.
작업이 끝났습니다. 페이지를 새로고침합니다. 각 버튼을 클릭하면 잉크 물결 효과가 표시됩니다.
텍스트 필드에 유효한 값을 입력하고 "NEXT" 버튼을 누릅니다. 축하합니다. MDC-102에서 이 페이지를 계속 작업합니다.
웹 라이브러리의 머티리얼 구성요소를 통해 기본 HTML 마크업과 몇 줄의 CSS와 자바스크립트로 머티리얼 디자인 가이드라인을 준수하고 모든 기기에서 일관되게 보이고 동작하는 멋진 로그인 페이지를 만들 수 있었습니다.
다음 단계
텍스트 필드, 버튼, 물결 효과는 MDC 웹 라이브러리의 세 가지 핵심 구성요소이지만 이 외에도 더 많은 요소가 있습니다. MDC 웹에서 나머지 구성요소를 살펴볼 수도 있습니다.
MDC-102: 머티리얼 디자인 구조 및 레이아웃으로 이동하여 탐색 창과 이미지 목록에 관해 알아볼 수 있습니다. 머티리얼 구성요소를 사용해 주셔서 감사합니다. 이 Codelab에 만족하셨길 바랍니다.