http://www.tistory.com/skin/all?isResponsiveWeb=true
요즘 티스토리에서 반응형 스킨 공모전이 열리고 있어서 여러 개발자들이 스킨을 제작해 올리고 있습니다. 구글 머티리얼 디자인의 영향인지는 모르겠으나 사이드바가 없는 경우가 많습니다. 아무리 모바일 우선(Mobile First)의 시대라 해도 넓은 화면의 모니터에서 봤을 때 사이드바가 없으면 콘테이너의 폭이 좁아질 수 밖에 없습니다. 글을 읽는데 좌우 폭이 너무 넓으면 문장을 따라가기 힘들기 때문이죠. 좁은 모바일 기기에서는 어쩔 수 없이 사이드바가 나타나지 않아야 하는 게 정상입니다. 좁기 때문에 본문 영역의 하단에 배치하거나 버튼을 클릭했을 때 사이드바가 바로 나타나는 오프 캔버스(Off Canvas) 레이아웃이 필요합니다. 넓은 화면에서는 항상 사이드바가 나타나도록 하는 것이 좋습니다. 그래야 진정한 반응형이라고 할 수 있습니다. 모바일 기기만을 위해 디자인 한다면 반응형 디자인이라고 할 수 없죠. 그저 모바일 디자인일 수 밖에 없습니다.
http://materialdesignblog.com/top-15-material-design-templates-for-wordpress/
구글 머티리얼 디자인에 관한 사이트의 블로그 글입니다. 어디를 봐도 사이드바가 없습니다. 사이드바가 필요한 것은 현재 보고 있는 글 외에 다른 콘텐츠를 찾기 위해 최근 글 목록이나 카테고리가 있어야 하는데 없죠. 글 하단에 내려가야 겨우 이전 글, 다음 글의 링크가 나옵니다. 이래가지고는 방문자가 사이트를 둘러볼 기회가 없어지고 그만큼 페이지 뷰는 줄어들기 마련입니다. 모바일에서야 둘러보기 어렵기 때문에 하나의 글만 보고 나가는 일이 허다하지만 면적이 넓은 화면에서는 방문자는 뭔가를 찾기 마련입니다. 위와같은 레이아웃에서는 힘듭니다. 사이드바가 없기 때문에 콘텐츠 영역이 좁고 좌우 여백(파란색 부분)은 쓸모 없는 공간이 돼있습니다. 비효율적입니다. 또한 글의 가독성을 높이기 위해 콘텐츠 영역의 패딩 부분도 넓습니다(분홍색 부분). 머티리얼 디자인 관련 사이트로서 유명한 사이트다 보니 내비게이션에 대해 그다지 신경 쓰기 않은 모양입니다만 일반 블로그도 이런 레이아웃을 따라하면 안되겠죠. 넓은 화면인데도 불구하고 사이드바를 글의 하단에 배치하는 것도 문제입니다. 다른 콘텐츠를 찾으려면 페이지의 하단으로 가라는 강요 밖에 안됩니다.
구글 머티리얼 디자인이 단순해서 좋지만 어디까지나 모바일 전용입니다. 모바일에서는 마우스 오버라는 기능이 없어서 항상 터치(클릭)을 해야 하죠. 주 내비게이션을 보려면 좌측 상단의 아이콘을 클릭해야 나타납니다. 하지만 큰 화면에서는 내비게이션이 클릭하지 않아도 항상 보이도록 해야 합니다. 그래야 사이트에 어떤 내용이 있는지 바로 알 수 있죠. 뭔가 클릭해야 볼 수 있다면 방문자의 수고를 강요하는 것이 됩니다.
필자는 매년 티스토리의 블로그 스킨을 만들어 사용하고 있습니다. 올해는 마침 머티리얼 디자인 프레임워크가 여러 가지 개발되고 있어서 그중 부트스트랩용 프레임워크를 사용해 만들어봤습니다. 하지만 구글의 머티리얼 디자인 가이드를 따라하지는 않았습니다. 카드라는 요소는 일정한 그림자 효과가 있는데 이를 그대로 적용하니 상당히 투박해보입니다. 그래서 그림자 효과를 많이 줄였습니다. 최근에 들어서 플랫 디자인이 유행하고 있었는데 머티리얼 디자인으로 인해서 다시 그림자 효과가 살아나고 있습니다. 위 그림은 머티리얼 디자인을 적용한 워드프레스 테마입니다. 구글의 머티리얼 디자인 가이드대로 하자면 카드요소의 그림자 효과가 많아야 하지만 거의 없습니다.부드러워 보이죠. 카드 요소를 그대로 적용하면 큰 화면에서는 상당히 투박해보입니다.
https://github.com/google/material-design-lite
얼마전에 구글에서 머티리얼 디자인 라이트(Material Design Lite)가 나왔는데 이것만으로 사이트를 만들기에는 부족합니다. 그래서 자신들도 프레임워크가 아니라고 하고 있습니다. 구글 머티리얼 디자인 가이드에 충실한 라이브러리입니다.
