티스토리 뷰
당신의 웹 서비스에서는 UI Components 라이브러리를 사용하고 있나요? 사용하고 있다면 어떤 라이브러리를 사용하시나요?
Bootstrap을 시작으로 유행을 타기 시작한 UI Components 라이브러리를 사용하면 프론트엔드의 UI를 일관적인 모습으로 편하게 구성할 수 있습니다. 기본 설정으로도 훌륭한 스타일을 사용할 수 있으며, 모바일에서도 잘 동작하고, 크로스 브라우저도 대응하고, 추가적으로 커스터마이징을 할 수도 있죠. 반응형 레이아웃도 지원합니다.
결과적으로 UI Components 라이브러리를 사용하면 UI가 필요한 부분, 프론트엔드를 개발하는 효율이 훨씬 높아집니다.
이번 포스팅에서는 UI Components 라이브러리의 대표적인 두 축, Bootstrap 과 Angular Material을 살펴봅니다.
* Bootstrap과 Angular Material은 공식 홈페이지 소개에서 'framework' 라고 지칭하고 있지만 UI Components 구성을 위한 도구로서 Library냐 Framework냐는 요점이 아니므로 크게 신경쓰지 않습니다.
Bootstrap
Bootstrap은 Twitter에서 만들기 시작해서 이후에 오픈 소스 프로젝트로 전환된 라이브러리입니다.
2013년 8월 19일 기준으로 3.0 정식 버전이 나왔으며, 2015년 8월 19일에는 부트스트랩 탄생 4주년을 기념해 버전 4의 알파 버전이 시작되었고, 2016년 7월 27일 기준으로 Bootstrap 4 Alpha 3 버전이 발표되어 있습니다. 4버전에서 변경된 점이 일부 있어서 3버전의 코드를 그대로 사용하면 문제가 생길 수 있으니 4버전을 사용하려면 주의가 필요합니다.
서버에 직접 코드를 갖고 있지 않아도 CDN 을 이용해서 Bootstrap을 사용할 수 있습니다. 아래 코드는 v.3.3.7 기준에서 스타일을 로드하는 코드입니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
v.4 기준으로는 아래 CDN을 사용하면 됩니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
Bootstrap은 사용하는 컴포넌트에 따라서 jQuery나 tether를 로드해야 하는 경우도 있습니다.
Bootstrap을 사용하면 큰 변경 없이도 적절한 스타일을 적용할 수 있습니다. 버튼의 경우는 클래스만 지정하면 됩니다.
<button type="button" class="btn">No class</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button>
v.4에서는 같은 코드에서 스타일이 좀 달라졌네요.
Angular Material의 영향을 받아서 외곽선이 없어지고 좀 더 밝아졌습니다. 자세히 보면 버튼이 눌릴 때 v.3에 있던 그라데이션도 v.4에는 없어졌습니다. 버튼이 조금 커지기도 했네요.
클래스 지정만으로 깔끔한 UI Components를 구성할 수 있다는 점이 개발자들에게 큰 인기를 끌었던 이유라고 생각합니다.
Angular Material
https://material.angularjs.org
Angular Material은 Google에서 주관하는 UI Components framework입니다. Bootstrap과 마찬가지로 UI Components를 구성하는 도구로 사용되며, Material Design이라는 디자인 철학을 가지고 Bootstrap의 경쟁자로 크게 인기를 끌고 있습니다. 최신 버전은 2016년 8월 14일 발표된 1.1.0-RC.5입니다.
Angular Material 은 UI Components Library지만 기본적으로 AngularJS에 의존성을 가집니다. AngularJS를 사용해서 컴포넌트를 구성하기 때문이죠. 로드해야 할 스타일과 js파일은 아래와 같습니다. Bootstrap과 마찬가지로 CDN을 써보죠. 추가적으로 Angular를 사용해서 ngMaterial을 의존성으로 주입해야 합니다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js">
이것을 바탕으로 기본적인 버튼에 대한 구성을 해보면 아래 코드와 같습니다.
<html ng-app="testApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('testApp', ['ngMaterial']);
</script>
</head>
<body>
<md-button class="md-raised">Default</md-button>
<md-button class="md-raised md-primary">Primary</md-button>
<md-button class="md-raised md-primary" ng-disabled="true">Disabled</md-button>
<md-button class="md-raised md-warn">Warning</md-button>
</body>
</html>
버튼을 구성할 때는 md-button이라는 AngularJS의 directive를 사용해서 스타일을 구성하고 동작을 제어하는 방식입니다. md-button directive를 자연스럽게 생각한다면 Bootstrap의 클래스 지정과 동일한 방식입니다.
AngularJS에 대해 의존성을 갖는다는 것이 AngularJS를 사용하지 않는 개발자들에게 부담이 된 것을 신경썼는지, Google에서는 Material Design Lite(MDL)를 내기도 했습니다.
MDL에서는 AngularJS에 대한 의존성 없이 class 지정을 통해 Material Design을 구성합니다.
MDL의 방식으로 버튼을 구성해보면 코드는 이렇습니다.
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Button</button>
AngularJS를 사용하지 않기 때문에 class 지정 부분이 좀 더 복잡해지네요.
인풋 폼에 대해서 좀 더 살펴보겠습니다.
Bootstrap에서 인풋 폼을 구성하는 방식은 아래와 같은 사용이 대표적입니다. Input box의 앞, 뒤에 모양을 추가할 수 있죠. 기존 Input box를 최대한 활용하는 모습입니다.
Angular Material에서는 좀 더 심플한 Input box를 구성하며 활성화되면 라벨이 위로 올라가는 애니메이션이 있고 validation 결과를 아래에 표시합니다. 사용해보니 validation 설정을 위해서는 패턴 매칭 로직을 사용하기도 합니다.
간단하게 버튼과 인풋 폼에 대해서만 알아봤지만 Bootstrap과 Angular Material에는 다양한 컴포넌트들이 존재합니다. 버튼과 카드 레이아웃, 그리드, 체크박스 등 수많은 컴포넌트들을 쉽게 이용할 수 있습니다.
Bootstrap과 Angular Material은 기본적으로는 스타일이 다르고 디자인 목표나 사용자의 취향에 따라 1차적으로 선택을 할 수 있겠네요.
그리고 jQuery나 tether 이외에는 의존성이 없는 Bootstrap과는 다르게 Angular Material은 기본적으로 AngularJS와 의존성을 갖고 있습니다. AngularJS를 사용하고 있다면 큰 부담은 없겠지만 Angular Material을 사용하기 위해 AngularJS를 사용하는 것은 좋은 선택이라고는 하기 어렵겠네요. 추가적인 의존성 주입없이 Material Design을 이용하려면 Material Design Lite를 고려해볼 수도 있겠습니다.
어디까지나 개발에 도움을 주는 목적으로 라이브러리를 사용하는 것이니 용도에 맞는 적절한 라이브러리를 선택해서 사용하시면 되겠습니다 ㅎ
- Total
- Today
- Yesterday
- 커스텀 컴포넌트
- Angular 5.0.0
- 2017 티스토리 결산
- 양방향 바인딩
- DENO
- Angular 7.0.0
- Angular HttpClientModule
- typescript
- Angular
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |