shadcn UI: Theming의 한계를 극복하다

shadcn에서 제공하는 기본 theme 뿐만 아니라, 내가 원하는 색상의 custom color를 쉽게 사용하는 방법에 대해서 알아보겠습니다. shadn에 대한 자세한 설명은 지난 1편과 2편에서 소개하였으니, 좀 더 자세한 내용이 알고 싶으신 분들은 1편과 2편을 참고해 주세요.

Feb 07, 2024

Contents

SHADCN UI THEME GENERATOR 기능 살펴보기 10.000+Themes for shadcn/ui 기능 살펴보기 shadcn/ui themes 기능 살펴보기 결론 Shadcn을 통해서 만든 사이드 프로젝트들

복붙으로 완성되는 UI: Shadcn UI - indietools

최근에 여러 사이드 프로젝트(파크골프가자, nomorebg) 를 하면서 하면서 해외에서 핫한 shadcn을 접하게 되었고, 기존의 어떤 프로젝트보다 빠르게 웹 UI를 구성할 수 있었습니다. shadcn이 갖고 있는 몇가지 특징과 그리고 한계에 대해서 알아보도록 하겠습니다. | frontend

https://blog.indietools.xyz/복붙으로-완성되는-ui-shadcn-ui-사용기

Shadcn UI 신규 컴포넌트 가이드 - indietools

지난번 포스팅에서 이야기했던 복사 붙여넣기만으로 완성되는 UI: Shadcn UI 사용기 에서 소개했던 Shadcn UI에서 새로운 컴포넌트 4가지가 발표되어서 가볍게 알아보려고 합니다. 지난 번과 마찬가지로 이번 컴포넌트 역시 코드 전체를 내 코드에 붙여넣는 방식(커스터마이징)으로 진행되며, Drawer, Carousel, Pagination, Resizable, Sooner 컴포넌트가 추가 되었습니다. | frontend

https://blog.indietools.xyz/shadcn-ui-신규-컴포넌트-가이드-9766

허나 이 편하고, 좋은 라이브러리에도 큰 단점이 하나 있는데, 테마가 12가지 밖에 지원이 되지 않는 점입니다.

다양하게 색깔을 표현하고 싶은 저로써는 너무도 아쉬운 점이었고, 이를 해결할 수 있는 방법이 없을까 찾아 보던 중 방법을 찾아 공유해 드리려고 합니다.

SHADCN UI THEME GENERATOR

이 서비스는 llias lsm 이라는 분이 만든 서비스로, 제가 원하는 색상의 컬러를 입력하면, 해당하는 shadcn CSS 파일을 받을 수 있는 서비스입니다.

상단의 Custom Copy Code를 누르면 현재 선택된 theme 기준의 style을 복사할 수 있습니다.

기능 살펴보기

장점

제작자가 정해놓은 solid, gradient, image 색상을 자유롭게 선택이 가능합니다.
제작자가 많은 색상을 임의로 만들어 놓아서, 원하는 색을 선택하기가 편합니다.

단점

전체적으로 다크모드 특화된 형광 계열의 색상들을 추천해주고 있으며, 다크모드와 라이트 모드에 대한 지원이 안되는 것이 좀 아쉽습니다.

10.000+Themes for shadcn/ui

이 서비스는 jindev라는 분이 만든 서비스로, 무려 1만개 이상의 테마를 사용이 가능합니다.

마찬가지로 하단의 공유하기 버튼을 클릭하면 CSS 내용을 손쉽게 다운로드 받을 수 있습니다.

기능 살펴보기

장점

정말 많은 theme 조합을 할 수 있습니다.
좋아요 기능이 있어서 사람들이 많이 선택한 theme도 찾아 볼 수 있습니다.
random theme 기능이 있어서 랜덤하게 돌려보다가 원하는 색을 찾을수도 있습니다.
primary, secondary 색뿐만 아니라, background, foreground 색 등 shadn에서 사용하는 모든 컬러를 수정하고 한 눈에 볼 수 있습니다.