난 너를 크게 좋아하지 않아 Material UI...
아마도 입사를 하게되면 Material UI를 중점적으로 쓸 것 같다. 지금 현재 다니고 있는 회사(이제 곧 그만둘)에서는 Material UI, antd, styled components, blueprint, bootstrap 등등 다 짬뽕을 해서 썼다. 그런데 Material UI를 쓸 때마다 항상 불편한 점들이 많았다. Material UI 공식문서를 읽어도 이해가 되지 않는 부분이 다른 공식문서들보다는 많았기 때문이다.
Material UI의 공식문서가 잘 정리되어 있지 않은 것일까 아니면 내가 시간을 제대로 들여서 Material UI를 제대로 보지 않았기 때문인가? 잘은 모르겠다.
그런데 생각을 해보면, 누군가가 만들어놓은 디자인 시스템을 사용한다는 것은 스타트업에서는 어떻게 보면 엄청나게 일을 덜은 것일수도 있다. 클라이언트 화면을 구성을 할 때 디자인 시스템을 만들면 재활용성이라는 엄청난 편의성을 가져올 것 같은데 누군가의 것을 사용을 한다면 우리는 구현만 하면 되기 때문이다라는 나의 예측아닌 예측!
일단...내가 Material UI의 매력을 다 모른다는 가정하에 한 번 문서를 쭈욱 읽어보자. 그리고 최종적으로는 Material UI 컴포넌트를 커스터마이제이션 해서 이에 대한 테스트코드를 한 번 짜보자. 이것이 비용이 제일 많이 든다고 CTO 님께서 말씀을 하셨기 때문이다.
EDIT: 문서를 읽다보니 이런게 나온다...
Unrivaled documentation(뛰어난 문서)
The answer to your problem can be found in our documentation. How can we be so sure? Because our docs boast over 2,000 contributors
(당신이 찾고 있는 문제는 우리 문서에서 찾을 수 있습니다. 어떻게 그렇게 확신을 하냐구요? 왜냐하면 우리 문서는 2,000명이 넘는 기여자를 통해서 만들어졌기 때문이죠.)
늬예늬예....한 번 열심히 읽어볼게요. 일단 Getting Started 부분은 다 읽었다. 일단 넷플릭스, 스포티파이, 아마존, 나사 등등 큰 회사들이 MUI를 쓰고 있다니까 한 번 믿어볼만 한 것도 같다. 일단 MUI 공식문서를 읽다가 알게된 사실은 MUI는 구글의 오픈소스 디자인 시스템 Material Design을 React UI 컴포넌트로 옮겨놓은 녀석이라는 사실이다. 나는 MUI 자체가 하나의 디자인 시스템인줄 알았더니 디자인 시스템을 React UI로 옮겨놓은 거구나...여튼 구글이 했다니까 더 믿을만 한것 같기도 하고. 꾸준히 한 번 읽어봐야지. 읽다가 나중에 한 번 봐야될 것들을 적어봤다.
- CSSBaseline - CSS reset과 비슷한 개념이라던데...뭘까?
- Learning Resources 여기서 MUI에 대해서 배울만한 곳들을 추천해줌(내일은 요놈중에 한 놈 골라서 봐야겠다)
- Recommended Resources
material ui에 관련된 새로운 소식을 듣기 위해서는 MUI 블로그를 봐도 되겠다.근데 신기한게 Discord 서버가 없다. 보통 유명한 라이브러리들은 다 있던데, 약간 의아(?)하다.
Material UI Customization
Material UI를 쓸 때 내가 가장 고전을 했었던 부분은 컴포넌트를 내가 원하는 스타일에 맞게 커스텀을 하는 것이었다. 왜 그렇게 어려웠던 것인지는 알 수는 없지만 어려워서 내가 되려 더욱 더 피했던 것 같다. Material UI에 보면 각각의 Components들에 대해서 문서를 정리해두었는데 항상 마지막쯔음에 보면 Component를 어떻게 커스텀할것인지에 대한 설명이 있는데 그 때 쯤 항 상 How to Customize 페이지로 링크를 걸어준다. 그러니까 요기를 한 번 제대로 훑어봐야겠다. 그리고 연습을 해야지!
후기: 읽고 정리를 해보니...커스텀을 하는 데는 크게 4가지 방법이 있는 듯하다.
1. sx prop을 이용한 일회성 커스텀
2. styled() 유틸리티를 이용한 재활용 가능한 커스텀 컴포넌트
3. Global theme을 덮어씌는 방법
4. Global CSS을 덮어씌는 방법
모두 다 각각의 사용성을 가지는 것 같다. 일단 Global theme과 Global CSS를 덮어씌우는 것은 디자인 팀과 얘기를 해서 우리는 어떤 색깔, 폰트사이즈 등등을 가져갈 것이다라는 기본적인 베이스를 잡았다고 가정을 했을 때 제공을 하면 좋을 것 같다. 마치 건물을 지을 때 설계도를 그리는 것처럼 말이다.
그 다음에는 그 건물을 지을 때 쓰일 부품(?) or 자재(?)들에 대해서 또 정의를 해둘 것이다. 그럴 때는 styled() 유틸리티를 통하여서 먼저 쓸 것들을 만들어두고 가져다 쓰는 방법일 것 같다. 이것 또한 디자인 팀과 얘기하여서 우리는 체크박스는 어떤 것들을 쓸 것이고, 슬라이더는 어떤 것이 있을 것이며 그 이외의 것은 왠만하면 쓰지 않겠다 라는 방식으로 약속을 해두면 재활용 가능한 컴포넌트를 만들어두고 계속 쓰기만 하면 되니 작업속도가 붙을 것이다.
마지막으로는, 이렇게 기초 공사를 해두고 필요한 부품들도 다 만들어두었으나 가끔씩 규격에 안 맞을 경우가 있을 것이다. 예를 들어 문(door)을 달 때 1600x800 의 사이즈로 나무를 잘라놨는데 문이 생각보다 작다면 그 자리에서 즉시 나무를 조금 더 자를 수 있을 것이다. 이때는 sx prop을 이용하면 되겠지.
이것은 지금 나의 가정이다. 그리고 내가 느낀 것이 있다면 무엇이든 절대 Happy Path로는 가지 않는다는 것!
스탠포드 대학의 뇌과학 교수가 진행하는 huberman lab 팟캐스트를 나는 즐겨보는데 그 중에 Goal Setting & Identify Obstacles 라는 부분이 있다. 간단하게 요약하자면 내가 원하는 목표가 있는데 이것을 이루기 위해서는 어떤 것을 해야하고 문제에 봉착했을 때는 어떻게 행동해야 할 지를 미리 생각하는 것이다. Plan B, C를 세워두는 것이다. 여기서는 마이클 펠프스의 실제 예시를 드는데 아주 재밌다.
여튼 디자인 시스템이 제대로 정의가 되었다고 해서 그것만 사용할 수 있는 상황이 아닐 것이라는 생각에 이런 생각이 갑자기 들었는 것 같다. 그럴 경우에는 계속 도움을 구하면서 그 과정을 기록하면서 발전시켜나가면 될 것 같다.
