Materialize css 프레임워크를 사용하여 홈페이지 만들기
https://codepen.io/wengdiiiy/pen/MYMoWG
https://rawgit.com/wengdiiiy/Home-Materialize-css/master/home.html
- Material 색상팔레트 참고
[Material Design 소개 영상] : https://www.youtube.com/watch?v=Q8TXgCzxEnw
[Material Design 3분만에 살펴보기!] : https://www.slideshare.net/watchncompass/3-material-design
- Material 소재를 대입해서 UI/UX를 종이나 잉크와 같은 소재와의 관계성으로 보도록 하여 User가 알기 쉬운 디자인이 되도록.
- Object의 움직임을 중요시. (움직임을 위해서 여러 객체에 다이나믹한 애니메이션 추가)
간략하게 간추려 봤어요~ 이 부분은 자세히 읽어보는 것이 좋을 것 같아요^^
https://blog.naver.com/mtmag/220106922924
* 애니메이션 : User가 기분 좋게 느끼는 속도 / 액션을 기점으로 하여 Object의 이동/변형/출현에 연속성을 부여하는 것. * 스타일 : 배색 / 타이포그래피 / 아이콘, 이미지의 사용법 - 적절한 size나 사용법에 대해 소개. 기본은 Flat 디자인처럼 보이지만, 인쇄 기반의 디자인을 취하고 있다는 점에 주목 * 레이아웃 : 레이아웃에 대한 사고방식과 구체적인 사용법에 대해 소개. 현실 세계의 소재를 다루듯이 표현 * 컴포넌트 : 여러가지 컨포넌트의 가이드라인이 소개. * 패턴 : User의 액션 부분. 텍스트 선택이나, 제스처의 의미, 액션 버튼의 접근, 검색bar 사용법 등 * 유저빌리티 : 모든 사람에게 동일한 사용 편의성이나 유저 experience를 주기 위해 지켜져야 할것.
그리고, Material Design을 기반으로 한 Framework들이 벌써부터 많이 나왔더라구요~ 아래 주소는 Material Design Framework 관련해서 정리되어 있는 곳입니다. https://superdevresources.com/material-design-web-ui-frameworks/
제가 선택한 Materializecss는 반응형 프레임워크로,
SCSS뿐만 아니라 CSS까지 제공해주고, JS와 폰트, 아이콘까지 모두 제공해주고 있어요.
구글링하다보면, 많은 사람들이 해당 프레임워크를 사용하여 만들어둔 홈페이지를 쉽게 찾을 수 있습니다. https://www.codeply.com/view/ovD4rhoqUe
클래스 명도 의미가 또렷이 들어나 있어서 사용하기에도 편했고, 원하는 레이아웃(탭/Form/..)을 사용하거나, 애니메이션을 넣어야 할 때, 필요로 하는 기능이 거의 대부분 구현이 되어 있어서 어려움이 없었어요~!
한번쯤은 프레임워크 사용해서 원하는 페이지 만들어 보는 것도 좋을 것 같습니다~