[Web Form] 사용하기 쉬운 무료 UI 라이브러리 Metro UI

728x90

시작하기

공통 스타일을 제작해서 사용하는 것보다 부트스트랩 CSS를 많이 사용해 왔는데, 너무 익숙해졌습니다. 다른 라이브러리도 사용하면서 다양한 컴포넌트와 사용감을 경험해야지 하면서 익숙해지니 찾아보는 걸 잊었다가 최근에 무조건 불편해지자!라고 마음먹으면서 다른 UI CSS 라이브러리를 찾아다녔는데, 그중에 Metro UI 라이브러리를 발견하였습니다. 많은 컴포넌트 중에 마음에 쏙 든 게 있어서 사용하였습니다.

.NET Framework 4.5 Web Forms에서 사용가능한 무료 UI 라이브러리

jQuery UI
- jQuery 기반의 라이브러리로 달력 date Picker와 검색어 자동 완성 등 부트스트랩보다 더 많이 사용하였습니다.
Bootstrap
- 반응형 웹 애플리케이션을 구축할 때 제일 흔하고, 편하게 사용할 수 있는 라이브러리입니다.
Metro UI CSS
- Window 8 디자인의 기반의 라이브러리입니다. 윈도우 8에서 타일 디자인이 인상적이었는데, 공식 문서만 봐도 타일 모양의 심플한 디자인이 많이 보입니다. NuGet 패키지에서 다운로드할 수 있습니다.
Pure CSS
- 최소한의 CSS와 javascript만으로 구현이 가능한 라이브러리라고 합니다. 최소한의 구성요소만 제공한다고 하니 다음에는 사용해보려고 합니다.

사이트

jQuery UI : https://jqueryui.com/

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

Bootstrap : https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

Metro UI CSS : https://korzh.com/metroui

MetroUI - frontend toolkit with Fluent design

MetroUI is absolutely free both for personal and commercial usage (distributed by MIT license) There are paid options for those who need technical support or require quick response to their questions or just want to support this project financially ;)

korzh.com

Pure CSS : https://purecss.io/

Pure

Pure is a ridiculously tiny CSS library you can use to start any web project.

purecss.io

Metro UI CSS

소개

Metro는 마이크로소프트가 타이포그래피 기반의 디자인 언어의 내부 코드명입니다. 메트로 디자인 언어는 여러 그룹의 공통 작업들을 통합하여 이용 속도를 빠르게 하기 위해 설계되었습니다. 과도한 그래픽을 제외하여 컨텐츠의 주 UI에 의지하는 것을 원칙으로 하고 있습니다. 윈도우 폰, 윈도우 8, 윈도우 10에 이 디자인 원칙이 적용되었습니다.

Metro UI에는 반응형 그리드 시스템, 100개 이상의 컴포넌트 그리고 500개 이상의 아이콘과 javascript 플러그인을 제공하는 라이브러리입니다. 유료 옵션이 있는데 구매하면 프리미엄 지원이 있습니다.

Base styles set - Metro 4 includes various styles for changing the look and feel of html elements.
70+ components with declarative style of use are available to solve almost all problems.
Tools - various built-in functions and classes will increase your productivity.
Iconic font with a set of more than 500+ icons.
Builder ( https://builder.metroui.org.ua ) - with the help of the collector, you can build your own set of Metro 4 components. The source code is available on Github.
Sandbox ( https://sandbox.org.ua ) - own sandbox for testing Metro 4 capabilities and more. By the way, the sandbox is written in Metro 4, the author of Metro 4 and its source code is available on GitHub.
Quick response to detected errors and their elimination. The new version comes out every week on Sundays, and during the week the Developer Branch is available on GitHub with the current already implemented fixes and extensions.
Detailed description of all elements of the Metro 4 library ( https://metroui.org.ua ).
Forum - get additional help from the community on the Metro 4 forum.
Metro 4 is an open source toolkit for development using HTML, CSS and JS. Metro 4 allows you to quickly and inexpensively create prototypes of pages and full-featured sites, and even without the knowledge of JavaScript.
Metro 4 is currently licensed with MIT and will always remain free for non-commercial open source projects.

Metro UI CSS 비하인드

https://sudonull.com/post/7812-Metro-4-a-path-length-of-6-years-A-brief-history-of-Metro-UI-CSS

설치

Visual Studio Nuget 메뉴에서도 쉬운 설치가 가능하며, CDN으로 사용해도 되고, 소스 파일도 다운로드 페이지도 제공하고 있습니다.
https://metroui.org.ua/download.html

Metro UI Components Library

Metro UI is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins .

metroui.org.ua

개발문서

https://metroui.org.ua/intro.html

Metro UI Components Library

metroui.org.ua

개발 문서가 깔끔하게 잘 정리되어 있어서 다양하게 사용할 수 있습니다. 단, 검색이 원활하지 않아서 메뉴에서 컴포넌트 이름들을 계속 찾아보게 됩니다. 그래도 몇 개의 컴포넌트들을 사용하다 보면 사용법이 익숙해집니다.

컴포넌트 사용 에시도 많고, 애니메이션 효과와 data와 연동되게 지원해 주는 javascript 이벤트들이 많아서 뭘 사용할지 고민하는 재미가 있습니다. 기본 말고도 스타일 테마도 제공하고 있습니다.

<link rel="stylesheet" href="path/to/themes/default.css">

부트스트랩과 이름이 비슷한 컴포넌트들이 많습니다. 색상 같은 경우는 찾기 어렵지만 주요 버튼의 이름은 같아서 공식 문서가 아니더라도 IDE의 인텔리센스(IntelliSense)로 쉽게 찾을 수 있습니다. 아이콘 검색도 수월합니다.

실제 사용한 화면

만들면서 참고한 컴포넌트 문서

처음이라서 기본 컴포넌트를 많이 사용했습니다. 저는 특히 select 컴포넌트들이 마음에 들어서 계속 추가하고 추가했습니다. 그룹도 지을 수 있고, 아이콘도 넣어서 서버 코드에서 데이터를 적게 가져와서 클라이언트 페이지 쪽에서 추가적인 데이터를 요청하면 전체 데이터를 가져오도록 옵션을 만들 수 있었습니다.

앞으로 사용해보고 싶은 컴포넌트

드래그 항목 : https://metroui.org.ua/drag-items.html

input Forms Valid : https://metroui.org.ua/validator.html

Table Events : https://metroui.org.ua/table.html#_table_events

Table data Sorting :https://metroui.org.ua/table.html#_table_sorting

카운트다운 : https://metroui.org.ua/countdown.html

마무리

실제로 사용한 환경은 Web Forms 3.5 버전이었는데, 서버 렌더링 코드와 Metro UI js의 렌더링 순서를 알아차리는 데 조금 시간이 걸렸지만, 페이지 생명 주기만 잘 컨트롤한다면 다양한 UI와 유용한 기능을 간편하게 사용할 수 있는 도구가 또 생겼구나라는 생각이 듭니다. 내부용 페이지라 실험을 많이 할 수 있지만 지원은 받지 못하는데 정말 좋은 라이브러리를 만났습니다. 이제 웹 폼을 보내주는 시간이 다가오고 있는데, 작별하는 그날까지 잘 갖고 놀 장난감이 생겨서 즐겁습니다.

참고 사이트
위키백과 : https://ko.wikipedia.org/wiki/%EB%A9%94%ED%8A%B8%EB%A1%9C_(%EB%94%94%EC%9E%90%EC%9D%B8_%EC%96%B8%EC%96%B4)
nuget : https://www.nuget.org/