Bootstrap / Google Meterial Design

Bootstrap

웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크

* What ?

반응형이며 모바일 우선인 웹 프로젝트 개발을 위한 무료 프레임워크입니다.

프론트엔드 진영에서 레이아웃과 다양한 인터페이스를 제공하여 웹사이트 제작의 간소화를 돕습니다.

2011년 GitHub에 오픈소스로 release 되었고, 2014년 6월에 GitHub에서 1등 프로젝트가 되었습니다.

3 버전 부터는 모바일 중심의 프레임워크로 변경되었습니다.

* Why ?

팀내에서 개발시 다양한 라이브러리를 사용하므로써, 시간이 많이 걸리고 일관성이 떨어짐을 보완했습니다.

부트스트랩을 통해서 일관성 및 시간절약이 가능해졌습니다.

* How ?

1. 부트스트랩을 직접 다운받는 방법.

https://getbootstrap.com/docs/4.3/getting-started/introduction/

2. CDN(Content Delivery Network) 방식으로 프로젝트에 포함하는 방법.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

---

Google Material Design

안드로이드 디자인 가이드, 핵심은 Layout

* What ?

구글 머티리얼 디자인은 2014년 6월에 구글이 발표한 디자인 가이드로 전체적인 스타일부터 세부적 레이아웃, 컴포넌트, 패턴, 사용성까지 거의 모든 요소에 대해 방법을 제시합니다.

* Why ?

구글은 어떤 환경에서도, 어떤 콘텐츠라도 담아낼 수 있는 디자인이 필요했습니다.

다양한 기기와 서비스를 하나로 묶음과 동시에 고객에게 일관된 느낌의 경험을 제공하면서, 다양한 서비스를 이용하더라도 ‘통합적인 경험’을 갖도록 했습니다.

일관된 메시지를 보내며 구글만의 색깔을 가장 잘 보여줄 수 있는 디자인이 있어야 비로소 강력한 브랜드로 거듭나게 된다고 생각했습니다.

* How ?

머티리얼 디자인 환경은 현실과 같은 3차원의 공간을 가지고 있으며, 카드스톡(Cardstock)을 기본으로 합니다. 카드스톡은 머티리얼 디자인의 큰 부분을 차지하는 개념으로, 카드를 겹겹이 쌓아올린 듯한 UI 구성입니다. 이는 이전에도 널리 쓰이고 있던 방식이지만, 구글은 ‘그림자 도구’를 적용해 각 요소들이 진짜 카드처럼 보이게 했습니다.

플랫 디자인(복잡한 그래픽 효과를 배제하고 단순한 색상과 구성을 통해 직관적인 인식이 가능하도록 구성하는 2차원 디자인 방식)의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살렸습니다.

이는 화면 상의 어떤 부분을 터치할 수 있고 움직일 수 있는지 쉽게 이해할 수 있도록 돕습니다.

* Where ?

작은 시계부터 TV 까지 다양한 플랫폼에 일관되게 적용될 수 있는 통일된 디자인 가이드라인을 만들었고, 그 결과, 머티리얼 디자인은 안드로이드 웨어 (Android Wear) 와 안드로이드 TV (Android TV) 그리고 안드로이드 오토 (Android Auto) 에 모두 적용되고 있습니다.

Material Theme Editor.

머터리얼 테마 에디터는 기본(Baseline) 테마와 함께 여행(Crane), 소셜(Fortnightly), 쇼핑(Shrine) 머터리얼 테마를 제공하고 선택한 테마의 색상(Colors), 타이포그래피(Typography), 모양(Shape), 아이콘(Icons)의 커스터마이징을 쉽게 할 수 있도록 도와줍니다. 구글에서 제공하는 머터리얼 색상 팔레트, 모서리 스타일, 서체, 아이콘들을 머터리얼 컴포넌트에 바로 적용할 수 있을뿐만 아니라 나만의 테마를 만들 수도 있습니다.

sketchappsources

스케치앱소스 사이트에서 리소스를 다운받아 머티리얼 디자인 프레임을 자유롭게 사용할 수 있습니다.

Material Design + Bootstrap

Material Design을 Bootstrap에서도 사용할 수 있도록 UI를 제공해주는 사이트입니다.

https://mdbootstrap.com/docs/jquery/

참조

부트스트랩이란? : http://blog.naver.com/PostView.nhn?blogId=su2590&logNo=220257300947&parentCategoryNo=&categoryNo=58&viewDate=&isShowPopularPosts=true&from=search

Devkuma : http://www.devkuma.com/books/pages/892

레진기술 블로그 : https://tech.lezhin.com/2018/05/25/google-io-2018-android-material-design-review

Material Design Wireframe Kit v2 Sketch Resource : https://www.sketchappsources.com/free-source/1954-material-design-wireframe-kit-2-sketch-freebie-resource.html