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

MDC-103 웹: 색상, 모양, 고도, 활자를 사용한 Material Theming (웹)

1. 소개

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

Codelab CMD-101과 MDB-102에서는 머티리얼 구성요소(MDC)를 사용하여 의류와 가정용품을 판매하는 전자상거래 앱인 Shine이라는 앱의 기본사항을 빌드했습니다. 이 앱의 사용자 플로우는 로그인 화면으로 시작되며 사용자는 로그인 화면에서 제품이 포함된 홈 화면으로 이동합니다.

최근 Material Design은 디자이너와 개발자가 제품 브랜드를 더욱 유연하게 표현할 수 있도록 확장되었습니다. 이 Codelab에서는 MDC를 사용하여 그 어느 때보다 다양한 방식으로 브랜드의 고유한 스타일을 반영하도록 Shrine 앱을 맞춤설정합니다.

빌드할 항목

이 Codelab에서는 다음을 사용하여 브랜드를 반영하도록 Shrine을 맞춤설정합니다.

색상
서체
고도
형태
레이아웃

이 Codelab에 사용된 MDC 웹 구성요소 및 하위 시스템

테마
서체
고도
이미지 목록

필요한 항목

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

웹 개발 경험 수준을 평가해 주세요.

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

중급

숙련도

2. 개발 환경 설정

MDC-102에서 계속 진행하시겠어요?

MDC-102를 완료했으면 이 Codelab을 위한 코드가 준비된 것입니다. 3단계: 색상 변경으로 건너뜁니다.

시작 Codelab 앱 다운로드

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

...또는 GitHub에서 클론

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

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

프로젝트 종속 항목 설치

시작 디렉터리 material-components-web-codelabs/mdc-103/starter (위 단계를 따르는 경우 현재 디렉터리여야 함)에서 다음을 실행합니다.

npm install

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

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 브랜드와 일치하도록 만들어 보겠습니다.

3. 색상 변경

이 색상 테마는 디자이너가 맞춤 색상으로 만든 것입니다(아래 그림 참고). 색상 테마는 Shrine 분기에서 선택되어 Material Theme Editor에 적용된 색상을 포함하고 있으며, 더 풍부한 팔레트를 만들기 위해 색상을 확장했습니다. (이러한 색상은 2014 머티리얼 색상 팔레트의 색상이 아닙니다.)

이 색 구성표를 반영하도록 Shrine 앱의 탐색 창 색상을 변경해 보겠습니다.

테마 색상 재정의

다음을 포함하는 _variables.scss라는 새 파일을 만듭니다.

$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;

그런 다음 _common.scss 맨 위에서 가져옵니다.

@import "./variables";

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

@import "@material/ripple/mixins";

그런 다음 다음 스타일을 추가하여 .shrine-drawer 클래스를 만듭니다.

.shrine-drawer {
  @include mdc-drawer-fill-color-accessible(primary);
  // Drawer defaults to a higher z-index, but we aren't overlaying it over anything
  @include mdc-drawer-z-index(0);

  text-transform: uppercase;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }
}

http://localhost:8080/home.html에서 페이지를 새로고침합니다. 이제 홈 화면이 다음과 같이 표시됩니다.

로그인 화면의 색을 색 구성표와 일치하도록 변경해 보겠습니다.

login.scss에서 다음 줄을 추가합니다.

.shrine-login {
  background-color: $mdc-theme-background;
  color: $mdc-theme-on-background;
}

.cancel {
  @include mdc-button-ink-color(on-primary);
}

또한 .username, .password CSS 선택자 내에 다음 믹스인 호출을 추가합니다.

.username,
.password {
  &:not(.mdc-text-field--invalid) {
    @include mdc-text-field-label-color(on-primary);
  }
  &.mdc-text-field--focused:not(.mdc-text-field--invalid)  {
    @include mdc-text-field-label-color(on-primary);
  }
  ...
}

http://localhost:8080/에서 페이지를 새로고침합니다. 이제 로그인 화면이 다음과 같이 표시됩니다.

4. 서체 및 라벨 스타일 수정

디자이너는 색상 변경 외에도 사이트에서 사용할 특정 서체를 제공했습니다. 탐색 창에도 추가해 보겠습니다.

Typography용 패키지를 설치하려면 다음을 실행합니다.

npm install @material/typography

서체를 위한 CSS 추가

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

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

그런 다음 shrine-title 클래스에 다음 믹스인 호출을 추가합니다.

.shrine-title {
  @include mdc-typography(headline6);
  ...
}

다음으로 창 항목의 스타일을 지정해 보겠습니다.

줄 구분자 추가

home.html에서 <a ...>Featured</a> 요소 바로 뒤에 다음을 추가합니다.

<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>

다음 스타일을 home.scss에 추가합니다.

.shrine-select-item-divider {
  display: block;
  border-bottom-color: #EAA4A4;
  border-bottom-width: 2px;
  width: 50px;
  position: relative;
  top: -8px;
}

// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
  margin: 0 auto;
}

이미지 항목 및 라벨 조정하기

항목과 라벨을 조정하려면 .product-list 선택기 내 home.scss에 다음 스타일을 추가하세요.

.product-list {
  ...

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

페이지를 새로고침합니다. 이제 홈 화면이 다음과 같이 표시됩니다.

5. 고도 조정

이제 Shrine의 특정 색상과 서체로 페이지의 스타일을 지정했으므로 Shrine의 제품을 보여주는 이미지 목록을 살펴보겠습니다. 제품을 더 강조하여 이목을 집중시켜 보겠습니다.

Elevation 패키지를 설치하려면 다음을 실행합니다.

npm install @material/elevation

import 문 추가

home.scss에서 마지막 import 문 뒤에 다음 줄을 추가합니다.

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

새 div로 이미지 목록 래핑하기

home.html에서 <ul> 요소 주위에 다음 마크업을 추가합니다.

<div class="shrine-body">
 <ul...>
</div>

Sass 믹스인을 사용하여 고도 변경

home.scss에 다음을 추가합니다.

.shrine-body {
  @include mdc-elevation(4);

  display: block;
  overflow: auto;
  z-index: 0; // Elevate over the drawer
}

놀라워요. 이미지 목록 항목 뒤 흰색 표면의 왼쪽 가장자리에 그림자를 추가하여 탐색 메뉴 위에서 약간 떠 있는 것처럼 보이게 했습니다.

6. 레이아웃 변경

이제 각 이미지가 서로 다르게 표시되도록 레이아웃을 변경해 다양한 가로세로 비율과 크기로 이미지를 표시해 보겠습니다.

HTML 수정

home.html에서 mdc-image-list--masonry 클래스를 포함하도록 mdc-image-list 요소를 업데이트합니다.

<ul class="mdc-image-list mdc-image-list--masonry product-list">

이미지 추가하기

home.html에서 assets 폴더에 있는 이미지와 일치하도록 각 img 요소의 src 속성을 변경합니다. 그런 다음 각 이미지의 라벨 텍스트를 업데이트합니다. 완료되면 다음과 같이 표시됩니다.

    <ul class="mdc-image-list mdc-image-list--masonry product-list">
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Ginger scarf</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Blue stone mug</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Cerise scallop tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Chambray napkins</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/fine-lines.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Fine lines tee</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/garden-strand.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Garden strand</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gatsby hat</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Gilt desk trio</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Kitchen quattro</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Seabreeze sweater</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Shrug bag</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Stella sunglasses</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Surf and perf shirt</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Vagabond sack</span>
        </div>
      </li>
      <li class="mdc-image-list__item">
        <img class="mdc-image-list__image" src="assets/walter-henley.jpg">
        <div class="mdc-image-list__supporting">
          <span class="mdc-image-list__label">Walter henley (white)</span>
        </div>
      </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>

CSS 업데이트

home.scss에서 mdc-image-list-standard-columns(4) 믹스인을 삭제하고 다음 믹스인으로 바꿉니다.

@include mdc-image-list-masonry-columns(4);

그런 다음 home.scss의 product-list 클래스에 다음 padding 값을 추가합니다.

.product-list {
  ...
  padding: 80px 100px 0;
}

이제 코드가 complete/ 폴더에 포함된 코드와 일치해야 합니다.

7. 다른 테마 사용

색상은 브랜드를 표현하는 강력한 방법이므로, 작은 색상 변화도 사용자 경험에 큰 영향을 미칠 수 있습니다. 이를 테스트하기 위해 브랜드의 색 구성표가 완전히 다르다면 Shrine이 어떻게 표시되는지 살펴보겠습니다.

CSS 수정

_variables.scss에서 기본 테마에 선언한 변수를 다음으로 바꿉니다.

$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;

login.scss의 .username, .password 선택기에서 믹스인을 삭제합니다. 다음과 같이 표시됩니다.

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

또한 .cancel 클래스에서 mdc-button-ink-color 믹스인 재정의를 삭제합니다.

home.scss에서 .home 클래스에 다음 규칙을 추가합니다.

background-color: $mdc-theme-background;

.shrine-logo-drawer 선택기에서 fill 속성을 기본(on-primary) 색상으로 바꿉니다.

.shrine-logo-drawer {
  ...
  fill: $mdc-theme-on-primary;
}

마찬가지로 .shrine-title 선택기에서 color 속성을 기본(on-primary) 색상으로 설정합니다.

.shrine-title {
  ...
  color: $mdc-theme-on-primary;
}

마지막으로, 이전에 .shrine-body 선택기에서 사용했던 mdc-elevation 믹스인을 삭제합니다.

빌드하고 실행합니다. 새 테마가 브라우저에 표시됩니다.

이제 http://localhost:8080/home.html로 이동하여 home.html 페이지의 변경사항을 확인합니다.

8. 요약

이제 디자이너 사양과 유사한 앱을 만들었습니다.

다음 단계

지금까지 테마, 서체, 고도, 형태의 MDC 구성요소를 사용했습니다. MDC 웹 카탈로그에서 더 많은 구성요소와 하위 시스템을 살펴볼 수 있습니다.

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

매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

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

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

동의함

보통