React & React Native/환경 설정 및 구성

[RN] React Native iOS App Store 등록 방법 -1 : 앱 Archive 및 TestFlight 구성

adjh54 2024. 7. 22. 19:00
반응형
해당 글에서는 React Native 환경에서 iOS 플랫폼을 App Store에 올리는 방법 중 하나로 앱을 Archive 하고 TestFlight를 구성하는 방법에 대해 알아봅니다.





 

 

💡 [참고] Android / iOS에 각각 앱을 배포하는 과정에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.
플랫폼 분류 링크
Android React Native Google Play Store 등록 방법 -1 : 초기 환경 설정 https://adjh54.tistory.com/301
Android React Native Google Play Store 등록 방법 -2 : Google Play Console 설정 https://adjh54.tistory.com/306
Android React Native Google Play Store 등록 방법 -3 : Google Play Console 프로덕션 설정 https://adjh54.tistory.com/307
     
iOS React Native App Store 등록 방법 -1 : 앱 Archive 및 TestFlight 구성 https://adjh54.tistory.com/537
iOS React Native App Store 등록 방법 -2 : App Store 배포 심사 준비 + 사전 대비 https://adjh54.tistory.com/543

 

 

1) TestFilght


💡 TestFilght

- Apple의 공식 베타 테스트 플랫폼으로 개발자가 iOS, watchOS, tvOS, 및 iPadOS 앱을 테스트할 수 있게 해 줍니다. 이를 통해 개발자는 앱을 정식 출시하기 전에 사용자들로부터 피드백을 받을 수 있습니다.
- XCode를 사용하여 앱을 빌드하고 이를 App Store Connectdp 업로드하면 업로드된 빌드는 TestFlight 탭에 나타나게 됩니다.

https://www.kodeco.com/36548823-getting-started-with-xcode-cloud

 

 

 

2) App Store Connect 내에 앱 생성 방법


1. App Store Connect


💡 App Store Connect

- 개발자가 iOS, iPadOS, macOS, watchOS, 및 tvOS 애플리케이션을 App Store에 제출하고 관리할 수 있도록 도와주는 플랫폼입니다.
- 이를 통해 개발자는 앱의 메타데이터, 가격, 배포, 분석 데이터, 리뷰 등을 관리할 수 있습니다. 또한, 테스트플라이트(TestFlight)를 이용해 베타 테스트를 쉽게 진행할 수 있습니다.

 

 

2. App Store Connect 내의 앱 생성 이유


💡 App Store Connect 내의 앱 생성 이유

- 로컬에서 구성한 앱을 App Store에 등록하기 위해서는 해당 연결이 필요합니다.

 

 

 

3. 앱 탭에서 ‘+’ 버튼을 누르고 ‘신규 앱’ 버튼을 누릅니다.


 

 

4. [앱 > 신규 앱] 앱에 대한 설정 부분을 작성하고 '생성' 버튼을 누릅니다.


💡 앱에 대한 설정 부분을 작성하고 '생성' 버튼을 누릅니다.

- 해당 부분에서 각각에 맞는 부분을 입력 및 선택합니다.
- 해당 부분 중 SKU의 경우는 “사용자에게 표시되지 않는 앱의 고유한 ID입니다.”라고 합니다. 이는 내가 만든 앱 혹은 기업에서 만든 제품의 시리얼번호(?)와 같은 고유한 아이디라고 합니다.

 

💡 [참고] 각각 항목에 대한 설명
입력 정보 설명
플랫폼 앱의 플랫폼을 하나 이상 선택해야 합니다. iPadOS 및 watchOS 앱은 iOS 플랫폼의 일부로 간주됩니다.
이름 App Store에 앱을 출시한 후 앱 제품 페이지에서 볼 수 있으며, 사용자가 앱을 설치할 때 표시됩니다.
기본 언어 현지화된 앱 정보가 국가 및 지역에서 제공되지 않을 경우 기본 언어의 정보가 대신 사용됩니다. https://developer.apple.com/help/app-store-connect/manage-app-information/localize-app-store-information
번들 ID 번들 ID는 Xcode에 사용한 ID와 일치해야 합니다. 첫 번째 빌드를 업로드한 후에는 변경할 수 없습니다.
SKU 사용자에게 표시되지 않는 앱의 고유한 ID입니다.
사용자 액세스 권한 App Store Connect에서 앱을 볼 수 있는 사용자를 제한할 수 있습니다. 전체 액세스를 선택하면 모든 사용자가 앱에 액세스할 수 있습니다. 관리, 재정 관리 및 보고서 검토 역할의 사용자는 앱 액세스 권한이 제한되지 않습니다.

 

 

 

5. 아래와 같이 앱이 구성되었습니다.


 

 

 

3) Xcode Archive 모드 설정 방법


 

1. [TARGETS - 앱 - Identity] 앱에서 관리하는 Version과 Build를 설정합니다.


💡 앱에서 관리하는 Version과 Build를 설정합니다.

- Version : 실제 앱에서 관리하는 버전을 의미합니다. 주로 시멘틱 버저닝 방식을 이용하여 관리합니다.
- Build : 빌드된 횟수를 의미합니다. 예를 들어, 처음 배포하는 경우 1의 값을 가지고 다음 배포에는 2의 값을 가집니다.

 

 

 

2. [Product - Scheme - Edit Scheme] 해당 메뉴를 선택합니다.


 

 

 

3. [Archive - Build Configuration] Release로 선택합니다.


 

 

4) Xcode 내에 Archive TestFlight 구성 방법


 

1. 빌드를 Any iOS Device(arm64)로 선택합니다.


 

2. [Product - Archive] 해당 메뉴를 선택하면 빌드가 수행이 됩니다.


 

 

3. [Archive] 빌드가 완료되면 아래와 같은 화면으로 출력이 되며, 'Distribute App' 버튼을 누릅니다.


 

 

 

4. [Archive > Select a method for distribution] 앱의 배포 방식으로 ‘TestFlight & App Store’를 선택하고 ‘Distribute’ 버튼을 선택합니다.


 

 

 

5. [Archive > Select a method for distribution > Upload for App Store Connect ] 실제 AppStore와의 연결이 수행이 됩니다.


 

 

 

 

6. [Archive > Select a method for distribution > Upload for App Store Connect > App update complete] 앱 업데이트가 완료되었음을 확인하였습니다.


 

 

 

5) App Store Connect 앱에 대한 사용자 권한 부여 방법


💡 App Store Connect 앱에 대한 사용자 권한 부여

- 해당 사용자 권한은 앱에 대해서 TestFlight를 할 수 있는 사용자를 추가합니다.

 

1. [App Store Connect > 사용자 및 액세스] 사용자 및 액세스 탭을 선택합니다.


 

 

 

 

2. [사용자 및 액세스 > 사용자 추가] 사용자 추가 버튼을 누릅니다


 

 

 

3. [사용자 및 액세스 > 신규 사용자] 각각 항목을 작성하여서 ‘다음’ 버튼을 누릅니다.


 

 

 

 

4. [사용자 및 액세스 > 신규 사용자 > 액세스 할 수 있는 앱] 액세스 권한을 부여합니다.


 

 

 

5. [메일] Accept Invitation 버튼을 눌러서 가입을 완료합니다.


 

 

6) TestFight 테스터 추가 및 앱 설치 


 

1. [앱 > TestFlight > 내부 테스팅 > 추가] 버튼을 선택합니다.


 

 

2. [앱 > TestFlight > 내부 테스팅 > 새 내부 그룹 생성] 그룹을 생성해 줍니다.


 

 

3. [앱 > 내부테스팅 > 그룹 선택] 테스터 추가 버튼을 누릅니다.


 

 

 

4. [앱 > 내부테스팅 > 그룹 > 테스터 추가] 테스터를 추가합니다.


 

 

5. [앱 > 내부테스팅 > 그룹] 테스터가 추가되고 메일이 전송됨을 확인하였습니다.


 

 

 

 

 

6. [메일] 테스터로 초대된 메일을 확인합니다.


 

 

7. 해당 페이지를 확인하면 초대 코드를 확인할 수 있습니다.


 

 

 

8. 테스트 기기에서 App Store에 있는 ‘TestFlight’ 앱을 다운로드합니다.


 

 

9. TestFlight 기기에서 코드를 입력하면 다운로드가 가능하며 테스트를 수행합니다.


 

 

 

7) 오류노트


1. [참고] Archive 단계에서 발생하는 오류 : UISupportedInterfaceOrientations


💡 Archive 단계에서 발생하는 오류 : UISupportedInterfaceOrientations
- Archive 이후 Distribute App 단계에서 아래와 같은 오류가 발생하였습니다.

Invalid bundle. The “UIInterfaceOrientationPortrait,UIInterfaceOrientationLandscapeLeft,UIInterfaceOrientationLandscapeRight” orientations were provided for the UISupportedInterfaceOrientations Info.plist key in the xxxx bundle, but you need to include all of the “UIInterfaceOrientationPortrait,UIInterfaceOrientationPortraitUpsideDown,UIInterfaceOrientationLandscapeLeft,UIInterfaceOrientationLandscapeRight” orientations to support iPad multitasking. For details, visit: https://developer.apple.com/documentation/bundleresources/information_property_list/uisupportedinterfaceorientations.

 

 

💡 해결 방법
- Info.plist 파일의 UISupportedInterfaceOrientations 키에 다음과 같은 모든 방향을 포함해야 합니다: UIInterfaceOrientationPortrait, UIInterfaceOrientationPortraitUpsideDown, UIInterfaceOrientationLandscapeLeft, UIInterfaceOrientationLandscapeRight.
- 이렇게 하면 iPad 멀티태스킹을 지원할 수 있습니다.
<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

 

 

 

💡 [참고] 해당 글은 다음글에서 이어집니다.
 

[RN] React Native iOS App Store 등록 방법 -2 : App Store 배포 심사 준비 + 사전 대비

해당 글에서는 이전 글에서 App Store Connect에서 구성한 앱과 Archive 된 파일을 기반으로 실제 App Store에 심사를 요청하는 과정에 대해 알아봅니다.    💡 이전에 작성한 글에 이어지는 내용입니

adjh54.tistory.com

 

 

 

 

 

오늘도 감사합니다. 😀

 

 

 

 

 

 

반응형