App Store용 iOS 앱 미리보기 생성

iOS App Previews에 대해 잘 알고 있습니까?

앱 미리보기는 App Store에서 앱을 소개하는 데 사용할 수 있는 짧은 동영상입니다.

앱 미리보기 기록 및 설정은 느리고 오류가 발생하기 쉬운 프로세스일 수 있으므로 이 게시물에서는 제가 앱에서 사용하고 있는 흐름을 공유하겠습니다.

앱 미리보기 제약

앱이 지원하는 각 화면 크기에 대해 최대 3개의 앱 미리보기를 표시할 수 있습니다. 앱 스크린샷과 마찬가지로 단일 해상도로 여러 화면 크기를 커버할 수 있습니다.
오늘부터 886x1920 및 1080x1920 녹화는 모든 iPhone 화면을 덮고 900x1200 녹화는 모든 iPad 화면을 덮습니다.
자세한 내용은 App Preview Resolutions 페이지를 확인하십시오.

.mov , .m4v 및 .mp4 파일만 지원됩니다.

앱 미리보기의 최대 프레임 속도는 초당 30프레임입니다.

앱 미리보기는 15~30초 길이여야 합니다.

앱 미리보기 크기는 최대 500MB입니다.

앱 미리보기에는 오디오 트랙이 있어야 합니다.

앱 미리보기에는 앱 자체의 장면만 표시되어야 합니다.

탭과 제스처를 표시하도록 COSTouchVisualizer 설정

내가 항상 앱 미리보기에 추가하려고 시도하는 한 가지 멋진 터치는 탭과 제스처를 보여 앱과의 상호 작용을 청중에게 더 명확하게 만드는 것입니다.
안타깝게도 Android와 달리 iOS는 이러한 상호 작용을 즉시 표시할 수 있는 도구를 제공하지 않습니다.

이 기능을 추가하는 방법에는 여러 가지가 있습니다. 제가 자주 사용하는 도구는 COSTouchVisualizer 입니다. 이 라이브러리는 최소한의 설정이 필요하고 React-Native 앱에 쉽게 추가할 수 있는 오픈 소스 네이티브 라이브러리입니다.

설정은 다음과 같습니다(React-Native 또는 ObjC 앱에서).

Podfile

에 pod "COSTouchVisualizer" 추가

달리다 pod install

AppDelegate 애플리케이션에서 self.window = [[COSTouchVisualizerWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];를 추가합니다.

AppDelegate에서 다음을 추가합니다.

- (COSTouchVisualizerWindow *)window {
  static COSTouchVisualizerWindow *customWindow = nil;
  if (!customWindow) {
    customWindow = [[COSTouchVisualizerWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    customWindow.touchVisualizerWindowDelegate = self;
  }
  return customWindow;
}

- (BOOL)touchVisualizerWindowShouldAlwaysShowFingertip:(COSTouchVisualizerWindow *)window {
    return YES;
}

- (BOOL)touchVisualizerWindowShouldShowFingertip:(COSTouchVisualizerWindow *)window {
    return YES;
}

앱을 실행하면 터치 및 제스처 힌트가 표시됩니다.

If you’re planning to record the iOS simulator using QuickTime you can also show the taps by running defaults write com.apple.iphonesimulator ShowSingleTouches 1.

Please notice that in this way the touches won’t be recorded by simctl io (which is the way I record videos, see the next section).

앱 미리보기 기록

여러 기기에서 앱 미리보기를 녹화하는 방법은 simctl io 을 사용하여 iOS 시뮬레이터의 동영상을 캡처하는 것입니다.
이렇게 하려면:

녹화하려는 시뮬레이터를 엽니다. iPhone 8 Max, iPhone 11 Pro Max, iPad Pro(모든 세대)의 각 장치에서 하나의 비디오를 녹화하는 것이 좋습니다.
이러한 장치는 가능한 모든 화면 크기를 포함합니다.

실행 xcrun simctl io booted recordVideo output.mov --type=h264 .
내가 h264에 녹음하는 이유는 (적어도 내 경험으로는 🤷‍♂️) 이상한 아티팩트를 보여주지 않는 유일한 녹음 유형이기 때문입니다.
이 명령은 녹음을 시작합니다.

시뮬레이터에서 앱을 선보입니다.

완료되면 CTRL + C를 눌러 기록을 종료합니다.

QuickTime 또는 기타 비디오 편집 소프트웨어를 사용하여 출력을 편집합니다.
비디오 길이를 30초 미만으로 유지하는 것을 잊지 마십시오.

녹음 크기 조정

여기서 마지막 단계는 기록된 앱 미리보기의 크기를 조정하는 것입니다. 이 부분에서는 항상 좋은 옛것을 사용합니다 ffmpeg .
iPhone 11 Pro Max 녹화의 크기를 조정한다고 가정하면 다음 단계를 실행합니다.

# Stream-copy the input file into a compatible mp4 file.
ffmpeg -i my-iphone-11-pro-max-recording.mov -c copy temp.mp4

# Resize to 886x1920 (use 1080x1920 for the iPhone 8 Max recording
# and with 1200x1920 for the iPad Pro recording).
# If you recorded the video from the right device this command will
# just scale it down/up... but you can also use it on recordings from other
# devices if needed. In such case, this command will also add black bars to
# keep the aspect ratio if needed.
ffmpeg -i temp.mp4 -vf "scale=w=886:h=1920:force_original_aspect_ratio=decrease,pad=886:1920:(ow-iw)/2:(oh-ih)/2:color=black" temp-resized.mp4

# Limit the frames per second to 30.
ffmpeg -i temp-resized.mp4 -filter:v fps=fps=30 iphone-11-pro-max-app-preview.mp4

Bonus point: if you recorded an app that doesn’t produce any sound effect, the recording won’t have an audio track (and the App Store will reject your app preview).

As a workaround, you can add a silent track by running:

ffmpeg -f lavfi -i anullsrc=channel_layout=stereo:sample_rate=44100 -i input.mp4 -shortest -c:v copy -c:a aac output.mp4

그게 다야! 🎊

이제 App Store에 앱 미리보기를 게시할 수 있습니다.

Please notice that some specific App Store actions are only available from Safari (e.g.: customizing the app preview cover).