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

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

머티리얼 구성요소(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 Web 구성요소 및 하위 시스템

테마
서체
고도
이미지 목록

필요한 항목

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

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

초급

중급

고급

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 Web은 Sass라는 CSS 전처리기를 사용합니다. 다른 CSS 전처리기를 사용하거나 전혀 사용하지 않아도 괜찮습니다. sass CLI를 설치하거나 빌드 도구 체인에서 플러그인 (예: Webpack의 경우 sass-loader, Gulp의 경우 gulp-sass, Grunt의 경우 grunt-sass)을 사용하여 현재 전처리기와 함께 Sass를 사용할 수 있습니다.

코드가 IE 11과 같은 이전 브라우저에서 작동하도록 Babel이라는 변환기를 사용하여 MDC Web의 ES2015 JavaScript 구문을 ES5 JavaScript 구문으로 변환합니다.

webpack을 사용하여 파일을 번들로 묶고 사이트를 로컬로 제공합니다. 이 프로젝트의 webpack 구성은 webpack.config.js 파일에서 이미 설정되어 있습니다. 구성 방법에 관한 자세한 내용은 시작 가이드를 참고하세요.

시작 앱 실행

동일한 디렉터리에서 다음을 실행합니다.

npm start

webpack-dev-server이 시작됩니다. 브라우저에서 http://localhost:8080/으로 이동하여 페이지를 확인합니다.

완료되었습니다. 브라우저에서 Shrine의 로그인 페이지가 실행됩니다. 사용자 이름과 비밀번호 필드를 입력하고 '다음' 버튼을 클릭하여 홈페이지로 이동합니다. 왼쪽에 탐색 메뉴가 표시되고 그 옆에 제품 이미지 그리드가 표시됩니다.

탐색 메뉴는 작동하지만 색상, 고도, 서체를 변경하여 Shrine 브랜드와 일치하도록 만들어 보겠습니다.

이 색상 테마는 디자이너가 맞춤 색상으로 만든 것입니다(아래 그림 참고). 색상 테마는 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 "@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/에서 페이지를 새로고침합니다. 이제 로그인 화면이 다음과 같이 표시됩니다.

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

Typography 패키지를 설치하려면 다음을 실행하세요.

npm install @material/typography

서체용 CSS 추가

home.scss에서 기존 가져오기 뒤에 다음 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);
  }
}

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

지금까지 Shrine의 특정 색상과 서체로 페이지의 스타일을 지정했습니다. 이제 Shrine의 제품을 보여주는 이미지 목록을 살펴보겠습니다. 제품을 더 강조하여 관심을 유도해 보겠습니다.

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

npm install @material/elevation

가져오기 문 추가

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
}

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

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

HTML 수정

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

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

이미지 추가하기

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

    <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/ 폴더에 포함된 코드와 일치해야 합니다.

색상은 브랜드를 표현하는 강력한 방법이므로, 작은 색상 변화도 사용자 경험에 큰 영향을 미칠 수 있습니다. 이를 테스트하기 위해 브랜드의 색 구성표가 완전히 달라지면 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 페이지의 변경사항을 확인합니다.

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

다음 단계

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

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

매우 동의함

동의함

보통

동의하지 않음

전혀 동의하지 않음

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