[SCSS] IBM Carbon Design System React 설정

 

https://carbondesignsystem.com/developing/react-tutorial/overview

Carbon Design System

 

 

Carbon이란?

Carbon은 IBM의 디지털 제품 및 경험을 위한 오픈소스 디자인 시스템이다.

이 시스템은 디지털 제품 및 경험을 개발하는 데 도움이 되는 다양한 자원과 도구를 제공한다.

이를 통해 디자이너와 개발자들은 일관된 디자인 원칙을 준수하고, 사용자 경험을 향상시키며, 제품을 보다 효율적으로 개발할 수 있다.

또한 Carbon은 IBM Design Language를 기반으로 하여 디자인의 일관성과 품질을 유지합니다.

 

 

 

 

 

Carbon의 기본 원칙

 

 

1️⃣ Open

Carbon은 오픈 소스이다.

Carbon의 사용자는 동시에 그 제작자이기도 하며, 누구나 기여할 것을 권장받는다. 

 

2️⃣ Modular

Carbon은 모듈화되어 있습니다.

Carbon의 모듈화는 실행에서 최대의 유연성을 보장한다.

카본의 구성요소는 사용자의 요구에 맞는 어떤 조합으로도 원활하게 작동하도록 설계되었다.

 

3️⃣ Consistent

Carbon은 일관성을 유지한다.

포괄적인 IBM 디자인 언어를 기반으로, 카본의 모든 요소와 구성요소는 일관되고 응집력 있는 사용자 경험을 보장하기 위해 처음부터 함께 작동하도록 설계되었다.

 

 

 

 

 

---

 

 

React에 적용해보기

 

https://carbondesignsystem.com/developing/react-tutorial/step-1#fork-clone-and-branch

Carbon Design System

 

 

 

 

설치

carbon 설치 

yarn add @carbon/react@1.33.0
# 혹은
npm install @carbon/react@1.33.0

 

 

 

sass 설치

yarn add sass@1.63.6
# 혹은 
npm install sass@1.63.6

 

Carbon은 스타일이 Sass로 작성되어 있기 때문에 Sass 빌드를 실행해야 한다. 

 

 

 

 

 

 

 

설치가 완료되었으니 사용해보자.

코드 작성

scss 코드

AppTest.scss

// 원하는 버튼 색상 변수 정의
$myButtonColor: blue;

// Button 컴포넌트에 스타일 적용
.MyButton {
  background-color: $myButtonColor;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

// Button 컴포넌트에 호버 효과 적용
.MyButton:hover {
  background-color: darken($myButtonColor, 10%);
}

 

 

 

 

 

Javascript 코드 

App.js 

import './App.css';
import './style/AppTest.scss';
import { Button } from '@carbon/react';

function App() {
  return (
    <div>
      <Button className="MyButton">button</Button>
    </div>
  );
}

export default App;

 

 

 

 

위 코드를 실행하면 이렇게 보인다. 

 

부트스트랩처럼 여러가지 버튼 모양이 있을 줄 알았다. 

(EX. btn-primary 하면 기본 버튼 모양이 잡히는 것)

하지만 carbon에는 기본 디자인 모양은 없는 것 같고, 직접 디자인 설정을 해야 하는 것 같다. 

 

 

 

 

 

 

 

전역 scss 설정하기 

많이 쓰이는 코드를 전역 scss 파일에 모아서 사용할 수 있다. 

파일 이름은 global.scss라고 하겠다.

 

 

src/app/globals.scss

@use '@carbon/react';

첫 줄에 위와 같이 적어준다. 

 

 

 

예를 들어

src/components/TutorialHeader
├──_tutorial-header.scss
└──TutorialHeader.js

폴더 구조가 이렇게 되어 있다면,

 

 

 

src/app/globals.scss 파일 윗쪽에 위 문장을 써준다. 

@use '@carbon/react';
@use '@/components/TutorialHeader/tutorial-header';

 

 

 

그리고 js에선 tutorial-header.scss만 import하면 되고,

global.scss는 import 해오지 않아도 된다. 

 

 

 

TutorialHeader.js

import React from 'react';
import '@carbon/icons/css/16/fill.css'; // Carbon 아이콘 스타일 import
import '@/components/TutorialHeader/tutorial-header.scss'; // 헤더 컴포넌트 스타일 import

function TutorialHeader() {
  return (
    <div className="tutorial-header">
      <h1>Welcome to the Tutorial</h1>
      <p>This is a tutorial header component.</p>
    </div>
  );
}

export default TutorialHeader;

 

 

 

 

 

---

 

 

CSS 와 SCSS 차이

 

CSS

'.css' 확장자를 가진 일반적인 CSS 파일

기본적으로 스타일을 정의하는 데 사용

변수, mixin, nesting, 상속 등의 고급 기능을 지원하지 않는다. 

 

 

SCSS

'scss' 확장자를 가진 SCSS(Sassy CSS)파일이다. 

CSS의 확장으로 CSS 문법을 확장하여 더 풍부한 기능을 제공한다. 

변수, mxin, nesting, 상속 등과 같은 CSS 전처리기 기능을 사용할 수 있다.

CSS 작성이 더 효율적이고 유지보수하기 쉬워진다. 

 

→ '.scss' 파일이 '.css' 파일보다 더 많은 기능을 제공하며, 프로젝트의 요구에 따라 선택할 수 있다. 

 

 

SCSS의 컴파일 과정

SCSS 파일 작성 → SCSS 파일을 CSS 파일로 컴파일 → CSS 파일 적용