React에서 styled-components로 디자인 시스템 만들기

 

React 애플리케이션 개발에서 일관된 UI와 재사용성을 높이기 위해 디자인 시스템을 구축하는 것은 매우 중요합니다. styled-components는 CSS-in-JS 방식을 사용하여 컴포넌트별로 스타일을 정의하고 유지보수성을 높이는 데 탁월한 도구입니다. 이 글에서는 styled-components를 활용해 디자인 시스템을 구축하는 방법을 상세히 알아보겠습니다.

---

1. 디자인 시스템이란?

디자인 시스템은 UI 컴포넌트의 일관성과 재사용성을 높이기 위해 정의된 색상, 타이포그래피, 레이아웃 등 디자인 요소의 집합입니다. 이를 통해 개발팀은 다음과 같은 이점을 얻을 수 있습니다:

• 일관성 유지: 모든 UI 컴포넌트에서 동일한 디자인 언어 사용.
• 생산성 향상: 미리 정의된 컴포넌트를 활용하여 개발 속도 증가.
• 유지보수 용이성: 변경 사항이 시스템 전반에 자동 반영.

---

2. styled-components란?

styled-components는 React 컴포넌트와 CSS를 결합하여 재사용 가능한 스타일을 정의할 수 있는 라이브러리입니다. CSS를 JavaScript 코드에 직접 작성할 수 있어 컴포넌트별로 스타일을 캡슐화할 수 있습니다.

주요 특징

• CSS 캡슐화: 컴포넌트 스코프 내에서 스타일이 적용.
• 동적 스타일링: props를 사용하여 스타일을 동적으로 변경 가능.
• 유지보수성 향상: 컴포넌트와 스타일의 결합으로 코드 가독성 증가.

설치 명령:

npm install styled-components

---

3. 디자인 시스템 구축 단계

(1) 테마 정의하기

디자인 시스템의 기본은 테마를 정의하는 것입니다. 테마에는 색상, 타이포그래피, 간격 등의 공통 속성이 포함됩니다.

// theme.js
const theme = {
  colors: {
    primary: '#007BFF',
    secondary: '#6C757D',
    success: '#28A745',
    danger: '#DC3545',
    background: '#F8F9FA',
    text: '#212529',
  },
  typography: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '16px',
    fontWeight: {
      normal: 400,
      bold: 700,
    },
  },
  spacing: (factor) => `${factor * 8}px`,
};

export default theme;

(2) ThemeProvider로 테마 적용하기

React 애플리케이션에 ThemeProvider를 사용하여 테마를 전역적으로 적용합니다.

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from './theme';
import GlobalStyle from './GlobalStyle';
import Button from './components/Button';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <div>
        <h1>styled-components 디자인 시스템</h1>
        <Button variant="primary">Primary Button</Button>
        <Button variant="secondary">Secondary Button</Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

(3) 전역 스타일 추가하기

전역 스타일은 createGlobalStyle을 사용하여 설정합니다.

// GlobalStyle.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: ${(props) => props.theme.typography.fontFamily};
    background-color: ${(props) => props.theme.colors.background};
    color: ${(props) => props.theme.colors.text};
  }
`;

export default GlobalStyle;

---

(4) 컴포넌트 스타일링하기

기본 스타일을 가진 UI 컴포넌트를 만들어 재사용성을 높입니다.

버튼 컴포넌트 작성 예제

// components/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => props.theme.colors[props.variant] || props.theme.colors.primary};
  color: white;
  font-size: ${(props) => props.theme.typography.fontSize};
  font-weight: ${(props) => props.theme.typography.fontWeight.bold};
  padding: ${(props) => props.theme.spacing(1)} ${(props) => props.theme.spacing(2)};
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

export default Button;

(5) 유틸리티 스타일 함수 추가하기

중복 코드를 줄이고 유지보수를 쉽게 하기 위해 유틸리티 스타일 함수나 믹스를 정의할 수 있습니다.

예: 반응형 유틸리티

// utils/media.js
export const media = {
  mobile: '@media(max-width: 768px)',
  tablet: '@media(max-width: 1024px)',
};

// 사용 예제
const Container = styled.div`
  padding: ${(props) => props.theme.spacing(2)};

  ${media.mobile} {
    padding: ${(props) => props.theme.spacing(1)};
  }
`;

---

4. 컴포넌트 라이브러리 확장하기

디자인 시스템을 기반으로 다양한 컴포넌트를 작성하고, 이를 라이브러리 형태로 확장할 수 있습니다.

확장 가능한 컴포넌트 예제

• Card: 컨텐츠를 묶어 표시하는 카드 컴포넌트
• Modal: 팝업 형태의 모달 컴포넌트
• Typography: 제목, 본문 등의 텍스트 스타일링 컴포넌트

Card 컴포넌트 예제

// components/Card.js
import styled from 'styled-components';

const Card = styled.div`
  background: ${(props) => props.theme.colors.background};
  border: 1px solid ${(props) => props.theme.colors.secondary};
  border-radius: 8px;
  padding: ${(props) => props.theme.spacing(2)};
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

export default Card;

---

5. 결론

styled-components를 활용한 디자인 시스템은 일관성 있는 UI를 제공하며, 유지보수를 용이하게 만듭니다. 위에서 설명한 테마 설정, 전역 스타일, 그리고 컴포넌트 스타일링을 기반으로 자신만의 React 디자인 시스템을 만들어보세요. 이를 통해 개발 생산성과 품질 모두를 향상시킬 수 있습니다.