모바일 웹 디자인 킷

지니씨·2023년 7월 18일

design kit mobile

프론트엔드

목록 보기

75/85

리소스 관리

React UI Library

https://blog.logrocket.com/top-10-react-ui-libraries-kits/
https://kinsta.com/blog/react-components-library/

Material Design 구현

https://mui.com/
Material Design은 안드로이드를 위해 만들어진 디자인 철학

MUI System

https://mui.com/system/getting-started/
MUI 시스템은 Material UI, Joy UI, Base UI 와 같은 MUI 구성 요소 라이브러리로 작업할 때 사용자 지정 설계를 보다 효율적으로 구축할 수 있도록 지원하는 CSS 유틸리티 집합
Box, Container 와 같은 wrapper 컴포넌트 제공, sx prop로 빠르게 커스터마이징 가능
MUI components(Material UI, Joy UI, Base UI) 의 보조적인 기능을 함
MUI components 가 아닌(non-MUI) 커스텀 컴포넌트에서 unstable_styleFunctionSx를 사용해 MUI System 사용 가능 (참고: https://mui.com/system/getting-started/custom-components/)
sx prop
- 커스텀 컴포넌트의 일회성 스타일적용에 가장 적합
- theme처리(ThemeProvider)와 함께 사용 가능

설치

npm install @mui/system @emotion/react @emotion/styled

Base UI

https://mui.com/base-ui/getting-started/
unstyled React UI components & low-level hooks 라이브러리
Material UI에서 추출, 독립된 패키지로 사용 가능
설치
```
npm install @mui/base
```

Material UI

https://mui.com/material-ui/getting-started/
리액트 기반 UI 라이브러리 중 가장 인기 있고 성숙한 라이브러리
Material Design UI 가이드라인을 바탕으로 하여 UI 개발에 필요한 컴포넌트와 디자인 템플릿 제공
모바일과 데스크톱 모두 지원하는 반응형 UI
모바일과 터치 사용자에 최적화 되어 있음
Material Deign 가이드를 준수하기 위해 컴포넌트가 무겁고 복잡하게 구성되어 있음
스타일 커스터마이징
- 커스터마이징이 상대적으로 어려움
- @material-ui/styles에서 컴포넌트의 스타일을 지정할 수 있는 CSS-in-JS방식을 채택하여 styled-components와 같이 빠르고 확장 가능
  (v5 에서 jss -> emotion 으로 스타일링을 위하 라이브러리 교체)
- Material-UI 스타일 커스텀을 위해 styled-components 와의 조합으로 많이 사용
- Customize (https://mui.com/material-ui/customization/how-to-customize/)
- 커스터마이징 가능성은 템플릿(https://mui.com/store/) 에서 확인 가능
- 참고 : https://dev.to/rasaf_ibrahim/styled-components-in-material-ui-mui-with-styled-utility-3l3j

설치

npm install @mui/material @emotion/react @emotion/styled

usage

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Joy UI

https://mui.com/joy-ui/getting-started/
Material UI 의 자매 라이브러리 (같은 컴포넌트가 많고, 유사하게 디자인된 컴포넌트 API를 제공)
현재 alpha 단계로 개발 진행중
Base UI 기반으로 제작
Material UI 보다 추가 커스터마이징 좀 쉽게, 접근성 신경 쓴 듯?
:active 속성 사용

설치

npm install @mui/joy @emotion/react @emotion/styled

MUI X

https://mui.com/x/introduction/
복잡한 사용 사례를 위한 고급 UI 구성요소의 모음 (data grid, date and time pickers, charts)
MUI Core와 완벽하게 호환 되지만 MUI Core 와는 독립적임

Ant Design (AntD)

https://ant.design/
MUI보다 상대적으로 가벼움
모바일용 : https://mobile.ant.design/

react-bootstrap

https://react-bootstrap.netlify.app/
react-bootstrap 사용시 클래스로 작업된 형태인 bootstrap 공통스타일로드
기존의 부트스트랩을 리액트 스타일의 컴포넌트로 압축하여 코드가 간단해짐
Bootstrap은 상태값과 클래스를 사용 / React-Bootstrap은 function과 hooks를 사용
가독성 면에서 React-bootstrap이 좋고 애니메이션 구현시 React-bootstrap이 더 유용
몇몇 스타일들은 Bootstrap css파일을 요구하는 경우가 있기에 그럴때를 대비해서 css파일(https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.css)을 import 해둬야 함
Introduction
- Importing Components
```
import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

<Stack direction="horizontal" gap={2}>
  <Button as="a" variant="primary">
    Button as link
  </Button>
  <Button as="a" variant="success">
    Button as link
  </Button>
</Stack>
```
- Customize Bootstrap(https://getbootstrap.com/docs/5.3/customize/overview/)
  스타일파일 오버라이딩으로 커스텀 가능, 기존 스타일 리셋 속성도 제공
- React-Bootstrap은 Bootstrap의 JavaScript를 완전히 재구현하기 때문에 기본 JavaScript 동작을 확장하는 테마와 자동으로 호환되지 않습니다.