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