어떤 상황에 처했을까요?
화면이 평평하고 미완성되어 보일 때, 실제 제품처럼 보이게 하기 위해 배경이나 버튼을 추가하고 싶을 때입니다. 또는 이미 React Native 그라디언트를 추가하려고 했지만, Expo를 사용하는 예제와 네이티브 프로젝트를 사용하는 예제가 반반씩 나뉘어 있기 때문에 설정이 어려운 상황에 처했을 때입니다.
대부분의 튜토리얼은 환경 선택에 대해 설명하지 않습니다. API 컴포넌트는 간단합니다. 환경 선택은 그렇지 않습니다. React Native 선형 그라디언트 설정은 환경 선택에 따라 달라집니다. colors 속성과 더 많은 정보는 Expo가 관리하는 워크플로우인지 아니면 네이티브 링크, pods, 테스트 모킹과 직접 다루는지에 따라 다릅니다.
목차
- 왜 React Native 앱이 그라디언트가 필요합니까?
- Expo vs Bare React Native 설정에서 선택하는 방법
- UI 요소에 대한 코어 그라디언트 기법
- 움직이는 색상 그라디언트를 생생하게 표현하기
- 성능, 접근성 및 플랫폼 특이사항
- 문제 해결 및 최종 최적화
왜 React Native 앱이 그라디언트가 필요합니까?
A lot of mobile UIs fail for the same reason. The layout is fine, spacing is fine, typography is acceptable, but the screen still feels dead. Solid fills make everything look like placeholders unless the rest of the visual system is doing a lot of work.
A linear gradient React Native component fixes that with very little code. It adds depth, creates separation between sections, and gives high-priority elements a clear visual weight. A good gradient background can make a login screen feel intentional. A good gradient button can make the primary action obvious without resorting to heavy shadows or overly loud borders.
By 2019, expo-linear-gradient and react-native-linear-gradient appeared in over 42% of React Native projects, which is a strong signal that gradients aren’t a niche effect anymore. They’re standard UI tooling in production apps, not decoration bolted on at the end, as noted in What gradients do well.
Create depth:
- A screen with one flat background often looks unfinished. A subtle top-to-bottom blend makes the surface feel layered. Guide attention:
- Focus attention: 기본적인 CTAs, 온보딩 카드 및 헤로 헤더는 시각적 노이즈를 추가하지 않고도 눈에 띄게 됩니다.
- 이미지 자산을 대체하세요: 경우에 따라 gradient는 배경 이미지를 추가로 배송하지 않고도 고급 느낌을 줄 수 있습니다.
실용적인 규칙: 위계가 중요한 경우 gradient를 사용하세요. 배경, 헤로 카드, CTA 표면 및 미디어 오버레이가 가장 유리합니다. 양식 필드, 밀집된 목록 및 본문 복사 컨테이너는 일반적으로 그렇지 않습니다.
또한 제품 디자인 관점에서 볼 수 있습니다. 플랫폼을跨越하는 팀은 이미 인터페이스를 일관되게 유지하기 위해 시간을 투자하고 있습니다. 만약 그것이 당신의 스택의 일부라면, 이 모바일 앱의 UI 및 UX 의 교차 플랫폼 관행은 동일한 생각과 일치합니다: 더 적은 자산, 더 재사용 가능한 표면, 화면을跨越하는 시각 시스템이 유지됩니다.
Expo vs Bare React Native Setup
이것은 가장 많은 고통을 일으키는 분기입니다. 렌더링 API은 두 라이브러리 모두에서 거의 동일한 느낌을 주지만, 설정은 아닙니다.
만약 당신이 Expo 관리 앱에 있다면, 사용하세요 expo-linear-gradient만약 당신이 Bare React Native 앱에 있다면, 사용하세요 react-native-linear-gradient. Don’t try to blur those lines unless you know exactly why you’re doing it.
Expo 설정
Expo는 더 편한 경로입니다. 설치는 간단하고, 버전 일치가 자동으로 처리되고, 네이티브 링크에 대해 생각할 필요가 없습니다.
설치 방법은 다음과 같습니다:
npx expo install expo-linear-gradient사용 방법은 다음과 같습니다:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
export default function App() {
return (
<LinearGradient
colors={['#0f172a', '#1d4ed8']}
style={styles.container}
>
<Text style={styles.text}>Hello gradient</Text>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 24,
fontWeight: '700',
},
});Expo는 빠른 설정, 정상적인 기본 설정 및 네이티브 에지의 수가 적은 경우에 적합합니다. 또한 팀이 고급 Expo 워크플로우를 탐색하는 경우 종종 관리된 경로가 앱의 요구 사항을 충족하지 못할 때만 사용하는 custom 네이티브 기능을 위한 Expo 개발 클라이언트를 사용합니다. Bare React Native 설정 Bare React Native는 네이티브 모듈에 직접 접근할 수 있지만 rough edges를 관리해야 합니다.
패키지를 설치하세요:
__CAPGO_KEEP_0__
__CAPGO_KEEP_1__
npm install react-native-linear-gradientiOS에서 설치하는 경우 pods를 설치하세요:
cd ios && pod install기본 사용법:
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
export default function App() {
return (
<LinearGradient
colors={['#111827', '#7c3aed']}
style={styles.container}
>
<Text style={styles.text}>Hello gradient</Text>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: '#fff',
fontSize: 24,
fontWeight: '700',
},
});bare 프로젝트는 일반적으로 다음과 같이 깨지게 됩니다.
대부분의 튜토리얼에서 누락된 부분은 테스트 및 네이티브 설정입니다. Stack Overflow 토론 요약에 따르면 , 2024년부터 2025년까지 이 주제에 대한 Stack Overflow 스레드의 68%는 bare React Native 설정에서 네이티브 모듈 오류를 포함합니다.그리고 동일한 출처는 Jest 모킹과 iOS CocoaPods 충돌과 같은 반복적인 문제를 언급합니다.
bare 앱에서 Jest를 사용하는 경우 mock을 명시적으로 추가하세요:
// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';
jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);그리고 Jest 구성 파일에서 설정 파일을 참조하세요:
module.exports = {
preset: 'react-native',
setupFiles: ['<rootDir>/jest.setup.js'],
};bare React Native는 그라디언트에 잘 작동하지만, 완전한 설정이 없으면 용서하지 않습니다. 대부분의 오류는 시각적 버그가 아니라 링크, pods, 또는 테스트 환경 문제입니다.
실용적인 결정 표입니다.
| 프로젝트 유형 | 라이브러리 | 최적 |
|---|---|---|
| Expo 관리 앱 | expo-linear-gradient |
가장 빠른 경로, 가장 적은 설정 |
| bare React Native 앱 | react-native-linear-gradient |
전체 네이티브 제어 |
| Jest bare 앱 | react-native-linear-gradient + 모의 |
테스트 안정성을 유지하기 위해 필요 |
UI 요소에 대한 코어 그레이디언트 기법
일반적인 접근 방식은 동일한 작은 그레이디언트 패턴 세트를 반복적으로 사용하는 것입니다. 배경. 버튼. 헤드라인. 만약 이 세 가지가 solid라면, 그들을 여러 화면에 재사용할 수 있습니다.
A useful mental model 이다.
colors색상 팔레트를 제어합니다.start그리고end방향을 제어합니다.locations전환의 위치를 제어합니다.
스플래시 또는 온보딩 화면이 그라디언트를 사용한다면, 이 가이드에서 설명하는 더 광범위한 시작 시퀀스 패턴과 자연스럽게 어울립니다. 리액트 네이티브 스플래시 화면 가이드.
전체 화면 배경 그라디언트
이것은 가장 단순하고 재사용 가능한 패턴입니다.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';
export default function WelcomeScreen() {
return (
<LinearGradient
colors={['#0f172a', '#1e293b', '#2563eb']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.container}
>
<View style={styles.content}>
<Text style={styles.title}>Welcome back</Text>
<Text style={styles.subtitle}>Your workspace is ready.</Text>
</View>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 24,
},
title: {
color: '#fff',
fontSize: 32,
fontWeight: '800',
marginBottom: 8,
},
subtitle: {
color: 'rgba(255,255,255,0.8)',
fontSize: 16,
},
});대각선 블렌드는 기본적인 수직 블렌드보다 더 동적하게 느껴질 때가 많습니다. 그 이유는 start={{ x: 0, y: 0 }} 그리고 end={{ x: 1, y: 1 }} 화면이 주로 꾸미기 위한 경우에는 기본값으로 사용하는 것이 좋습니다.
색상만 선택하지 마세요. 실제 텍스트, 아이콘, 상태바 스타일과 함께 테스트하세요. Figma에서 좋은 색상 팔레트는 콘텐츠가 위에 올려진 순간 즉시 실패할 수 있습니다.
터치 반응이 있는 그라디언트 버튼
그라디언트를 직접 터치 반응에 넣고 비활성화 상태, 클릭 피드백, 패딩 일관성을 잊지 마세요. 버튼의 의미를 유지하고 그라디언트를 시각적 층으로 두세요.
import React from 'react';
import {
Pressable,
StyleSheet,
Text,
ViewStyle,
StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
type Props = {
title: string;
onPress: () => void;
disabled?: boolean;
style?: StyleProp<ViewStyle>;
};
export function GradientButton({
title,
onPress,
disabled = false,
style,
}: Props) {
return (
<Pressable onPress={onPress} disabled={disabled} style={style}>
{({ pressed }) => (
<LinearGradient
colors={
disabled
? ['#94a3b8', '#94a3b8']
: pressed
? ['#7c3aed', '#2563eb']
: ['#8b5cf6', '#3b82f6']
}
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
style={styles.button}
>
<Text style={styles.label}>{title}</Text>
</LinearGradient>
)}
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
minHeight: 52,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 20,
},
label: {
color: '#fff',
fontSize: 16,
fontWeight: '700',
},
});버튼의 경우 수평 그라디언트가 대각선보다 더 읽기 좋습니다. 레이블을 안정적으로 유지하고 컨트롤이 기울어지지 않도록 하세요.
그라디언트 텍스트에 마스크를 사용하세요.
이 패턴은 가장-flashy한 패턴입니다. Hero 제목, 업그레이드 배너, 빈 상태 헤드라인은 좋은 후보지만, 문단 텍스트는 아닙니다.
이것을 사용하려면 @react-native-masked-view/masked-view.
npm install @react-native-masked-view/masked-view그라디언트 마스크를 만들면:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
export default function GradientHeadline() {
return (
<View style={styles.container}>
<MaskedView
maskElement={
<View style={styles.maskWrapper}>
<Text style={styles.title}>Premium analytics</Text>
</View>
}
>
<LinearGradient
colors={['#22c55e', '#06b6d4', '#3b82f6']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
locations={[0, 0.5, 1]}
>
<Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
</LinearGradient>
</MaskedView>
</View>
);
}
const styles = StyleSheet.create({
container: {
padding: 24,
},
maskWrapper: {
backgroundColor: 'transparent',
},
title: {
fontSize: 34,
fontWeight: '800',
letterSpacing: -1,
},
hiddenText: {
opacity: 0,
},
});locations 색상이 혼합되어 보이면, 색상이 더 많은 공간을 차지하도록 하세요. 색상이 혼합되어 보이면, 색상 수를 줄이세요. 일반적으로 디자인을 더 빠르게 고쳐주며, 모든 스톱을 조정하는 것보다 더 빠릅니다.
그라디언트를 사용하여 애니메이션을 추가하세요.
정적 그라디언트는 멋을 줍니다. 애니메이션된 그라디언트는 피드백을 줍니다.
가장 실용적인 사용은 화려한 배경이 아닙니다. 그것은 셔머 로더입니다. 이 효과는 사용자가 앱이 활성화되어 있고 데이터가 들어오고 현재 레이아웃이 의도된 것이며, 깨진 것이 아닌지 알려줍니다.
Shimmer 컴포넌트는 다른 동작 패턴과도 잘 어울립니다. 이미 애니메이션 아이콘이나 로더를 사용하는 앱이 있다면, 이 가이드는 gradient shimmer가 충분하고 richer animation asset가 더 의미가 있는지 결정하는 데 도움이 됩니다. React Native에서 Lottie 사용하는 방법 native한 로더를 만드는 데 도움이 되는 Shimmer 로더
이것은 가장 간단하고 신뢰할 수 있는 버전입니다.
Reanimated을 설치하고 앱에 이미 설치되어 있지 않다면, wrapper를 만들고 react-native-reanimated .안에 gradient layer를 왼쪽에서 오른쪽으로 애니메이션을 합니다.
이것이 작동하는 이유는 gradient 정의 자체를 애니메이션하는 것이 아니라, gradient layer를 static placeholder 위에 애니메이션하는 것입니다. 이것은 더 간단하고 더 쉽게 이해할 수 있으며, 일반적으로 장치 간에 더 안정적입니다. overflow: 'hidden'이 효과의 시각적인_walkthrough입니다.
import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
useAnimatedStyle,
useSharedValue,
withRepeat,
withTiming,
Easing,
} from 'react-native-reanimated';
const AnimatedView = Animated.createAnimatedComponent(View);
type Props = {
width?: number | string;
height?: number;
borderRadius?: number;
style?: StyleProp<ViewStyle>;
};
export function ShimmerPlaceholder({
width = '100%',
height = 16,
borderRadius = 8,
style,
}: Props) {
const translateX = useSharedValue(-220);
useEffect(() => {
translateX.value = withRepeat(
withTiming(220, {
duration: 1200,
easing: Easing.linear,
}),
-1,
false
);
}, [translateX]);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: translateX.value }],
}));
return (
<View
style={[
styles.container,
{ width, height, borderRadius },
style,
]}
>
<AnimatedView style={[styles.shimmer, animatedStyle]}>
<LinearGradient
colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
start={{ x: 0, y: 0.5 }}
end={{ x: 1, y: 0.5 }}
style={styles.gradient}
/>
</AnimatedView>
</View>
);
}
const styles = StyleSheet.create({
container: {
overflow: 'hidden',
backgroundColor: '#e5e7eb',
},
shimmer: {
...StyleSheet.absoluteFillObject,
width: 220,
},
gradient: {
flex: 1,
},
});애니메이션 컴포넌트
이 가이드는 gradient shimmer가 충분하고 richer animation asset가 더 의미가 있는지 결정하는 데 도움이 됩니다.
이것은 가장 간단하고 신뢰할 수 있는 버전입니다.
몇 가지 구현 노트가 중요합니다:
- 클리핑을 사용하세요: 부모가 필요합니다
overflow: 'hidden', 또는 스크린 샘플러가 둥근 모서리 바깥으로 bleed 할 것입니다. - 밴드 너비를 좁게 유지하세요: 작은 애니메이션 레이어는 전체 표면을 애니메이션하는 것보다 쉽게 조정할 수 있습니다.
- 스크린 색상과 일치하세요: 스크린 샘플러는 주변 레이아웃과 일치해야 하며, 별도의 위젯처럼 보이지 않아야 합니다.
애니메이션 그라디언트가 가장 잘 작동하는 것은 사용자가 그들을 거의 알아차리지 못할 때입니다. 스크린 샘플러가 가장 큰 소리로 들리면, 너무 많이 하고 있습니다.
성능, 접근성 및 플랫폼 특성
그라디언트가 데모 화면에서 프로덕션으로 이동하면 우려가 달라집니다. code은 여전히 간단하게 보이지만 렌더링 동작, 읽기 가능성 및 플랫폼 일관성은 초기 효과보다 더 중요해집니다.
응용 프로그램 반응성을 더 광범위하게 개선하고 있다면 모바일 앱 성능 최적화 가이드 같은 마음가짐을 가진다: 불필요한 작업을 줄이고, 실제 기기에서 측정하고, 사용자가 가장 많이 보는 표면을 최적화한다.
성능 체크리스트
자연적인 그라디언트는 일반적으로 효율적이지만, 여전히 그라디언트를 잘못 사용할 수 있다.
- 큰 장식 이미지를 대신하는 그라디언트를 선호한다: 그들은 일반적으로 더 깨끗하게 전송되고, 여러 화면 크기에 쉽게 적응할 수 있다.
- 많은 풀 스크린 레이어를 쌓지 않는다: 한 개의 배경 그라디언트는 괜찮다. 여러 개의 겹쳐진 투명한 그라디언트에 블러 효과와 무거운 애니메이션을 추가하면 비용이 많이 들 수 있다.
- 재사용 가능한 컴포넌트를 메모이즈한다: 그라디언트 카드를 목록에 사용할 때, props를 안정적으로 유지하고, 관련된 부모 상태로 인해 다시 렌더링하지 않는다.
좋은 규칙은 그라디언트를 구조적인 것으로, 과도하게 사용하지 않는 것이다. 사용자가 가장 많이 보는 표면을 정의하는 데 사용하고, 밀집된 피드의 모든 행에 사용하지 않는다.
접근성 체크리스트
대비가 표면 전체에 걸쳐 변하는 경우, 색상이 읽기 어려울 수 있습니다.
- 어두운 영역의 가장 밝은 부분과 비교하여 테스트 텍스트를 입력하세요: 만약 흰색 텍스트가 블렌드의 어두운 쪽에서만 작동한다면, 작동하지 않습니다.
- 필요한 경우 스크림을 추가하세요: 배경과 텍스트 사이의 약간 어두운 오버레이가 전체 색상 팔레트를 변경하는 것보다 더 좋습니다.
- 대형 디스플레이 복사본에만 그라디언트 텍스트를 예약하세요: 헤드라인에서는 좋지만, 작은 레이블, 도움말 텍스트, 또는 작업을 완료하는 데 중요한 내용은 아닙니다.
그라디언트의 가장 나쁜 경우의 점을 확인하세요, 아니라 가장 예쁜 점을 확인하세요.
플랫폼의 특이한 점을 확인하세요
iOS와 Android는 일반적으로 동일한 그라디언트를 렌더링하지만, 항상 완벽하게 렌더링되지 않습니다.
| 이슈 | 일반적으로 도움이 됩니다. |
|---|---|
| 플랫폼 간 gradient가 다르게 보인다 | 사용하는 색상이 적고 gradient의 stop 간의 contrast가 명확해야 한다 |
| 라운드 코너가 gradient를 클리핑하지 않는다 | container에 overflow: 'hidden' gradient가 전혀 보이지 않는다 |
| width, height, 또는 | 첫 번째 flex: 1 또한 notch가 있는 기기의 status bar와 safe area 처리를 확인해야 한다. 시뮬레이터에서 balance가 되는 gradient가 notch가 있는 기기에서 top-heavy하게 느껴질 수 있다. 그 이유는 content와 background가 notch에 대한 추가 공간을 고려하지 않았기 때문이다. |
문제 해결 및 최종 최적화 방법
프로젝트 노트에 남길 짧은 버전이다.
라이브러리를 워크플로우에 맞춰라:
- __CAPGO_KEEP_0__
expo-linear-gradientExpo 관리 앱에 대해react-native-linear-gradientbare React Native에 대해 - Gradient의 목적을 명확하게 하세요: 배경, CTAs, 오버레이, 그리고 헤로 텍스트는 강력한 사용 사례입니다.
- 방향을 의도적으로 제어하세요: 버튼에는 수평, 장식 배경에는 대각선, 큰 텍스트에는 마스킹만 사용하세요.
- 빈 상태 대신 콘텐츠를 디자인하세요: 실제 복사본, 아이콘, 상태바 처리와 함께 테스트하세요.
- bare 설정을 native 설정으로 다루세요: Pods, 링크, Jest 모의를 포함한 모든 세부 사항은 필수입니다.
반복적으로 나타나는 세 가지 일반적인 실패가 있습니다.
Gradient가 나타나지 않음
원인: 컴포넌트가 보이지 않는 크기를 가지고 있기 때문입니다.
해결: 명시적인 높이 또는 부모 요소의 크기를 주세요. 의미 있는 방식으로 렌더링되지 않는 gradient는 layout box가 없을 때입니다. flex: 1iOS 빌드가 설치 후에 실패합니다.
원인: pods가 설치되지 않았거나 네이티브 의존성 그래프가 동기화되지 않았기 때문입니다.
해결:
에서 pod install 을 실행하세요. 빌드 폴더를 정리할 필요가 있다면 빌드 폴더를 정리하세요. 그리고 앱을 다시 빌드하세요. bare 프로젝트의 경우 패키지 설치만으로는 충분하지 않습니다. ios테스트가 네이티브 모듈 오류로 실패합니다.
원인: Jest가 실제 네이티브 모듈을 로드하고 있기 때문입니다.
해결:
을 모킹하세요. react-native-linear-gradient with react-native-linear-gradient/jest/linear-gradient-mock Jest 설정 파일에서.
이 가이드에서 한 가지 아이디어를 기억한다면, 이 하나만 기억하세요: 그라디언트 자체는 쉽습니다. 실제로 작동하는 설정은 주된 노력입니다. 앱 아키텍처에 적합한 라이브러리를 선택하면 그 이후의 모든 것이 훨씬 더 예측 가능해집니다.
팀이 하이브리드 모바일 앱을 배포하고 JavaScript, CSS, 복사본, 구성, 및 자산 업데이트를 스토어 리뷰 대기 없이 푸시하고 싶다면 Capgo CapacitorJS 및 Electron 팀이 제어된 라이브 업데이트, 롤아웃 채널, 롤백 보호, 및 릴리스 시각화를 제공하는 것은 흥미로운 것입니다.
