Meteor에서 Material Design 사용하기

Development / Materialdesign / Materilize / Polymer / Meteor

부트스트랩에서 탈피하여 이번에 제작하는 서비스에는 메테리얼 디자인(http://www.google.com/…/s…/material-design/introduction.html)을 적용해보자라고 마음을 먹었습니다. atmosphere에 있는 패키지를 통해 메테리얼 디자인을 적용하는 방법은 (경험측상)크게 세가지 정도가 있는 것 같습니다.

1. 메테리얼 디자인이라고 하면 제일 먼저 폴리머(https://www.polymer-project.org/)가 떠오르지요! 바로 미티어용으로 포팅된 폴리머 패키지를 사용하는 방법입니다.

ecwyne:polymer-elements(https://atmospherejs.com/ecwyne/polymer-elements)라는 패키지를 이용하면 되는데, 폴리머의 파일들이 미티어 빌드시에 public/bower_components/ 경로에 자동으로 복사되고, 이 중 사용할 폴리머 요소의 .html 파일을 main.html에서 참조해서 사용하는 방식입니다. 그냥 bower로 설치했다고 생각하시면 됩니다. 조금 불편하지요. 또한 서버가 새로고침 될 때 마다 폴리머 파일들을 통째로 다시 복사(로드)하기 때문에 빌드 속도가 매우 느려지는 단점이 있습니다. 또 웹앱에서 미묘하게 잘 동작하지 않는 부분(네비바)이 있습니다.

장점이라면, 상대적으로 매우 안정된 메테리얼 디자인 프레임웍인 폴리머를 사용할수 있다는 것입니다. 모바일을 고려하지 않아도 되는 서비스라면 충분히 이용할만 합니다.

2. 부트스트랩을 메테리얼 디자인으로 바꿔주는 fezvrasta:bootstrap-material-design(https://atmospherejs.com/fezvrasta/bootstrap-material-design) 패키지를 사용하는 방법입니다. 기존에 부트스트랩을 이용하고 있던 웹서비스에서 마이그레이션을 할 때 편리할 것 같습니다. 이건 직접 사용해보지 않아 길게 설명드리기는 힘들 것 같습니다.

3. 마지막으로, Materialize(http://materializecss.com/)의 미티어 포팅버전인 d0minikk:materialize-meteor(https://atmospherejs.com/d0minikk/materialize-meteor)을 사용하는 방법입니다. 제가 최종적으로 고른 방법이기도 한데요, 제일 쉽고 빠르게 메테리얼 디자인을 적용할 수 있는 방법이라고 생각됩니다.

하지만 단점이라면.. 아직 정식 버전이 아니기에 버그가 상당수 존재하는 것 같습니다. 제가 발견한 것만으로도 두 개 정도의 버그가 있었는데, 하나는 본 Materialize에는 패치가 되었지만 미티어 포팅버전에 적용이 되어있지 않는 것이었고(text input box 초기화 문제), 하나는 본 Meterialize에도 수정이 되지 않아(select box 초기화 문제) GitHub Issue에 관련 글이 올라와 있는 상태였습니다.

전자의 경우에는 d0minikk:materialize-meteor가 참조하는 버전이 아직 v0.92.1(본 Meterialize는 v0.94.1)에 머물러있어 생긴것이라, 제가 급한 마음에 패치한 버전으로 PR을 보내놓기는 했는데, 잘 관리가 안되는 것 같았습니다. 일단 임시로 lyuggang:materialize-meteor 패키지를 v0.94.1로 만들어두었으니, 패치가 되기 전 까지는 이용을 하시면 될 것 같습니다.

후자의 경우는 페이지가 렌더링 될 때, select element에 임의로 material_select() 메소드를 실행해주면 정상적으로 이용이 가능합니다.
기타 아이콘이나 텍스트박스의 라벨 문제 같은 것들이 있었는데, 차차 수정 될 것이라 생각합니다.

Share on : Twitter, Facebook or Google+