Angular Material을 사용하여 최신 웹 앱 구축
게시 됨: 2022-03-112014년 Google I/O Conference에서 Google은 새로운 디자인 언어인 Material Design을 발표했습니다. 그들은 일관된 경험을 제공하기 위한 노력의 일환으로 이 새로운 사양을 준수하도록 인기 있는 응용 프로그램의 대부분을 변환했습니다. 이제 그들은 당신도 따르도록 설득하려고 합니다.
머티리얼 디자인이란?
공식 Material Design 사양을 방문한 후 즉시 초현대적 미니멀리즘을 느낄 수 있습니다. 기본 모양과 평면 색상이 여기의 테마입니다. 문서를 살펴보는 것은 상당한 경험입니다. 직접 살펴보길 권하지만 여기에 요약하겠습니다.
목표
목적은 좋은 디자인의 고전적인 원리와 기술과 과학의 혁신과 가능성을 종합한 시각적 언어를 만드는 것입니다. 또한 다양한 플랫폼 및 장치 크기에 걸쳐 통합된 경험을 허용하는 단일 기본 시스템을 개발합니다.
원칙
머티리얼 디자인은 세 가지 원칙을 기반으로 합니다.
물질은 은유이다
종이와 잉크에 대한 연구에서 영감을 받은 이 소재는 3D 공간에 거주하며 촉각 현실에 기반을 두고 있습니다. 사실적인 그림자를 사용하여 공간의 환상을 줍니다. 종이 재료는 물리 법칙을 따라야 하지만(즉, 두 개의 종이가 서로를 통과할 수 없음) 물리적 세계를 능가할 수 있습니다(즉, 종이가 커지거나 줄어들 수 있음).
굵게, 그래픽, 의도적
신중한 색상 선택, 엣지 투 엣지 이미지, 대규모 타이포그래피 및 의도적인 공백은 사용자를 경험에 몰입시키는 대담하고 그래픽적인 인터페이스를 만듭니다. 플로팅 액션 버튼(FAB)은 이 원칙의 대표적인 예입니다. Google Inbox 앱에서 '더하기' 기호가 떠다니는 작은 원을 본 적이 있습니까? 머티리얼 디자인은 이것이 중요한 버튼이라는 것을 매우 분명하게 보여줍니다.
모션은 의미를 제공합니다
움직임은 의미 있고 적절하며 주의를 집중시키고 연속성을 유지하는 데 도움이 됩니다. 피드백은 미묘하지만 명확합니다. 전환은 효율적이면서도 일관성이 있습니다. 여기서 요점은 목적이 있을 때만 애니메이션을 적용하고 과도하게 사용하지 않는 것입니다.
AngularJS는 어떻게 머티리얼 디자인에 적합합니까?
Google의 "Superheroic JavaScript MVW Framework"인 AngularJS는 단일 페이지 애플리케이션(SPA) 개발에서 직면하는 많은 문제를 해결합니다. API에 연결하고 페이지를 새로 고칠 필요가 없는 최신 웹 애플리케이션을 만드는 데 필요한 프레임워크를 제공합니다.
AngularJS: 새로운 접근 방식
Angular는 HTML이 응용 프로그램용으로 설계되었다면 그대로 되었을 것입니다. HTML은 정적 문서를 위한 훌륭한 선언적 언어이지만 동적 응용 프로그램을 만드는 것은 그다지 많지 않습니다.
HTML로 동적 응용 프로그램을 만드는 것은 항상 브라우저가 의도하지 않은 일을 하도록 속이는 연습이었습니다. 이를 수행하기 위한 몇 가지 접근 방식이 있습니다.
- 라이브러리 - 기능 모음. (제이쿼리)
- 프레임워크 - 필요할 때 코드가 정적 요소를 동적으로 채웁니다. (듀란달, 엠버)
Angular는 이 문제를 해결하기 위해 다른 접근 방식을 취합니다. 주어진 HTML과 씨름하는 대신, 새로운 HTML 구조를 생성합니다. Angular는 '지시문'이라는 구성을 통해 브라우저에 새로운 HTML 구문을 가르칩니다. Angular에는 이러한 지시문 세트가 내장되어 있지만 사용자 정의 지시문을 생성할 수도 있으므로 HTML 요소를 직접 작성할 수 있습니다.
구글이 머티리얼 디자인 원칙에 기반한 일련의 지시문을 만들었다면 깔끔하지 않을까요?
앵귤러 머티리얼 소개
Google은 AngularJS에서 Material Design을 구현한 Angular Material을 적극적으로 개발하고 있습니다. Angular Material은 Material Design 시스템을 기반으로 재사용 가능한 UI 구성 요소 세트를 제공합니다. Angular Material은 여러 조각으로 구성됩니다. 타이포그래피 및 기타 요소를 위한 CSS 라이브러리가 있으며 테마 지정을 위한 흥미로운 JavaScript 접근 방식을 제공하며 반응형 레이아웃은 플렉스 그리드를 사용합니다. 그러나 Angular Material의 가장 매력적인 기능은 놀라운 지시문 모음입니다.
시작하기
다음 Angular Material 프로젝트를 시작하는 데 도움이 되는 오픈 소스 프로젝트를 만들었습니다. 이 프로젝트의 목적은 한 지붕 아래에서 Angular Material이 제공해야 하는 모든 것에 대한 예를 제공하는 것입니다. 탐색, 페이징, 테마 및 전체 지시문 컬렉션을 사용할 준비가 되었습니다. 데이터를 입력하고 HTML에 바인딩하기만 하면 됩니다.
여기에서 데모를 보거나 GitHub에서 코드를 포크하세요.
지시문
지시문은 Angular의 핵심 기능입니다. Angular에는 ng-model 또는 ng-repeat와 같이 항상 사용하는 여러 지시문이 있습니다. 프레임워크가 제대로 작동하도록 하는 Angular의 매우 중요한 부분입니다.
Angular Material 지시문을 사용하는 방법
Angular Material은 아름다운 Material Design에서 영감을 받은 지시문 세트로 이 지시문 라이브러리를 확장합니다. Angular Material 지시자는 'md'로 시작하는 HTML 태그입니다. 머티리얼 디자인의 줄임말. 그들은 훨씬 더 쉽게 사용할 수 없습니다. 예를 들어 좋은 오래된 버튼을 살펴보겠습니다.
표준 HTML 버튼은 다음과 같습니다.
<button>Click Me</button>Angular Material 버튼은 다음과 같습니다.
<md-button>Click Me</md-button>그리고 이것이 Material 버튼을 만드는 데 필요한 전부입니다. 이제 이 지시문에 사용할 수 있는 몇 가지 다른 옵션이 있습니다. 예를 들어 주제를 지정하고 중요도를 암시하기 위해 표면에서 끌어올립니다.
<md-button class="md-raised md-primary md-hue-1">Click Me</md-button>서비스
서비스는 Angular 기능의 핵심이기도 합니다. 애플리케이션 전체에서 코드를 공유하는 데 사용됩니다. $http와 같은 공통 핵심 서비스는 Angular 애플리케이션의 데이터 호출에 사용 및 재사용됩니다.
Angular 서비스는 다음과 같습니다.
- 지연 인스턴스화 – Angular는 애플리케이션 구성 요소가 서비스에 종속될 때만 서비스를 인스턴스화합니다.
- 싱글톤 – 서비스에 종속된 각 구성 요소는 서비스 팩토리에서 생성된 단일 인스턴스에 대한 참조를 얻습니다.
Angular Material 서비스 사용 방법
Angular Material은 애플리케이션에 몇 가지 추가 기능을 제공하는 일부 서비스와 함께 제공됩니다. 또한 일부 지침의 성능에 기여합니다. 서비스의 좋은 예는 '건배'입니다.
토스트는 화면 상단에서 들어왔다가 몇 초 후에 사라지는 작은 알림입니다. 이 서비스를 사용하는 것은 쉽습니다.
자바스크립트에서,
$mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );이 예는 화면 왼쪽 하단에 팝업되고 3초 후에 후퇴하는 간단한 토스트를 보여줍니다.
일부 서비스는 사용자 정의 템플릿으로 개인화할 수 있습니다. 이 경우 $mdToast 서비스는 md-toast 지시문을 사용하여 사용자 정의 HTML 템플릿을 사용할 수 있습니다.
테마
머티리얼 디자인은 테마가 색상, 톤 및 대비를 통해 의미를 전달하는 시각적 언어입니다. 이러한 테마는 전체 응용 프로그램의 구성 요소에 걸쳐 표현되어 보다 통일된 느낌을 제공합니다.
머티리얼 디자인 지침에 따르면 "기본 팔레트에서 세 가지 색상 색조를 선택하고 보조 팔레트에서 한 가지 강조 색상을 선택하여 색상 선택을 제한해야 합니다." Angular Material은 JavaScript를 사용하여 테마를 구성함으로써 이 가이드라인을 간단하게 따르도록 합니다. 그러나 먼저 팔레트와 색조가 무엇입니까?
- 색조: 색조는 팔레트의 단일 색상입니다.
- 팔레트: 팔레트는 색상 모음입니다.
예를 들어 팔레트는 '녹색'이고 색조는 특정 녹색 음영입니다. Angular Material은 Material Design 사양의 모든 유효한 팔레트와 함께 제공됩니다. 여기에서 유효한 색상 팔레트에 대해 자세히 알아볼 수 있습니다.
테마 구성
프로젝트 테마는 케이크 조각입니다. app.js 파일에서 테마 제공자 서비스를 사용하여 원하는 팔레트와 색조를 설정합니다.
angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });테마 사용
구성 요소에 테마를 적용하려면 요소의 클래스를 원하는 팔레트와 색조로 설정합니다.
<md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>형세
Flexbox는 반응형 디자인에 대한 가장 최신의 추가 기능이며 Angular Material이 함께 제공됩니다. 부트스트랩 그리드 시스템에 익숙하다면 빠르게 따라할 수 있을 것입니다. 실제로 Bootstrap은 다가오는 릴리스에서 Flexbox로 전환하고 있습니다. 익숙한 행과 열 레이아웃이 있지만 훨씬 더 많습니다. 이 튜토리얼에서 Flexbox를 사용하는 방법을 배우거나 공식 문서를 공부하십시오.
상위 9가지 최고의 앵귤러 머티리얼 지침
Angular Material 지시문이 너무 많아서 모두 나열하기에는 제가 가장 좋아하는 것을 여러분과 공유하고 싶습니다.
9. 진행 선형
종종 SPA에서 페이지는 서버에서 데이터를 로드하는 데 시간이 필요합니다. 이 시간 동안 응용 프로그램에 빈 페이지가 표시되면 사용자는 응용 프로그램이 고장난 것으로 생각하고 떠날 수 있습니다. 데이터가 Progress Linear 지시문으로 로드 중임을 사용자에게 알립니다. 사용자는 무언가가 일어나고 있음을 나타내는 애니메이션 진행률 표시줄이 표시되면 기다려야 한다는 것을 알게 됩니다. 또는 원형 표시기에 Progress Circular 지시문을 사용하십시오.
8. 날짜 선택기
Date Picker 지시문은 날짜 선택을 사용자에게 명확하고 간단한 경험으로 만들고 진정한 한 줄로 작성할 수 있도록 합니다. md-datepicker를 사용하고 선택적으로 md-min-date 및 md-max-date로 범위를 제한하면 됩니다.
7. 자동 완성
자동 완성은 사용자가 옵션을 선택할 수 있도록 도와줌으로써 쾌적한 사용자 경험을 제공합니다. 이것이 구글의 검색 엔진을 최고로 만드는 것입니다. Autocomplete 지시문은 사용자가 입력할 때 단어를 완성하여 애플리케이션에 이 기능을 추가합니다. 그러나 이 지시어의 가장 좋은 점은 사용자 정의입니다. 자동 완성을 md-item-template으로 채우면 제안에 더 많은 의미를 부여할 수 있습니다. 예를 들어, 사용자가 회사에서 이름을 검색하는 경우 자동 완성 기능은 사진 및 회사 역할과 일치하는 이름을 표시하여 보다 강력한 사용자 경험을 제공할 수 있습니다.
6. 바닥 시트
하단 시트는 화면 하단에서 위로 슬라이드하여 콘텐츠를 덮고 초점을 맞추는 작은 메뉴입니다. 원래 모바일 장치 전용으로 의도된 하단 시트는 더 큰 화면에서 인기를 얻고 있습니다. 이를 사용하려면 그리드 레이아웃 또는 목록 레이아웃에 대해 각각 md-grid 또는 md-list를 포함하는 md-bottom-sheet가 있는 템플릿을 만듭니다. 그런 다음 하단 시트 서비스인 $mdBottomSheet.show()를 사용하여 호출합니다.
5. 입력
입력 양식은 지루하고 인터넷이 시작된 이래 계속되었습니다. 하지만 그럴 필요는 없습니다! Input 지시문을 사용하여 입력에 약간의 감각을 부여하십시오. 입력 태그를 md-input-container로 래핑하고 실제 작동하는지 확인하세요. 자리 표시자가 플로팅 레이블로 움직이는 것을 지켜보십시오. 즉각적이지만 미묘한 색상 변경 및 경고 메시지로 입력을 쉽게 검증할 수 있습니다. 입력 지시문은 지루할 것으로 예상되는 요소를 취하고 즐거운 놀라움을 제공합니다.
4. 토스트
가장 골치 아픈 사용자 경험은 애플리케이션이 무엇을 하는지 모른다는 것입니다. 우리는 토스터나 약간의 눈에 거슬리지 않는 알림으로 이러한 악화를 완화합니다. 예전에는 서버에 요청을 보낼 때 계속 진행하기 전에 응답이 돌아올 때까지 해당 페이지에서 기다렸습니다. 그 이후로 사용자 주의 시간이 급격히 감소했습니다. 오늘날의 SPA에서는 버튼을 클릭하고 서버 응답이 올 때 처리하여 즉시 이동할 것으로 예상합니다. Toast 지시문은 이것을 케이크 조각으로 만듭니다. 토스트 서비스 $mdToast.show()를 이용하여 간단하게 토스터를 불러오고, 텍스트, 재생 시간, 표시할 코너를 설정하면 됩니다. md-toast로 나만의 토스터를 만들어보세요.
3. 그리드 목록
당신의 목록에 피자가 부족합니까? 그리드 목록은 표준 목록 보기의 대안입니다. 그리드 목록은 이미지를 표시하는 데 가장 적합하며 시각적 이해에 최적화되어 있습니다. 그리드에 다양한 크기의 타일을 깔아 흩어져 있는 절충주의적인 느낌을 줍니다. 그러면 타일 크기와 레이아웃이 화면 크기에 응답합니다. 이 지시문은 응용 프로그램에 흥미롭고 재미있는 모양을 제공할 것입니다.
2. 화이트프레임
공간 개념은 머티리얼 디자인의 핵심이자 종이 은유입니다. 동일한 z 위치(또는 깊이)에 있는 두 장의 종이는 이음매를 형성하고 함께 움직여야 합니다. 서로 다른 z-위치를 가진 두 장의 겹쳐진 종이가 계단을 형성합니다. 그들은 서로 독립적으로 움직입니다. 디자인을 따르려면 z축을 따라 요소를 이동할 수 있어야 합니다. Angular Material은 이를 수행하는 간단한 방법을 제공합니다. Whiteframe 지시문을 사용하여 클래스를 md-whiteframe-z{x}로 설정합니다. 여기서 x는 배경에서 위쪽 깊이의 단위입니다. 숫자가 클수록 종이에 드리워진 그림자가 커집니다.
1. 사이드내비
사이드 탐색 메뉴를 만드는 것이 그 어느 때보다 쉬워졌습니다. Sidenav 지시문은 탐색 메뉴를 화면의 왼쪽이나 오른쪽에 배치합니다. 모바일을 염두에 두고 예상대로 안팎으로 스와이프하거나 버튼 클릭으로 프로그래밍 방식으로 스와이프합니다. 좋은 추가 기능은 잠금 해제 기능입니다. 측면 탐색은 화면이 특정 크기에 도달하면 열리도록 잠글 수 있습니다. md-is-locked-open=”$mdMedia('gt-sm')” 매개변수를 설정하면 메뉴가 전화기에서는 숨겨져 있지만 태블릿 이상에서는 잠겨 열려 있습니다.
결론
Google은 가장 인기 있는 애플리케이션을 Material Design으로 전환하고 있습니다. 이제 그들은 AngularJS로 작성된 Material Design의 구현인 Angular Material의 개발을 주도하고 있습니다. 머티리얼 디자인은 종이 비유, 대담한 의도, 의미 있는 동작을 사용합니다. AngularJS는 단일 페이지 애플리케이션을 구성합니다. Angular Material은 Material Design 원칙을 AngularJS 애플리케이션에 적용합니다.
Material Design이 있으며 Angular Material은 단일 페이지 애플리케이션에 Material 디자인 사양을 적용하는 환상적인 방법입니다. 자신만의 Angular Material 애플리케이션을 만들고 싶다면 처음부터 시간을 낭비하지 마십시오. 대신 지시문 데모, 테마 설정, 탐색 및 라우팅 준비가 완료된 완전한 기능의 앱으로 시작하십시오. 여기에서 데모를 보거나 GitHub에서 코드를 포크하세요. 물론 공식 문서를 방문하여 Angular Material에 대한 모든 것을 배울 수도 있습니다.
최고의 Angular Material 지시문에 대한 나의 선택에 대해 어떻게 생각하십니까? 내가 제대로 이해했습니까? 당신의 즐겨 찾기는 무엇입니까?