[앱 배포] ReactNative로 개발 IOS 첫 빌드 및 배포 방법 정리

이 글은 이미 시뮬레이터와 USB를 통한 디바이스 테스트는 마쳤다고 가정합니다. 앱스토어 배포전에 필요한 준비단계들을 알아보고 실제 배포까지 해볼 예정입니다. 

ReactNative로 개발한 앱을 IOS 앱스토어에 배포하는 것을 기준으로 작성되었습니다. ReactNative로 개발했다면 eas cli라는 관리 툴이 존재하며 상당 부분을 자동으로 간략하게 진행할 수 있습니다. xcode를 이용하는 native 방식과는 차이가 있습니다.

 

 

 

사전에 필요한 것들. 

사전에 필요한 것들은 꼭 미리해야하는 것은 아니지만, 어차피 해야 하는 것들이며 필요한 시점에 진행해도 무관합니다. 그럼에도 사전에 필요한 것이라고 해둔 것은 진행흐름 상에 막히는 것을 최소화하려고 별도로 정리했습니다. 

개발자 등록

2023년 2월 , 이 글을 작성하는 시점에서 Android 에서는 개발자가 최초 1회에 한하여 등록 수수료(미화 25달러,한화 약 31700원)가 한번만 청구됩니다. Play Console 사이트에서 개발자 등록 후 진행하여야 합니다. 

IOS는 애플 개발자사이트에서 유료 개발자 프로그램에 등록해야 합니다. 매년 수수료(미화 99달러, 한화 약 12만 9000원)를 지불해야 합니다. 개발자 등록은 필요한 시점에 해도 됩니다. 

 

개인정보처리방침 페이지

앱스토어에서 개인정보 처리방침은 링크로 표시됨

앱스토어에서는 개인정보 처리방침에 관한 규정을 URL형식으로 작성하도록 되어있습니다. App store connect에서 작성됩니다. App store connect 사이트는 개발자가 앱을 등록하고 관리하는 사이트입니다.

따로 개인정보 이용약관을 웹페이지로 작성하고 그것의 링크를 작성해야 합니다. 개인정보포털에서 개인정보 처리방침 작성 도우미를 이용해서 작성할 수 있습니다. 

약관의 형식은 거의 정해져 있으니 다른 곳의 약관의 내용을 편집해도 됩니다.

 

 

배포를 위한 첫 빌드 만들기

 

 EAS 레퍼런스를 기준으로 진행합니다. ( EAS Build는 Expo 및 React Native 프로젝트용 앱 바이너리를 구축하기 위한 호스팅 서비스입니다. ) eas를 사용하면 앱 서명 자격 증명을 자동으로 생성/등록해주고 , 기본 설정 값을 제공하 든 등의 이점을 얻을 수 있습니다. 

네이티브방식의 수동 인증서 발급방법을 훑어보시려면 여기 를 참조해 주세요. Expo에서 지원하는 EAS를 사용한다면 자동화할 수 있는 과정입니다. 

 

 

스플래시(Splash) 이미지 만들기

Splash 이미지란, LauchScreen 이라고도 하고 앱이 기동되기전에 잠깐 나오는 로딩이미지 입니다. 이것과 앱아이콘의 사이즈가 규정에 맞지 않을 경우, 빌드실패의 원인이 됩니다. 그래서 스플래시 이미지가 없다면 만들어야합니다. 

 

xcode에서 스플래시 이미지를 등록해서 자동으로 표시되게 하는 방법expo 라이브러리를 이용한 코드로 작성하는 방법app.json 파일에 명시적으로 작성하는 방법 

 

위 방법중, 저는 app.json에서 이미지 경로를 지정하는 방법을 사용했습니다.  configure splash screen guide 를 참조하여 app.json을 작성했습니다. 사이즈와 같은 규격이 다르다면 빌드에 실패하기 때문에, 이미지 만드는 것은 figma template 사이트를 이용했습니다. 가이드를 보시고 이미지를 간단하게 만들어본 뒤, 작성한 이미지를 다운로드 받아 사용하는 방식입니다. 회원가입이 필요하며, 이용료는 무료입니다. 

 

App 아이콘 만들기 

 

앱 아이콘 역시, Android 514px * 514* / IOS 1024px * 1024px 와 같이 각각의 사이즈가 정해져있으므로 지침에 맞게 작성하는 것이 중요합니다. Expo에서는 아이콘을 등록하는  가이드가 있고, 이 역시 figma template 사이트를 이용해서 이미지를 만들었습니다. 

 

내부테스트를 위해서라면, 기종별로 아이콘을 모두 만들지 않아도 됩니다. 

 

* app icon / splash 이미지는  {프로젝트폴더}/assets/ 아래 위치시킵니다. assets 폴더가 없다면 만들기 

app.json example

{
  "expo": {
    "name": "dear-diary",
    "slug": "dear-diary",
    "version": "1.0.0",
    "assetBundlePatterns": ["**/*"],
    "icon": "./assets/appIcon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

app icon 이나 스플래시 화면이 보이지 않는다면 캐시를 삭제한 후 다시 실행해봅니다. 

npx expo run:ios --no-build-cache

 

스플래시 이미지와 앱아이콘이 준비되었다면 빌드를 만들어봅니다. 

 

EAS 설치 

최신 EAS CLI 를 설치합니다. 프로젝트 최상위 폴더 내에서 실행합니다. 

npm install -g eas-cli

#설치 후 로그인
eas login

#로그인 성공후 프로젝트 구성
eas build:configure

eas build:configure 를 사용한다면 eas.json 파일이 생성되는 등의 배포를 위한 프로젝트로 구성됩니다. 이 명령어는 첫 빌드에만 사용하고, 이후에는 expo build:{platform} --config app.production.json 과 같은 명령을 사용해야합니다. 

자동으로 생성된 eas.json 파일을 사용해서 빌드환경을 구성할 수 있습니다. 

 

내부 (테스트) 배포용 빌드 구성하기 

아래와 같이 eas.json을 열고 내부배포용 빌드 프로필을 추가합니다. 

{
  "build": {
    "preview": {
      "distribution": "internal"
    }
  }
}

 

내부 빌드 프로필로 빌드 실행(=만들기)

# preview 구성으로 android,ios 플랫폼에 대한 빌드 생성
eas build --profile preview --platform all

# preview 구성으로 ios 플랫폼에 대한 빌드 생성
eas build --profile preview --platform ios

 

 

이외에 참조할만한 가이드 

 

IOS 시뮬레이터에서 테스트를 진행한다면 :  ios 시뮬레이터용 빌드 구성하고 설치하기 

Building for iOS Simulators

 

 

빌드 구성하다가 오류 및 충돌이 났다면 : 빌드 오류 및 충돌 문제 해결

또한 ios 개발자 맴버십에 가입했다면 1:1 문의가 가능합니다. 

 

다음 글: TestFlight 를 이용한 내부 테스트 (테스터들에 기기에 권한을 부여하고 테스트를 하게 할 수 있음)