머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter에서 제공됩니다. material.io/develop |
MDC-101 Codelab에서는 두 가지 Material 구성요소(MDC)(텍스트 필드와 버튼)를 사용하여 로그인 페이지 UI를 빌드했습니다. 이제 탐색, 구조, 데이터를 추가하여 이러한 기초를 확장해보겠습니다.
빌드할 항목
이 Codelab에서는 Shrine 앱(의류와 가정용품을 판매하는 전자상거래 앱)의 홈페이지를 빌드합니다. 다음 항목이 포함됩니다.
- 탐색 창
- 제품으로 가득 찬 이미지 목록
이 Codelab의 MDC Web 구성요소
- 창
- 이미지 목록
필요한 항목
- 최신 버전의 Node.js (JavaScript 패키지 관리자인 npm과 함께 제공됨)
- 샘플 코드 (다음 단계에서 다운로드)
- HTML, CSS, JavaScript에 대한 기본 지식
웹 개발 경험 수준을 평가해 주세요.
MDC-101에서 계속 진행
MDC-101을 완료했다면 이 Codelab을 위한 코드가 준비된 것입니다. 3단계: 탐색 창 추가로 건너뜁니다.
시작 Codelab 앱 다운로드
시작 앱은 material-components-web-codelabs-master/mdc-102/starter 디렉터리에 있습니다. 시작하기 전에 해당 디렉터리로 cd해야 합니다.
...또는 GitHub에서 클론
이 Codelab을 GitHub에서 클론하려면 다음 명령어를 실행하세요.
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
프로젝트 종속 항목 설치
현재 디렉터리는 material-components-web-codelabs/mdc-102/starter.이어야 합니다. 여기에서 다음 명령어를 실행합니다.
npm install
많은 활동이 표시된 후 터미널에 설치가 완료되었다고 표시됩니다.
시작 앱 실행
같은 디렉터리에서 다음을 실행합니다.
npm start
webpack-dev-server이 시작됩니다. 브라우저에서 http://localhost:8080/으로 이동하여 페이지를 확인합니다.
완료되었습니다. MDC-101 Codelab의 Shrine 로그인 페이지가 표시됩니다.
로그인 페이지가 잘 표시되므로 이제 제품으로 앱을 채워보겠습니다. 유효한 사용자 이름과 비밀번호를 입력한 다음 '다음' 버튼을 클릭하여 홈페이지로 이동합니다.
사용자가 로그인하면 '성공하셨습니다!'라는 홈페이지가 표시됩니다. 훌륭합니다. 하지만 이제 사용자는 실행할 작업과 앱 내에서 사용자의 위치를 파악할 수 있어야 합니다. 이러한 문제를 해결하기 위해 탐색을 추가해 보겠습니다.
Material Design 탐색 패턴은 높은 수준의 사용성을 제공합니다. Material 탐색 창은 탐색 기능을 제공하고 다른 작업에 빠르게 액세스할 수 있도록 지원합니다. 추가해 보겠습니다.
MDC Drawer 및 List 설치
드로어 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/drawer @material/list
HTML 추가
home.html에서 'You did it!'을 드로어와 항목의 다음 마크업으로 바꿉니다.
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>CSS 추가
home.scss에서 기존 가져오기 뒤에 다음 가져오기 문을 추가합니다.
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";home.scss 하단에 다음 스타일을 추가합니다.
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}JavaScript 추가
적절한 키보드 탐색을 위해 탐색 창 내에서 MDC 목록을 인스턴스화해야 합니다. 현재 비어 있는 home.js을 열고 다음 코드를 추가합니다.
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));http://localhost:8080/home.html에서 페이지를 새로고침합니다. 이제 홈페이지가 다음과 같이 표시됩니다.
이제 홈페이지에는 다양한 탐색 항목이 표시된 영구 탐색 창이 있으며 첫 번째 항목이 활성화되어 있습니다.
이제 앱에 구조가 생겼으므로 콘텐츠를 이미지 목록에 배치하여 구성해 보겠습니다.
MDC 이미지 목록 설치
이미지 목록 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/image-list
항목이 하나인 목록의 HTML 추가
탐색 창 옆에 이미지 목록을 추가하는 것부터 시작해 보겠습니다. 이미지와 텍스트 라벨로 구성된 단일 항목을 추가하여 목록을 시작합니다.
home.html에서 <aside> 요소가 끝난 후 다음 HTML을 추가합니다.
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>이 목록에는 이 튜토리얼과 MDC-103에서 맞춤 스타일을 적용할 추가 클래스 product-list이 포함되어 있습니다.
CSS 추가
먼저 home.scss에서 기존 가져오기 뒤에 이미지 목록 구성요소 스타일 가져오기를 추가합니다.
@import "@material/image-list/mdc-image-list";그런 다음 초기 홈페이지 스타일 뒤에 다음 스타일을 추가합니다.
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}이러한 스타일은 이미지 목록이 4개의 열에 이미지를 표시하도록 지시하여 이미지 목록이 드로어와 독립적으로 스크롤되도록 합니다.
페이지를 새로고침합니다. 이제 홈페이지가 다음과 같이 표시됩니다.
이미지 목록은 컬렉션에 있는 여러 이미지를 표시하기 위한 것이므로 구성요소가 어떻게 작동하는지 더 잘 알 수 있도록 이미지를 더 추가해 보겠습니다.
home.html에서 기존 <li> 요소를 복사합니다.
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>그런 다음 기존 항목 뒤 (닫는 </ul> 태그 앞)에 15번 붙여넣습니다. 이렇게 하면 총 16개의 이미지가 생성됩니다. 아직은 고유한 이미지와 제목에 대해 걱정하지 마세요. MDC-103에서 다룰 예정입니다.
새로고침을 탭합니다. 이제 홈페이지가 다음과 같이 표시됩니다.
이미지 목록에는 행당 4개의 이미지가 표시되며 이미지는 사용 가능한 화면 공간에 맞게 자동으로 크기가 조정됩니다.
사이트에는 사용자를 로그인 페이지에서 제품을 볼 수 있는 홈페이지로 안내하는 기본적인 흐름이 있습니다. 코드 몇 줄만으로 콘텐츠를 표시하는 드로어와 이미지 목록을 추가했습니다. 이제 홈페이지에 기본 구조와 콘텐츠가 있습니다.
다음 단계
이제 드로어와 이미지 목록으로 MDC Web 라이브러리의 머티리얼 디자인 핵심 구성요소 두 가지를 더 사용했습니다. MDC Web 카탈로그를 방문하여 더 많은 구성요소를 살펴볼 수 있습니다.
홈페이지가 완전히 작동하지만 아직 특정 브랜드나 관점을 표현하지는 않습니다. MDC-103: 색상, 모양, 고도, 유형을 사용한 머티리얼 디자인 테마에서 이러한 구성요소의 스타일을 맞춤설정하여 생동감 있고 현대적인 브랜드를 표현합니다.