기본 콘텐츠로 건너뛰기

Angular Material 을 이용한 개발

Angular Material 을 이용한 개발

Material 디자인이란 무엇인가?

구글이 처음 모바일 디바이스를 만들었을 때, 모바일에는 부족한 것이 많았습니다. 화면 크기도 작았고, 네트워크 연결 속도도 빠르지 않았고, 기능도 별로 없었습니다. 사용하기에 그다지 편리한 환경은 아니었죠. 하지만, 모바일 디바이스는 빠르게 진화했습니다. 성능은 훨씬 더 강력해졌고, 속도는 빨라졌고, 보다 직관적으로 사용할 수 있도록 발전하였습니다. 이제 모바일 디바이스를 위한 UX를 디자인할 때도 이런한 발전을 염두해 두어야 합니다. 더군다나, 이번 I/O 에서 안드로이드는 새로운 폼팩터를 지원할 수 있도록 확장되었습니다. 이러한 변화에 발맞추어, 구글은 모바일과 데스크탑 그리고 그 외 다양한 디바이스들을 아우르는 하나의 일관된 디자인 가이드라인을 공개하였습니다. 바로 머티리얼 디자인 (material design) 입니다. 머티리얼 디자인은 질감이 느껴지는 표면 (tactile surfaces) 과 대담하고 선명한 그래픽 디자인 (bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 합니다.

출처 : http://googledevkr.blogspot.kr/2014/07/this-is-material-design.html

도입 동기

https://almsaeedstudio.com/preview

우선 과장님이 사내 관리시스템을 adminLTE 처럼 ui를 만들어서 구축하실 계획이셨는데 이번에 내가 입사하면서 개편할 겸

해서 선택한 것이 Angular Material UI 이다.

ui에 관심이 많으시다

따라서, 프로젝트 진행 하면서 angular material을 도입해서 개발하고 있다.

https://material.angularjs.org/latest/

angular material은 기존 angular 1을 사용하고 있으며, 계속해서 개발되고 릴리즈 되는 상태다. ( 2 버전도 개발 중이라고 한다.)

사용하면서 느낀점

부족한 기능들도 많이 있다. 아직 릴리즈 되고 있는 상태이고 업데이트는 빠른 상태로 되어지고 있는 상태지만 그에 따라서

생각한 UI대로 기능을 구현할때 막히는 부분이 있다.

예를 들면 material 에서 제공하는 Datepicker를 이용해서 사용자의 생년월일을 입력한다고 할때,

현재는 년월일을 따로 컨트롤 할 수가 없다.

우선 Matrial ui 컨셉을 확인할 수 있는 사이트 http://www.material-ui.com/#/components/date-picker

를 이동해서 확인하면 아래와 같이 년도나 월을 클릭해서 손쉽게 선택이 가능해야 하지만 현재 Angular Matrial에서는 불가능하다.

휠로 조절이 가능한데 70년도 생년월일 선택하다가 마우스 휠이 나갈판이다. -_-;;

2016.07.27 현재 Datepicker는 버전업이 되면서 년도 변경이 되니 참고하시고 mdPickers 는 참고로 하셔야 될것 같다.

아무튼 이런 이유 때문에 현재 github에서는 서로 의논중이고 대안으로 만들어놓은 여러 플러그인들을 소개하며

의견을 주고 받고 있다.

https://github.com/angular/material/issues/4251

우리는 대안으로 사용한 라이브러리는 md-pickers 를 사용하였다.

https://github.com/alenaksu/mdPickers

물론 mdPickers 도 완벽하지는 않다.. 그래도 년월일을 좀더 자유롭게 컨트롤이 가능하다는 점에서 선택했다.

살펴보기

https://material.angularjs.org/latest/

우선 기본적인 컴포넌트 들이나 layout 설정 및 데모들을 확인할 수 있다.

깔끔한 ui, Input 및 List, Checkbox, Dialog 등등 좋은 컴포넌트들이 많이 있다.

버튼 UI

CHECK BOX

INPUT UI

위에서 캡쳐해놓은 것과 같이 ui가 알록 달록 이쁘게 만들어 지는 것이 특징이다.

장점

앱에서도 Material UI를 적용해서 개발한 화면을 봣기 때문에 통일성? 잘되는 것 같다.

그리고 컴포넌트들을 이용해서 멋진 UI 효과를 나타낼 수 있으며, 별도의 Directive를 생성하지 않고도

여러 기능들을 어려움 없이 만들 수 있다.

그리고 기본으로 제공되는 button들이 많이 있어서 사용하기 좋다.

https://design.google.com/icons/

여러 종류의 아이콘들이 계속해서 업데이트 되고 있기 때문에 필요한 부분에 적절하게 사용하면 된다.

toastr (http://codeseven.github.io/toastr/demo.html) 등의 여러기능들도 같이 포함되어있다.

여러 라이브러리들을 잘 활용해서 UI를 꾸밀 수 있다.

UI 작성시 어느정도 복잡하지 않으면 빠르게 작성이 가능해진다.

단점

기능들이 가끔 부족한 부분이 나타난다. ex) list 페이지는 있지만 view 페이지의 형식은 어떻게 나타낼 것인지 sample이 없다..

벤치 마킹하는 https://plus.google.com 을 보면서 많이 활용하지만 부족하다.

모던 웹 (최신 브라우저, 특히 크롬 or 사파리? 오페라?) 에 특정된 브라우저에서 잘 동작한다.

IE는...

IE에서 돌리는 순간 -_-;; 엄청난 버벅임..? 이건 현재 개발중인 사이트에 참조하고 있는 스크립트가 많아서 그런 것일 수도 있다..

이 부분은 우리가 기존에 사용하던 레거시 웹 사이트 처럼 리스트, 상세 view가 있는 경우를 말하는 것이니

오해하지 않았으면 좋겠다.

다행인 부분은 bootstrap도 동시에 사용 가능하기 때문에 부족한 부분은 bootstrap을 이용해서

보완할 수 있다.

그 밖에도 많은 ui들이 존재한다.

METRO UI http://metroui.org.ua/

angular 2가 나오고 react가 있다고 하지만 아직 angular 1도 어느정도 수준급도 아니라서 좀 많이 고민이 된다.

더욱이 영어의 필요성이 강조되는 상황이라서, 영어도 동시에 공부를 꾸준히 해야 될 것 같다.

부디 angular material 을 적용하시려는 분들에게 어느정도 도움이 되었으면 한다.

from http://devjms.tistory.com/71 by ccl(A) rewrite - 2020-03-07 05:55:13

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기

[Angular] Controller

[Angular] Controller Step02_controller.html // angular 모듈 만들기 var myApp = angular.module( "myApp" ,[]); // Ctrl1 이라는 이름의 컨트롤러 만들기 myApp.controller( "Ctrl1" ,[ "$scope" , function ($scope){ $scope. name = "김구라" ; $scope.clicked = function (){ alert ( "버튼을 눌렀네?" ); }; $scope.nums = [ 10 , 20 , 30 , 40 , 50 ]; }]); // Ctrl2 이라는 이름의 컨트롤러 만들기 myApp.controller( "Ctrl2" ,[ "$scope" , function ($scope){ $scope. name = "원숭이" ; $scope.friends = [ {num: 1 , name : "김구라" ,addr: "노량진" }, {num: 2 , name : "해골" ,addr: "행신동" }, {num: 3 , name : "원숭이" ,addr: "동물원" } ]; }]); 내이름은 : {{name}} 눌러보셈 {{tmp}} 너의 이름은 : {{name}} 번호 이름 주소 {{tmp.num}} from http://heekim0719.tistory.com/164 by ccl(A) rewrite - 2020-03-07 09:21:16
댓글 쓰기
자세한 내용 보기

JQuery - $ 사용 유형.

JQuery - $ 사용 유형. 최근에 새로운 Javascript 프레임워크와 라이브러리들이 많이 등장했고 시장 점유율 또한 많이 변동 되었다고 한다. 특히 요새 대새는 Angular와 React라고들 한다. 그리고 Jquery 요즘 누가써? Jquery 퇴물이야 등등... 그런 이야기들을 종종 찾아볼 수 있는데, 유행은 돌고 돌듯이 결국 Jquery가 몰락할 일은 없다고 생각하는 바, 묵묵히 Jquery를 고집하기로 한다...ㅎㅎ 먼저 Jquery 교과서랄까.. 기본 문법을 배울 수 있는 링크를 걸어둔다. https://www.w3schools.com/jquery 여기서 기초들을 다 익힐 수 있다. 프로그래밍 문법을 한번이라도 봤다면 + - * / 같은 연산 while, for 등은 다 비슷하기 때문에 $ 사용법만 잘 알면 될 것 같다. $ syntax 사용유형 일단 기본적으로 $는 JQuery에서 미리 정해놓은 변수 값이다. : JQueryStatic 1. $( ) : JQueryObject 가장 많이 사용하는 형태이다. 괄호 안에 들어 갈 수 있는 것들은 클래스 이름, 아이디, 셀렉터 등이다. 예를 들어 $('p')이면 현재 html 페이지에 있는 모든 를 JqueryObject로 가져오겠다는 것이다. hide()는 제이쿼리 메서드이다. $('p')는 제이쿼리 오브젝트이기 때문에 제이쿼리 메서드를 사용할 수 있다. 그중의 하나인 hide()를 사용해 보았다. 결과이다. 에는 스타일이 적용이 되었다. 해당 태그에는 jquery의 메서드가 적용이 된 것을 확인할 수 있다. 2. $.함수 : 플러그인 개발 또는 기본 전역함수 플러그인을 개발 할 때나 Jquery가 갖고 있는 기본 전역함수들을 사용할 때 쓴다. 전역함수에는 여러개가 있는데 그중에 개인적으로 많이 쓰는 것은 $.ajax({}), $.each({}) 등이 있다. 이 함수들의 사용방법은 따...
댓글 쓰기
자세한 내용 보기