Material Design을 활용한 디자인 시스템 제작

SC Ryu·2022년 10월 19일
1

디자인 시스템의 필요성과 디자인 프로그램을 활용하여 json 파일 얻는 방법에 대한 내용은 아래의 링크를 통해 읽어주시길 권합니다.
-> 디자인 시스템의 필요성

이 글에서는 CSS-in-JS 방식으로의 Material UI를 활용하여 Design system을 구축한 사례를 설명하고자 합니다. Material UI 설치, 기초 사용법 등은 참고 문헌을 참고해 주세요.
Material UI는 본문에서 MUI라고 명칭 하겠습니다.

Material UI 사용하기

MUI는 UI를 구성하는 Component입니다. Button, Textfield, Typography(폰트)등 개별적인 요소를 이와 같이

import { Button, Textfield, Typograpy } from "@mui/material"

...
<Button>hello</Button>
<Textfield label={hello}/>
<Typography variant="h2">Hello<Typography>

등으로 손쉽게 UI를 꺼내서 활용할 수 있습니다.

각각의 component는 기본적으로 Material Design을 기준으로 디자인된 기본적인 UI 스타일이 지정되어 있습니다.

기본적인 Material UI의 Button에 지정된 속성값

이를 프로젝트에 맞게 디자인을 변경할 경우 해당 프로젝트에 적용이 가능합니다.

1. Material Theme로 Customizing 하기

기본 스타일이 지정되어있는 MUI를 Customizing 하는데 중요한 것은 모든 요소의 스타일을 프로젝트의 성격에 맞게 변경하는 점 입니다.
그러기 위해서는 우선적으로 프로젝트의 스타일을 중앙에서 담당하는 Material Theme에 접근하여 기본값을 변경하는 방법해야 합니다.

요소의 상단에 App을 감싸는 Theme를 구축한 후, theme option을 지정합니다.
theme option은 각 디자인의 스타일에 맞게 지정합니다. 저는 크게 색상 값을 나타내는 palette, 모양, 그림자, 글자, 미디어쿼리 활용 등으로 나누었습니다.

palette를 살펴보면 모든 material UI에 적용되는 색상값입니다.
각 속성에 맞는 props에 따라 설정해줍니다.

Palette.ts

이런 식으로 Theme에 접근하여 색상, 모양, 그림자 등 프로젝트의 세부적인 속성값을 자신의 프로젝트에 맞게 지정할 수 있습니다.

2. MUI Theme를 활용하기

지정해 놓은 속성값들을 나의 요소에 맞게 변경해야 합니다. 이를 위해서는 theme의 components에 접근하여야 합니다.

다음과 같이 components에 override 함수를 만들고 theme을 전달합니다.

이제 모든 세부적인 요소들에 theme이 접근할 수 있습니다.
세부적인 MUI의 항목들을 만들어 줍니다. Card, Lists, Paper, Button 등 내가 Customizing 하고 싶은 요소들을 만들어 줍니다.

이제 각 요소들에 접근하여 지정한 theme를 활용하여 세부사항을 설정하여 줍니다.


button을 제작한 예시입니다.
위 이미지를 통해 버튼의 세부적인 기본 값들에 접근할 수 있음을 볼 수 있습니다. 기본 색상 값, outline의 두께 설정, 버튼 클릭 시 action 등 다양한 값들을 설정할 수 있습니다. 이를 theme으로 받은 내용들을 활용하여 각각의 값들을 설정할 수 있습니다.

ex) theme.palette.grey[400]

이렇게 설정이 완료되면 프로젝트를 수정하는데 유용합니다. 프로젝트 전체의 메인 color를 변경하려면 단순히 palette에 있는 색상 값 하나만 바꾸어도 전체의 프로젝트에 적용되는 효과를 볼 수 있습니다.

이렇게 만들어진 중앙에서 스타일을 제어할 수 있는 시스템은 서비스의 통일성을 높여줍니다.

하지만 프로젝트를 진행하다보면 다른 페이지에서는 다른 디자인이 적용되는 순간이 있습니다. 우선적으로 Theme에 옵션을 두어서 다른 상황에 적용하는것을 추천하지만 페이지 내부에서도 변경이 가능합니다.

3. Component에서 Theme 접근하기

MUI에는 styled-components와 유사한 스타일 기법이 있습니다.
styled-compoennts와 마찬가지로 CSS-in-JS 방식으로 CSS파일이 아닌 컴포넌트에 바로 삽입하는 것입니다. 이것은 해당하는 컴포넌트의 스타일만 독립적으로 변경 가능하게 합니다.

import { styled } from '@mui/material/styles';

const Style = styled(Button)(({ theme }) => ({
   backgroundColor: ${theme.palette.background.default}
   /////////theme를 활용한 media Querry 접근
   [theme.breakpoints.up('lg')]: {
      width: '100%'
   }
}));

이런식으로 CSS-in-JS방식을 가진 Component UI 제작에 접근할 수 있습니다.
이는 중앙에서 관리하는 Theme의 시스템을 따르기 때문에 유지보수가 용의한 UI를 구축하는데 편리합니다.

profile
interactive Developer

0개의 댓글