shadcn UI: Theming의 한계를 극복하다
shadcn에서 제공하는 기본 theme 뿐만 아니라, 내가 원하는 색상의 custom color를 쉽게 사용하는 방법에 대해서 알아보겠습니다. shadn에 대한 자세한 설명은 지난 1편과 2편에서 소개하였으니, 좀 더 자세한 내용이 알고 싶으신 분들은 1편과 2편을 참고해 주세요.
Feb 07, 2024
허나 이 편하고, 좋은 라이브러리에도 큰 단점이 하나 있는데, 테마가 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에서 사용하는 모든 컬러를 수정하고 한 눈에 볼 수 있습니다.
- 단점
- 많아도 너무 많습니다. 저같은 디자인 실력 부족한 개발자가 찾기엔 선택지가 너무 많아서 오히려 선택 장애가 옵니다.
shadcn/ui themes
Furkan Kaya 라는 분이 만든 서비스로, 간단하게 Light Color, Dark Color만 설정하여 테스트 해볼 수 있습니다.
다른 서비스들과 마찬가지로 Copy Colors를 클릭하면, CSS 코드를 복사할 수 있습니다
기능 살펴보기
- 장점
- 간단합니다. Light 모드, Dark 모드에서 사용할 메인 컬러만 셋팅이 가능하여, 선택지 많이 줄어듭니다.
- Background color 설정이 가능합니다. 뿐만 아니라 이 Background를 카드의 배경으로 설정할지를 추가할 수 있습니다.
- 단점
- Custom 스타일을 많이 추가하고자 하는 분들에게는 선택지가 별로 없습니다.
결론
그래서 결론적으로 저는 무엇을 쓰냐하면 현재 shadcn/ui themes를 사용하고 있습니다.
저는 주로 혼자서 사이드 프로젝트를 개발하고 있어서 디자인적인 요소에 신경을 많이 쓸 수 없는 상황인지라, 기본적인 것들은 갖추어져 있되, 다른 프로젝트와 차별화 될 수 있는 포인트 컬러만 빠르게 설정하는 것이 필요했습니다.
그래서 저는 3가지 중에서 shadcn/ui themes 를 선택하여 여러 사이드 프로젝트에서 사용하고 있습니다.
Shadcn을 통해서 만든 사이드 프로젝트들
Share article