수달씨의 개발공간

🔥 소개

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에 도입하면 코드 일관성, 유지보수성, 확장성이 모두 향상됩니다.
이번 구성은 디자인 시스템의 기반이 되므로 프로젝트 초기부터 도입해보세요!

안드로이드 앱을 개발할 때, 삼성 갤럭시 기기에서 직접 테스트해보는 것은 매우 중요합니다. 다행히 안드로이드 스튜디오에서는 삼성에서 제공하는 갤럭시 에뮬레이터 스킨을 추가해 실제 기기와 유사한 테스트 환경을 구성할 수 있습니다. 이번 글에서는 각 단계별로 캡처 이미지를 함께 보며 갤럭시 에뮬레이터를 설정하는 방법을 안내드리겠습니다.

1️⃣ 삼성 개발자 사이트에서 스킨 다운로드

• Samsung Developers - Galaxy Emulator Skin 페이지로 이동합니다.
• 원하는 기종(예: Galaxy S25, Galaxy Z Flip 등)의 에뮬레이터 스킨을 선택하여 다운로드합니다. - 가입 필요

2️⃣ 압축 해제 및 스킨 폴더 복사

• 다운로드한 .zip 파일의 압축을 해제합니다.
• 해제된 폴더 전체를 Android SDK 디렉토리 내 skins 폴더에 복사합니다.
  • Windows: C:\Users\사용자명\AppData\Local\Android\Sdk\skins
  • macOS: /Users/사용자명/Library/Android/sdk/skins
• 저는 편의를 위해 Documents 폴더에 압축을 해제하여 사용했습니다.

3️⃣ Android Studio에서 가상 디바이스 생성

• Android Studio를 실행한 후 Projects > More Actions > Virtual Device Manager로 이동합니다.
• 상단의 Create Device (+버튼) 을 클릭합니다.
• 원하는 디바이스 (예: Phone > Pixel 5)를 선택하거나 New Hardware Profile을 통해 새 디바이스를 생성합니다.

4️⃣ 스킨 설정 적용하기

• Device Name 을 입력합니다.
• 스킨에 맞는 Screen Size를 입력합니다.
  • https://developer.samsung.com/galaxy-emulator-skin/galaxy-s.html

5️⃣ 시스템 이미지 선택 및 AVD 생성 완료

• 원하는 Android API 버전의 시스템 이미지를 선택하고 다운로드합니다.
• 이름과 설정을 확인한 후 Finish를 클릭해 AVD를 생성합니다.

6️⃣ 에뮬레이터 실행 및 확인

• 생성한 갤럭시 에뮬레이터 옆의 ▶ 아이콘을 클릭하여 실행합니다.
• 실제 갤럭시 디바이스처럼 UI 프레임이 보이며 실행되는 것을 확인할 수 있습니다.

🏁 마무리

이제 Android Studio에서도 삼성 갤럭시 디바이스와 유사한 환경에서 앱을 테스트할 수 있게 되었습니다. 특히 국내 사용자 비중이 높은 갤럭시 스마트폰을 기준으로 테스트하면 더 안정적인 품질 확보가 가능하겠죠.

이 과정을 잘 따라오셨다면, 갤럭시 에뮬레이터를 여러 기종으로 추가해가며 다양한 해상도 및 성능 조건도 함께 점검해 보세요! 🚀