수달씨의 개발공간

🎨 Tailwind 색상 팔레트를 React Native로!

TailwindCSS의 색상 시스템은 직관적인 이름(blue_500, gray_900)과 단계별 명확한 색감으로 많은 개발자에게 사랑받고 있습니다.
React Native에서도 동일한 색상 시스템을 구성하면 일관된 디자인 시스템 구축, 다크모드 대응, alpha 값 처리 등 많은 이점을 누릴 수 있습니다.

🌈 전체 색상표 (100 ~ 900)

아래는 TailwindCSS 기준으로 React Native에서 사용할 수 있도록 구성한 색상 팔레트입니다.

글 하단에 요약된 코드를 넣어 두었습니다.

✅ 각 색상은 colors.색상이름[단계] 형태로 접근합니다.
예: colors.blue[500], colors.red[900]

🔵 blue

단계 HEX 코드

⚫ gray

단계 HEX 코드

🔴 red

단계 HEX 코드

🟢 green

단계 HEX 코드

🟡 yellow

단계 HEX 코드

🟣 purple

단계 HEX 코드

🌸 pink

단계 HEX 코드

🧊 cyan

단계 HEX 코드

const colors = {
  gray: {
    100: '#F3F4F6',
    200: '#E5E7EB',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#6B7280',
    600: '#4B5563',
    700: '#374151',
    800: '#1F2937',
    900: '#111827',
  },
  blue: {
    100: '#DBEAFE',
    200: '#BFDBFE',
    300: '#93C5FD',
    400: '#60A5FA',
    500: '#3B82F6',
    600: '#2563EB',
    700: '#1D4ED8',
    800: '#1E40AF',
    900: '#1E3A8A',
  },
  green: {
    100: '#D1FAE5',
    200: '#A7F3D0',
    300: '#6EE7B7',
    400: '#34D399',
    500: '#10B981',
    600: '#059669',
    700: '#047857',
    800: '#065F46',
    900: '#064E3B',
  },
  red: {
    100: '#FEE2E2',
    200: '#FECACA',
    300: '#FCA5A5',
    400: '#F87171',
    500: '#EF4444',
    600: '#DC2626',
    700: '#B91C1C',
    800: '#991B1B',
    900: '#7F1D1D',
  },
  yellow: {
    100: '#FEF9C3',
    200: '#FEF08A',
    300: '#FDE047',
    400: '#FACC15',
    500: '#EAB308',
    600: '#CA8A04',
    700: '#A16207',
    800: '#854D0E',
    900: '#713F12',
  },
  indigo: {
    100: '#E0E7FF',
    200: '#C7D2FE',
    300: '#A5B4FC',
    400: '#818CF8',
    500: '#6366F1',
    600: '#4F46E5',
    700: '#4338CA',
    800: '#3730A3',
    900: '#312E81',
  },
  purple: {
    100: '#F3E8FF',
    200: '#E9D5FF',
    300: '#D8B4FE',
    400: '#C084FC',
    500: '#A855F7',
    600: '#9333EA',
    700: '#7E22CE',
    800: '#6B21A8',
    900: '#581C87',
  },
  pink: {
    100: '#FCE7F3',
    200: '#FBCFE8',
    300: '#F9A8D4',
    400: '#F472B6',
    500: '#EC4899',
    600: '#DB2777',
    700: '#BE185D',
    800: '#9D174D',
    900: '#831843',
  },
  teal: {
    100: '#CCFBF1',
    200: '#99F6E4',
    300: '#5EEAD4',
    400: '#2DD4BF',
    500: '#14B8A6',
    600: '#0D9488',
    700: '#0F766E',
    800: '#115E59',
    900: '#134E4A',
  },
  orange: {
    100: '#FFEDD5',
    200: '#FED7AA',
    300: '#FDBA74',
    400: '#FB923C',
    500: '#F97316',
    600: '#EA580C',
    700: '#C2410C',
    800: '#9A3412',
    900: '#7C2D12',
  },
  lime: {
    100: '#ECFCCB',
    200: '#D9F99D',
    300: '#BEF264',
    400: '#A3E635',
    500: '#84CC16',
    600: '#65A30D',
    700: '#4D7C0F',
    800: '#3F6212',
    900: '#365314',
  },
  cyan: {
    100: '#CFFAFE',
    200: '#A5F3FC',
    300: '#67E8F9',
    400: '#22D3EE',
    500: '#06B6D4',
    600: '#0891B2',
    700: '#0E7490',
    800: '#155E75',
    900: '#164E63',
  },
  zinc: {
    100: '#F4F4F5',
    200: '#E4E4E7',
    300: '#D4D4D8',
    400: '#A1A1AA',
    500: '#71717A',
    600: '#52525B',
    700: '#3F3F46',
    800: '#27272A',
    900: '#18181B',
  },
};

export default colors;

🏁 마무리

Tailwind의 색상 시스템은 미적으로 뛰어나고 확장도 쉽습니다.
React Native에서도 이 구조를 도입하면 다크모드 대응은 물론, 협업 시에도 큰 도움이 됩니다.

🔥 소개

TailwindCSS 스타일의 색상 시스템은 직관적이고 확장성이 뛰어나 React Native에도 잘 어울립니다.
이번 글에서는 blue_100, gray_900처럼 단계별 색상 정의, 다크모드 대응, alpha 값 추가, 그리고 자동완성 가능한 타입 정의까지 한 번에 구성하는 방법을 소개합니다.

📁 폴더 구조

먼저, 색상 관련 파일을 모아둘 theme 디렉토리를 만들어 아래처럼 구성합니다.

src/
└── theme/
    ├── colors.ts              # Tailwind 색상 팔레트
    ├── darkColors.ts          # 다크모드 색상
    ├── alphaColor.ts          # alpha 유틸
    ├── theme.ts               # 라이트/다크 테마 설정
    ├── useThemeColor.ts       # 현재 테마 기준 색상 반환
    ├── tailwindColors.d.ts    # 타입 정의 (자동완성 지원)
    └── index.ts               # export 모음

🎨 Tailwind 색상 정의

colors.ts에서 Tailwind 스타일로 색상을 정의합니다. 아래는 일부 예시이며, 필요에 따라 추가할 수 있습니다.

const colors = {
  blue: {
    100: '#DBEAFE',
    500: '#3B82F6',
    900: '#1E3A8A',
  },
  gray: {
    100: '#F3F4F6',
    500: '#6B7280',
    900: '#111827',
  },
  red: {
    100: '#FEE2E2',
    500: '#EF4444',
    900: '#7F1D1D',
  },
  // 추가 색상: green, yellow, indigo, etc...
}

export default colors

🌙 다크모드 색상 정의

다크모드에서는 gray 계열을 반전시켜 사용하면 좋습니다.

const darkColors = {
  ...colors,
  gray: {
    100: '#18181B',
    500: '#71717A',
    900: '#F4F4F5',
  },
  background: '#0f172a',
  foreground: '#f8fafc',
}

export default darkColors

💧 Alpha 값 유틸 함수

투명도를 추가하고 싶다면 아래처럼 alpha를 붙여주는 유틸을 만듭니다.

export function withAlpha(hex: string, alpha: number): string {
  const bounded = Math.max(0, Math.min(1, alpha))
  const alphaHex = Math.round(bounded * 255).toString(16).padStart(2, '0')
  return hex + alphaHex
}

🧠 현재 테마 기반 색상 가져오기

React Native의 useColorScheme() 훅을 활용해 현재 테마에 맞는 색상을 가져옵니다.

export function useThemeColor(color: 'blue' | 'gray', shade: 100 | 500 | 900) {
  const theme = useColorScheme() === 'dark' ? 'dark' : 'light'
  return themes[theme].colors[color][shade]
}

🧾 타입 선언으로 자동완성 지원

타입스크립트를 쓰는 경우, 색상 이름과 단계 타입을 미리 정의해두면 IDE 자동완성과 에러 방지에 큰 도움이 됩니다.

export type TailwindColorName =
  | 'gray' | 'blue' | 'green' | 'red' | 'yellow' | 'indigo' | 'purple'

export type TailwindColorShade = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

✅ 사용 예시

const bgColor = useThemeColor('blue', 100)
const textColor = useThemeColor('gray', 900)
const transparent = withAlpha(bgColor, 0.5)

return (
  <View style={{ backgroundColor: transparent, padding: 16 }}>
    <Text style={{ color: textColor }}>Tailwind 스타일 색상 예제</Text>
  </View>
)

🏁 마무리

Tailwind 스타일 색상 시스템을 React Native에 도입하면 코드 일관성, 유지보수성, 확장성이 모두 향상됩니다.
이번 구성은 디자인 시스템의 기반이 되므로 프로젝트 초기부터 도입해보세요!