App Store와 Play Store, 디자인 하나로.

React Native 앱은 기본적으로 두 스토어 생태계를 모두 상대해요. 스크린샷 작업은 보통 Detox 기반 UI 테스트로 시뮬레이터 날 캡처를 하거나, Figma에서 iPhone 프리셋과 Android 프리셋을 나란히 열고 수동으로 디자인하는 두 가지 방식으로 이루어지죠. Screenshotify는 날것의 캡처가 아니라 디자인된 마케팅 스크린샷이 필요한 순간, 그것도 두 스토어 동시에 필요할 때를 위한 도구예요.

일반적인 RN 스크린샷 작업일

1. 소스 프레임 캡처 — 실행 중인 앱에서 iOS 시뮬레이터의 Cmd+S, Android 에뮬레이터 스크린샷 버튼, 또는 내장된 WebRTC 페어링으로 실제 기기 스크린샷을 가져올 수 있어요.
2. Screenshotify 열기 — 3~5 패널 캐러셀을 만드세요. 각 패널에 다른 기기 프레임을 사용할 수 있어서 iPhone과 Pixel이 시각적으로 섞인 캐러셀도 만들 수 있어요.
3. 캡션 추가 — 소스 언어로 작성하세요. 멀티 패널 컴포저가 패널 전반에 걸쳐 헤드라인 구조를 일관되게 유지해줘요.
4. 현지화. 원클릭으로 39개 App Store 로케일 전체를 번역하세요. 활성 시장이 있는 로케일(글로벌 RN 앱의 경우 보통 EN, JP, DE, BR, KR, ES)을 검토하세요.
5. 내보내기. 활성화한 App Store 크기(6.9", iPad 13" 등)와 Play Store 크기(기본 1080 × 1920)가 담긴 ZIP 하나.

RN 생태계의 대안

Detox 또는 스크린샷 헬퍼가 포함된 react-native-testing-library로 UI 테스트에서 날 프레임 캡처를 할 수 있어요. 소스 스크린샷에는 유용하지만 마케팅 구성 단계를 대체하지는 못합니다. Fastlane snapshot은 RN 앱의 iOS 사이드(Xcode 프로젝트는 실제 Xcode)에서 작동해요.

대부분의 RN 팀이 정착하는 방식은 이렇습니다. 시뮬레이터/기기로 소스를 캡처하고, Screenshotify에서 캐러셀을 디자인하고, 프로젝트 JSON을 코드베이스와 같은 레포지토리에 버전 관리하는 거예요.

크로스플랫폼 디자인 팁

• 프로젝트당 하나의 디자인 시스템을 선택하고 iOS와 Android 스크린샷 모두에 적용하세요. 스토어 간에 폰트나 색상 체계를 바꾸지 마세요.
• 상태 표시줄이 달라요. iOS는 관행적으로 9:41을 표시하고, Android는 실제 시간을 표시해요. Screenshotify는 기기별로 iOS 상태 표시줄을 토글할 수 있으며, Android는 스크린샷에서 OS 상태 표시줄을 그대로 유지해요.
• 하단 내비게이션 vs 탭 바. 잘라내지 마세요. 캐러셀 썸네일에서 사용자가 가장 먼저 알아채는 부분이에요.
• 5.5" iPhone은 이제 오래됐어요. RN 앱이 iOS 13 미만(iPhone 6s Plus 최소)을 지원하지 않는다면 5.5" 크기는 완전히 건너뛰어도 됩니다.

배우기: 기능 · 가이드 · 요금제

에디터 열기 →