레이아웃 소개

구글은 안드로이드 디자인 가이드라인을 만들면서, 종이 느낌을 추상화한 머티리얼 디자인을 발표했습니다.

웹에서도 머티리얼 디자인이 사용되길 바라며, 머티리얼 디자인 라이트 라는 라이브러리를 배포했는데, 이를 이용해서 레이아웃을 만들어보았습니다. 처음 의도는 모바일/PC 공용 레이아웃을 목표로 진행하고 있었으나, IE 9 이하 버전에서 호환성 문제가 있다는 것을 발견하여서 개발을 중단하고 모바일용 레이아웃으로 배포합니다.

프로토타입이라 생각하시고 써보실 분들을 위해서 자료를 올려둡니다.

미리보기

capture.PNG

 

문제점

  • IE 9 이하의 브라우저의 호환성이 지켜지지 못함. (IE10 이상의 브라우저에서 정상 동작)
  • 기본 스타일을 지정하고 있기 때문에, 함께 사용하는 모듈 스킨이 변형된 모양으로 나타날 수 있음.
  • 색상 두가지를 선택할 수 있지만, 구글이 모든 색상 조합에 대해서 코드를 제공하고 있지는 않음.

라이선스

MDL 라이브러리는 구글이 개발하였고, 아파치 라이선스를 따릅니다.

MDL 라이브러리 이외의 코드는 미솔이 작성했고, GPL v2 라이선스를 따릅니다.

Atachment
첨부
  • profile
    종이 레이아웃이라고 하니까 뭔가 어감이 예쁘네요~ 완성판을 만들어주세요 ㅎ
  • profile ?
    감사합니다 ㅠㅎㅎ
  • profile
    맙소사... 어쩜 이렇게 레이아웃이 이쁠수가 있죠...??
    거기다가 서브메뉴 까지 지원하다니...
    심플함의 완성이네요!!

    테스트 해보면서 발견된 문제는 아래정도...
    진보라,인디고,밝은파랑,연한초록,푸른회색 선택시 레이아웃 깨짐
    강조색상 입력시 레이아웃 깨짐

    빨리 완성된 모습도 보고 싶네요!!
    개인적으로 테마중에 붉은색 과 갈색이 마음에 들어요!
  • profile ?
    평가 감사합니다 ㅎㅎ
  • ?
    와... 대단합니다. 서브메뉴까지.. ㅠㅠ 원하는 레이아웃이네요 감사합니다
  • profile
    감사합니다