shadcn/ui 한국 프로젝트에서 제대로 쓰는 법

shadcn/ui 써보셨어요?

진짜 좋아요. Radix UI 기반에 Tailwind 스타일링, 복사해서 쓰는 방식이라 커스터마이징도 자유롭고.

근데 한국 프로젝트에서 쓰려면 몇 가지 손볼 게 있어요.

1. 한글 폰트 설정

shadcn/ui 기본 폰트는 Inter예요. 영문 폰트라 한글이 이상하게 나와요.

Pretendard 추천해요. 무료고 한글 예쁘게 나와요.

2. 색상 커스터마이징

shadcn/ui 기본 색상이 뉴트럴해서 좋긴 한데, 한국 프로젝트는 보통 브랜드 색상 있잖아요.

또는 CSS 변수 방식:

3. 공공기관 프로젝트라면

KRDS(한국형 웹 디자인 시스템) 따라야 해요.

색상, 간격, 타이포그래피 전부 가이드가 있어요. shadcn/ui 컴포넌트 하나하나 수정해야 해요.

근데 솔직히 이거 하다 보면 처음부터 만드는 게 나을 수도 있어요.

4. DatePicker 한글화

shadcn/ui DatePicker는 영어로 나와요.

5. Select 플레이스홀더

별거 아닌데 의외로 까먹기 쉬워요.

6. Form 에러 메시지

react-hook-form 쓸 때 에러 메시지:

7. 웹접근성

shadcn/ui가 Radix 기반이라 기본 접근성은 좋아요.

근데 공공기관 KWCAG 기준 통과하려면 추가 작업 필요해요:

8. Toast 위치

shadcn/ui Toast 기본 위치가 오른쪽 하단인데, 한국 사이트는 보통 상단 중앙이에요.

정리

shadcn/ui 한국 프로젝트 체크리스트:

• 한글 폰트 (Pretendard 등)
• 브랜드 색상 설정
• DatePicker 한글화
• 플레이스홀더 한글
• Form 에러 메시지 한글
• 접근성 추가 작업
• Toast 위치 조정

공공 SI 한다면

솔직히 shadcn/ui 커스터마이징하는 것보다 처음부터 KRDS 맞춘 라이브러리 쓰는 게 편해요.

HANUI가 그거예요. shadcn/ui 같은 복사 방식인데, KRDS 디자인 시스템 기반이에요.

한글 폰트, KRDS 색상, 접근성 전부 적용되어 있어요.

공공기관 프로젝트라면 이쪽이 시간 아낄 수 있어요.

---

관련 링크

• HANUI — KRDS 기반 디자인 시스템
• shadcn/ui 공식 사이트
• Claude Code 설정 자동화