리액트 UI 디자인 고민 Material-UI로 해결하기

디자인 고민을 덜어낼 수 있는 material design 소개

Material design은 구글이 개발한 디자인 언어입니다. 그냥 디자인이 아니라 디자인 언어라고 소개하는 점이 흥미롭습니다. 구글이 Material design을 만든 목적은 디자인의 원칙과 기술적, 과학적 혁신이 결합된 새로운 시각적 언어를 만들기 위함이라고 합니다. 그리고 우리가 보통 의사소통을 위해 사용하는 한국어, 영어 등과 마찬가지로 오픈소스로 공개하여 누구든지 사용 가능하도록 하고 있습니다.

이 시각적 언어는 구체적으로 유저 인터페이스(UI) 디자인의 최상의 결과물을 지원하는 가이드라인, 컴포넌트, 도구들의 시스템을 가지고 있습니다. 오픈 소스로 공개되어 있기 때문에 진짜 사람들이 사용하는 언어처럼 디자이너와 개발자 사이의 협업을 간소화하는 것을 돕습니다.

react에서 material desgin을 사용할 수 있는 MUI

Material-UI 혹은 줄여서 MUI라고 부르는 것은 react에서 material design을 사용할 수 있는 UI 라이브러리입니다.

이 라이브러리는 material design이 적용된 UI 컴포넌트들, 그리고 그 컴포넌트를 제어할 수 있는 API, 그리고 커스터마이징 옵션들을 제공합니다.

MUI에서 제공하는 수많은 UI 중에 일부를 이미지로 구경해본 후 사용법을 알아보겠습니다.

MUI 컴포넌트 사용법

react 프로젝트는 세팅되있다고 가정하고 진행하겠습니다. CRA나 Next로 쉽게 세팅할 수 있습니다.

cli로 MUI를 설치합니다

yarn add @mui/material @emotion/react @emotion/styled

emotion이 아니라 styled-component를 사용하고 싶다면 위가 아니라 다음과 같이합니다.

yarn add @mui/material @mui/styled-engine-sc styled-components

위에서 구경한 예시 이미지 중에 아이콘이 들어간 UI들도 있었습니다. 아이콘을 사용하고 싶다면 Material icons를 설치합니다.

yarn add @mui/icons-material

이제 MUI 홈페이지에서 사용하고 싶은 컴포넌트들을 쇼핑(?)해봅니다. 공짜 쇼핑이니 즐겨봅니다.

https://mui.com/material-ui/react-autocomplete/

React Autocomplete component - Material UI

The autocomplete is a normal text input enhanced by a panel of suggested options.

mui.com

위 홈페이지에 접속한 후 왼쪽에 있는 메뉴 중에 components를 눌러서 쓰고 싶은 컴포넌트가 있는지 살펴봅니다.

버튼 컴포넌트를 보겠습니다.

버튼 컴포넌트를 사용하기 위해 리액트 프로젝트에서 다음과 같이 불러옵니다.

import Button from "@mui/material/Button";

홈페이지에 있는 디자인과 같은 버튼을 쓰고 싶어서 코드를 그대로 복붙하여 사용합니다.

<Button variant="contained">Contained</Button>

다른 컴포넌트도 사용해보려고 합니다. 모달과 체크박스도 사용하고 싶어서 불러옵니다.

import Modal from "@mui/material/Modal";
import Checkbox from "@mui/material/Checkbox";

모달과 체크박스도 마찬가지로 홈페이지에 있는 예시코드를 그대로 사용하면 됩니다.

@mui/material을 전체를 안불러오고 컴포넌트별로 각각 import 하는 이유는 트리 쉐이킹이 되지 않아, 모든 컴포넌트를 import 하면 빌드 타임이 너무 오래 걸리기 때문입니다. 그래서 귀찮더라도 사용하고 싶은 컴포넌트만 각각 import 해주는 것이 좋습니다.

Mateiral icons 사용하기

아이콘 쇼핑을 할 수 있는 곳은 여기입니다.

https://mui.com/material-ui/material-icons/

Material Icons - Material UI

2,100+ ready-to-use React Material Icons from the official website.

mui.com

원하는 아이콘을 찾아볼 수 있습니다. 종류가 워낙에 많아서 키워드를 검색해서 찾는 방법을 추천드립니다. 아이콘 이름을 잘 지어놔서 검색으로 보통 원하는 것을 쉽게 찾을 수 있었습니다.

저는 사람이 팔을 벌리고 있는 이 아이콘을 사용해보려 합니다.

클릭을 하면 다음과 같은 모달창이 열리고 import 하는 코드와 예시 이미지들이 나옵니다.

저 import 코드를 복붙하면 컴포넌트 사용했을 때처럼 똑같이 사용할 수 있습니다.

import AccessibilityIcon from '@mui/icons-material/Accessibility';

function MyComponent() {
  return <AccessibilityIcon color="primary" />
}

커스터마이징

Material UI는 Material design에 default style을 입힌 것을 제공하고 있습니다. MUI Base는 default style이 없는 상태로 제공합니다. 우리는 Material UI를 사용하면 default style을 사용하여 디자인에 대한 고민을 엄청나게 줄일 수 있습니다. 하지만, 아무래도 계속 앱을 만들다 보면 디자인을 커스터마이징을 하고 싶을 때가 있습니다. 그럴 땐 MUI Base를 사용하는 것이 아니라, Material UI의 default style을 그대로 사용하면서 약간의 변경만 주는 커스터마이징을 사용할 수 있습니다.

MUI 홈페이지에서 customization 메뉴를 보면 커스터마이징할 수 있는 옵션들을 제공합니다. 커스터마이징 하는 방법은 theme라는 context를 정의하는 것이고, palette 등 각 소메뉴들은 다 theme에서 필요한 것들을 정의하는 방법을 알려주고 있습니다. 예를 들면 MUI 컴포넌트에서 color prop의 "primary"값이 어떤 색상인지, 텍스트를 사용하는 Typography 컴포넌트에서 사용되는 h2라던가 특정 태그의 font size 등을 어떻게 사용할 것인지 등, 디테일한 부분들을 전역으로 정의할 수 있습니다. 이렇게 정의한 옵션들은 최종적으로 context로 생성하여 provider로 넘겨줄 수 있습니다.

간략한 theme 생성 코드의 예시를 보여드리겠습니다.

import { createTheme, responsiveFontSizes } from "@mui/material/styles";

const theme = responsiveFontSizes(
  createTheme({
    palette: 
      primary: {
          light: "#757ce8",
          main: "#3f50b5",
          dark: "#002884",
          contrastText: "#fff",
      },
      info: {
        dark: "#ab003c",
        main: "#f50057",
        light: "#f73378",
      },
    },
    typography: {
      fontFamily: "'Noto Sans KR', sans-serif",
      h2: {
        fontSize: "2rem",
        textAlign: "center",
        fontWeight: "bold",
        marginBottom: 8,
      },
      caption: {
        fontSize: "0.8rem",
      },
    },
    components: {
      MuiButton: {
        variants: [
          {
            props: { variant: "outlined", size: "large" },
            style: {
              borderRadius: 12,
              fontSize: 18,
            },
          },
        ],
      },
    },
  }),
);

export default theme;

responsiveFontSize를 사용하면 폰트 사이즈를 뷰포트의 크기에 따라 자동으로 변동하는 반응형을 제공합니다.

그 외에도 위 예시코드는 primary color와 info color의 재정의, Typography의 약간의 커스터마이징, MUI Button 컴포넌트의 스타일링 커스터마이징이 들어갔습니다. MuiButton의 Variants 속성은 props로 특정 값들을 받을 때 어떤 스타일을 오버라이딩하겠다라는 의미입니다. 위 코드대로면 props 값으로 variant: "outlined", size: "large"를 받은 Button 컴포넌트는 border-radius: 12, font-size: 18이라는 CSS값이 오버라이딩 됩니다.

<Button variant="outlined" size="large">둥근 버튼</Button>

이런 식으로 다른 것들도 default style을 입맛에 맞게 변경할 수 있습니다.

이렇게 생성한 theme context를 App 컴포넌트에서 provider로 제공하는 코드는 다음과 같습니다.

import { ThemeProvider } from "@mui/material/styles";

import theme from "src/utils/contexts/Theme";

function App() {
  return 
    <ThemeProvider theme={theme}>
      <div id="app">
        App
      </div>
    </ThemeProvider>
  );
}

export default App;