[React] 개발자가 바라본 머티리얼 디자인(Material Design) | 스큐어모피즘, 플랫, 머티리얼이란 무엇?

 지난 글에서는 개발자 입장에서 디자인 시스템에 대해 설명드렸습니다. 웹 앱 개발 관련 디자인 시스템은 현재 진행형이며, 딱 꼬집어서 정의 내리기가 어렵지만 어느 정도의 개념은 잡혔으리라 생각합니다. 뭔 소리여~인 분들은 아래 링크!

 

[React] 개발자가 바라본 WEB 디자인 시스템 | Design and Style Guide, Component Library or UI Kit

 

---

 많은 IT 서비스 대기업들이 디자인 시스템을 도입하고 있지만, 사실 중소형 규모의 회사 입장에서 하나부터 열까지 전부 구축하기에는 많은 어려움이 따릅니다. 그래서 이번 시간에는 이미 구축되어 있는 구글의 머티리얼 디자인 시스템에 대해 알아보겠습니다. 하지만 그전에! 저 같은 공대 감성이 풍부한 개발자를 위해 잠시 디자인적인(?) 글을 적겠습니다.

 

https://mblogthumb-phinf.pstatic.net/20160530_214/kangmo81_1464594233997GDfPe_JPEG/flat-material.jpg?type=w800

 

저도 많이 디알못이라 열심히 자료를 찾아보던 중, 제 뒤통수를 퐉! 하고 때리고 간 이미지입니다. 왼쪽부터 스큐어모피즘, 플랫, 머티리얼 디자인입니다. 사실 우리는 이미 경험해보고 알고는 있었지만 전문적인 디자이너가 아닌 이상, 상세한 용어들이나 디자인 트렌드의 변천사 또는 최신 트렌드까지 알고 있기는 힘들 수도 있습니다. 그럼 이미지 한 장 더~

 

2013년 스큐어모피즘에서 플랫 디자인으로

 

전문적인 디자인 지식이 없어 스큐어모피즘이나 플랫 디자인을 글로 설명하기는 어렵겠지만 똭! 바도 엄청난 변화가 생겼다는 느낌 아닌 느낌이 듭니다. 이렇게까지 디자인 트렌드가 급변한 이유야 여러 사정이 있겠지만, 개발자인 제 개인적인 생각으로는 왼쪽은 너무 과하고선넘음 눈뽕이 심한 것 같습니다. 근데 또 오른쪽은 너무 밋밋하네요... 심심해 심심해

 

https://forums.androidcentral.com/legacy-android-other-oss/472190-get-rid-material-design-before-being-too-late.html

 

2014년 구글이 머티리얼 디자인이라는 이름으로 플랫 디자인의 밋밋함과 심심함을 조금씩 바꿔나가기 시작합니다. 마지막 계산기 디자인을 보시면 평면에 채도와 명암으로 입체감을 줬습니다. 이제는 꼭 구글만이 아닌 다른 디자인 시스템에도 플랫 디자인 기반에 약간의 입체감을 주는 방향이 대세 같습니다. 그리고 다시 돌아가겠지... 디자인은 돌고도니까

 

머티리얼 디자인의 자세한 내용은 여기서 확인 (공식 홈페이지)

Material Design

---

 그럼 대충 디자인적인(?) 얘기를 했으니 이제는 개발적인 얘기를 하겠습니다. 지난 시간에 다뤘던 디자인 시스템을 이제 머티리얼 디자인으로 정하겠습니다.(구축하기빡쎄서) 그럼 디자인 가이드, 스타일 가이드, 컴포넌트 라이브러리가 남습니다. 당연히 디자인 시스템은 위의 모든 요소를 품고 있으니 공식 홈페이지에서 전부 확인 가능합니다. 한번 볼까요?

 

디자인 관련 가이드

 

공식 페이지 들어가시면 엄청난 영어와 문서 압박이 오지만 쫄지 마시고, 상단의 Design 탭 누르고 왼쪽에서 Introduction 선택하면 디자인 원칙, 컴포넌트, 테마 소개 등을 볼 수 있습니다. 나머지는 UI/UX 디자인 이론 관련 내용으로 본인이 디자이너이시면 한 번쯤 읽어보시기를 추천드립니다. 분량이 많으므로 필요한 부분을 먼저 보시면 좋습니다.

 

스타일 관련 가이드

 

이번에는 상단의 Components 탭을 누르시면 컴포넌트 라이브러리를 볼 수 있습니다. 그중에서 버튼을 한번 선택해 보시면 DESIGN에서는 스타일 가이드를 볼 수 있고 IMPLEMENTATION에서는 개발 관련 소스 코드를 볼 수 있습니다.

 

개발 관련 가이드

 

이제야 반가운 소스 코드가 보이는군요! 역시 대인배 구글답게 여러 플랫폼의 소스코드를 지원하고 있습니다.

하지만 Web은 당연하게도 네이티브 자바스크립트만 지원하고 리액트나 Vue.js 같은 프레임워크는 지원하지 않습니다.

 

 상단의 Develop 탭은 Design 탭과 반대로 개발자들을 위한 문서로 되어 있으며, Resources 탭은 아이콘이나 폰트 등의 리소스를 다운로드할 수 있습니다. Blog 탭은 블로그입니다. 정말 너무 많은 정보가 있어서 처음 페이지에 들어가시면 나는 누구? 여긴 어디? 를 외칠 수 있지만, 필요한 부분만 차근차근 조금씩 보다 보면 눈에 익을 거라 생각합니다.

 

오늘은 글이 너무 길어져서 이 정도로 정리하고, 다음 포스팅에서 좀 더 리액트와 관련된 내용을 다루도록 하겠습니다.

 

---

[React] 머티리얼UI (Material-UI)란 무엇? | 리액트 기반의 UI Framework, Component Library