React Native 그림자 생성기

React Native의 그림자는 플랫폼마다 작동 방식이 다릅니다. iOS는 shadowColor, shadowOffset, shadowOpacity, shadowRadius를 읽어 들이는 반면, Android는 이 값들을 전부 무시하고 대신 별도의 elevation 숫자가 필요합니다. 여기서 그림자를 시각적으로 조정하고 두 플랫폼을 모두 처리하는 style 객체를 복사하세요. New Architecture를 사용하는 앱을 위한 크로스플랫폼 boxShadow 문자열도 함께 제공됩니다.

이 도구는 무엇인가요?

React Native에서 그림자는 기본적으로 크로스플랫폼이 아닙니다. iOS는 네 가지 독립된 스타일 속성(shadowColor, width/height로 이루어진 shadowOffset, 0~1 범위의 shadowOpacity, 흐림 정도를 나타내는 shadowRadius)을 사용하며, 이는 웹의 box-shadow가 사용하는 것과 동일한 CoreAnimation 그림자 메커니즘에 매핑됩니다. Android의 네이티브 View 시스템은 임의 형태의 그림자를 아예 지원하지 않습니다 — 오직 elevation만 지원하는데, 이는 뷰가 얼마나 '떠 있는' 것처럼 보이는지를 기준으로 고정된 Material Design 드롭섀도우를 만드는 단일 숫자입니다.

즉, shadowRadius/shadowOpacity로 iOS에서 제대로 보이는 그림자라도 elevation을 별도로 설정하지 않으면 Android에서는 아예 표시되지 않으며, elevation의 그림자 형태는 iOS처럼 자유롭게 커스터마이즈할 수 없기 때문에 두 플랫폼이 픽셀 단위로 완전히 동일해질 수는 없습니다. New Architecture가 활성화된 React Native 0.74부터는 CSS와 동일한 문법을 사용하는 크로스플랫폼 boxShadow 스타일 속성도 사용할 수 있습니다.

왜 사용해야 할까요?

오프셋, 흐림, 불투명도, 색상을 조정하는 동안 실시간 시각적 미리보기를 확인할 수 있어, 값을 추측하고 앱을 다시 빌드해서 확인할 필요가 없습니다.
iOS 그림자 속성, Android elevation, 새로운 크로스플랫폼 boxShadow 문자열을 한 번에 얻을 수 있어 세 가지 다른 API를 찾아볼 필요가 없습니다.
elevation은 (흐림/불투명도에서 자동 계산되지 않는) 별도의 컨트롤입니다. Android의 elevation과 그림자 외형 사이의 매핑은 iOS 그림자 속성을 직접 변환한 것이 아니기 때문에 시각적으로 맞을 때까지 직접 조정해야 하며, 이 도구는 두 그림자를 나란히 비교하며 조정할 수 있게 해줍니다.
무료, 즉시 생성, 하나의 style 객체로 바로 복사 가능합니다.

사용 방법

오프셋 X/Y, 흐림 반경, 불투명도, 그림자 색상을 조정하면 미리보기 박스가 실시간으로 업데이트됩니다.
원하는 그림자 강도와 시각적으로 일치할 때까지 Android elevation 숫자를 별도로 조정하세요.
"Copy"를 클릭하여 iOS 속성, Android elevation, boxShadow 문자열이 모두 포함된 전체 style 객체를 복사하세요.
복사한 객체를 컴포넌트의 StyleSheet에 붙여넣고, 기존 뷰 스타일과 병합하거나 함께 펼쳐서 사용하세요.

예시

입력

오프셋 (0, 4), 흐림 8, 불투명도 0.25, 검정, elevation 5

결과

shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'

shadowRadius는 미리보기에 표시되는 흐림 값의 절반으로 설정되며, 이는 CSS의 흐림 반경과 iOS의 shadowRadius 사이의 실제 관계와 일치합니다.

자주 묻는 질문

왜 Android에서 그림자가 표시되지 않나요?

shadowColor/shadowOffset/shadowOpacity/shadowRadius 속성은 iOS 전용입니다 — Android의 네이티브 렌더링은 이를 그냥 무시합니다. Android에서 그림자가 나타나려면 elevation 속성(양수)도 함께 설정해야 합니다.

Android 그림자를 iOS와 완전히 똑같이 만들 수 있나요?

정확히는 불가능합니다 — elevation은 Android에 내장된 Material Design 그림자 형태를 만들어내며, iOS 그림자처럼 색상, 오프셋 방향, 흐림 정도를 독립적으로 설정할 수 없습니다. elevation 숫자를 조정해서 시각적으로 비슷한 강도를 만들 수는 있지만, 기존 shadow/elevation API로는 플랫폼 간 픽셀 단위의 완전한 일치는 불가능합니다.

boxShadow 속성은 무엇이고 대신 사용할 수 있나요?

boxShadow는 React Native 0.74에서 추가된, 진정한 의미의 크로스플랫폼 스타일 속성입니다(New Architecture에서 사용 가능). CSS의 box-shadow와 동일한 문자열 문법을 사용하며 iOS와 Android에서 동일하게 작동합니다. 앱의 React Native 버전과 아키텍처가 이를 지원한다면, 4개의 iOS 속성과 elevation 대신 이 속성 하나만 사용할 수 있습니다 — 프로덕션에서 의존하기 전에 RN 버전과 New Architecture 활성화 여부를 먼저 확인하세요.

왜 shadowRadius가 설정한 흐림 값의 절반인가요?

실시간 미리보기는 CSS의 box-shadow를 사용하는데, 같은 숫자에서 흐림 값은 iOS의 shadowRadius보다 대략 두 배 넓게 퍼집니다. 생성된 코드는 shadowRadius를 흐림 값의 절반으로 설정해서 미리보기에서 보이는 그림자가 iOS에서 실제로 렌더링되는 결과와 일치하도록 합니다 — 흐림 값을 그대로 복사했다면 iOS 그림자는 미리보기보다 눈에 띄게 더 부드럽고 크게 보였을 것입니다.

이 스타일들을 적용하는 데 Platform.select가 필요한가요?

아니요 — 생성된 코드처럼 iOS의 shadow* 속성과 Android의 elevation을 하나의 style 객체에 함께 넣어도 안전합니다. 각 플랫폼은 자신과 관계없는 속성을 그냥 무시할 뿐입니다. Platform.select는 경고를 피하기 위해서가 아니라(애초에 경고가 없습니다) 플랫폼별로 정말 다른 그림자 디자인을 원할 때만 추가할 가치가 있습니다.

elevation을 설정했는데도 Android에서 그림자가 안 보입니다. 왜죠?

가장 흔한 두 가지 원인이 있습니다. 뷰에 backgroundColor가 없는 경우(Android의 elevation 그림자는 뷰의 불투명한 배경에서 투영되므로 투명한 뷰는 그림자를 만들지 않습니다), 또는 부모 요소에 overflow: 'hidden'이 설정되어 그림자가 잘리는 경우입니다. elevation 값 자체를 의심하기 전에 뷰에 단색 배경색을 지정하고 상위 요소의 overflow 설정을 먼저 확인하세요.