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

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

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

 

---

 [React 리액트 (실무)]라는 카테고리를 만들고 뜬금없이 디자인 관련된 글을 장황하게 두 번이나 올린 이유는, 바로 오늘 소개하는 머티리얼 UI를 꺼내보기 위한 떡밥 준비였습니다. '머티리얼이 뭐여~ 먹는거여~?' 하시는 분들은 위에 있는 링크 한 번씩 보시고, 이번에는 머티리얼 UI 사용법보다 일단 이게 뭐하는 물건인지 개념 설명부터 들어가겠습니다.

누구입니까 당신은?

 

 지난 글에서 설명했듯이 2014년 구글이 머티리얼 디자인 시스템을 발표하고 웹 앱 개발에 있어 많은 변화가 있었습니다. 하지만 아쉽게도 당연하게 구글에서 리액트 관련 소스코드는 제공하지 않고 네이티브 자바스크립트만 지원하고 있는 실정입니다. 이때 똭! 머티리얼 디자인 가이드라인을 따르면서 리액트에서 바로 쓸 수 있는 컴포넌트 형태의 UI 프레임워크가 등장한 것이었습니다~ 위에 영어 설명처럼 "빠르고 쉽게 웹 개발. 만들어라 너의 디자인 시스템..." 맞나?

 

https://material-ui.com/

Material-UI: A popular React UI framework

 

왼쪽 사이드바 메뉴

 

 "용기 있는 자만이 아름다운 웹을 얻는다!"라는 옛말처럼 쫄지마시고 공식 페이지 접속 후 왼쪽 사이드바를 주목해 보세요. '생각보다 정보가 별로 없는데~?'라는 거는 페이크고 大분류 안에 中분류 안에 小분류... 엄청난 양의 문서 분량이지만 게다가 영어, 필요한 부분부터 우선순위를 두고 그때그때 차근차근 보시면 됩니다. 그럼 잠깐 같이 훑어볼까요?

 

샘플 코드는 못 참지!

 

 문서량이 너무 많아서 중요한 부분만 집고 설명하겠습니다. 언제나처럼 Getting Started 누르면 가장 중요한 것들이 나오는데, 자세한 사용법은 추후에 하나하나씩 올릴 예정이고 이번에는 Templates 화면을 보시면 웹에서 가장 많이 사용하는 기능의 화면 및 샘플 소스코드를 깃허브를 통해 볼 수 있습니다. 한번 들어가서 보시면 감이 올 거라 생각합니다!?

 

반응형의 핵심 그리드

 

 드디어 컴포넌트 종합 선물 세트 등장입니다! 中분류에서 小분류로 나눠지는데 나름 중요한 순서대로 올려놓은 것 같습니다. 먼저 中분류를 보면 Layout, Inputs, Navigation, Surfaces, Feedback, Data Display, Utils, Lab 있습니다. 이번에는 레이아웃의 그리드 눌러보시면 그리드 관련 시스템 설명과 데모 및 샘플 코드가 제공됩니다. 복붙 대환영!

 

컴포넌트의 꽃 Button

 

 이번에는 버튼입니다. 버튼의 스타일이나 이벤트 핸들링 등을 직접 조작해 보면서 알아볼 수 있습니다. 컴포넌트 하나하나씩 설명하기에는 정보가 너무 많으니, 뭔가 땡기는(?) 컴포넌트가 있다면 꼭 체크해보셔요~ 그럼 中분류 설명 ㄱㄱ

 

1. Layout
   • 그넘의 반응형 대응과 컴포넌트의 위치나 정렬 등
2. Inputs
   • 입력 관련 기능들의 컴포넌트 (Button, Checkbox, Radio 등)
3. Navigation
   • 웹사이트 이동을 도와주는 내비게이션 (Menu, Tabs 등)
4. Surfaces
   • 모바일 환경에서 특히 중요한 기능들 (AppBar, Card 등)
5. Feedback
   • 유저에게 상황을 설명하는 것들 (Progress뺑뺑이, Snackbar 등)
6. Data Display
   • 데이터를 화면에 표현하는 기능들 (아니 왜 중요한 게 뒤에 있어!)
   • 이미 익숙한 Icons, List, Table, Typography (text) 등 Output 요소
7. Utils
   • 그 외 나름 유용하고 쓸만한 기능들 (Modal, TextareaAutosize 등)
8. Lab
   • 아직은 개발 중이거나 실험 중인 컴포넌트들 (근데 여기가 맛집이라는!)
   • Autocomplete, Data Grid, Pagination, ToggleButton 등등 맛집

 

---

 정말 중요한 정보들은 사이드바에서 Getting Started와 Components 메뉴에 전부 몰려 있습니다. 나머지는 내부 시스템 설명이나 컴포넌트 스타일을 변경하고 커스트마이징 하는 방법들이 적혀있습니다. 내용이 생각보다 많고 어려우니 일단 구축되어 있는 컴포넌트를 잘 사용하고 활용할 수 있는데 초점을 맞추는 것을 추천드립니다.

 

오늘은 여기까지 입니다~ 추후 포스팅에서 조금씩 사용법을 다룰 예정이니 지금은 너무 어렵게 생각하지 마셔요^^

 

말은 쉽지...