[FrontEnd / React Native] Xcode를 사용하여 iOS 어플 테스트 하기

최근 진행한 프로젝트 중 React Native를 이용한 App 제작에서 OS 영역을 맡게 되었습니다.

안드로이드와 iOS 개발을 동시 진행하면서 안드로이드에서는 잘 구현되는 기능이 iOS에서는 작동이 안 되는 경우가 생겨 수시로 기능 및 스타일을 확인해야 하는 경우가 생겼습니다. 

 

Xcode로 통해 개발을 진행하고 있었지만 불현듯 스마트폰에 연결 후 실시간 연동이 가능했으면 좋겠다 라는 생각을 가지게 되었고, 확인이 가능한 기능이 존재해 개발 진행에 많은 도움이 되어 이번 게시물로 통해 공유하려고 합니다.

 

iOS 개발 특성상 맥 기기와 애플 개발자 계정을 가지고 있어야만 가능합니다.

 

 

우선 Xcode를 사용하여 아이폰으로 실시간 연동 및 TestFlight로 통해 Test App 업로드, AppStore에 업로드를 하기 위해서는 개발자 인증서가 필요합니다.

 

 

 

사용하고 있는 맥에서  응용프로그램 > 유틸리티 > 키체인 접근을 실행해주시거나

command + 스페이스바 > Spotlight 실행 후  키체인 접근을 실행해주셔야 합니다.

 

 

키체인 접근 실행 후 상단 메뉴바에서 키체인 접근 > 인증서 지원 > 인증 기관에서 인증서 요청을 클릭해주세요.

 

 

인증서 지원 창이 나타나면 이미지처럼 요청 항목에 디스크 저장됨, 본인이 키 쌍 정보 지정을 선택 후 사용자 이메일 주소와 일반 이름을 입력창에 입력 후 계속을 클릭해주세요.

 

 

키 쌍 정보 확인 후 계속 버튼을 눌러주세요.

 

 

인증서 발급이 완료되면 Finder에서 보기 버튼을 클릭 후 발급된 인증서 저장 위치를 기억해주세요

 

 

https://developer.apple.com/kr/ (애플 개발자 페이지) 접속 후 Accout 혹은 계정(영문)을 클릭해서 개발자 마이페이지로 접속해 주세요.

 

개발자로 등록 되어 있는 계정으로 로그인하셔야 다음 과정으로 진행이 가능합니다.

 

Certificates, Identifiers & Profiles 항목을 클릭해주세요.

 

Certificates 옆에 있는 + 버튼을 클릭해주세요.

인증서 선택 화면에서 iOS App Development를 선택하고 상단 오른쪽에 있는 Continue를 눌러주세요

 

iOS 개발자 인증서를 받기 위한 과정 입니다.

 

 

Create a New Certificate 페이지가 나타나면 전 단계에서 발급받았던 인증서를 

Choose File를 선택해서 업로드해주세요

 

업로드가 완료되면 개발자 인증서가 발급되었단 페이지가 표시되면 Download Your Certificate 오른쪽에 있는 Download 버튼을 선택 후 개발자 인증서를 저장해 주시고 위치를 기억해주세요.

 

사용하고 있는 기기 (맥북, 맥미니, 아이맥 등등) 개발 인증서를 저장 함으로써 

추후 진행하는 개발에 추가적인 인증서 등록 과정 없이 개발을 진행하기 위한 과정입니다.

 

 

첫 단계에서 실행했었던 키체인 접근을 다시 실행하신 다음 방금 전에 저장한 개발자 인증서를 

내 인증서 영역 선택 후 드래그로 이동, 저장을 해주세요.

 

 

Certificates, Identifiers & Profiles 페이지로 접속하신 다음 왼쪽 영역에 있는 

Identifiers 클릭 후 + 버튼을 클릭해주세요.

 

 

App IDs 선택 후 Continue를 눌러주세요.

 

 

Platform 항목에서는 iOS, tvOS, watchOS를 Description 항목에는 업로드하려는 앱의 특징을 마지막으로 Bundle ID는 xcode 실행 후 업로드하려는 앱의 Bundle ID를 입력하신 후 Continue를 눌러주세요.

 

 

전 단계에서 입력하셨던 내용을 확인 후 맞으면 Register를 눌러주세요.

 

Certificates, Identifiers & Profiles 페이지로 돌아오신 후 Devices를 선택 후 +를 클릭해 주세요.

 

 

디바이스는 아이폰 혹은 아이패드를 맥에 유선 연결 후 Xcode를 실행해 주세요. 그다음 

Xcode > Window > Devices and Simulators를 선택해 주세요.

연결된 디바이스가 표시되면 Identifier에 있는 UUID를 더블클릭 후 복사해 주세요.

 

 

Device ID에 방금 전에 저장했었던 UUID를 붙여 넣기 하신 다음 Continue를 눌러주세요.

디바이스 별로 최대 100개까지 등록 가능합니다.

 

 

Provisioning Profiles를 생성하기 위해 Certificates, Identifiers & Profiles 페이지로 접속 후 왼쪽 Profiles 선택 후 + 버튼을 눌러주세요. (개발자용, 배포용 발급을 위한 과정, 2번 진행)

 

 

Development > iOS App Development를 선택하고 Continue를 눌러주세요.

 

앞에서 생성한 App ID를 선택하고 Continue를 눌러주세요.

 

 

앞에서 생성한 Certificate를 선택하고 Continue를 눌러주세요.

 

앞서 등록한 Devices를 선택하고 Continue를 눌러주세요.

 

 

Provisioning Profile에 이름을 입력하고 Generate를 눌러주세요.

 

완료가 되면 프로파일이 생성 완료되었다는 페이지가 생성됩니다.

오른쪽 Download 버튼 클릭 후 프로파일을 저장해 주세요.

 

 

상단 메뉴바에서 Xcode > Preferences > Accounts 선택 후 Apple 개발자 계정으로 로그인하고 Download Manual Profiles를 눌러주세요.

 

화살표 순서대로 

 

• 왼쪽 GoBox 클릭 후 Signing & Capabilities 클릭 후 
• Automatically manage signing 체크박스 선택
• Team 영역은 애플 개발자로 등록되어 있는 App ID 선택
• Bundle Idenifier 은 개발자 프로파일 설치하면서 입력했었던 Bundle ID 입력
• 입력 후 완료되면 Signing Certificate 항목에 개발자 ID, 개발자 코드, 개발 분야가 표시됩니다. 표시가 된 후 TARGETS에 있는 test 앱도 앞서 했던 방식대로 입력해 주시면 됩니다.

 

 

모든 작업이 완료 후 Xcode에서 실행하고 싶은 디바이스를 누르게 되면 연결되어 있는 핸드폰의 이름이 나타납니다. 사용자의 핸드폰 이름을 선택 후 실행 버튼을 누르면 사용하고 있는 아이폰에 연동이 되어 개발을 진행할 때 실시간으로 확인이 가능합니다!

다음 과정은 TestFlight 통해 다른 사용자들이 테스트할 수 있도록 App을 업로드하는 과정을 적어보겠습니다. 

 

 

앱스토어 혹은 TestFlight에 빌드하려면 Version, Build 항목에 

새로운 네이밍을 적어주셔야 합니다. (1.3 → 1.4 / 20220712 → 20220715)

네이밍 하신 다음 상당 중앙에 있는 iPad 영역을 눌러주세요.

 

빌드를 하기 위해서는 Build 영역에 있는 Any iOS Device (arm64)를 선택해 주세요.

 

 

상단 메뉴바에 Product > Archive를 눌러주세요.

 

 

Archive를 선택하면 Archiving 진행되면서 빌드 작업이 진행됩니다.

 

 

빌드 작업이 완료되면 해당 창이 나타납니다.

Version, Build 버전 확인 후 Distribute App 버튼을 눌러주세요.

 

 

App Store Connect를 선택해주세요.

 

 

Upload를 선택해주세요.

 

 

TestFlight에 올라가기 전 간단한 테스트를 진행하게 됩니다. 

애플이 요구한 조건에 충족되면 다음으로 넘어가고, 실패할 경우 Failed이 표시됩니다.

 

 

전체 다 체크 후 Next를 눌러주세요.

 

 

앞서 발급받았던 인증서를 어떻게 불러올 거냐는 항목인데 자동으로 받아오기를 선택하신 후 Next를 눌러주세요.

 

Xcode 자체적으로 문제가 있는지 확인을 하는 과정입니다.

 

 

문제가 없으면 윗 사진 나타나고 문제가 있으면 Failed이 표시됩니다. 업로드를 눌러주세요.

 

 

애플에서 간단하게 테스트한 후 문제가 있으면 Failed가 나타납니다.

 

 

업로드가 정상적으로 되었다면 successfully가 표시되며 Done으로 마무리해주시면 됩니다.

 

 

App Store Connect 사이트 > Testflight > 빌드 > iOS 메뉴를 선택합니다. TestFlight에 업로드한 앱 버전들을 확인할 수 있습니다. 업로드 직후에는 처리 중 상태이며, 10~20분 후에 제출 준비 완료 상태로 변경됩니다. 제출 준비 완료 상태로 변경되면 TestFlight앱을 통해 테스트 앱을 다운로드 받을 수 있습니다.

이번 프로젝트를 진행하면서 안드로이드에서는 작동했던 기능이 iOS에서 작동하지 않아 많이 당황했었고, 컴퓨터로는 문제없었던 증상이 막상 핸드폰 연동 후 확인했을 때는 작동이 되질 않아 적지 않아 당황했었던 것 같았습니다.

 

Testflight에 빌드 후 하루 뒤 다운로드를 해 테스트를 진행해도 문제는 없었지만 기다리는 시간과 실시간으로 확인해야 하는 결과값을 바로 확인할 수 없는 불편함이 있었습니다. 하지만 이번 과정으로 통해 실시간 확인이 가능했던 점, 아이폰 사용자는 누구나 다 같이 테스트가 가능해 오류를 빨리 잡아낼 수 있어서 좋았습니다.

 

다음 개발에는 스마트폰이 아닌 태블릿 영역까지 늘려 이번에 응용했던 기술을 사용해 더 좋은 App를, 더 많은 React Native의 기능을 활용하여 사용해 보겠습니다. 감사합니다

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기