React Native에서 그림자 중첩(Android 그림자 중첩 불가 고려)

Jun 20, 2025

React Native에서 그림자 중첩(Android 그림자 중첩 불가 고려)

Contents

🔍 문제 상황 📱 플랫폼별 그림자 처리 차이 🎯 구현 방식 비교 웹 React Native - iOS React Native -Android 💡 핵심 정리 ✅ 결론

🔍 문제 상황

React Native에서 두 겹의 그림자(box-shadow)를 구현하고 싶었음. 웹에서는 아래처럼 간단하게 처리할 수 있는데:

box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.20);

RN에서는 플랫폼에 따라 그림자 처리 방식이 다르고, 특히 Android에서 복수 그림자 적용이 불가능해서 막힘.

디자인 팀에선 아래와 같이 중첩된 쉐도우 박스를 원했으나 Android에서는 말했던것과 같이 중첩 불가

📱 플랫폼별 그림자 처리 차이

✅ iOS

shadowColor, shadowOffset, shadowOpacity, shadowRadius 속성을 사용해 그림자를 표현한다.
중첩된 View 각각에 다른 shadow 속성을 주면, 모든 그림자가 실제로 렌더링된다.
즉, SwiftUI의 .shadow().shadow()처럼 다중 그림자 효과를 구현할 수 있다.

❌ Android

그림자는 오직 elevation 속성으로만 표현된다.
elevation은 단일 값만 유효하며, 하위 View에 설정된 elevation은 무시된다.
중첩 구조라도 가장 바깥 View의 elevation만 그림자 효과로 적용된다.

🎯 구현 방식 비교

웹

box-shadow:
  0px 1px 6px rgba(0,0,0,0.12),
  0px 4px 12px rgba(0,0,0,0.20);

React Native - iOS

<View style={shadow1}>         // 첫 번째 그림자
  <View style={shadow2}>       // 두 번째 그림자
    <View style={content}/>    // 실제 내용
  </View>
</View>

React Native -Android

<View style={androidShadow}>  // 하나의 elevation만 적용
  <View style={content}/>
</View>

const androidShadow = {
  backgroundColor: 'white',
  elevation: 12, // 두 그림자 중 더 강한 쪽을 택함
};

💡 핵심 정리

React Native에서는 다중 그림자를 구현하려면 View를 중첩해서 각각에 스타일을 주어야 한다.
iOS는 모든 View의 shadow가 렌더링되므로, 중첩 구조를 통해 실제 두 겹의 그림자를 구현할 수 있다.
Android는 하위 View의 elevation이나 shadow 속성이 무시되므로, 가장 강조되는 하나의 그림자만 적용해야 한다.
일반적으로는 box-shadow 배열 중에서 offset, blur, opacity가 가장 큰 그림자를 Android에서 사용한다.