React Native 커스텀 디자인 시스템 구현하기 (1)

1. 디자인 토큰 정의

먼저 Figma에서 디자이너와 함께 디자인 토큰을 추출합니다:

• Colors: Primary, Secondary, Error, Background 등
• Typography: Font families, sizes, weights, line heights
• Spacing: 8px 기준 등 일관된 간격 시스템
• Border radius, shadows 등

 

2. 기본 구조 만들기

// theme/colors.js
export const colors = {
  primary: '#FF6B6B',
  secondary: '#4ECDC4',
  text: {
    primary: '#2D3436',
    secondary: '#636E72',
  },
  background: '#FFFFFF',
  // ...
};

// theme/typography.js
export const typography = {
  h1: {
    fontSize: 32,
    fontWeight: '700',
    lineHeight: 40,
  },
  body: {
    fontSize: 16,
    fontWeight: '400',
    lineHeight: 24,
  },
  // ...
};

// theme/spacing.js
export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

 

3. 재사용 가능한 컴포넌트 제작

 

// components/Button.js
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { colors, typography } from '../theme';

export const Button = ({ title, onPress, variant = 'primary' }) => {
  return (
    <TouchableOpacity 
      style={[styles.button, styles[variant]]} 
      onPress={onPress}
    >
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
  },
  primary: {
    backgroundColor: colors.primary,
  },
  secondary: {
    backgroundColor: colors.secondary,
  },
  text: {
    ...typography.button,
    color: '#FFFFFF',
  },
});

 

4. 커스텀 폰트 설정

# 1. 폰트 파일을 assets/fonts/ 에 배치
# 2. react-native.config.js 생성
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

# 3. 폰트 링크
npx react-native-link

 

5. Figma와의 협업 팁

 

• Figma Inspect 활용: 디자이너에게 개발자 모드에서 spacing, color 값을 확인할 수 있게 요청
• Component 이름 통일: Figma의 컴포넌트 이름과 코드의 컴포넌트 이름을 일치시키기
• Storybook 또는 Component Library 문서화: 만든 컴포넌트를 문서화해서 디자이너와 공유

6. 추천 라이브러리

• styled-components/native: CSS-in-JS 스타일링
• react-native-responsive-screen: 반응형 크기 조정
• react-native-svg: 커스텀 아이콘