1. 소개
머티리얼 구성요소(MDC)를 통해 개발자는 머티리얼 디자인을 구현할 수 있습니다. Google의 엔지니어와 UX 디자이너로 구성된 팀에서 만든 MDC는 아름답고 기능적인 수십 가지의 UI 구성요소가 특징이며 Android, iOS, 웹, Flutter.material.io/develop에서 제공됩니다. |
MDC-101 Codelab에서는 머티리얼 구성요소(MDC) 두 가지(텍스트 입력란, 버튼)를 사용하여 로그인 페이지 UI를 빌드했습니다. 이제 탐색, 구조, 데이터를 추가하여 이를 확장해 보겠습니다.
빌드할 항목
이 Codelab에서는 Shrine 앱(의류와 가정용품을 판매하는 전자상거래 앱)의 홈페이지를 빌드합니다. 다음 항목이 포함됩니다.
- 탐색 창
- 제품으로 가득 찬 이미지 목록
이 Codelab의 MDC 웹 구성요소
- 창
- 이미지 목록
필요한 항목
- 최신 버전의 Node.js(JavaScript 패키지 관리자인 npm과 번들로 제공됨)
- 샘플 코드(다음 단계에서 다운로드)
- HTML, CSS, JavaScript에 관한 기본 지식
웹 개발 경험 수준을 평가해 주세요.
2. 개발 환경 설정
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 로그인 페이지가 표시됩니다.
로그인 페이지가 잘 표시되므로 이제 제품으로 앱을 채워보겠습니다. 올바른 사용자 이름과 비밀번호를 입력하고 '다음' 버튼을 클릭하여 홈페이지로 이동합니다.
3. 탐색 창 추가
사용자가 로그인하면 '축하합니다'라는 내용의 홈페이지가 나타납니다. 훌륭합니다. 하지만 이제 사용자는 취해야 할 작업과 앱에서의 현재 위치를 인지해야 합니다. 이를 돕기 위해 탐색을 추가해 보겠습니다.
Material Design 탐색 패턴은 높은 수준의 사용성을 제공합니다. Material 탐색 창을 사용하면 다른 작업을 탐색하고 빠르게 액세스할 수 있습니다. 추가해 보겠습니다.
MDC 드로어 및 목록 설치
창 구성요소의 패키지를 설치하려면 다음을 실행합니다.
npm install @material/drawer @material/list
HTML 추가
home.html에서 '완료'를 드로어 및 항목의 다음 마크업으로 바꿉니다.
<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 문을 추가합니다.
@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에서 페이지를 새로고침합니다. 이제 홈페이지가 다음과 같이 표시됩니다.
이제 홈 페이지에 다양한 탐색 항목을 표시하는 영구 탐색 창이 있으며 첫 번째 항목이 활성화되어 있습니다.
4. 텍스트 라벨이 있는 이미지 추가
이제 앱에 구조가 생겼으므로 콘텐츠를 이미지 목록에 배치하여 구성해 보겠습니다.
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개의 이미지가 표시되며, 이미지는 사용 가능한 화면 공간에 맞게 자동으로 크기가 조정됩니다.
5. 요약
사이트에는 사용자를 로그인 페이지에서 제품을 볼 수 있는 홈 페이지로 안내하는 기본적인 흐름이 있습니다. 단 몇 줄의 코드만으로 콘텐츠를 표시하는 창과 이미지 목록을 추가했습니다. 이제 홈페이지에 기본 구조와 콘텐츠가 갖추어졌습니다.
다음 단계
이제 창과 이미지 목록을 통해 MDC 웹 라이브러리의 Material Design 핵심 구성요소를 두 개 더 사용했습니다. MDC 웹 카탈로그를 방문하여 더 많은 구성요소를 살펴볼 수 있습니다.
홈페이지가 제대로 작동하지만 아직 특정 브랜드나 관점을 표현하지 않습니다. MDC-103: 색상, 모양, 고도, 유형을 사용한 머티리얼 디자인 테마에서는 이러한 구성요소의 스타일을 맞춤설정하여 생동감 있고 현대적인 브랜드를 표현합니다.