2021년 개발자를 위한 15가지 무료 머티리얼 디자인 프레임워크

Google의 머티리얼 디자인은 많은 디자이너가 처음에 예측한 것 이상으로 발전했으며 이제 모바일 웹사이트, Android 애플리케이션 및 데스크톱 소프트웨어 개발에 일반적으로 사용되는 디자인 표준이 되었습니다. Google은 네이티브 머티리얼 디자인 애플리케이션을 자체 웹사이트 빌더에 구현하기까지 했습니다. 최근에는 상당히 추하고 부진해 보였지만 이제는 믿을 수 없을 정도로 아름다운 웹 사이트를 제작할 수 있습니다.

누군가가 그것이 옳은 일이라고 해서 맹목적으로 지침을 따를 필요는 없습니다. 디자이너로서의 자신의 판단은 눈에 띄는 실제적이고 독특한 프로젝트를 만들기 위한 최고의 자산입니다. 머티리얼 디자인에서 이미 당신의 이데올로기를 칭찬할 것이라고 생각하는 것을 취하고 거기에서 빌드업을 만드십시오. 자신의 개인적인 선택을 사용하여 디자인 경험을 더욱 완벽하게 만들 수 있습니다. Google은 확실히 세계적 수준의 사용자 경험 및 사용자 인터페이스 요소에 대해 토론하고 연구하는 재주가 있지만 생각해 보면 프로젝트가 고유하고 잠재고객 인구통계 및 유형이 고유하며 때로는 다음 단계를 따라야 합니다. 귀하가 구축하고 있는 비즈니스 또는 프로젝트의 최고의 가치를 이끌어내는 디자인을 만드십시오.

더 배우려고 하는 프레임워크는 머티리얼 디자인을 시험해 볼 수 있는 완벽한 솔루션입니다. 아마도 가장 좋은 방법은 주말에 해킹할 수 있는 사이드 프로젝트를 만드는 것입니다. 이렇게 하면 기본 워크플로를 방해하지 않고 거기에 연결이 있다고 생각되면 로드맵을 만드는 방법에 대한 향후 앱/웹사이트에서 머티리얼 디자인을 구현할 수 있습니다. 이번 라운드업에 대한 중요/유용한 프레임워크를 놓친 경우 의견에 언급해 주시면 처리해 드리겠습니다.

구체화하다

Materialise는 머티리얼 디자인 사양을 기반으로 하는 본격적인 프론트엔드 웹 개발 프레임워크로, 최신 웹사이트를 빠르게 프로토타이핑하기 위한 빠르고, 중심에 있으며, 탐색하기 쉬운 핵심을 제공하므로 최고의 머티리얼 디자인 프레임워크 중 하나입니다. 프레임워크는 머티리얼 디자인이 제공해야 하는 모든 요소를 ​​소란 없이 신속하게 액세스할 수 있는 단일 프레임워크로 깔끔하게 정리합니다. 피드백 기반 구성 요소는 사용자가 개별 디자인 요소의 의미를 더 잘 이해할 수 있으므로 사용자 경험을 크게 향상시킬 것입니다.

그리고 이것은 프레임워크이기 때문에 그리드와 같은 일부 CSS 기능이 통합된 것을 볼 수 있을 것으로 예상됩니다. 이 경우가 맞습니다. Materialize는 색상, 그리드, 도우미, 미디어 관리, sass 파일, 테이블 관리, 타이포그래피 최적화를 제공합니다. 및 요소 그림자 최적화를 통해 구축하려는 골격을 빠르게 생성한 다음 최적화된 MD 구성 요소를 사용하여 디자인에 생명을 불어넣을 수 있습니다.

머티리얼 스위프트

현재 Swift 개발자이지만 Swift 앱에서 머티리얼 디자인을 구현하는 방법을 잘 모르십니까? CosmicMind의 자료는 이 모든 것을 손쉽게 처리합니다. 이 Swift Material 프레임워크/라이브러리를 사용하면 MD 구성 요소를 활용하고 전체 구성에 액세스할 수 있습니다. 일반적으로 복잡한 모바일 애플리케이션 인터페이스에 필요한 그리드 레이아웃이 제공되며 고유한 UI를 만드는 데 사용할 수 있는 표준 레이어와 보기를 얻을 수 있습니다. 구성 요소. 다른 기능으로는 탐색, 머티리얼 디자인 아이콘, 버튼, 카드, 스위치 및 애니메이션 탐색 메뉴를 구축하기 위한 메뉴 시스템을 제어하는 ​​기능이 있습니다. Swift Material은 실제로 기존의 모바일 앱 프레임워크와 별개로 애니메이션 프레임워크라고 부르며 개발자가 사용자 경험을 풍부하게 하기 위해 부드러운 애니메이션에 의존하는 레이아웃을 빌드할 수 있도록 하는 훌륭한 역할을 합니다.

머티리얼 프레임워크

머티리얼 프레임워크를 사용하면 머티리얼 디자인을 기존 디자인에 매우 쉽게 연결할 수 있습니다. 순수 CSS를 기반으로 하는 완전 반응형 프레임워크입니다. CSS 스타일시트 파일을 기본 웹사이트 스타일 폴더에 첨부하기만 하면 준비가 완료됩니다. 이 프레임워크는 특정 CSS 클래스를 통해 적용하거나 JavaScript를 사용하여 사용하려는 테마를 설정할 수 있는 어둡고 밝은 색 구성표의 선택을 제공합니다.

기존 양식에 잔물결을 추가하여 보다 의미 있는 사용자 경험을 만드는 것과 같이 다양한 애니메이션 효과를 사용할 수 있습니다. 타이포그래피 레이아웃은 원하는 대로 사용자 지정할 수 있으며 다른 디자인 요소에 가장 잘 맞도록 콘텐츠 모양을 조정할 수 있습니다. 버튼, 입력, 도구 모음, 아이콘, 목록, 메뉴, 카드 디자인 및 토글과 같은 항목에 대한 디자인 사양을 사용하도록 기존 스타일을 변경할 수 있습니다. 시작하고 실행하는 것은 어렵지 않으며, 사용자가 머티리얼 디자인을 높이 평가하는지 테스트할 수 있는 좋은 방법이 될 수 있습니다.

본질

Essence는 Material Design과 React.js의 두 가지를 결합합니다. 최적의 디자인 사양으로 빠른 웹 성능을 찾고 있다면 Essence가 모든 개발자에게 제공하는 것과 일치하기 어려울 것입니다. 머티리얼 디자인이 제공해야 하는 모든 UI 구성 요소는 Essence를 선택하기로 결정한 경우 React.js를 통해 다시 빌드됩니다! 최종 결과는 독특한 사용자 경험을 생성할 놀라운 사용자 인터페이스 요소 선택입니다. Essence는 NPM에서 쉽게 사용할 수 있으므로 간단한 설치 명령으로 설치하고 시작할 수 있습니다. 구성 요소는 별도로 설치 및 활용해야 하지만 모든 항목은 동일한 폴더 아래에 있습니다.

온천 UI

Onsen UI는 HTML5를 사용하여 모바일 앱을 빌드하기 위한 최고의 하이브리드 프레임워크 중 하나로 명성이 높습니다. 이 오픈 소스 플랫폼은 완전 무료이며 항상 그래왔듯이, 좋은 디자인에 대한 현대적인 이해는 Onsen UI 개발자가 타의 추종을 불허하는 사용자 경험을 구축하는 사용자 인터페이스 요소를 만드는 데 도움이 되었습니다. 불가지론적 프레임워크로서 Onsen을 말 그대로 다른 모든 프레임워크와 함께 사용할 수 있으며 코드 충돌이나 문제에 대해 걱정할 필요가 없습니다. 이것은 또한 새로운 Onsen UI V2에서 일어나고 있는 일입니다. 통합된 Material Design, Angular 2 및 React 구성 요소로 경험을 더욱 풍부하게 만듭니다. 현재 여전히 릴리스 후보이지만 이미 수천 명이 사용하고 있습니다. 모바일 제품을 출시하거나 모바일 소프트웨어 개발을 시작하려는 경우 Onsen UI 사용 방법을 배우면 이력서에 추가 활용도가 추가될 수 있습니다.

머티리얼 CSS

Material CSS는 클래스를 사용하는 대신 스타일을 정의하기 위해 속성을 사용하는 경량 대안입니다. 이렇게 하면 개발 워크플로가 더 쉬워지고 확실히 훨씬 간단해집니다. 최소한의 특성으로 인해 문자 그대로 대부분의 구성 요소 자체를 사용하게 됩니다. 여기에는 색상, 타이포그래피, 그림자, 잔물결, 아이콘, 입력, 양식, 버튼, 미디어, 카드, 패널, 도구 모음, 목록, 페이지, 그리고 도우미. Material CSS는 사용 방법에 대해 설명서의 각 특정 구성 요소를 철저하게 설명합니다.

머티리얼 디자인 라이트

Material Design Lite는 재료 사양으로 설계를 최적화하기 위한 또 다른 경량 솔루션입니다. 정적 콘텐츠에 의존하는 웹사이트에서 쉽게 작동하지만 동적 사이트에서도 구현하는 데 문제가 되지 않습니다. 작동하기 위해 어떤 종류의 외부 리소스도 필요로 하지 않는 독립적인 CSS 라이브러리입니다. 다중 장치 최적화가 내장되어 있으므로 이전 버전의 브라우저가 사이트에 액세스하려고 하면 자연스럽게 다운그레이드됩니다. 블로그 템플릿과 같은 템플릿 중에서 선택하여 블로그를 시작하거나 Android 공식 웹사이트에서 사용하는 테마의 라이트 버전을 사용할 수 있습니다. 또한 웹사이트 뒤에서 구현할 대시보드용 템플릿, 최고의 작업을 보여주는 최신 포트폴리오, 콘텐츠 페이지에 대한 텍스트 최적화 템플릿. 구성 요소 및 스타일과 같은 다른 모든 항목은 머티리얼 디자인을 사용하는 프레임워크에서 이미 기대할 수 있는 것입니다.

표면

많은 개발자들이 스스로 프레임워크를 만드는 데 자신의 능력을 발휘하고 있는 것 같습니다. Surface는 축소할 때 크기가 대략 6kb가 되는 또 다른 경량(이 경우 정말 가벼운) 프레임워크입니다. 또한 순수 CSS를 기반으로 하므로 JavaScript를 전혀 사용하지 않아도 됩니다. 먼저 Surface 문서로 이동하여 Surface 그리드가 작동하는 방식에 대해 학습하면 보드의 모든 구성 요소를 더 쉽게 얻을 수 있습니다. 애니메이션, 경고, 타일, 접을 수 있는 요소, 바닥글, 모달, 미디어, 유틸리티 및 도구 설명과 같은 구성 요소. 개발자는 이 모든 것을 깔끔하게 정리했으며 100에서 1까지 거꾸로 세는 것보다 설정이 더 쉽습니다.

머티리얼 UI

Material-UI는 Material Design 사양에서 이미 사용자 정의한 React.js 구성 요소 선택을 제공합니다. Material-UI와 그것을 사용하는 아이디어에 대해 가장 중요한 한 가지가 있습니다. 먼저 React.js와 일반적으로 웹 및 모바일과 상호 작용하는 방법에 대해 조금 더 배워야 합니다. 구성 요소는 React를 기반으로 하기 때문에 웹 개발에서 React가 어떻게 보이는지, 어떤 역할을 하는지 이해하는 것이 현명할 것입니다. Material-UI 팀은 어두움과 밝음의 템플릿 선택을 제공할 만큼 친절했으며 두 가지 모두 다른 구성 요소와 요소가 그리드에 맞는 방법에 대한 예를 제공합니다.

이전에 볼 수 없었던 일부 구성 요소에는 응용 프로그램 표시줄, 양식 자동 완성, 아바타, 배지, 칩, 날짜 선택기, 대화 상자, 구분선, 메뉴 서랍, 그리드 목록, 텍스트 필드, 시간 선택기 및 다양한 도구 모음이 포함됩니다. 그리고 이들은 이 프레임워크에서 쉽게 사용할 수 있는 구성 요소 중 일부일 뿐입니다.

무이

MUI는 Google의 머티리얼 디자인으로 디자인에 풍미를 더해주는 풍부하고 가벼운 CSS 프레임워크입니다. 블로그, 방문 페이지, 슬라이더 메뉴 및 HTML 뉴스레터 구독 상자와 같은 다양한 유형의 데모 레이아웃을 사용자에게 제공합니다. 이 데모만으로도 개발자는 머티리얼 디자인이 얼마나 효율적인지, 구현하기가 얼마나 쉬운지 배울 수 있습니다. MUI는 또한 React.js 및 Angular.js 프레임워크와 함께 작동하므로 번거로움 없이 앱에 자료를 연결할 수 있습니다. 사용할 준비가 된 다양한 개별 웹 구성 요소도 있습니다.

앵귤러 머티리얼

Angular Material은 Angular 2 프로젝트용 Material UI의 공식 릴리스입니다. 철저하고 간결한 문서 페이지가 있습니다. Material 사용자 인터페이스가 주입되었을 때 앱이 얼마나 아름답게 보일 수 있는지 보여줄 수 있습니다. 모든 구성 요소에는 자세한 예제와 추가 옵션이 제공됩니다. 이를 통해 이 프레임워크가 제공하는 것을 최대한 활용할 수 있습니다. 자료를 한 단계 더 발전시키려는 노련한 개발자를 위해 API 문서가 제공됩니다.

부트스트랩을 위한 머티리얼 디자인

Bootstrap은 의심할 여지 없이 전 세계의 많은 프론트엔드 개발자들이 가장 좋아하는 프로그램입니다. 부트스트랩은 오늘날 수백만 개의 웹사이트를 지원하고 있으며 앞으로 수백만 개의 웹사이트가 추가될 것입니다. Material Design for Bootstrap은 멋진 디자인 경험을 만들기 위해 머티리얼 디자인을 사용하는 효율적인 Bootstrap 테마입니다. 기존의 가장 좋아하는 모든 부트스트랩 요소 중에서 선택할 수 있습니다. 또한 머티리얼 디자인의 UI로 최적화 할 수 있는데 얼마나 좋은가요? 이전에 NPM을 사용한 적이 없는 사람들을 위해 약간의 수정이 필요할 수 있습니다. 문서는 시작 프로세스를 상당히 잘 설명하는 것 같습니다.

룸엑스

LumX는 AngularJS 및 Google Material Design 사양을 기반으로 하는 최초의 반응형 프론트엔드 프레임워크입니다. Sass와 AngularJS 구성 요소로 구축된 전체 CSS 프레임워크를 제공합니다. LumX를 사용하려면 Bower를 사용하여 라이브러리를 설치하는 방법을 알아야 합니다. Bower에 익숙하지 않은 경우 다른 대안은 모든 종속성을 개별적으로 다운로드하는 것입니다. 여기에는 Angular, jQuery, Velocity, Moment, Bourbon 및 Material Icons가 포함됩니다. LumX는 또한 Flexbox 속성을 사용하여 표준화되고 반응이 빠른 그리드 시스템을 만들기 위해 Flexbox를 사용합니다. LumX 구성 요소는 기존 웹 사이트 레이아웃 디자인의 모든 영역과 일부를 다룹니다.

이온 재료

Ionic은 HTML5 모바일 애플리케이션을 구축하기 위한 궁극적인 하이브리드 프레임워크입니다. 이제 머티리얼 디자인을 도입하여 그 모든 놀라운 능력을 앱에 적용할 수 있습니다! Ionic은 활동 피드 및 카테고리를 포함하여 이미 구축된 앱 레이아웃을 제공합니다. 또한 기능 목록, 갤러리, 일반 목록, 로그인 페이지 및 프로필 페이지에 도움이 될 수 있습니다. 일반 앱 인터페이스의 데모를 빠르게 부트스트랩한 다음 그 위에 소프트웨어를 빌드할 수 있습니다. Ionic Material은 원활하게 테마를 지정할 수 있습니다. Ionic Material은 주로 동작 라이브러리이며 Ionic의 색상 명명 규칙과 요소 클래스를 사용합니다. 사양의 픽셀까지 자세히 설명하는 Ionic Material은 동작, 잉크 및 깊이에 대한 Google의 지침을 따르는 것을 목표로 합니다. 새로운 구성 요소와 레이아웃이 라이브러리에 추가됨에 따라 머티리얼 디자인 사양에 대한 양질의 관심을 확보하게 되었습니다.

포논

Phonon Framework는 하이브리드 프레임워크 기술을 사용하여 HTML5 모바일 앱을 빌드하기 위한 간결한 솔루션을 제공합니다. Phono의 장점은 앱을 원하는 위치에 빠르게 확장할 수 있는 좋은 직관력입니다. 또한 즉석에서 인터페이스를 만들기 위한 빠른 도구를 제공하는 사용자 인터페이스 라이브러리이기도 합니다. Phonon은 완전히 축소되고 최적화될 때 크기가 대략 24kb에 이릅니다. 이것은 모바일 개발자들이 Phonon을 사용하는 주된 이유 중 하나입니다. 이는 Ionic 또는 Onsen과 같은 프레임워크에서 볼 수 있는 것보다 훨씬 낮습니다!