디자인 시스템 사용하기
호스트 앱에 라이브러리를 설치하고, 테마 제공자를 적용하며, 사용하지 않는 컴포넌트를 트리 셰이킹하고, 버전 업그레이드로 최신 상태를 유지합니다.
디자인 시스템 사용하기은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
설치 및 설정
디자인 시스템을 종속성으로 추가하십시오. 일부 라이브러리는 공급자, CSS 가져오기, 글꼴 로딩 같은 추가 설정이 필요합니다.
npm install @yourorg/design-system
// app/layout.tsx (or main.tsx)
import '@yourorg/design-system/dist/tokens.css';
import { DesignSystemProvider } from '@yourorg/design-system';
<DesignSystemProvider theme="light">
<App />
</DesignSystemProvider>테마 공급자
대부분의 디자인 시스템은 테마(라이트/다크), 로캘, 공유 컨텍스트를 위한 최상위 공급자를 제공합니다. 앱을 한 번 감싸서 사용하십시오.
<DesignSystemProvider
theme={isDarkMode ? darkTheme : lightTheme}
locale="en"
>
<App />
</DesignSystemProvider>컴포넌트 가져오기
필요한 항목만 가져오십시오. 트리 셰이킹과 함께 사용하면 실제로 사용하는 컴포넌트만 번들에 포함됩니다.
import { Button, Card, TextField } from '@yourorg/design-system';
function LoginForm() {
return (
<Card>
<TextField label="Email" type="email" />
<TextField label="Password" type="password" />
<Button variant="primary">Sign In</Button>
</Card>
);
}하위 경로 가져오기
일부 라이브러리는 명확성을 높이고 번들 크기를 줄이기 위해 하위 경로 가져오기를 지원합니다.
// Subpath (e.g., MUI):
import Button from '@yourorg/design-system/Button';
import Card from '@yourorg/design-system/Card';
// Tree-shakeable named exports also work for ESM:
import { Button, Card } from '@yourorg/design-system';트리 셰이킹 팁
트리 셰이킹은 번들링 중에 사용하지 않는 내보내기를 제거합니다. 이를 위해서는 ESM 빌드, 라이브러리의 package.json에 있는 sideEffects: false, 코드에서의 이름이 지정된 가져오기가 필요합니다. 번들 분석기로 확인하십시오.
테마로 사용자 지정하기
라이브러리를 분기하지 않고 테마 토큰을 재정의하여 브랜드에 맞출 수 있습니다.
import { defaultTheme } from '@yourorg/design-system';
const customTheme = {
...defaultTheme,
colors: {
...defaultTheme.colors,
primary: '#ff5733'
}
};
<DesignSystemProvider theme={customTheme}>
<App />
</DesignSystemProvider>컴포넌트 확장하기
버튼을 조금 다르게 만들어야 하나요? 분기하지 말고 구성하세요.
import { Button as DSButton } from '@yourorg/design-system';
function IconButton({ icon, ...props }) {
return (
<DSButton {...props}>
<Icon name={icon} />
{props.children}
</DSButton>
);
}업그레이드 전에 변경 로그 읽기
MAJOR 버전으로 업그레이드하기 전에 항상 CHANGELOG를 읽으세요. 호환성을 깨뜨리는 변경 사항, 마이그레이션 코드 변환 도구, 권장되는 새로운 API를 확인하세요.
MAJOR 업그레이드를 위한 코드 변환 도구
좋은 라이브러리는 호환성을 깨뜨리는 변경 사항의 마이그레이션을 자동화하는 코드 변환 도구(jscodeshift 스크립트)를 제공합니다.
npx @yourorg/design-system-codemod v2 src/
# automatically renames old prop names, updates imports, fixes deprecated APIs버전 고정과 캐럿 범위
"^1.4.2"는 1.x.y 업그레이드를 허용하므로 라이브러리가 SemVer를 준수하지 않으면 위험할 수 있습니다. "1.4.2"는 정확히 해당 버전으로 고정하므로 가장 안전하지만, 직접 업데이트해야 합니다. Renovate와 Dependabot을 사용하면 매주 버전 업데이트를 자동화할 수 있습니다.
업스트림에 이슈 보고하기
버그를 발견했나요? 최소 재현 예제와 함께 이슈를 등록하세요. 기능이 필요한가요? 먼저 토론을 시작하세요. 수정 사항을 다시 기여하면 모든 사람이 사용하는 디자인 시스템이 개선됩니다.
스타일 재정의 피하기
!important나 하위 요소 선택자로 디자인 시스템의 내부 구현에 직접 접근하지 마세요. 공개 테마 지정 API를 사용하세요. 임시방편으로 만든 재정의는 다음 업그레이드에서 깨집니다.
빠른 확인
디자인 시스템이 ESM과 이름이 지정된 내보내기를 사용한다면, 필요한 컴포넌트만 소비하는 가장 깔끔한 방법은 무엇인가요?
복습: 디자인 시스템 사용하기
설치한 뒤 테마와 함께 DesignSystemProvider로 감싸세요. 트리 셰이킹을 위해 이름이 지정된 ESM 가져오기를 사용하세요. 브랜드에 맞게 테마 토큰을 재정의하세요. 분기하지 말고 구성하세요. MAJOR 업그레이드 전에 CHANGELOG를 읽고, 제공되는 경우 코드 변환 도구를 실행하세요. 버전 고정과 캐럿 범위를 신중하게 선택하세요. 버그와 풀 리퀘스트를 업스트림에 보고하세요. 공개 API를 우회하기 위해 !important를 사용하지 마세요.
자주 묻는 질문
“디자인 시스템 사용하기” 강의는 무료인가요?
네 — “디자인 시스템 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“디자인 시스템 사용하기”에서 뭘 배우나요?
호스트 앱에 라이브러리를 설치하고, 테마 제공자를 적용하며, 사용하지 않는 컴포넌트를 트리 셰이킹하고, 버전 업그레이드로 최신 상태를 유지합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“디자인 시스템 사용하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.