MakerBox

React Native 그림자 생성기

iOS의 shadowColor·Offset·Opacity·Radius와 안드로이드의 elevation을 하나의 스타일 객체로 합친 React Native 그림자를 디자인하세요.

React Native 그림자 생성기

그림자를 시각적으로 디자인하고 바로 붙여넣을 수 있는 React Native 스타일 객체를 복사하세요 — iOS shadow* 속성과 Android elevation을 함께 출력합니다.

iOS
Android
#000000

iOS와 안드로이드 API 28 이상에서 쓰입니다. 그 아래 안드로이드는 검은색으로 그립니다.

대상 플랫폼

각 플랫폼은 자기 속성만 읽고 나머지는 무시합니다.

React Native 스타일 객체

{
  shadowColor: '#000000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.25,
  shadowRadius: 4,
  elevation: 5,
}
결과 7줄, 128자

미리보기는 CSS box-shadow를 쓰는데, React Native는 이를 0.76 이상의 New Architecture에서 boxShadow로만 읽습니다. 위의 스타일 객체를 복사하세요: iOS는 shadowColor / shadowOffset / shadowOpacity / shadowRadius를 읽고, Android는 elevation으로 그림자를 그립니다.

안드로이드 카드는 해당 elevation의 머티리얼 그림자로, 안드로이드가 실제로 그리는 모양입니다. shadowOffset·shadowOpacity·shadowRadius는 무시하며, shadowColor는 API 28 이상에서만 쓰고 그 아래에서는 검은색입니다.

React Native 그림자를 시각적으로

불투명도·반경·오프셋·elevation 슬라이더를 조절하고 색상을 고른 뒤 바로 붙여넣을 수 있는 React Native 스타일 객체를 복사하세요. 미리보기 상자는 CSS box-shadow로 그림자를 비슷하게 보여주므로 앱에 넣기 전에 결과를 확인할 수 있습니다.

왜 box-shadow를 쓰지 못하나요?

React Native 0.76 전에는 box-shadow가 아예 없고, boxShadow 스타일도 New Architecture에서만 동작합니다. iOS는 shadowColor·shadowOffset·shadowOpacity·shadowRadius로, Android는 elevation 값으로 그림자를 그립니다. 이 도구는 둘을 함께 출력하므로 스타일 하나가 두 플랫폼에서 모두 동작합니다. 대상 플랫폼 줄에서 iOS와 안드로이드를 함께, iOS만, 안드로이드만(shadowColor와 elevation), 또는 React Native 0.76 이상 New Architecture용 boxShadow 문자열 하나를 고를 수 있고, 미리보기 카드도 그에 맞춰 바뀝니다.

자주 묻는 질문

iOS 속성과 Android elevation이 왜 둘 다 필요한가요?

iOS는 shadowColor·shadowOffset·shadowOpacity·shadowRadius 속성을 읽지만 Android는 이를 무시하고 elevation 값으로 그림자를 그리기 때문에 둘 다 포함합니다. 안드로이드는 API 28 이상에서만 shadowColor를 쓰고, 그 아래에서는 검은 그림자를 그립니다. elevation은 겹치는 뷰 중 어느 것이 위에 그려지는지도 바꿉니다.

미리보기가 실제와 똑같나요?

미리보기는 CSS box-shadow로 iOS 그림자를 흉내 낸 것입니다. 실제 기기에서의 렌더링, 특히 Android의 elevation은 조금 다를 수 있으니 대략적인 기준으로 보세요.

안드로이드에서는 그림자가 어떻게 보이나요?

iOS 카드 옆에 머티리얼 elevation 그림자로 그린 안드로이드 카드가 있고, 깊이 슬라이더 하나로 iOS 그림자 속성과 안드로이드 elevation을 함께 맞춰 두 플랫폼이 비슷하게 보이게 합니다.

한 플랫폼이 읽는 속성만 쓰거나 boxShadow로 받을 수 있나요?

네. 대상 플랫폼 줄에서 iOS만(그림자 속성 넷, elevation 없음), 안드로이드만(shadowColor와 elevation. iOS는 shadowOpacity를 정하지 않으면 0이라 이것만으로는 그림자를 그리지 않습니다), 또는 boxShadow 문자열 하나를 고를 수 있습니다. boxShadow는 React Native 0.76 이상의 New Architecture에서만 동작하고, 안드로이드에서 바깥 그림자는 Android 9 이상이 필요합니다. 반경을 흐림 값으로 쓴, iOS 카드에 보이는 것과 같은 그림자입니다.