shadcn/ui
shadcn/ui
shadcn/ui: 2023년 깃허브 스타 1위 자바스크립트 프로젝트
2023년 한 해 동안 깃허브에서 가장 많은 Star를 받은 자바스크립트 프로젝트가 무엇일까요?
Bun이나 StyleX가 아닌 shadcn/ui인데요.
shadcn/ui는 Vercel의 개발자 shadcn이 만든 UI 도구로, 일종의 컴포넌트 콜렉션(모음)입니다. 기존의 MUI, Ant Design, Chakra UI 등의 UI 라이브러리와는 다른 개념을 가지고 있는데요.
전통적인 컴포넌트 라이브러리는 번들된 소스 코드를 패키지 매니저를 통해 의존성에 추가하여 사용합니다. 이로 인해 다소 무거워지거나 종속적이게 되고, 커스터마이징도 쉽지 않았습니다. 반면, shadcn/ui는 번들되지 않은 컴포넌트 소스 코드를 프로젝트 의존성에 추가하지 않고, 복사 붙여넣기를 통해 컴포넌트 코드를 온전히 사용할 수 있습니다. 이를 '콜렉션' 개념이라고 부르는데요.
이런 방식을 사용한 이유는 사용자가 원하는 컴포넌트만 골라서 사용할 수 있기 때문입니다. 컴포넌트 설치가 의존성이 아니기 때문에 코드와 번들링에 대한 관리 책임은 패키지 사용자에게 넘어가지만, 외부 라이브러리를 사용할 때 존재하던 커스터마이징 제약과 불필요한 번들 크기 증가 문제가 없어집니다.
외부 라이브러리를 사용하다 보면 CSS의 !important를 사용한 경험이 있을 수 있는데요. shadcn/ui는 소스 코드 레벨에서 커스터마이징이 가능합니다.
이것이 가능한 이유는 Radix-ui(Headless UI)를 사용하기 때문인데요. Radix-ui는 커스텀이 매우 쉬우며, 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 라이브러리입니다. 쉽게 말해, Radix UI와 Tailwind CSS를 사용하여 한 번 더 재가공해서 나만의 UI 컴포넌트를 손쉽게 만들고 복사 붙여넣기 해서 사용하면 되는 개념입니다.
대부분의 일정 규모 이상의 회사에서는 내부적인 디자인 시스템과 컴포넌트가 존재하는데요. 이러한 환경을 구축하는 데 shadcn/ui는 매우 유용할 수 있습니다. 접근성을 지원하며, 커스터마이징이 자유롭고 오픈 소스입니다. MUI나 Ant Design의 사용이 꺼려진다면, 커스터마이징이 쉽고 사용하기 가벼운 shadcn/ui를 도입하여 UI 컴포넌트를 손쉽게 구현해보는것도 좋을것 같습니다.
https://ui.shadcn.com/
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 5월 26일 오전 2:02
댓글 0
함께 읽은 게시물
DB 프로시저 싫어하시는 분들 많으시죠? Lambda/Serverless Function 이라고 생각해보십시오! 사실상 Serverless Function이랑 똑같은 것. Serverless Function도 싫어하시면 린정.
이름 바꿔쓰기
자아성찰, 혹은 자기 회고를 할 때는 자기 객관화를 하는 것이 좋다. 감정이 개입되어서는 올바른 회고를 하기 어렵기 때문이다. 하지만, 막상 자기 객관화가 쉽지는 않다. 나를 남처럼 들여다보는 것은 많은 훈련을 거쳐야 가능하기 때문이다.
... 더 보기<👩🏻💻 신규 개발자가 입사 첫 달에 해야 할 7가지>
어느 환경에서든 첫인상은 중요합니다. 첫인상으로 인해 생긴 이미지는 추후에 쉽게 바뀌지 않는데요, 회사에서도 예외는 아닙니다. 입사 초기에 보이는 모습에 따라 ‘실력자’라는 인상을 줄 수도, ‘일 못하는 사람’으로 낙인찍힐 수도 있죠. 입사 첫 달은 이러한 첫인상을 결정짓는 중요한 시기입니다. 더 나아가서는 이 시기가 앞으로 이 회사에서의 성공을 좌우할 수도 있어요. 신규 개발자가 새 직장에서 첫 시작을 잘 끊기 위해서 해야 할 7가지 일을 선정해 보았습니다!
1️⃣ 상사의 기대치 파악하기
입사 초반에는 ... 더 보기
간밤에 또 빅 AI 업데이트가 있었군요. Claude 4 Opus, Sonnet 패밀리가 발표되었습니다.
성능이나 다양한 능력이 향상되었고, 트렌드에 맞게(?) 소프트웨어 개발 성능이 또 크게 올랐습니다.
얼마전에 신입 개발자 채용시 과제를 10분 내에 빠르게 만들어서 보낸 사람을 채용했다며, 빠르게 결과를 냈기 때문에 채용했다는 글이 SNS에 많이 돌았다. 그러면서 이렇게 말한다.
"알고리즘 많이 푸는 개발자보다, AI로 빠르게 결과 내는 사람을 선호. 알고리즘, 코딩 책 안 봐도 AI 도구만 적극 활용하면 취업 기회 잡을 수 있다."
