Last Updated:

베일을 벗은 구글의 머티리얼 디자인 라이트

카테고리: 블로그 글
머티리얼 디자인

어제 구글은 머티리얼 디자인 라이트(MDL)를 배포한다고 공식 발표했다. 이름에서 풍기듯 머티리얼 디자인의 축소 버전이라고 생각하겠지만 실은 그게 아니다. 웹사이트에서 머티리얼 디자인을 쉽게 구현할 수 있는 프레임워크다.

구글이 I/O 2014 콘퍼런스에서 머티리얼 디자인을 소개한 그해, 상당수의 구글 제품들이 180도로 변했다. 이젠 구글 드라이브부터 안드로이드 OS까지 제품 전체가 머티리얼 디자인의 미니멀리즘을 반영하고 있다. 구글의 대표적인 서비스인 검색 페이지마저 머티리얼 디자인 요소들을 받아들인다.

구글의 제품들 외에 다른 제품에서도 머티리얼 디자인 원칙을 채택하도록 널리 퍼뜨리는 데는 넘기 힘든 장애물이 있다. 그 장애물은 여러 프레임워크에서 요구하는 스타일과의 경쟁이다. 구글은 부트스트랩처럼 커뮤니티를 중심으로 머티리얼 디자인을 합리적으로 다루려고 시도했다. 머티리얼 디자인 라이트는 그 시도 중에 하나로서 구글에서 승인한 공개 버전이다.

머티리얼 디자인은 부트스트랩의 여러 부분을 대체할 수 있다. 하지만 부트스트랩에서 제공하는 모든 기능에 일부러 맞추려고 하지 않았다. 그보다 머티리얼 디자인 라이트는 머티리얼 디자인 명세에서 지정한 구성 요소들을 구현할 셈이다. 머티리얼 디자인 라이트는 가장 일반적이면서 정밀한 솔루션을 제공한다.  — getmdl.io/faq

 

머티리얼 디자인 라이트를 어떻게 활용할까?

머티리얼 디자인을 코드로 구현한 머티리얼 디자인 라이트는 웹페이지와 웹앱을 위한 작은 컴포넌트 라이브러리다(압축된 상태에서 파일 크기가 약 27Kb).

머티리얼 디자인 라이트는 BEMSass로 작성됐다. GitHub에서 파일 소스를 내려받고 나서 본인의 디자인에 맞게 코드를 수정하면 된다. 직접 다운로드하지 않고 구글이 선호하는 방식에 따라 구글 CDN으로부터 프레임워크 전체를 가져올 수도 있다.

머티리얼 디자인 라이트를 본인의 디자인과 통합하는 데 가장 어울리는 요소를 선택할 수 있다. 정말 단순한 선택 옵션을 찾는다면 구글에서 제공하는 테마 커스터마이저를 살펴보라. 테마 커스터마이저에서 프레임워크 소스를 조금씩 변경한 후에 디자인 전체에 적용하면 된다.
 

머티리얼 디자인 라이트에는 뭐가 있을까?

머티리얼 디자인 라이트 컴포넌트 라이브러리의 특징은 체크 박스, 텍스트 입력 필드, 버튼같이 디자인에 흔히 쓰는 UI 요소들을 MD 버전으로 제작했다는 것이다. 그와 더불어 카드, 슬라이더, 스피너spinner, 탭 같은 머티리얼 디자인에만 있는 UI 요소도 있다.

머티리얼 디자인 라이트에는 다음과 같은 다섯 가지의 템플릿(블로그, android.com 스킨, 대시보드, 문자 위주로 된 웹페이지, 독립형 기사 페이지)이 있다.





머티리얼 디자인 라이트의 브라우저 지원

머티리얼 디자인 라이트가 ‘모던 에버그린 브라우저[1](크롬, 파이어폭스, 오페라, 마이크로소프트 엣지)와 사파리’에서 잘 실행된다고 구글은 말한다. (좀 더 분명하게 전달되도록 애플의 사파리를 제외하고) 대다수 사용자가 사용하는 브라우저의 최근 버전 2개에서 동작한다.

머티리얼 디자인 라이트는 콘텐츠의 비중이 큰 사이트에 맞도록 제작되었다. 그 핵심 목적들은 다음과 같다. 여러 브라우저에서 호환되는 ‘브라우저 이식성’, 다양한 기기에서 접근할 수 있는 ‘기기 독립성’, 브라우저의 최신 버전부터 서서히 낮추어 실행되도록 하는 ‘적절한 낮춤’이다. 그중 앞의 2개는 반응형 웹 디자인의 대표적 사례와 관련되어 있다. 최근 몇 년 동안 점진적 향상이 적절한 낮춤을 대신해서 사용되었지만, 시대에 뒤처진 브라우저를 지원하는 측면에서 적절한 낮춤은 중요한 구실을 한다.

머티리얼 디자인 라이트에는 ‘Cutting the mustard[2]’ 테스트가 있다. 이 테스트를 통과한 후에 MDL의 자바스크립트를 점진적으로 향상하는 작업을 프레임워크에서 할 수 있다.

IE9처럼 오래된 브라우저들은 테스트를 통과하지 못한다. 그런데도 CSS only 버전은 제공할 것이다. IE8 같은 더 오래되고 잘 쓰이지 않는 브라우저들은 CSS only 버전조차 다 지원하지 못한다. 예를 들어, Flexbox[3]를 사용해도 IE8과 IE9에서는 처리할 수 없다. 하지만 MDL의 적절한 낮춤에서는 IE8에서도 프레임워크의 일부분을 올바르게 보여주어야 한다.
 

머티리얼 디자인 라이트에 있는 이슈

머티리얼 디자인에서 예기치 못한 상황에 수없이 많은 UX 이슈들이 드러나는데, 머티리얼 디자인 라이트는 그 이슈들을 자동으로 상속해 버린다. 예로, 머티리얼 디자인의 가장 뛰어난 요소 중에 플로팅 (액션) 버튼이 있다. 이 버튼은 위치가 자주 바뀐다. 더구나 모바일에서는 그 버튼을 탭하려고 엄지손가락의 관절 부위까지 터치해야 한다.

머티리얼 디자인 라이트는 대체로 잘 만들어졌다. 하지만 미심쩍은 접근 방식들도 보인다. 다른 프레임워크이긴 하나, 레이아웃을 자바스크립트 소스에 의존하는 방식이 한 가지 예가 된다.

머티리얼 디자인 라이트는 타이포그래피에까지 영향이 미친다. 상황은 점점 미궁 속으로 빠져들어 간다. 기본 폰트는 Roboto다. 당신이 이 폰트를 변경할 수 있다 할지라도 당신처럼 사용자들도 변경할 수 있을 거라고 나는 장담할 수 없다.

부트스트랩과 파운데이션 같은 CSS 프레임워크에는 늘 비주얼 요소가 있다. 머티리얼 디자인 라이트처럼 튀지 않지만. 머티리얼 디자인 라이트은 앞의 CSS 프레임워크보다 한 걸음 더 나아가 완벽한 비주얼 스타일을 전달한다. 마치 어젠더가 더해진 프레임워크같다.
 

머티리얼 디자인 라이트 사용해야 하나?

구글은 머티리얼 디자인 라이트를 대부분의 웹사이트에서 구축해야 하는 방식처럼 생각한다. 구글에서 이 방식을 적용하도록 압력을 가하진 않을 것이다. 그러나 만일 적용하기로 하면 구글은 분명히 강하게 감행할 것이다. 구글은 고객에게 제공하는 검색 결과가 빠르고, 명확하며, 사용자 친화적인 페이지인지 확실히 하고 싶어한다. 검색 엔진 알고리즘과 자체적으로 제어하는 프레임워크를 같이 사용하는 것보다 더 나은 방법이 있을까?

어느 프레임워크를 사용하든지 반드시 다른 프레임워크에서 비주얼 요소들을 가져와 넣는다. 많은 사람이 이용하는 대다수의 프레임워크들은 융통성이 있어서 적용이 잘 된다. 이 점에서 머티리얼 디자인 라이트는 다르다. 이는 그저 평범한 프레임워크가 아니라 지정된 디자인 접근법을 선호하는 프레임워크라서 그렇다.

디자인 가이드로서의 머티리얼 디자인은 구글의 제품들을 하나의 브랜드로 통일하려는, 잘 짜인 뛰어난 시도다. 머티리얼 디자인이 실패하게 된다면 그 이유는 구글의 브랜드 이미지가 너무 강해서 다른 제품에서 쓰이지 못하기 때문일 것이다.

우리는 머티리얼 디자인의 디자인에 담긴 지혜를 배웠다. 하지만 머티리얼 디자인을 변경하지 않고 통째로 실행(머티리얼 디자인 라이트의 강점)해야 하는지 필자는 여전히 이해하기 어렵다.
 

벤지 모스 BENJIE MOSS

BEN MOSS벤지 모스는 WebdesignerDepot의 편집자이다. 그는 늘 마라톤 대회를 위해 훈련하고 있다. 트위터(@BenjieMoss)에서 그를 만날 수 있다. 벤지 모스의 글 보기

이 글은 Webdesigner Depot의 기사를 번역한 것으로 필자인 Benjie Moss씨로부터 허락를 받고 번역했습니다. 원본은 ‘GOOGLE UNVEILS MATERIAL DESIGN LITE’에서 확인할 수 있습니다.

 


[1] 에버그린 브라우저(evergreen browser): 늘 안정된 최신 버전으로 자동 업데이트하는 브라우저로 크롬, 파이어폭스, 사파리, IE10을 말한다. http://eisenbergeffect.bluespire.com/evergreen-browsers/
[2] Cut the mustard: 기대에 부응하는 것만큼 좋다는 의미. Cutting the mustard 테스트는 영국 BBC responsive 팀에서 만든 용어로, 브라우저에 맞는 최소한의 기능을 정의하는 테스트다. 여기에는 자바스크립트를 지원하지 않는 브라우저를 이용하는 소수의 사용자를 배려한다는 목적도 있다. https://decadecity.net/blog/2014/03/06/cutting-the-mustard
[3] 마이크로소프트는 IE10부터 Flexbox를 지원하기 시작했다. https://msdn.microsoft.com/ko-kr/library/Dn265027(v=VS.85).aspx

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다