IT 회사에서 즐겁게 지내기!

서비스를 개발할 때 디자인에 대한 고민을 하게 됩니다.

각 요소의 컬러나 자잘한 인터랙션 등도 포함해서요.

이미 전문가가 고민한 디자인을 입힐 수 있다면 어떨까요?

그래서 Angular에 Material 디자인을 적용해보려합니다.

고맙게도 Angular 팀이 구글의 Material 디자인을 준비해두었어요. 

아래의 명령어를 통해 기본적인 설치를 진행합니다.

Material 디자인이 적용된 Module을 받는 거에요.

npm install --save @angular/material 
npm install --save @angular/cdk
npm install --save @angular/animations

Angular Module이기 때문에 사용하기 위한 설정이 필요합니다.

1. import

데이터바인딩을 위해 ngModel을 사용할 때 FormsModule을 썼죠?

동일하게 사용하고자 하는 component를 import해야 합니다.

현재 사용하고 있는 input과 button에 적용해보겠습니다.

import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    ...,
    imports: [
        BrowserAnimationsModule,
        MatInputModule,
        MatButtonModule
    ],
    ...
})
export class AppModule { }

위와 같이 해당하는 MatInput, MatButton 모듈을 import 해야합니다.

transition 효과를 위한 BrowserAnimation 모듈도 마찬가지죠.

@NgModule의 imports에 추가합니다.

그러면 첫 번째 설정이 완료됩니다.

2. style

디자인 관련하다보니 style 부분을 처음 이야기하게 되네요.

오늘 이야기할 부분은 src폴더 아래의 style.css 입니다.

angular-cli로 생성한 컴포넌트에도 css 파일이 있었죠?

그 파일에는 각 component에 적용될 디자인이 들어갑니다.

캡슐화되어 다른 component에는 적용되지 않죠.

그렇다면 component 전체적으로 적용할 디자인은 어디에 넣을까요?

바로 src폴더 아래에 style.css에 넣어줍니다.

Material 디자인 Theme과 같은 것들 말이지요.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

style.css에 위와 같이 추가해주면 material theme이 적용됩니다.

총 4가지 theme이 있어요. 맘에 드는 걸 고르시면 됩니다.

1) deeppurple-amber.css

2) indigo-pink.css

3) pink-bluegrey.css

4) purple-green.css

이름은 Primary-Accent 컬러의 조합으로 되어있습니다.

이미지로 보면 아래와 같아요. 

angular pre-built theme

마음에 드는 걸 사용하면 됩니다.

스스로 color를 정의할 수도 있어요.

Basic, Primary, Accent, Warn, Disabled, Link 컬러를 바꾸면되죠.

저는 아직 그쪽은 약하니 이미 정의된 걸 사용하겠습니다.

이제 Material 디자인을 사용하기 위한 설정은 마쳤습니다.

html코드에 적용해보도록 할까요?

<div class="mat-app-background">
    <h3>My Budget: &#8361;{{budget}}</h3>
    <mat-form-field>
        <input matInput 
               placeholder="budget" 
               type="text" 
               [(ngModel)]="budget"/>
    </mat-form-field>
    <button mat-raised-button 
            color="primary" 
            (click)="onAddIncome()">Add Income</button>
</div>

보기 쉽도록 줄바꿈을 좀 해봤습니다.

div 태그로 전체를 싸줬구요.

Theme의 배경색을 위해 mat-app-background 클래스를 추가합니다.

제가 고른 배경은 흰색이라 딱히 변화는 없어요.

그리고 input 태그는 mat-form-field 라는 태그로 싸줍니다.

Theme이 적용되기 위해서지요.

그리고 matInput 이라는 directive를 넣어주면 input은 완성입니다.

button의 경우 다른 별도의 태그가 필요없습니다.

mat-button이나 mat-raised-button directive를 넣으면 됩니다.

color는 라는 attribute를 사용하여 색을 입힙니다.

결과 화면은 아래와 같습니다.

angular-material theme 적용

Placeholder가 움직이는 마이크로인터랙션은 덤.

material angular에는 여러가지 component가 더 있습니다.

아래 출처에서 참고할 수 있어요.

저도 진행하면서 더 사용해보도록 하겠습니다.

소스주소: https://github.com/jsrho1023/account-book

출처:

Angular Material(https://material.angular.io/)