본문으로 건너뛰기
Toolars
둘러보기
버그 신고

개발자 · 로컬 유틸리티

React Native 그림자 생성기

React Native Shadow Generator

React Native의 기존 그림자와 boxShadow를 비교하고 플랫폼 제한을 확인한 뒤 스타일을 복사하세요.

작업 경로 / 입력에서 결과까지

대상 플랫폼 고르기

로컬에서 실행 · 업로드 없음

React Native 그림자 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

React Native 그림자를 생성하는 방법

  1. 01

    대상 플랫폼 고르기

    먼저 출력 API를 선택하세요. 기존 모드는 플랫폼별 iOS 그림자 속성이나 Android elevation을 만들고, boxShadow 모드는 이를 지원하는 React Native New Architecture의 Android 9 이상에서 단일 바깥 그림자를 만듭니다. 기존 모드에서는 생성 플랫폼을 iOS, Android, 둘 다 중에서 고르며 기본값은 둘 다입니다.

  2. 02

    iOS 그림자 다듬기

    「그림자 색상」을 고르고, 「오프셋 X」와 「오프셋 Y」(-100~100px), 「불투명도」(0.01 단위로 0~1), 「반지름」(0~100px)을 설정하세요. 범위를 벗어난 값은 자동으로 범위 안으로 조정되므로 깨진 코드 걱정 없이 자유롭게 입력할 수 있습니다.

  3. 03

    Android의 Elevation 설정하기

    Elevation을 0~24 사이에서 조절하세요. Android 그림자는 오프셋이 아니라 elevation에서 나오므로, 이 값이 출력의 Android 부분을 결정하고 iOS 수치는 그대로 둬요. 「둘 다」 모드에서는 iOS 컨트롤도 활성 상태이므로 스니펫의 양쪽을 나란히 조절할 수 있습니다.

  4. 04

    실시간 미리보기 확인하기

    「실시간 미리보기」 카드에는 선택한 플랫폼의 근사치가 브라우저 box-shadow로 그려지고 변경할 때마다 갱신됩니다. 은은한 기본값보다 강한 출발점이 필요하면 「샘플 불러오기」를 눌러 떠 있는 인디고 예시를 넣어 보세요.

  5. 05

    생성된 코드 복사하기

    「코드 복사」나 「.ts 다운로드」로 StyleSheet 스니펫을 프로젝트에 가져오세요(toolars-react-native-shadow.ts로 저장됩니다). 「재설정」을 누르면 다시 시작하고 싶을 때 기본 그림자로 돌아가요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

React Native 그림자 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

React Native 그림자 생성기 도구가 유용할 때

크로스 플랫폼 스타일

같은 컴포넌트 스타일에 들어갈 iOS와 Android 속성을 생성합니다.

디자인 핸드오프

그림자 시각 결정을 바로 복사할 수 있는 React Native 코드로 바꿔요.

빠른 조정

실시간 근사 화면을 보며 깊이, 색상, 불투명도, 반경, 오프셋을 조절합니다.

React Native 그림자 생성기 도구가 실제로 하는 일

디자인 시안의 카드는 절묘하게 떠 있는데, 이제 그걸 iOS 그림자 속성과 Android elevation으로 두 번 구현해야 합니다. React Native 그림자 생성기를 쓰면 실시간 근사 미리보기를 볼 때마다 모양을 조절하고 정확한 StyleSheet 블록을 그대로 복사할 수 있습니다. 숫자를 추측할 때마다 앱을 다시 컴파일하는 순환에서 벗어날 수 있습니다. 기존 모드의 「둘 다」는 iOS 그림자 속성과 Android elevation을 같은 코드에 담습니다. 최종 색상과 모양은 각 기기에서 따로 확인하세요.

자주 묻는 질문

어떤 코드가 생성되나요?
react-native에서 StyleSheet를 가져오고 card라는 하나의 규칙을 가진 styles 객체를 반환하는 TypeScript 스니펫입니다. iOS를 선택하면 shadowColor, width와 height를 가진 shadowOffset, shadowOpacity, shadowRadius가 나오고, Android를 선택하면 elevation(Android 단독 모드에서는 shadowColor도)이 나와요. 「둘 다」를 선택하면 iOS 속성과 elevation이 함께 포함됩니다.
기본값은 무엇인가요?
기본 그림자는 「둘 다」를 대상으로 색상 #111827, 「오프셋 X」 0, 「오프셋 Y」 8px, 「불투명도」 0.24, 「반지름」 16px, Elevation 8입니다. 워크스페이스를 처음 열 때 보이는 값이기도 합니다. 「재설정」은 이 값으로 돌리고, 「샘플 불러오기」는 더 큰 오프셋과 반지름의 더 강한 인디고 프리셋으로 바꿔요.
어떤 색상 형식이 허용되나요?
#111827 같은 6자리 hex 값입니다. 유효한 hex 색상이 아닌 입력은 출력을 깨는 대신 기본값으로 돌아가고, 유효한 값은 생성된 코드에서 대문자로 정규화됩니다.
미리보기가 기기 화면과 정확히 같나요?
아니요. 미리보기 카드에도 그 점이 명확히 안내되어 있습니다. 브라우저는 선택한 플랫폼의 근사치를 box-shadow로 그리며, 설정 비교에는 충분하지만 픽셀 단위로 정확한 재현은 아니에요. iOS와 「둘 다」 모드에서는 오프셋, 반지름, 색상, 불투명도를 반영하고, Android 모드에서는 브라우저에 elevation 개념이 없으므로 들뜸을 흉내 내요. 최종 모양은 반드시 실제 기기나 에뮬레이터에서 확인하세요.
허용되는 값 범위는 어떻게 되나요?
「오프셋 X」와 「오프셋 Y」는 -100~100px, 「불투명도」는 0.01 단위로 0~1, 「반지름」은 0~100px, Elevation은 0~24입니다. 범위를 벗어난 입력은 깨진 코드를 만들지 않고 가장 가까운 유효 값으로 조정됩니다.
설정이 업로드되거나 저장되나요?
아니에요. 코드는 이 탭 안에서 로컬로 생성되고, 그림자 설정이 저장되거나 어딘가로 전송되지 않으며 계정도 필요 없습니다.
새 boxShadow 모드는 언제 선택하나요?
React Native 새 아키텍처를 사용하고 Android 대상이 9 이상일 때 선택하세요. 바깥쪽 그림자 하나를 출력하며 elevation은 포함하지 않습니다. 이전 환경에는 기존 플랫폼 속성을 사용하세요. 흐림 반경과 기존 그림자 반경의 결과는 같지 않을 수 있으므로 네이티브 앱에서 확인하세요.

개발자 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

코드 → 이미지 변환

Code to Image Converter

여섯 가지 언어의 코드를 구문 강조해 밝은·어두운 테마, 줄번호, 창 제목, 1x/2x 배율로 PNG나 SVG로 내보냅니다.

생성

URL 슬러그 생성기

URL Slug Generator

제목을 하이픈·밑줄 슬러그로 입력하는 즉시 변환합니다. 악센트는 제거하고 앰퍼샌드는 확장하며 비라틴 문자는 보존합니다.

생성

Base64 인코딩 / 디코딩

Base64 Encoder/Decoder

Unicode 텍스트 인코딩과 Base64 디코딩을 로컬에서 처리합니다. URL-safe 값도 지원합니다.

변환

HTML 인코딩 / 디코딩

HTML Encoder/Decoder

마크업을 깨는 다섯 문자를 이스케이프하거나 명명·숫자 엔티티를 텍스트로 되돌립니다. 한 번 클릭으로 왕복 검증, 로컬 처리.

변환