Shadcn으로 나만의 커스텀 모듈 만들기

Shadcn 소개

Shadcn은 Radix UI와 Tailwind CSS를 기반으로 한 재사용 가능한 컴포넌트 모음으로, 현대 웹 애플리케이션 개발에 최적화된 도구입니다. 이 라이브러리는 디자인 시스템을 구축하는 데 여러 장점을 제공하며, 특히 디자이너 없이도 아름답고 접근성이 뛰어난 UI를 만들 수 있도록 도와줍니다.

Shadcn은 전통적인 컴포넌트 라이브러리와는 다르게, npm 패키지 형태로 제공되지 않으며, 필요한 컴포넌트를 직접 프로젝트에 복사하여 사용할 수 있습니다. 이는 개발자가 필요에 따라 각 컴포넌트를 커스터마이징하고, 자신만의 스타일을 적용할 수 있는 유연성을 제공합니다.

이러한 접근 방식은 특히 소규모 팀에서 마크업 개발자나 퍼블리셔가 없는 경우에 유용합니다.

Shadcn의 주요 특징

기능	설명
재사용성	컴포넌트는 재사용 가능하며, 필요한 만큼 커스터마이징할 수 있습니다.
접근성	접근성이 뛰어난 컴포넌트를 제공하여, 다양한 사용자에게 친숙한 UI를 제공합니다.
Tailwind CSS 통합	Tailwind CSS와의 통합으로, CSS 스타일링을 간편하게 적용할 수 있습니다.
커스터마이징 가능성	기본 제공되는 컴포넌트에 추가적인 스타일을 적용하여 자신만의 UI를 만들 수 있습니다.

Shadcn 설정하기

Shadcn을 프로젝트에 설정하는 과정은 상당히 간단합니다. 먼저, Next.js를 기반으로 한 프로젝트를 생성하고, 기본적인 Tailwind CSS 환경을 설정해야 합니다.

아래 단계에 따라 설정을 진행해 보시기 바랍니다.

프로젝트 생성

1. Next.js 프로젝트 생성: 아래 명령어를 사용하여 새로운 Next.js 프로젝트를 생성합니다.

bash
npx create-next-app@latest my-app --typescript --tailwind --eslint

1. Shadcn 셋업: 프로젝트 디렉토리로 이동한 후, shadcn-ui CLI를 사용하여 초기 설정을 합니다.

bash
npx shadcn-ui@latest init

Tailwind CSS 설정

Tailwind CSS를 사용하기 위해서는 tailwind.config.js 파일에서 설정을 조금 수정해야 합니다. content 부분에 실제 사용할 컴포넌트의 경로를 추가하여 Tailwind가 해당 경로를 인식하도록 합니다.

javascript
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

이러한 설정을 통해 Tailwind CSS가 올바르게 작동할 수 있도록 준비합니다.

스크립트 및 스타일 적용

이제 global.css 또는 index.css 파일에 Tailwind CSS를 적용하여 기본 스타일을 설정합니다. 마지막으로, 프로젝트의 메인 엔트리 파일에서 스타일 파일을 로드합니다.

javascript
import '../styles/global.css';

이렇게 설정을 마무리하면, Shadcn을 통해 제공되는 컴포넌트를 사용하기 위한 준비가 완료됩니다.

다른 내용도 보러가기 #1

Shadcn 컴포넌트 추가하기

Shadcn을 통해 다양한 컴포넌트를 프로젝트에 추가할 수 있습니다. 이 과정은 매우 직관적이며, 필요한 컴포넌트를 components.json 파일을 통해 확인하고, 복사하여 사용할 수 있습니다.

컴포넌트 추가 방법

1. components.json 확인: 이 파일에는 사용할 수 있는 컴포넌트 목록이 포함되어 있습니다. 필요한 컴포넌트를 선택합니다.

2. 컴포넌트 복사: 선택한 컴포넌트의 코드를 복사하여 프로젝트의 적절한 위치에 붙여넣습니다. 예를 들어, @/components/ui 디렉토리에 추가할 수 있습니다.

javascript
import { Button } from "@/components/ui/button";

1. 커스터마이징: 복사한 컴포넌트는 기본적으로 제공되는 스타일을 갖추고 있지만, 필요한 경우 variant나 size와 같은 props를 통해 스타일을 변경할 수 있습니다. 또한, 사용자 정의(커스텀) 스타일을 추가하여 더욱 독창적인 UI를 완성할 수 있습니다.

Shadcn의 확장성

Shadcn의 가장 큰 장점 중 하나는 그 확장성입니다. 기본 제공되는 컴포넌트 외에도, 개발자가 직접 커스터마이징한 컴포넌트를 추가하여 자신만의 라이브러리를 구축할 수 있습니다.

이는 개발자가 팀의 필요에 따라 더욱 유연하게 대처할 수 있게 해줍니다.

장점	설명
유연성	필요에 따라 컴포넌트를 커스터마이징하여 사용 가능합니다.
접근성	모든 사용자가 쉽게 접근할 수 있도록 설계된 컴포넌트를 제공합니다.
팀 협업	여러 개발자가 동시에 작업할 수 있도록 돕는 구조를 가지고 있습니다.
개발 생산성 향상	UI 컴포넌트를 쉽게 재사용할 수 있어 개발 시간을 단축시킬 수 있습니다.

Shadcn을 통한 커스텀 모듈 만들기

Shadcn을 활용하여 자신만의 커스텀 모듈을 만드는 과정은 매우 흥미롭고 창의적인 작업입니다. 이 과정에서 개발자는 기본 제공된 컴포넌트를 바탕으로 새로운 기능이나 스타일을 추가하여 자신만의 모듈을 만들 수 있습니다.

커스텀 모듈 구축 과정

1. 기본 컴포넌트 선택: 자신이 구축하고자 하는 모듈의 기본이 될 컴포넌트를 선택합니다. 예를 들어, 버튼 컴포넌트를 바탕으로 기능을 추가할 수 있습니다.

2. 기능 추가: 선택한 컴포넌트에 필요한 기능을 추가합니다. 예를 들어, 버튼 클릭 시 특정 동작을 수행하도록 이벤트 핸들러를 추가할 수 있습니다.

3. 스타일 변경: Tailwind CSS를 활용하여 원하는 스타일로 변경합니다. variant 및 size props를 통해 다양한 스타일을 적용할 수 있습니다.

4. 테스트 및 배포: 작성한 모듈이 의도한 대로 작동하는지 확인한 후, 필요한 곳에 배포합니다. 이때, 모듈의 재사용성을 고려하여 설계하는 것이 필요합니다.

커스텀 모듈의 장점

커스텀 모듈을 통해 개발자는 다음과 같은 이점을 누릴 수 있습니다.

장점	설명
독창성	기본 제공되는 컴포넌트를 바탕으로 자신만의 독특한 기능을 추가할 수 있습니다.
재사용성	한 번 만든 커스텀 모듈은 여러 프로젝트에서 재사용할 수 있어 효율적입니다.
유지보수 용이성	코드 구조가 명확하여, 추후 수정 및 유지보수가 용이합니다.
팀 내 협업 강화	팀원들과 공유하여 협업할 수 있는 장점을 제공합니다.

결론

Shadcn은 현대적인 React 애플리케이션 개발에 최적화된 도구로, 특히 디자이너 없이도 아름답고 접근성이 뛰어난 UI를 만들 수 있도록 도와줍니다. 이 라이브러리는 기존의 컴포넌트 라이브러리와는 다른 접근 방식을 취하고 있으며, 개발자가 필요에 따라 직접 컴포넌트를 커스터마이징하고 확장할 수 있는 가능성을 제공합니다.

프로젝트 설정에서부터 커스텀 모듈 구축까지, Shadcn을 사용하면 개발자는 더 많은 창의성을 발휘할 수 있으며, 팀의 필요에 맞는 다양한 UI를 손쉽게 구현할 수 있습니다. 이러한 점에서 Shadcn은 앞으로의 웹 개발 환경에서 중요한 역할을 할 것으로 기대됩니다.

관련 영상

같이 보면 좋은 글