[유데미x스나이퍼팩토리] 프로젝트 캠프 schdn ui

11월 중순부터 프론트엔드 프로젝트 캠프에 참가하게 되었는데, 아직 Next.js와 관련된 프론트엔드 지식이 좀 부족하다 느꼈으며, 프로젝트 경험을 좀 더 다양한 사람들과 하고싶어 참여하게 되었다. 

 

아무래도 개발쪽 경험이 어느정도 있는 사람들이 많이 참여하는 프로젝트다보니 진도 속도도 굉장히 빨랐으며, 퀄리티 또한 깊게 생각하게 되는 내용들이 많았다.

 

이번주는, JavaScript 개념들과 심화내용에 대해 학습을 하고, 바로 React + tailwind로 구축된 프로젝트를 만들어보는 시간을 가졌다. UI를 만드는데 여러 라이브러리들이 존재하지만, 이번엔 schdn ui라는 걸 사용하게 되었다.

 

schdn ui 알기 전에는, material ui 나 ant design과 같은 라이브러리를 사용해본적은 있었다.

올해부터 tailwind를 학습을 하였고, 디자인 시스템도 만들어보았었는데 뭔가 css적으로 사용하기는 편했지만 접근성부분에서 항상 아쉬움을 가졌었다. 또한 복잡한 기능을 구현하려면 해당 기능을 스타일링과 별개로 분리해서 개발하는 것도 쉽지가 않았다.

그러던 찰나.. 이 tailwind 기반 라이브러리인지로 만들어진 schdn ui의 굉장함에 매력을 느끼게 되었다.

 

schdn ui를 이전에 들어보기만 했고 직접 사용해본 경험은 없었어서 어떤 라이브러리인지 찾아보았다.

여러 장점을 가지고 있는 라이브러리인데, 한 줄로 요약하자면 Shadcn UI는 특히 Tailwind CSS와 통합하여 빠르고 효율적인 UI 개발을 지원하며, 다양한 맞춤화 옵션을 제공한다.

 

https://ui.shadcn.com/docs/components/chart

 

문서화도 정말 잘 되어 있고, 차트 기능이 정말 잘 되어 있다고 알게되었다. 이전에 관리자 페이지를 개발하면서 chart.js로 만들었었는데 

Shadcn에서 제공하는 차트를 잠깐 보니, 나중에 차트관련 기능을 개발할때 이걸 사용하면 좋겠다라고 느꼈다.

 

이외에도 정말 자주 쓰이는 컴포넌트는 대표적으로 Button, Calendar, Card, Dialog, Avatar, Drawer 가 있다.

이번달부터 시작한 사이드 프로젝트가 있는데, 현재 기획단계가 거의 마무리 단계여서 이제 개발환경을 셋팅하고 개발에 들어가기 직전이다. 그래서 이번에 나도 이번 사이드 프로젝트에서 Calendar와 Button, Drawer 컴포넌트를 커스터마이징하여 제공하도록 디자인 시스템을 구축하고 있으며 Dialog 컴포넌트를 기반으로 공통 모달을 제작하였다.

디자인시스템 레파지토리는 React 18v 으로 개발중인데 이번주부터 시작하였기에.. 셋팅과 npm을 배포 하는 부분에서 시간을 좀 잡아먹어 아직 많은 컴포넌트들을 만들진 못하였다.

그래도 스토리북 또한 제공하여 UI를 테스트할 수 있게 제작중이며, 위 처럼 만든 디자인시스템 레파지토리를 계속해서 컴포넌트를 만들때마다 npm으로 배포중이다.

앞으로 프로젝트에서 쓰여지는데 공통으로 재사용되어질 GlobalModal이다.

Props로는 title만 받으며 Custom modal content, Design System Button 영역은 children props로 받도록 아래와 같은 형태로 만들어주었다.

const Modal = ({ title, triggerElement, children }: ModalProps) => (
    <Dialog>
        <DialogTrigger asChild>{triggerElement}</DialogTrigger>
        <DialogPortal>
            <DialogOverlay />
            <DialogContent>
                <DialogClose>
                    <X className="h-4 w-4" />
                </DialogClose>
                <DialogTitle>{title}</DialogTitle>
                {children}
            </DialogContent>
        </DialogPortal>
    </Dialog>
);

triggerElement는 내가 어떤 버튼이나 텍스트 같은 DOM 자체를 받도록 ReactNode Type인데, 이걸 DialogTrigger 태그 안에 asChild속성을 붙여줌과 동시에 위와 같이 적어주면 실질적으로는 React jsx 문법 내에서는 아래처럼 사용할 수가 있다.

 <Modal
    triggerElement={
        <Button variant="destructive" size="xl">
            Test Button
        </Button>
    }
    children={<div className="py-6">Modal Content</div>}
    title="모달 타이틀"
/>

즉 Test Button을 누르면 Dialog Portal로 감싸진 영역이 모달로써 동작이 되어지게 되는 것이다. 이렇게 되면, 얻게되는 장점은 정말 많다.

 

1. 모달을 열고 닫는 상태를 내가 제어하지 않아도 된다 - 즉 useState나 컨텍스트 단위로 isShowModal 과 같은 상태를 내가 제어하지 않아도 된다는 가장 큰 장점을 가지게 된다.

2. shadcn 라이브러리 내의 Dialog 컴포넌트 자체가 접근성이 내장되어 있다. (키보드 네비게이션 지원을 한다던가 모달이 열려 있을 때, 포커스 트랩 기능으로 외부 요소의 접근을 방지할 수 가 있다.

3. 모달동작에 대한 스타일링을 간편하게 처리가 가능하다 - DialogOverlay, DialogTrigger, DialogPortal 컴포넌트로 인해 기능적인 스타일링은 이 컴포넌트들에게 맡기고 우리는 모달 내부의 css만 신경쓰면 된다. (DialogPortal 컴포넌트는 DOM 구조로 인해 생길 수 있는 z-index 문제를 자동으로 해결해준다.)

4. Tailwind 기반으로 만들어진 라이브러리이기 떄문에 확장 가능성이 유리하며, 타 스타일링 라이브러리에 비해 비교적 빌드 파일이 가볍다고 알려져 있다.

 

이렇게 정말 많은 장점들을 내포하고 있기 때문에 모달 뿐만아니라, Calendar, Chart, Drawer 와 같은 좀 복잡한 기능들도 아주 잘 설계가 되어있는 라이브러리라는걸 알 수가 있으며 그렇기 때문에 요즘 대부분의 프론트엔드 개발자들이 많이 쓰고 있는게 아닌가 싶다.

 

Radix ui 기반으로 접근성을 가져오고 tailwind로 css를, 복잡한 부분까지 알아서 척척 맡아주는 기능들을 만들어서 제공하는 이 schadcn ui. 아직까지는 다른 라이브러리 들에 비하면 생태계가 그렇게 넓지는 않지만 빠르게 변화하고 있는 프론트엔드 진영에서의 실무에서 요즘 많이 쓰이는걸로 알고 있다.

 

모달과 관련된 전체코드를 살펴보고 싶으시다면 아래 링크를 통해 확인 부탁드리겠습니다. (저도 학습중인 단계이며 아직 개발중인 단계로 코드가 살짝살짝 바뀔수도 있습니다.)

https://github.com/muffin9/design-system-whisperit/blob/main/src/components/Modal.tsx

design-system-whisperit/src/components/Modal.tsx at main · muffin9/design-system-whisperit

 

사실, 기업과 관련한 프로젝트에 매력을 느껴 참가를 결정하게 된 캠프인데, 이전에 진행되는 강사님의 수업 퀄리티가 생각보다 좋아서 따라가고 있다. 물론 기초부터 알려주시지만, 심화된 내용까지 챙겨주시고 이전에 직접 작업하신 코드들을 보여줌으로써 왜 이런 코드를 작성하였는지 설명하고, 그리고 실무에 대한 여러 코멘트와 지식들도 기억에 많이 남았다.

 

shadcn ui를 활용한 디자인시스템을 이번 내 사이드 프로젝트에 잘 녹여내는 것이 올 해 하나의 목표다.

 

본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다.