Materialize css 프레임워크를 사용해서 홈페이지 만들기

코드는 전체 소스 코드 에서 확인 가능.

Material Design ?

Material Design 소개 영상

Material design 3분만에 살펴보기 de Seokin Hwang

Material Design 원칙

Material 소재를 대입해서 UI/UX를 종이나 잉크와 같은 소재와의 관계성으로 보도록 하여 User가 알기 쉬운 디자인이 되도록!

Object의 움직임을 중요시! (움직임을 위해서 여러 객체에 다이나믹한 애니메이션 추가)

Material Design 가이드라인

간략하게 간추려 봤는데, 이 부분은 자세히 읽어보는 것이 좋을 것 같다. (http://blog.naver.com/mtmag/220106922924)

• [애니메이션]
  User가 기분 좋게 느끼는 속도 / 액션을 기점으로 하여 Object의 이동/변형/출현에 연속성을 부여하는 것
• [스타일]
  배색 / 타이포그래피 / 아이콘, 이미지의 사용법 - 적절한 size나 사용법에 대해 소개. 기본은 Flat 디자인처럼 보이지만, 인쇄 기반의 디자인을 취하고 있다는 점에 주목
• [레이아웃]
  레이아웃에 대한 사고방식과 구체적인 사용법에 대해 소개
• 현실세계의 소재를 다루듯이 표현
• [컴포넌트]
  여러가지 컨포넌트의 가이드라인이 소개
• [패턴]
  User의 액션 부분. 텍스트 선택이나, 제스처의 의미, 액션 버튼의 접근, 검색bar 사용법 등
• [유저빌리티]
  모든 사람에게 동일한 사용 편의성이나 유저 experience를 주기 위해 지켜져야 할것

느낀점

Materializecss는 반응형 프레임워크로
SCSS뿐만 아니라 CSS까지 제공해주고, JS와 폰트, 아이콘까지 모두 제공해주고 있다.

구글링하다보면, 많은 사람들이 해당 프레임워크를 사용하여 만들어둔 홈페이지를 쉽게 찾을 수 있다. (http://www.codeply.com/view/ovD4rhoqUe)
클래스 명도 의미가 또렷이 들어나 있어서 사용하기에도 편했고, 원하는 레이아웃(탭/Form/..)을 사용하거나, 애니메이션을 넣어야 할 때, 필요로 하는 기능이 거의 대부분 구현이 되어 있어서 어려움이 없었다. 한번 쯤은 프레임워크 사용해서 원하는 페이지 만들어 보는 것도 좋을 것 같다.