React-native 웹뷰앱 (전생 얼굴 검출기) 개발 기록 (개인 참고용)

전생 얼굴 검출기 로고 (Stable diffusion으로 생성)

 

※ 이번 포스팅은 개인 기록 목적으로 두서 없이 작성될 수 있으며 반말로 기록할 것입니다.

 

이전 기록 및 목적

이전에 Expo를 이용하여 React-native 웹뷰앱 개발을 했었다.

그러나 Expo의 편리함보다는 세부적인 수정이 불가능한 구조가 더 불편하여 Expo eject란 방법을 사용하여 Expo 프로젝트에서 일반적인 React-native 구조로 변경을 했다.

하지만 수동으로 고쳐줘야하는 것들이 너무 많이 생겨서 처음부터 React-native 프로젝트를 생성해서 진행했던 기억이 난다.

이번에 개발 중인 신규 웹서비스를 다시 웹뷰앱으로 만들어 출시하려고 하는데, 매번 찾아보기 어려울 것 같아서 이번 기회에 기록을 하면서 진행해보려고 한다.

현재 1차 개발 완료를 한 웹서비스는 전생 얼굴 검출기라는 것으로, 파이썬의 Flask를 사용해서 만든 간단한 웹서비스이다.

서버는 AWS의 Lightsail 중 가장 낮은 성능의 프리티어 인스턴스에 우선 올렸다.

데이터베이스는 AWS의 MySQL 이고 파일 저장용 버킷은 AWS의 S3를 사용했다.

파이썬의 face-recognition이라는 모듈을 사용했기 때문에 dlib 라이브러리 빌드가 필요했는데 Lightsail 성능이 낮아서인지 며칠을 시도했지만 결국 실패했다.

결론적으로 Docker 이미지로 빌드해서 올리니 바로 성공이었다.

이 부분에 대해서는 별도로 포스팅할 예정이다.

 

지금까지 그래왔듯, 아무런 기초 지식없이 ChatGPT에게 물어보며 여기까지 개발을 하였고, 신규 웹뷰앱 개발 또한 ChatGPT에게 물어가며 진행할 것이다.

 

그 내용을 실시간으로 담으려고 한다.

 

이전에 세부적으로 보완했던 메인 App.tsx 코드는 공개할 수 없으나 기본 틀은 매우 간단하다.

 

 

새로운 React-native 프로젝트 생성 질문

기존 코드를 GPT에서 보여주고 React-native 새로운 프로젝트 생성 단계부터 물었다.

 

질문

이전에 만들었던 IrisGPT라는 React-native 웹뷰앱의 메인코드야. 
이번에 pastface 라는 동일한 웹뷰앱을 만드려고 하는데, 기존 프로젝트를 복사해서 이름만 바꾸려고 했었는데 더 복잡한것같아서 새롭게 react-native 프로젝트를 pastface 라는 이름으로 생성하는 단계부터 진행하려고 해.
프로젝트 폴더는 c:\Projects\WebView_app\ 이라는 폴더까진 수동으로 만들었고, 이 폴더에서 프로젝트 생성 명령이 있던걸로 기억해. 그 단계부터 알려줘. 이름은 pastface 로 할거야.

 

답변

새로운 React Native 프로젝트를 생성하기 위해서는 다음 단계를 따라하면 됩니다:

 

프로젝트 폴더로 이동:
우선 c:\Projects\WebView_app\ 폴더로 이동해야 합니다.

 

cd c:\Projects\WebView_app

React Native 프로젝트 생성:
다음 명령어를 사용하여 'pastface'라는 이름의 새 React Native 프로젝트를 생성합니다.

 

npx react-native init pastface

 

vscode 터미널에서 프로젝트 생성 명령 입력

프로젝트 폴더로 이동:
생성된 프로젝트 폴더로 이동합니다.

 

cd pastface

필요한 패키지 설치:
예시 코드에서 사용된 패키지들을 설치해야 합니다. 다음 명령어들을 실행하여 필요한 패키지들을 설치하세요:

 

npm install react-native-webview react-native-bootsplash react-native-google-mobile-ads react-native-localize

네이티브 의존성 연결:
react-native-bootsplash, react-native-google-mobile-ads, react-native-localize와 같은 패키지는 네이티브 모듈에 의존성을 가지므로, React Native 0.60 버전 이후로는 대부분의 네이티브 모듈이 자동으로 연결되지만, 몇몇 패키지는 수동 설정이 필요할 수 있습니다. 각 패키지의 설명서를 확인하여 필요한 경우 수동으로 설정해야 합니다.

 

코드 복사 및 수정:
이제 pastface 프로젝트 안의 App.js 파일을 열고 위에서 제공된 코드를 붙여넣을 수 있습니다. 필요한 경우 코드 내의 "irisgpt"라는 부분을 "pastface"로 변경하세요.

 

앱 실행:
앱을 실행하기 위해서 다음 명령어를 사용합니다:

 

npx react-native run-android

이로써 새로운 React Native 웹뷰 앱 'pastface'가 생성되었습니다! 필요한 설정이나 추가 작업은 프로젝트의 요구 사항에 따라 수행해주세요.

 

 

프로젝트 생성 확인 및 웹주소 변경

기존 App.tsx 에서 웹서비스의 주소만 변경하고 앱을 실행해보았다.

역시 오류가 발생했다.

그대로 GPT에게 복사해서 물어본다.

 

질문

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file 'F:\Projects\WebView_app\pastface\node_modules\react-native-google-mobile-ads\android\build.gradle' line: 82

* What went wrong:
A problem occurred evaluating project ':react-native-google-mobile-ads'.
> Cannot get property 'googleMobileAdsJson' on extra properties extension as it does not exist

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':react-native-google-mobile-ads'.
> compileSdkVersion is not specified. Please add it to build.gradle

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

* Get more help at https://help.gradle.org

BUILD FAILED in 22s

 

답변

이 오류 메시지는 react-native-google-mobile-ads 패키지와 관련된 설정 문제를 나타냅니다. 오류를 해결하기 위해 다음 단계를 수행하세요:

1. Google Services json 파일 추가: react-native-google-mobile-ads를 사용하려면 AdMob에서 제공하는 google-services.json 파일이 필요합니다. 이 파일을 AdMob 웹사이트에서 다운로드 받아 android/app 폴더에 넣으세요.
2. compileSdkVersion 오류 해결: 해당 패키지의 build.gradle에 compileSdkVersion이 명시되지 않은 것 같습니다. 그러나 일반적으로 이는 기본 build.gradle에 명시되어 있어야 합니다.
3. F:\Projects\WebView_app\pastface\node_modules\react-native-google-mobile-ads\android\build.gradle 파일을 열고 다음과 같이 compileSdkVersion을 추가하세요:

android {
    compileSdkVersion <Your_SDK_Version> // 예: 30
    ...
}

1. 여기서 <Your_SDK_Version>은 프로젝트의 메인 android/build.gradle 파일에 명시된 compileSdkVersion의 값을 사용하세요.
2. Gradle Sync: Android Studio를 사용하고 있다면, 변경 후 Gradle을 동기화해주세요.
3. 앱 재빌드: 다시 앱을 빌드하려면 다음 명령을 실행하세요:

npx react-native run-android

이러한 단계를 완료한 후에도 동일한 오류가 발생한다면, react-native-google-mobile-ads 패키지의 설명서를 확인하여 추가적인 설정 단계가 필요한지 확인하세요.

 

 

동일 오류 발생

admob 사이트에 가서 신규 앱을 등록한 뒤 나오는 안내 페이지대로 초기 설정을 진행했다.

https://developers.google.com/admob/android/quick-start?hl=ko#import_the_mobile_ads_sdk 

시작하기  |  Android  |  Google for Developers

 

재시도

계속 동일한 오류가 발생한다.

 

github에 연결된 아래 페이지도 참고해서 설정을 진행해보기로 한다.

https://docs.page/invertase/react-native-google-mobile-ads

React Native Google Mobile Ads

 

해당 페이지에 나온 것처럼 app.json 파일에 app_id를 설정해주고 재시도 해본다.

{

  "name": "pastface",

  "displayName": "pastface",

  "react-native-google-mobile-ads": {

    "android_app_id": "ca-app-pub-9807......~.....36"

  }

}

 

성공

app.json 파일에 app_id를 성공해주니 바로 정상 빌드가 되었다.

BUILD SUCCESSFUL in 2m 54s
110 actionable tasks: 105 executed, 5 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.pastface/.MainActivity }
 BUNDLE  ../index.js

 

 

앱 아이콘 및 이름 지정

이전에는 Expo를 통해 만들었기 때문에 앱 아이콘 및 이름 지정이 편리했으나 React-native로 시작하니 기본 아이콘으로 진행이 되어버렸다.

 

질문

앱 아이콘 및 표시되는 앱 이름을 변경하고 싶어

 

답변

React Native에서 앱 아이콘과 앱 이름을 변경하려면 아래와 같은 단계를 따라해 보세요:

1. 앱 이름 변경:

Android:

1. android/app/src/main/res/values/strings.xml 파일을 열고, <string name="app_name">의 값을 원하는 이름으로 변경하세요.

<string name="app_name">Your App Name</string>

iOS:

1. Xcode를 열고, 프로젝트를 선택한 다음 Info 탭으로 이동하세요.
2. "Bundle display name" 항목을 찾아 원하는 앱 이름으로 변경하세요.

2. 앱 아이콘 변경:

Android:

1. 원하는 아이콘 이미지를 준비하고, 다양한 해상도에 맞게 여러 버전을 만들어야 합니다. (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi 등)
2. 이 이미지들을 android/app/src/main/res/ 아래에 있는 mipmap 폴더들로 복사하십시오. 각 해상도의 폴더에 해당하는 이미지를 복사해야 합니다.
3. 기존의 ic_launcher.png와 같은 파일들을 원하는 아이콘 파일로 덮어쓰세요.

iOS:

1. 원하는 아이콘 이미지들을 준비하세요.
2. Xcode를 열고 프로젝트를 선택한 후, 앱 아이콘 섹션으로 이동하세요.
3. 기존의 앱 아이콘을 제거하고, 준비한 이미지들을 이 위치에 드래그 앤 드롭하여 추가하세요.

3. React Native 앱 재빌드:

변경 사항을 적용하려면 React Native 앱을 다시 빌드해야 합니다.

Android:

react-native run-android

iOS:

react-native run-ios

이 단계를 완료하면 앱의 이름과 아이콘이 변경되어 디바이스나 에뮬레이터에서 실행될 때 업데이트된 정보로 표시됩니다.

 

 

진행

 

android/app/src/main/res/values/strings.xml 파일 수정

<resources>

    <string name="app_name">PastLifeFaceDetector</string>

</resources>

앱아이콘은 사이즈별로 적용해야하므로 아래의 사이트를 GPT로부터 추천 받아서 사용했다.

https://appiconmaker.co/

App Icon Maker - Resize App Icon to all sizes for iOS/Android projects.

 

질문

res 폴더에 mipmap-hdpi~xxhdpi 까지 폴더가 있어. 각각 최적의 해상도는 어떻게 돼? 그리고 한 폴더에 round 아이콘과 사각형 아이콘이 각각 있어. 나는 사각형 아이콘만 준비됐는데 어떻게 해?

 

답변

res 폴더 내의 mipmap-* 디렉터리들은 다양한 화면 밀도를 가진 Android 디바이스에 맞는 아이콘 이미지를 제공하기 위한 것입니다. 각 디렉터리별로 권장되는 해상도는 다음과 같습니다:

1. mipmap-mdpi: 48x48 픽셀
2. mipmap-hdpi: 72x72 픽셀
3. mipmap-xhdpi: 96x96 픽셀
4. mipmap-xxhdpi: 144x144 픽셀
5. mipmap-xxxhdpi: 192x192 픽셀

이 해상도들은 각각의 화면 밀도에 최적화된 기본 앱 아이콘 크기를 나타냅니다.

round 아이콘과 사각형 아이콘에 대해:

Android 7.1 (API 레벨 25)부터 앱의 원형 아이콘을 지원하기 시작했습니다. 원형 아이콘은 특정 테마 또는 런처에서 사용됩니다. 만약 원형 아이콘을 제공하지 않는다면, 대부분의 런처에서는 기본 사각형 아이콘을 대신 사용합니다.

만약 원형 아이콘에 대한 별도의 디자인을 가지고 있지 않다면:

1. 사각형 아이콘만 사용하려면: mipmap-* 폴더에 있는 round 아이콘 파일을 삭제할 수 있습니다. 그런 다음 AndroidManifest.xml에서 원형 아이콘에 대한 참조도 삭제합니다.
2. 동일한 아이콘을 원형으로 사용하려면: 준비된 사각형 아이콘을 round 아이콘의 이름으로 복사하여 각 mipmap-* 폴더에 넣습니다.

만약 특별한 원형 디자인을 원한다면, 해당 디자인을 위의 해상도에 맞춰서 생성하고, 해당 디렉터리에 round 아이콘으로 저장하면 됩니다.

 

 

스플래시 이미지 관련

스플래시 이미지는 사용할 생각이 없으나, 이전에 설정했던 코드가 남아있었고 그중 최초 앱 실행 시 페이드인 되는 효과가 마음에 들어서 살려보려고 한다.

 

https://github.com/zoontek/react-native-bootsplash

GitHub - zoontek/react-native-bootsplash: 🚀 Show a splash screen during app startup. Hide it when you are ready.

 

나는 assets 폴더에 로고 파일을 넣고 다음과 같은 명령어로 생성을 하였다.

npx react-native generate-bootsplash assets/bootsplash_logo_original.png --background-color=F5FCFF --logo-width=100 --assets-path=assets --flavor=main --platforms=android

 

뭔가 이쁘게 완료가 되었다.

F:\Projects\WebView_app\pastface>npx react-native generate-bootsplash assets/bootsplash_logo_original.png --background-color=F5FCFF --logo-width=100 --assets-path=assets --flavor=main --platforms=android

    Assets
✨  assets\bootsplash_logo.png (100x100)
✨  assets\bootsplash_logo@1,5x.png (150x150)
✨  assets\bootsplash_logo@2x.png (200x200)
✨  assets\bootsplash_logo@3x.png (300x300)
✨  assets\bootsplash_logo@4x.png (400x400)

    Android
✨  android\app\src\main\res\values\colors.xml
✨  android\app\src\main\res\mipmap-mdpi\bootsplash_logo.png (288x288)
✨  android\app\src\main\res\mipmap-hdpi\bootsplash_logo.png (432x432)
✨  android\app\src\main\res\mipmap-xhdpi\bootsplash_logo.png (576x576)
✨  android\app\src\main\res\mipmap-xxhdpi\bootsplash_logo.png (864x864)
✨  android\app\src\main\res\mipmap-xxxhdpi\bootsplash_logo.png (1152x1152)

 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 ┃  💖  Love this library? Consider sponsoring!  ┃
 ┃  https://github.com/sponsors/zoontek          ┃
 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

✅  Done! Thanks for using react-native-bootsplash.

 

나머지 코드 수정 부분은 위의 링크의 설명대로 하였다.

 

 

기기 언어에 따른 앱 이름 구분

질문

<resources> <string name="app_name">PastLifeFaceDetector</string> </resources> 설치된 앱의 이름을 디바이스 언어 설정에 따라 한국어와 영어 두가지로 나눠 설정할 수 있어?

 

답변

네, 안드로이드에서는 언어와 지역별 리소스 값을 지정할 수 있습니다. 이를 위해서는 각 언어와 지역별로 별도의 values 폴더를 만들어 해당 언어의 문자열을 정의해야 합니다.

예를 들어, 앱의 이름을 영어와 한국어로 나누어 설정하고자 한다면 아래와 같이 디렉터리 구조와 파일을 설정할 수 있습니다:

1. 기본 언어 (영어) 설정:
   • 디렉터리: res/values
   • 파일: strings.xml

<resources>
    <string name="app_name">PastLifeFaceDetector</string>
</resources>

한국어 설정:

• 디렉터리: res/values-ko
• 파일: strings.xml

<resources>
    <string name="app_name">전생 얼굴 검출기</string>
</resources>

이렇게 설정하면 디바이스의 언어 설정이 한국어일 경우 "과거생 얼굴 감지기"로, 그 외의 경우 (영어나 기타 언어)에는 "PastLifeFaceDetector"로 앱 이름이 표시됩니다.

단, 이러한 다국어 리소스를 지원하려면 해당 언어에 대한 번역된 문자열을 제공해야 합니다. 따라서 추가적인 언어를 지원하려면 각 언어에 맞는 values-xx 폴더와 strings.xml 파일을 생성하고 번역된 문자열을 제공해야 합니다.

 

 

 

구글 플레이스토어 출시 준비

이전에 포스팅했던 AAB 빌드 방법은 Expo -> EAS 환경을 이용했던 것이므로 다른 방법으로 AAB 빌드를 생성해야한다.

2023.05.15 - [개발, 코딩/웹사이트 개발] - 구글 플레이 스토어 출시를 위한 AAB (Android App Bundle) 빌드 방법

구글 플레이 스토어 출시를 위한 AAB (Android App Bundle) 빌드 방법

 

사실 어려운 것 없이 버전 코드 갱신 후 (처음이라면 1로 되어있으니 변경 필요 없음) 빌드 명령 한줄이면 끝나지만,

아마도 키스토어 관련 문제가 있을 것으로 예상된다.

 

질문

구글 플레이스토어 출시를 위한 aab 릴리즈 버전 빌드 명령. 키스토어는 아직 생성받지 않았어

 

답변

Google Play Store에 앱을 출시하기 위해 Android App Bundle (AAB) 형식의 파일을 사용하는 것이 좋습니다. AAB는 앱의 코드와 리소스를 모듈화하여 사용자의 기기와 매치되는 구성만 Google Play Store가 설치하도록 해, APK보다 효율적입니다.

AAB 파일을 생성하기 위해서는 먼저 키스토어를 생성해야 합니다. 그 후, 이 키스토어를 사용해 앱에 서명하고, 그 서명된 앱으로 AAB를 빌드해야 합니다.

다음은 단계별로 진행하는 방법입니다:

1. 키스토어 생성

keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

1. 이 명령은 my-release-key.keystore라는 이름의 키스토어 파일을 생성합니다. 명령을 실행하면, 키스토어의 비밀번호와 키의 비밀번호, 그리고 여러 정보(이름, 조직, 도시 등)를 입력하라는 프롬프트가 표시됩니다.
2. Gradle 설정 업데이트
3. 생성된 키스토어를 사용해 앱에 서명하기 위해 android/app/build.gradle 파일을 업데이트해야 합니다. android 섹션에 다음을 추가합니다:

signingConfigs {
    release {
        storeFile file('my-release-key.keystore')  // 여기에 키스토어의 경로를 입력합니다.
        storePassword 'your_keystore_password'   // 키스토어의 비밀번호를 입력합니다.
        keyAlias 'my-key-alias'                  // 키의 별명을 입력합니다.
        keyPassword 'your_key_password'          // 키의 비밀번호를 입력합니다.
    }
}

buildTypes {
    release {
        signingConfig signingConfigs.release
        ...
    }
}

AAB 빌드

다음 명령을 실행해 AAB 파일을 생성합니다:

cd android
./gradlew bundleRelease

1. 성공적으로 빌드가 완료되면, AAB 파일은 android/app/build/outputs/bundle/release/app-release.aab에 위치하게 됩니다.
2. Google Play Console에 업로드
3. 생성된 app-release.aab 파일을 Google Play Console에 업로드하여 앱을 출시합니다.

이 과정을 통해 Google Play Store에 앱을 출시하기 위한 AAB 파일을 생성할 수 있습니다.

 

진행

키스토어 비밀번호와 키 비밀번호는 동일하다.

시,군,구 정보는 입력하지않아도 되는 것 같다.

키스토어 생성 위치는 android/app/build.gradle 위치와 같으면 된다.

 

AAB 빌드 명령으로 빌드가 정상 진행 중이다.

 

빌드가 정상적으로 완료되었다.

BUILD SUCCESSFUL in 1m 12s
122 actionable tasks: 119 executed, 3 up-to-date

 

안내받은대로 아래 위치에 정상적으로 aab 파일이 생성되었다.

 

 

 

현재 개발 중인 웹서비스는 아직 DB 등록과 로딩 스피너 적용 등의 작업이 남아있어서 앱 출시는 그 작업 이후 진행 예정이다.

 

참고로 AWS RDS로 데이터베이스를 기본값으로 시험 삼아 만들었다가 3일만에 $127 정도 과금이 되었다.

다행히 환불을 받았는데 이 내용에 대해서도 별도로 포스팅 예정이다.