[typescript] 타입스크립트를 사용하여 크로스 플랫폼 앱에 일관된 디자인 시스템 적용 방법

14 Dec 2023

typescript

크로스 플랫폼 앱을 개발할 때 디자인 시스템을 통해 일관된 UI와 UX를 유지하는 것은 매우 중요합니다. 이를 위해 타입스크립트와 React Native를 사용하여 어떻게 일관된 디자인 시스템을 구축할 수 있는지 알아보겠습니다.

1. 타입스크립트와 스타일러 컴포넌트

타입스크립트는 정적 타입 체크와 강력한 타입 추론을 제공하여 코드의 안정성을 높여줍니다. 스타일러 컴포넌트를 사용하면 CSS-in-JS 방식으로 스타일을 관리할 수 있으며, 타입스크립트와의 호환성이 우수합니다. 이를 통해 각 컴포넌트에 디자인 시스템과 관련된 스타일을 쉽게 적용할 수 있습니다.

예시 코드:

import styled from 'styled-components/native';

interface ButtonProps {
  primary: boolean;
}

const Button = styled.TouchableOpacity<ButtonProps>`
  background-color: ${(props) => (props.primary ? 'blue' : 'white')};
  padding: 10px 20px;
  border-radius: 5px;
  /* 기타 스타일 속성들 */
`;

2. 재사용 가능한 컴포넌트

디자인 시스템을 적용하기 위해서는 재사용 가능한 컴포넌트를 만들어야 합니다. 예를 들어, 버튼, 헤더, 입력 필드 등과 같은 기본적인 UI 요소들을 컴포넌트화하여 일관된 디자인을 유지할 수 있습니다. 이러한 컴포넌트들은 타입스크립트의 제네릭 등을 이용하여 유연하게 설계할 수 있습니다.

예시 코드:

interface InputProps {
  placeholder: string;
  value: string;
  onChange: (text: string) => void;
}

const Input: React.FC<InputProps> = ({ placeholder, value, onChange }) => {
  return <TextInput placeholder={placeholder} value={value} onChangeText={onChange} />;
};

3. 테마 및 컬러 상수 활용

디자인 시스템을 일관되게 유지하기 위해 테마와 컬러 상수를 활용할 수 있습니다. 이를 통해 앱 전반에 걸쳐 일관된 색상과 디자인 요소를 적용할 수 있습니다. 또한, 타입스크립트의 타입 별칭을 사용하여 테마와 컬러 상수를 타입 안정성 있게 관리할 수 있습니다.

예시 코드:

type Theme = {
  colors: {
    primary: string;
    secondary: string;
    // 기타 색상 상수들
  };
  // 기타 테마 관련 속성들
};

const lightTheme: Theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    // 기타 색상 값들
  },
  // 기타 라이트 테마 관련 속성들
};

const darkTheme: Theme = {
  colors: {
    primary: '#90caf9',
    secondary: '#bdbdbd',
    // 기타 색상 값들
  },
  // 기타 다크 테마 관련 속성들
};

크로스 플랫폼 앱의 디자인 시스템을 일관되게 유지하고 관리하기 위해 타입스크립트와 React Native를 효과적으로 활용할 수 있습니다.

참고 자료:

Styled Components - https://styled-components.com/
TypeScript Handbook - https://www.typescriptlang.org/docs/handbook/intro.html
React Native - https://reactnative.dev/