서비스를 개발할 때 디자인에 대한 고민을 하게 됩니다.
각 요소의 컬러나 자잘한 인터랙션 등도 포함해서요.
이미 전문가가 고민한 디자인을 입힐 수 있다면 어떨까요?
그래서 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: ₩{{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/)
