UI 스타일링 스킬

UI 스타일링 스킬은(는) 무엇을 하나요?

shadcn/ui 컴포넌트, Tailwind CSS 유틸리티 스타일링, 캔버스 기반 비주얼 디자인 시스템을 결합하여 아름답고 접근성 높은 사용자 인터페이스를 만드는 포괄적인 스킬입니다.

참조

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

사용 시기

다음과 같은 경우에 사용하세요:

• React 기반 프레임워크(Next.js, Vite, Remix, Astro)로 UI 구축
• 접근성 높은 컴포넌트(다이얼로그, 폼, 테이블, 네비게이션) 구현
• 유틸리티 우선 CSS 방식으로 스타일링
• 반응형, 모바일 우선 레이아웃 생성
• 다크 모드 및 테마 커스터마이징 구현
• 일관된 디자인 토큰을 사용한 디자인 시스템 구축
• 비주얼 디자인, 포스터, 브랜드 자료 생성
• 즉각적인 시각적 피드백을 통한 빠른 프로토타이핑
• 복잡한 UI 패턴(데이터 테이블, 차트, 명령 팔레트) 추가

핵심 스택

컴포넌트 레이어: shadcn/ui

• Radix UI 프리미티브를 통한 사전 구축된 접근성 컴포넌트
• 복사-붙여넣기 배포 모델(컴포넌트가 코드베이스에 위치)
• TypeScript 우선, 완전한 타입 안전성
• 복잡한 UI를 위한 조합 가능한 프리미티브
• CLI 기반 설치 및 관리

스타일링 레이어: Tailwind CSS

• 유틸리티 우선 CSS 프레임워크
• 빌드 타임 처리, 런타임 오버헤드 없음
• 모바일 우선 반응형 디자인
• 일관된 디자인 토큰(색상, 간격, 타이포그래피)
• 자동 데드 코드 제거

비주얼 디자인 레이어: 캔버스

• 박물관 수준의 시각적 구성
• 철학 기반 디자인 접근법
• 정교한 시각적 커뮤니케이션
• 최소한의 텍스트, 최대의 시각적 영향
• 체계적인 패턴과 세련된 미학

빠른 시작

컴포넌트 + 스타일링 설정

shadcn/ui와 Tailwind 설치:

npx shadcn@latest init

CLI가 프레임워크, TypeScript, 경로, 테마 환경설정을 묻습니다. shadcn/ui와 Tailwind CSS를 모두 구성합니다.

컴포넌트 추가:

npx shadcn@latest add button card dialog form

유틸리티 스타일링과 함께 컴포넌트 사용:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

대안: Tailwind 전용 설정

Vite 프로젝트:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

컴포넌트 라이브러리 가이드

사용 패턴, 설치, 구성 예제가 포함된 포괄적인 컴포넌트 카탈로그.

참조: references/shadcn-components.md

다음 내용 포함:

• 폼 및 입력 컴포넌트 (Button, Input, Select, Checkbox, Date Picker, Form 검증)
• 레이아웃 및 네비게이션 (Card, Tabs, Accordion, Navigation Menu)
• 오버레이 및 다이얼로그 (Dialog, Drawer, Popover, Toast, Command)
• 피드백 및 상태 (Alert, Progress, Skeleton)
• 디스플레이 컴포넌트 (Table, Data Table, Avatar, Badge)

테마 및 커스터마이징

테마 구성, CSS 변수, 다크 모드 구현, 컴포넌트 커스터마이징.

참조: references/shadcn-theming.md

다음 내용 포함:

• next-themes를 사용한 다크 모드 설정
• CSS 변수 시스템
• 색상 커스터마이징 및 팔레트
• 컴포넌트 변형 커스터마이징
• 테마 토글 구현

접근성 패턴

ARIA 패턴, 키보드 네비게이션, 스크린 리더 지원, 접근성 높은 컴포넌트 사용법.

참조: references/shadcn-accessibility.md

다음 내용 포함:

• Radix UI 접근성 기능
• 키보드 네비게이션 패턴
• 포커스 관리
• 스크린 리더 알림
• 폼 검증 접근성

Tailwind 유틸리티

레이아웃, 간격, 타이포그래피, 색상, 테두리, 그림자를 위한 핵심 유틸리티 클래스.

참조: references/tailwind-utilities.md

다음 내용 포함:

• 레이아웃 유틸리티 (Flexbox, Grid, positioning)
• 간격 시스템 (padding, margin, gap)
• 타이포그래피 (글꼴 크기, 두께, 정렬, 줄 높이)
• 색상 및 배경
• 테두리 및 그림자
• 사용자 정의 스타일링을 위한 임의 값

반응형 디자인

모바일 우선 중단점, 반응형 유틸리티, 적응형 레이아웃.

참조: references/tailwind-responsive.md

다음 내용 포함:

• 모바일 우선 접근법
• 중단점 시스템 (sm, md, lg, xl, 2xl)
• 반응형 유틸리티 패턴
• 컨테이너 쿼리
• 최대 너비 쿼리
• 사용자 정의 중단점

Tailwind 커스터마이징

구성 파일 구조, 사용자 정의 유틸리티, 플러그인, 테마 확장.

참조: references/tailwind-customization.md

다음 내용 포함:

• 사용자 정의 토큰을 위한 @theme 지시어
• 사용자 정의 색상 및 글꼴
• 간격 및 중단점 확장
• 사용자 정의 유틸리티 생성
• 사용자 정의 변형
• 레이어 구성 (@layer base, components, utilities)
• 컴포넌트 추출을 위한 Apply 지시어

비주얼 디자인 시스템

캔버스 기반 디자인 철학, 시각적 커뮤니케이션 원칙, 정교한 구성.

참조: references/canvas-design-system.md

다음 내용 포함:

• 디자인 철학 접근법
• 텍스트보다 시각적 커뮤니케이션
• 체계적인 패턴과 구성
• 색상, 형태, 공간 디자인
• 최소한의 텍스트 통합
• 박물관 수준의 실행
• 다중 페이지 디자인 시스템

유틸리티 스크립트

컴포넌트 설치 및 구성 생성을 위한 Python 자동화.

shadcn_add.py

의존성 처리를 통해 shadcn/ui 컴포넌트 추가:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

사용자 정의 테마로 tailwind.config.js 생성:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

모범 사례

1. 컴포넌트 구성: 단순하고 조합 가능한 프리미티브로 복잡한 UI 구축
2. 유틸리티 우선 스타일링: Tailwind 클래스를 직접 사용; 진정한 반복이 있을 때만 컴포넌트 추출
3. 모바일 우선 반응형: 모바일 스타일로 시작하여 반응형 변형 계층화
4. 접근성 우선: Radix UI 프리미티브 활용, 포커스 상태 추가, 시맨틱 HTML 사용
5. 디자인 토큰: 일관된 간격 규모, 색상 팔레트, 타이포그래피 시스템 사용
6. 다크 모드 일관성: 모든 테마 요소에 다크 변형 적용
7. 성능: 자동 CSS 제거 활용, 동적 클래스 이름 피하기
8. TypeScript: 더 나은 개발자 경험을 위해 완전한 타입 안전성 사용
9. 시각적 계층 구조: 구성이 주의를 안내하도록 하고, 간격과 색상을 의도적으로 사용
10. 전문가 수준의 장인 정신: 모든 세부 사항이 중요합니다 - UI를 장인 정신으로 대우하세요

참조 네비게이션

컴포넌트 라이브러리

• references/shadcn-components.md - 전체 컴포넌트 카탈로그
• references/shadcn-theming.md - 테마 및 커스터마이징
• references/shadcn-accessibility.md - 접근성 패턴

스타일링 시스템

• references/tailwind-utilities.md - 핵심 유틸리티 클래스
• references/tailwind-responsive.md - 반응형 디자인
• references/tailwind-customization.md - 구성 및 확장

비주얼 디자인

• references/canvas-design-system.md - 디자인 철학 및 캔버스 워크플로우

자동화

• scripts/shadcn_add.py - 컴포넌트 설치
• scripts/tailwind_config_gen.py - 구성 생성

일반 패턴

검증이 있는 폼:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

다크 모드가 있는 반응형 레이아웃:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

리소스

• shadcn/ui 문서: https://ui.shadcn.com
• Tailwind CSS 문서: https://tailwindcss.com
• Radix UI: https://radix-ui.com
• Tailwind UI: https://tailwindui.com
• Headless UI: https://headlessui.com
• v0 (AI UI 생성기): https://v0.dev