Logo
Search|
Published on

Tailwind VS MUI (CSS Framework)

Authors
  • avatar
    Name
    Easyoon
    Twitter

Tailwind VS MUI (CSS Framework 비교하기)

Tailwind CSS

장점

  1. 클래스 기반 스타일링: Tailwind는 클래스를 사용하여 스타일을 적용하므로, 직관적이고 간편한 방식으로 스타일링이 가능하다.

  2. 커스터마이징 용이: Tailwind는 설정 파일을 통해 프레임워크를 세부적으로 조정할 수 있어, 개발자에게 높은 유연성을 제공한다.

  3. 가볍고 빠른 로딩: 사용하지 않는 스타일이 번들에 포함되지 않으므로, 필요한 부분만을 사용하여 가볍고 빠른 웹 페이지를 만들 수 있다.

단점

  1. 클래스 기반 스타일링의 의견 차이: 클래스 기반의 스타일링은 특정 개발자에게 선호받지 못한다. 더 구조화된 컴포넌트 기반의 스타일링을 선호할 수 있다.

Material-UI (Mui)

  1. 컴포넌트 기반 디자인: Material-UI는 구성 요소 기반의 디자인 철학을 가지고 있어, 재사용 가능하고 구조화된 컴포넌트를 제공한다.

  2. 디자인 시스템 제공: Material-UI는 구체적인 디자인 시스템을 제공하여 일관된 UI를 구축할 수 있도록 도와준다.

  3. React와의 통합: Material-UI는 React와 통합이 잘 되어 있으며, React 생태계에 적합한 라이브러리다.

단점

  1. 무겁고 커스터마이징이 어려움: Material-UI는 커스터마이징이 어려울 수 있고, 프로젝트에서 사용하지 않는 부분도 포함될 수 있어 번들 크기가 커질 수 있다.

  2. 디자인에 대한 강제성: Material-UI는 Material Design 가이드에 따라 개발되었기 때문에, 특정한 디자인 스타일을 따라야 합니다. 프로젝트의 디자인이 Material Design과 맞지 않는다면 사용하기 어려울 수 있다.

코드상의 비교

<!-- 예시: Tailwind CSS 클래스 기반 스타일링 -->
<div class="bg-blue-500 text-white p-4">
  <h1 class="text-2xl font-bold">Hello Tailwind!</h1>
  <p class="mt-2">This is an example using Tailwind CSS.</p>
</div>

bg-blue-500, text-white, p-4, text-2xl, font-bold, mt-2 등과 같은 클래스들은 Tailwind CSS에서 제공하는 미리 정의된 스타일 클래스들이다.

// 예시: Material-UI 컴포넌트 기반 스타일링
import React from 'react';
import { makeStyles, Paper, Typography } from '@mui/material';

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(4),
  },
  title: {
    fontSize: '2rem',
    fontWeight: 'bold',
  },
  content: {
    marginTop: theme.spacing(2),
  },
}));

const MaterialUIExample = () => {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Typography className={classes.title}>Hello Material-UI!</Typography>
      <Typography className={classes.content}>
        This is an example using Material-UI.
      </Typography>
    </Paper>
  );
};

export default MaterialUIExample;

React의 hook방식을 사용할 수 있고, 리엑트 코드를 짜는 방식과 같다. 코드의 일관성을 유지할 수 있어 굉장히 깔끔하고, 구조화가 잘 되어있다는 장점이 실제로도 아주 크게 다가온다. 하지만 실제 프로젝트에 사용했을 때 CSS 프레임워크 치고 러닝커브가 상당하며 라이브러리 번들이 무겁다. UI를 전문으로 하는 개발자는 MUI를 혐오하는 경향을 보인다. 컴포넌트로 딱딱 정의되어 있기 때문에 커스터마이징이 쉽지 않고, 에러에 자주 맞딱드리게 된다. useStyle hook을 거치지 않고 기괴한 방식으로 공통 래핑하는 경우도 있었는데, 이런 경우에는 나중에 코드를 걷어내야하는 2중 작업이 필요하게 된다. 또, MUI 컴포넌트가 상당히 무겁기 때문에 퍼포먼스 개선을 위한 작업도 반드시 필요로 하게 된다. 기본적으로 리엑트를 잘 써야만 MUI도 잘 쓸 수 있다.

결론

Tailwind CSS와 Material-UI는 각각의 사용 사례와 개발자의 취향에 따라 선택되어야 한다. Tailwind는 html에 가깝고, 간편하게 스타일을 적용하고자 할 때 유용하다. Material-UI는 구성 요소 기반의 일관된 디자인이 필요한 경우나 React 생태계와 통합해야 하는 경우에 적합하다.

Discuss on Twitter • View on GitHub