프로그래밍 「 자바스크립트 편」React Native에서 범용 앱 빌드 시스템 설계

Zet의 사명은 모든 플랫폼에서 핀테크 솔루션에 액세스할 수 있도록 하는 것입니다. 이 야심 찬 목표를 달성하기 위해 우리는 범용 애플리케이션을 구축하는 데 상당한 투자를 했습니다. 그리고 크로스 플랫폼 앱을 빌드할 때 React Native를 능가하는 기술은 없습니다.

이 여정을 시작하면서 우리는 애플리케이션의 토대를 마련하기 위해 올바른 라이브러리 세트를 선택하는 것이 중요하다는 것을 빠르게 깨달았습니다. 이 기사에서는 디자인 시스템 및 상태 관리 솔루션을 구동하는 라이브러리를 선택하는 이면의 의사 결정 프로세스에 대해 자세히 설명합니다.

디자인 시스템

우리 디자인 팀은 포괄적인 디자인 시스템을 개발하기 위해 상당한 노력을 기울였습니다. 이 디자인 시스템을 React Native 환경에서 구현하기 위해 철저한 연구를 수행하고 여러 라이브러리를 선정했습니다. 우리의 목표는 모바일, 웹 및 데스크톱 플랫폼에서 원활하게 작동하는 유니버설 디자인 시스템을 만드는 것이었습니다. 이 섹션에서는 우리가 고려한 라이브러리에 대해 논의하고 주요 기능과 장점을 간략하게 설명합니다.

유니버셜 디자인 시스템의 버튼 사용 지침 — 

아시시 네기

1. 네이티브윈드:

Nativewind는 React Native에 순풍 지원을 제공하여 강력한 기능 세트와 향상된 기능을 제공합니다. 우리는 특히 최근에 발표된 버전 3에 끌렸는데, 이 버전 <>에는 변형, 복합 변형 및 defaultProps에 대한 지원을 포함하여 흥미로운 새 기능이 도입되었습니다. 이러한 추가 기능을 통해 개발자 경험(DX)이 크게 향상되었고 더 빠르게 반복할 수 있었습니다. 또한 Nativewind는 탁월한 TypeScript 지원을 제공하여 개발 프로세스 전반에 걸쳐 유형 안전성을 보장합니다.

Nativewind의 사용 예:

import { styled } from ‘nativewind’;
import {Text} from ‘react-native’
const Typography = styled(‘Text’, ‘font-normal’
 variants: {
 heading: ‘text-2xl font-bold’,
 subheading: ‘text-lg font-semibold’,
 body: ‘text-base’,
 },
});
// Usage
<Typography variant="heading">Welcome to Zet</Typography>

2. 다마구이:

Tamagui는 본질적으로 완전한 형식의 디자인 시스템을 구축하기 위한 도구를 제공하는 인기 있는 라이브러리입니다. 그러나 프로젝트를 시작했을 때 아직 알파 단계였으며 몇 가지 버그가 있었습니다. 우리가 선택한 도서관의 안정성과 신뢰성이 중요한 요소라는 점을 고려하여 Tamagui를 진행하지 않기로 결정했습니다.

import { createFont, createTamagui, createTokens } from 'tamagui' 

const interFont = createFont({
  family: 'Inter, Helvetica, Arial, sans-serif',
  size: {
    1: 12,
    2: 14,
    3: 15,
  },
  lineHeight: {
    2: 22,
  },
  weight: {
    1: '300',
    3: '600',
  },
  letterSpacing: {
    1: 0,
    2: -1,
  },
  face: {
    300: { normal: 'InterLight', italic: 'InterItalic' },
    600: { normal: 'InterBold' },
  },
})

3. Shopify 스타일 변경:

Shopify Restyle은 디자인 시스템에 대한 모든 요구 사항을 충족하는 또 다른 강력한 경쟁자로 부상했습니다. 그러나 신중한 평가 끝에 Nativewind가 개발자 경험(DX)과 빠른 반복 능력 측면에서 이점이 있다는 결론을 내렸습니다.

import { Text, createText } from '@shopify/restyle';
import { ThemeProvider } from 'shopify-restyle';

const theme = {
  typography: {
    heading: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#333',
    },
    subheading: {
      fontSize: 18,
      fontWeight: '600',
      color: '#555',
    },
    body: {
      fontSize: 16,
      color: '#888',
    },
  },
};

const Typography = createText(theme);

// Usage
<ThemeProvider theme={theme}>
  <Typography variant="heading">Welcome to Zet</Typography>
</ThemeProvider>

4. 스타일시트(React Native):

React Native에 내장된 스타일시트를 사용하여 처음부터 디자인 시스템을 구축할 수 있지만 개발자 경험(DX)에 문제가 발생했습니다. 고급 기능과 추가 도구가 부족하여 특정 요구 사항에 적합하지 않았습니다.

import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  subheading: {
    fontSize: 18,
    fontWeight: '600',
    color: '#555',
  },
  body: {
    fontSize: 16,
    color: '#888',
  },
});

const Typography = ({ variant, children }) => {
  const textStyle = styles[variant] || styles.body;
  return <Text style={textStyle}>{children}</Text>;
};

// Usage
<Typography variant="heading">Welcome to Zet</Typography>

다양한 요소를 고려한 후 React Native에서 유니버설 디자인 시스템을 구축하기 위해 Nativewind를 활용하기로 결정했습니다. 순풍 지원, 최근 기능 향상 및 뛰어난 TypeScript 통합으로 인해 범용 앱을 구축하는 데 가장 적합한 선택이었습니다.

문서화 및 테스트 — 스토리북

이후 디자인 시스템의 모든 구성 요소는 격리되어 구축됩니다. 따라서 스토리북은 컴포넌트를 문서화하고 테스트하기 위한 도구였습니다.

import { ComponentMeta } from '@storybook/react'
import { Button } from './Button'

export default {
 title: 'Design/Button',
 component: Button,
 argTypes: {
   intent: {
     options: ['primary', 'error', 'warning', 'success'],
     control: {
       type: 'select',
     },
   },
   size: {
     options: ['sm', 'md', 'lg'],
     control: {
       type: 'select',
     },
   },
   disabled: {
     control: { type: 'radio' },
     options: [true, false],
   },
 },
} as ComponentMeta<typeof Button>

Button 구성 요소 스토리의 단순화된 버전입니다.

Nativewind를 활용하여 모바일, 웹 및 데스크톱 플랫폼에 원활하게 적용할 수 있는 효율적인 디자인 시스템을 만드는 것을 목표로 했습니다. 또한, 스토리북(Storybook)은 디자인 시스템 개발을 위한 필수적인 동반자 역할을 했으며, 구성 요소를 개별적으로 문서화, 테스트 및 전시할 수 있는 포괄적인 플랫폼을 제공했습니다.