직접 사용하고 싶지 않은 앱을 만든 적이 있나요?

저는 주니어 앱 개발자였을 때 혼란스러운 사용자 인터페이스를 구축하곤 했습니다.

때때로 저 UI들을 보면 '세상에 누가 이런 걸 사용하고 싶어하겠는가? 정말 끔찍해'라는 생각이 들곤 했습니다.

어떤 때에는 제가 지적할 수 없는 '뭔가 이상한 것'이 있을 뿐이었습니다.

디자인 팀으로부터 놀랍도록 세련된 디자인을 받았지만 내 앱은 20%도 좋아 보이지 않았습니다.

저는 이 문제를 알고 있었고 이를 해결하기 위해 연구의 토끼굴에 들어갔고, 앱 구축 방식을 변화시키는 디자인 시스템의 개념을 발견했습니다.

디자인 시스템이라는 놀라운 것은 무엇입니까?

디자인 시스템이 왜 필요한지 이해하려면 디자인 시스템이 무엇인지 이해하는 것이 중요합니다.

디자인 시스템은 기본적으로 귀하와 팀의 디자인 결정을 위한 중앙 집중식 정보 소스입니다. 어떤 색상을 어디에 사용해야 하는지 알려 주나요? 앱에는 몇 가지 유형의 버튼이 있습니까? 목록에 있는 카드에 그림자가 있나요? 모든 답은 디자인 시스템에서 나옵니다.

디자인 시스템을 사용하면 다음과 같은 이점이 있습니다.

• 일관된 UI: 인터페이스 여기저기에 아무런 이유 없이 이상한 간격이 생기지 않습니다. 모든 기기에서 균일하게 보이고 느껴질 것입니다.

• 신속한 결정: 디자인 시스템은 결정을 더 쉽게 만들기 위해 특정 제약 조건을 적용합니다. 옵션이 많을수록 더 많은 분석 마비가 발생합니다.

• 확장 가능한 앱: 앱이 성장함에 따라 디자인 시스템은 처음부터 구축하는 대신 구성 요소를 재사용하는 데 도움이 됩니다.

• 개발에 집중: 더 이상 버튼이 녹색인지 파란색인지 강조할 필요가 없습니다. 대신 중요한 것에 집중하게 됩니다.

도구 및 라이브러리

수많은 React Native UI 라이브러리가 있지만 저는 성능 및 버그와 관련하여 대부분 끔찍한 경험을 겪었기 때문에 맞춤 접근 방식을 사용합니다.

제가 접근 방식에 의존하는 유일한 라이브러리는 반응 네이티브 크기 문제입니다.

이제 "크기는 중요하지 않습니다!"라고 소리치기 전에, 중요하다는 점을 먼저 말씀드리겠습니다. 특히 모바일 앱의 경우에는 더욱 그렇습니다.

귀하의 로고가 버튼을 숨겨서 사용자가 앱을 열고 모든 것을 덮고 있는 거대한 로고를 보고 시도도 하지 않고 삭제하기 전에 "이게 뭐야..."라고 생각하는 것을 원하지 않을 것입니다.

여기서 반응 네이티브 크기 문제가 도움이 됩니다. 기기에 맞게 구성 요소의 크기를 조정하여 앱이 반응하도록 만듭니다. 따라서 사용자가 어떤 장치를 가지고 있든 로고는 넣은 위치에 그대로 유지됩니다.

테마 설정

제가 가장 먼저 정의하는 것 중 하나는 핵심 디자인 토큰입니다. 이것이 내 디자인 시스템의 구성 요소입니다. 여기에는 색상 팔레트, 타이포그래피, 간격 및 글꼴 크기가 포함됩니다.

다음 코드를 사용하여 theme.ts 파일을 생성하여 이 작업을 수행합니다.

import {moderateScale} from 'react-native-size-matters';

// after installing custom fonts:
export const FontFamily = {
  bold: 'Poppins-Bold',
  semibold: 'Poppins-SemiBold',
  medium: 'Poppins-Medium',
  regular: 'Poppins-Regular',
  thin: 'Poppins-Thin',
};

const colors = {
  primary100: '#2E2C5F',
  primary80: '#524DA0',
  primary60: '#736DDF',
  primary40: '#A09BFF',
  primary20: '#DCDAFF',

  secondary100: '#484A22',
  secondary80: '#858945',
  secondary60: '#D9DF6D',
  secondary40: '#F8FCA1',
  secondary20: '#FDFFD4',

  neutral100: '#131218',
  neutral90: '#1D1C25',
  neutral80: '#272631',
  neutral70: '#343341',
  neutral60: '#3E3D4D',
  neutral50: '#53526A',
  neutral40: '#757494',
  neutral30: '#9C9AC1',
  neutral20: '#CBC9EF',
  neutral10: '#E8E7FF',
  white: '#fff',
  black: '#222',

  error: '#E7002A',
  success: '#3EC55F',
  warning: '#FECB2F',
  info: '#157EFB',
};

const theme = {
  colors,
  fontSizes: {
    xxl: moderateScale(32),
    xl: moderateScale(28),
    lg: moderateScale(24),
    md: moderateScale(20),
    body: moderateScale(17),
    sm: moderateScale(14),
    xs: moderateScale(12),
    xxs: moderateScale(10),
    xxxs: moderateScale(8),
  },
  spacing: {
    none: 0,
    xxs: moderateScale(4),
    xs: moderateScale(8),
    md: moderateScale(12),
    lg: moderateScale(16),
    xl: moderateScale(20),
    xxl: moderateScale(24),
    xxxl: moderateScale(28),
  },
};

export default theme;

재사용 가능한 구성 요소 만들기

디자인 토큰이 준비되면 상자, 타이포그래피, 입력과 같은 재사용 가능한 구성 요소를 정의합니다. 이러한 구성 요소는 디자인 토큰을 준수하여 앱 전체에서 일관성을 보장합니다.

예를 들어 Box 구성 요소를 만드는 방법은 다음과 같습니다.

import {
  View,
  type ViewProps,
  type FlexAlignType,
  type ViewStyle,
} from 'react-native';
import theme from '../styles/theme/theme';

export interface IBox extends ViewProps {
  backgroundColor?: keyof typeof theme.colors;
  p?: keyof typeof theme.spacing;
  pv?: keyof typeof theme.spacing;
  ph?: keyof typeof theme.spacing;
  pt?: keyof typeof theme.spacing;
  pb?: keyof typeof theme.spacing;
  pl?: keyof typeof theme.spacing;
  pr?: keyof typeof theme.spacing;
  m?: keyof typeof theme.spacing;
  mv?: keyof typeof theme.spacing;
  mh?: keyof typeof theme.spacing;
  mt?: keyof typeof theme.spacing;
  mb?: keyof typeof theme.spacing;
  ml?: keyof typeof theme.spacing;
  mr?: keyof typeof theme.spacing;
  gap?: number;
  flex?: number;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  alignItems?: FlexAlignType;
  justifyContent?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  rounded?: boolean;
}

export default function Box({
  backgroundColor,
  p,
  pv,
  ph,
  pt,
  pb,
  pr,
  pl,
  m,
  mv,
  mh,
  mt,
  mb,
  ml,
  mr,
  children,
  style,
  flex,
  alignItems,
  justifyContent,
  flexDirection = 'column',
  rounded = false,
  gap = undefined,
  ...rest
}: IBox) {
  const getMargin = () => {
    const obj: any = {};

    if (m) {
      obj.margin = theme.spacing[m];
      return obj;
    }
    if (mt) obj.marginTop = mt ? theme.spacing[mt] : 0;
    if (mb) obj.marginBottom = mb ? theme.spacing[mb] : 0;
    if (ml) obj.marginLeft = ml ? theme.spacing[ml] : 0;
    if (mr) obj.marginRight = mr ? theme.spacing[mr] : 0;
    if (mv) obj.marginVertical = theme.spacing[mv];
    if (mh) obj.marginHorizontal = theme.spacing[mh];
    return obj;
  };

  const getPadding = () => {
    const obj: any = {};

    if (p) {
      obj.padding = theme.spacing[p];
      return obj;
    }

    if (pt) obj.paddingTop = pt ? theme.spacing[pt] : 0;
    if (pb) obj.paddingBottom = pb ? theme.spacing[pb] : 0;
    if (pl) obj.paddingLeft = pl ? theme.spacing[pl] : 0;
    if (pr) obj.paddingRight = pr ? theme.spacing[pr] : 0;
    if (pv) obj.paddingVertical = theme.spacing[pv];
    if (ph) obj.paddingHorizontal = theme.spacing[ph];

    return obj;
  };

  const boxStyles: ViewStyle[] = [
    {
      backgroundColor: backgroundColor
        ? theme.colors[backgroundColor]
        : undefined,
      flex,
      justifyContent,
      alignItems,
      flexDirection,
      borderRadius: rounded ? 10 : 0,
      gap,
    },
    getMargin(),
    getPadding(),
    style,
  ];

  return (
    
      {children}
    
  );
}

저는 새로 생성된 이 Box 구성 요소를 View 대신 사용합니다. 다음과 같이 소품을 통해 신속하게 스타일을 지정할 수 있습니다(타입 스크립트를 사용하는 경우 제안 제공).

다음은 React Native의 Text 구성 요소 대신 사용하는 Typography 구성 요소를 만드는 방법에 대한 예입니다.

'반응'에서 반응을 가져옵니다; 'react-native'에서 {Text, type TextProps}를 가져옵니다. '../styles/theme/theme'에서 테마 가져오기, {FontFamily}; 내보내기 인터페이스 ITypography는 TextProps를 확장합니다. 크기?: 테마 유형의 키입니다.글꼴 크기; 색상?: 테마 유형의 키입니다.색상; textAlign?: '가운데' | '자동' | '왼쪽' | '맞아' | '신이 옳다고 하다'; 변형?: FontFamily 유형의 키; } 기본 기능 내보내기({ 크기, 색상, 텍스트정렬, 어린이들, 스타일, 변종, ...나머지 }: I타이포그래피) { 반품 ( {어린이들} ); }

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

다음은 맞춤 타이포그래피 구성 요소에 스타일을 얼마나 빨리 추가할 수 있는지 미리 보여줍니다.

사용자 정의 사용테마 후크

테마를 계속해서 가져오는 대신, 테마에 맞는 스타일을 추가하기 위해 앱 어디에서나 호출하는 사용자 정의 useTheme 후크를 생성하여 코드를 더 읽기 쉽게 만듭니다.

이를 위해 저는 React의 Context API를 활용하여 앱에 테마를 전달합니다.

ThemeProvider.tsx 파일을 만들고 그 안에 ThemeContext 및 ThemeProvider를 정의하여 내 앱 구성 요소를 래핑합니다. 코드는 다음과 같습니다.

import React, 'react'에서 {type PropsWithChildren, createContext}; './theme'에서 테마 가져오기; 내보내기 const ThemeContext = createContext(theme); 기본 함수 내보내기 ThemeProvider({children}: PropsWithChildren) { 반품 ( {children} ); }

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

그런 다음 내 앱 구성 요소 내부에서:

기본 함수 내보내기 App() { 반품 ( ); }

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

이제 전체 앱이 ThemeContext에 액세스할 수 있으므로 useTheme 후크를 만듭니다.

'반응'에서 {useContext}를 가져옵니다. '../styles/theme/ThemeProvider'에서 {ThemeContext}를 가져옵니다. 기본 함수 내보내기 useTheme() { const 테마 = useContext(ThemeContext); 테마 반환; }

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

이제 다음과 같이 useTheme 후크를 호출하여 어디서나 내 테마에 액세스할 수 있습니다.

const 테마 = useTheme(); // 사용 예: theme.colors.primary100; theme.spacing.md; theme.fontSizes.lg;

const theme = useTheme();
// example usage:
theme.colors.primary100;
theme.spacing.md;
theme.fontSizes.lg;

다크 모드

다크 모드를 구현하기 위해 theme.ts 파일에 다크 모드 색상이 포함된 다른 색상 팔레트를 추가합니다.

const darkTheme = { 내보내기 // 여기에 값만 변경하는 라이트 모드와 동일하게 키를 유지하면서 다크 모드 색상을 정의합니다. }

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    
      {children}
    
  );
}

그런 다음 ThemeProvider에서 사용자 설정을 확인하고 다음과 같이 테마를 전환합니다.

import {useColorScheme} from 'react-native';

export default function ThemeProvider({children}: PropsWithChildren) {

const isDarkMode = useColorScheme() === 'dark';

  return (
{children}

  );

}

결론

이 명확하고 구조화된 접근 방식을 따르면 내 앱에 꼭 필요한 명확성, 일관성 및 미적 아름다움을 얻을 수 있었으며 더 이상 디자인 결정에 고민할 필요가 없기 때문에 개발 속도가 10배 이상 빨라졌습니다.

이 접근 방식을 시도해 보시고 의견을 댓글로 알려 주시기 바랍니다. 조금 개선하면 되지 않을까요?