PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머티리얼 디자인 라이트 함께 보기

상세페이지

  • HOME > 월별 특집 & 기획

PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머티리얼 디자인 라이트 함께 보기

머티리얼 디자인 material design

1. 머리티얼 디자인 가이드의 핵심과 의의
2. 기존 사용자들을 위한 이밥차의 현명한 투자
3. 기능에 브랜드를 부여하는 리멤버 앱 머티리얼 디자인 리뉴얼 과정
4. "앱 체류시간 3배 늘었어요" 해먹남녀의 '머티리얼 디자인' 적용기
5. 청춘, 구글이 정의 내린 디자인 트렌드
6. PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머리티얼 디자인 라이트 함께 보기

구글이 지난해 공개한 머티리얼 디자인 가이드는 모바일 화면 디자인의 혁명이었다. 애플만이 자체 원칙에 따라 철저하게 조작하던 모바일 친화 UI·UX를 시작부터 마무리 단계까지 재정립해 하나의 사조를 완성했다. 이를 계기로 화면이 부족하지 않은 간결하고 유려한 디자인에 사용자 만족도가 높아지고 있다. 최근 구글은 머티리얼 디자인을 적용한 앱들의 성과에 대해서도 공개했는데, 제대로 적용한 앱의 경우 그 성과가 상당히 높아졌다. 과연 머티리얼 디자인은 모바일 UX의 해답일까. 머티리얼 디자인의 핵심과 의의, 머리티얼 디자인을 적용한 후 달라진 앱 서비스, 그리고 웹 디자인에의 적용 가능성까지. 머티리얼 디자인의 모든 것을 알아본다.

진행. 월간 w.e.b. 편집국


머티리얼 디자인 가이드는 철저히 애플리케이션 용일까? 그렇지 않다. 지난 8월 구글은 PC용 웹사이트에서 활용할 수 있는 프레임워크 모음인 ‘머티리얼 디자인 라이트’를 발표했다. 이 프레임워크에는 어떤 항목이 포함돼 있으며, 어떤 경우에 사용해야 할까? 

글. 이종철 편집장 jude@websmedia.co.kr



머티리얼 디자인 라이트의 존재 이유

구글은 개발자들을 열심히 지원하는 회사이며 동시에 세계에서 가장 뛰어난 개발사기도 하다. 구글은 이전부터 폴리머와 부트스트랩 등 커뮤니티를 중심으로 하는 커뮤니티들을 꾸준히 지원해왔고, 그 폴리머와 부트스트랩을 대신할 프레임워크로 머티리얼 디자인 라이트(Material Design Lite, 이하 MDL)을 제시한 것이다. 그런데 왜 라이트일까? 간단하다. 안드로이드는 구글 월드지만 인터넷은 구글의 것이 아니다. 머티리얼 디자인 가이드를 준수하면 구글 플레이 스토어에서 ‘아름다운 앱’으로 선정해주거나 검색 결과 상위에 노출시켜줄 수 있지만 웹사이트에서는 거대한 리워드를 줄 순 없다.

PC 웹은 MDL이 없어도 충분히 아름답게 만들 수 있다. 다만 구글이 제시하는 통합 경험에는 맞지 않는다. 그래서 PC에서 구글은 ‘제시’할 뿐이다. 그렇다면 MDL을 꼭 사용해야 하는 이유는 무엇일까?


MDL: 구성 요소

MDL은 머티리얼 디자인을 코드로 구현한 컴포넌트 라이브러리다. 따라서 일반적인 웹 디자이너나, 워드프레스 프리미엄 CSS 기능을 연 99달러 내고 사용한다고 해서 쉽게 쓸 수 있는 건 아니다. 자바스크립트로 작성돼 있으며, 기존 프레임워크를 수정한 것이 아니라 처음부터 작성돼 있다. BEM과 Sass로 작성됐으며 깃허브(github.com/google/material-design-lite)에서 파일 소스를 제공한다.

MDL은 웹사이트(www.getmdl.io)를 통해 예제와 내려받을 수 있게 제시하고 있다.

상세항목은 템플릿, 컴포넌트, 서체, 커스터마이즈 탭으로 구분했으며, 자주묻는 질문(FAQ) 항목까지 운영하고 있다. 서체는 머티리얼 디자인 가이드에서 기본으로 제시하는 Roboto를 제공한다. 서체 크기와 색상 지정을 어느 정도 예시로 보여주니 사이트 성격에 따라 참고만 하도록 하자.




MDL에서 제공하는 블로그 템플릿




MDL에서 제공하는 대시보드 템플릿


MDL 컬러 커스터마이즈


MDL 시작하기(GETTING STARTED)

시작 전 준비해야 할 것은 서버다. 구글의 CDN을 쓸지 로컬에 설치해서 쓸지를 결정해야 한다. 당연히 두 방식의 코드는 달라지며, 구글의 것을 사용했을 땐 업데이트가 자동으로 이뤄진다. 원치 않아도이뤄지니 조심하자. MDL에는 대부분 CSS가 적용돼 있으므로 자신의 웹사이트가 CSS 기반인지를 확인한다면 이외의 사용 방법은 다른 프레임워크와 크게 다르지 않다. 다음 항목에서 주의할 것이 머티리얼 디자인임을 결정하는 두 가지. 템플릿과 컬러다.


MDL 템플릿(Templates)

MDL 사이트에서 소개하는 템플릿은 블로그/안드로이드/대시보드/텍스트 중심 페이지/기사 단독 페이지 총 다섯 가지다. 템플릿 대부분이 콘텐츠 기반 사이트임을 쉽게 인지할 수 있다. 따라서 템플릿 모두 반응형으로 제작돼 있다.

우선 블로그 템플릿은 고화질 백그라운드 이미지 및 타일뷰를 적용한 일반적인 템플릿이다. 안드로이드닷컴 템플릿은 안드로이드닷컴(android.com)에 일부 적용한 머티리얼 디자인을 그대로 쓸 수 있는 템플릿이다. 머티리얼 디자인 가이드처럼 햄버거 메뉴(내비게이션 드로어)와 GNB를 활용할 수 있어 간단한 웹사이트나 마이크로사이트 제작에 활용할 수 있다. 대시보드 템플릿은 구글 애널리틱스를 상상하면 된다. 각종 차트나 그래프, 체크박스 등을 삽입할 수 있다. 텍스트 중심 템플릿은 GNB를 탭으로 구현한 콘텐츠 템플릿이다. 기사 단독 페이지 템플릿은 랜딩 페이지를 구현한 것으로, 머티리얼 디자인에 포함된 ‘출판 디자인’의 요소를 웹에서 구현한 템플릿이다. 따라서 그림자나 구분선, 세로 레이아웃 등을 포함한다. 각 항목은 미리 보기와 소스 보기를 제공한다.


MDL 컬러 적용하기(Customize)

머티리얼 디자인 가이드는 기본적으로 두 가지 색상을 중심으로 사용한다. 주조색과 보조색이다. 주조색은 컬러 팔레트로 제작해 배경, 콘텐츠 영역, 아이콘 등에 쓰이는 브랜드 컬러이며, 보조색은 플로팅 액션 버튼처럼 하이라이트를 줄 때 사용한다. 커스터마이즈 탭에서는 이 두 색상을 미리 준비된 머티리얼식 색상을 통해 조합해볼 수 있다. 원형 팔레트에서 두 가지 색상을 차례대로 선택하면 된다. 만일 선택한 두 컬러가 머티리얼 디자인의 조합에 맞지 않는다면 보조색을 자동으로 조정해준다. 예를 들어 메인 컬러를 주황, 버튼을 녹색으로 선택한다면 팔레트의 녹색이 아닌 밝기를 조정한 녹색으로 나타내주는 방식이다. 커스터마이징이 완료되면 오른쪽 하단에 메뉴로 작성되며, 하단에 나타난 코드로 자신의 웹사이트에 바로 적용할 수 있다. 로컬 파일 설치를 원하면 받은 코드를 수정해야 한다.


MDL 컴포넌트(Components)

머티리얼 디자인에서 가장 눈에 띄는 요소인 컬러와 템플릿을 정했다면 이제 컴포넌트를 장착하자. 수트를 입을 때 넥타이와 헹거치프를 착용하는 과정에 해당한다고 볼 수 있다. 넥타이와 헹거치프가 전체 룩의 이름을 결정할 때도 있는 만큼 중요한 과정이다.

머티리얼 디자인의 버튼들은 전체 룩에 맞게 간소하고 생동감 있는 동시에 기능을 충분히 암시하는 형태로 이뤄져 있다. 컴포넌트 항목에서는, 머티리얼 디자인의 아름다운 버튼(플랫 버튼과 플로팅 액션 버튼 모두), 토글 바, 툴팁, 뱃지, 로딩 애니메이션(프로그레스 바 혹은 스피너) 등을 대부분 제공한다. 이외 코드로 구현할 수 있는 레이아웃(그리드, 탭, 풋터), 구글 UX 전체의 핵심인 카드 등도 제공하고 있다. 만일 머티리얼 디자인 장착을 원치 않지만 요소만 가져다 쓰고 싶은 사용자가 있다면, ‘그냥 쓰라’는 듯 모든 코드를 제공한다.


MDL을 과연 써야 할까

스마트폰용 머티리얼 디자인 가이드의 핵심은 메타포, 빛과 그림자, 플로팅 액션 버튼, 편집 디자인의 차용 등이다. 이중 대부분은 작은 스크린을 최대로 활용하기 위한 도구이므로 MDL에서는 이들 대부분이 빠져 있다. 즉, PC 웹에서는 머티리얼 디자인이 모바일에서 만큼 파괴력이 있진 않다. 다만 여러 프레임워크들을 비교하자면 다른 이야기가 된다. 부트스트랩 등에도 비주얼 요소가 포함돼 있지만 이들 프레임워크는 편의성이 우선, MDL은 사조가 우선이다. 즉, 디자인 통일성 전제 하에 나온 것이므로 이외의 것들보다 적용 시 디자인 통일감이 강하다. 동시에 요소들의 기능과 역할도 모바일과 통일성이 있다. 만일 당신이 디자인에 자신이 없으며, 부트스트랩 등의 프레임워크를 가져다 쓰는 개발자라면 충분히 도입해볼 이유가 있다는 뜻이 된다.

실력 있는 웹 제작사라면 어떨까. MDL을 적용하는 것이 의미가 있을까? 있다. 안드로이드 천국인 한국에서 머티리얼 디자인은 곧 대부분의 사람에게 익숙해질 것이다. ‘익숙함’을 모토로 하는 마이크로사이트, 복잡한 정보를 갖고 있는 사이트들이라면 시도해볼만 한 가치가 있다. 언젠가 구글 PC 검색창에서 ‘아름다운 웹사이트 모음’이라며 검색 결과 상위에 노출시켜줄지도 모르는 일 아닌가. 그러지는 않겠지만. 


 

카드의 경우 구글에서 쓰는 와이드, 정사각형, 이벤트 분리형을 모두 제공한다  

tags 디아이투데이 , ditoday , 월간웹 , 월간web , 이종철 편집장 , MDL , Material Design Lite , 머티리얼 디자인 라이트 , 머티리얼 디자인 , 컴포넌트 라이브러리 , 구글 , 웹사이트 개발 , 웹 디자인

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사

최신뉴스
월별 특집 & 기획
“앱 체류시간 3배 늘었어요” 해먹남녀의 ‘머티리얼 디자인’ 적용기
월별 특집 & 기획
청춘, 구글이 정의 내린 디자인 트렌드
월별 특집 & 기획
PC 웹은 머티리얼 디자인 가이드를 따라야 할까? 머티리얼 디자인 라이트 함께 보기
월별 특집 & 기획
크리에이티브에게 미친 영감, 매드 맥스, 어도비 맥스
월별 특집 & 기획
어도비 맥스 2015에서 새로 공개된 것들

정기구독신청