안드로이드 애니메이션 관련 질문

React Native with Expo: 제로초에게 제대로 배우기

스플래시 스크린 커스터마이징(Asset, Constants)

작성

수정됨

// app.config.ts

const config: ExpoConfig = {
    ....
  android: {
    adaptiveIcon: {
      backgroundColor: '#000000',
      foregroundImage: './src/assets/images/aline-black.png',
    },
    ...
  },
  splash: {
    image: './src/assets/images/aline-black.png',
    imageWidth: 200,
    resizeMode: 'contain',
    backgroundColor: '#000000',
  },
  plugins: [
    [
      'expo-splash-screen',
      {
        image: './src/assets/images/aline-black.png',
        imageWidth: 200,
        resizeMode: 'contain',
        backgroundColor: '#000000',
      },
    ],
   ...
  ]
}

프로덕션 빌드된 앱에서 테스트 해보니까 애니메이션 이미지를 원형으로 지정하지 않았는데도,안드로이드에서는 첫번째 사진처럼 원형으로 보이다가 제가 지정한 이미지인 두번째 사진으로 넘어가고 나서 스플래쉬가 사라지는데, 원형으로 나오는 이 기본 동작을 막을 방법이 없을까요?

react react-native 하이브리드-앱 typescript expo

답변 2

제로초(조현영)

지식공유자

저거 앱 아이콘 아닌가요 원형은? 개발모드에서는 앱 아이콘이 잠깐 먼저 보인 뒤에 진행되비다. 배포시에는 알아서 사라집니다.

이영훈

질문자

production 빌드 후 배포 환경에서 테스트 한건데 저러네요..!!
https://docs.expo.dev/versions/latest/config/app/#foregroundimage 공식문서 읽어보니까 아이콘을 자동으로 원형으로 만들어주는건 adaptiveIcon.foregroundImage 가 유일한 거 같은데.. adaptiveIcon 자체를 없애고 production 빌드 후 다시 테스트해봐도 똑같이 원형으로 나오네요 🤣 프로덕션 빌드했는데 처음에 원형으로 앱 아이콘이 뜨는게 어디서 그렇게 되는질 모르겠네요

애니메이션 코드 자체는 제로초님이 알려주신대로 적용했습니다 border radius 같은 것도 전혀 들어가 있지 않구요..ㅠ

제로초(조현영)

지식공유자

https://docs.expo.dev/versions/latest/sdk/splash-screen/
제가 말씀드린 사항은 여기에 나와있는 내용이었습니다.

이영훈

질문자

expo-splash-screen 설정은 위 코드에 있는게 끝입니다..!! 안드로이드만 따로 아이콘 설정을 하거나 그러지 않았는데 왜 그런건지 도통 모르겠네요 좀 더 연구해보겠습니다..

제로초(조현영)

지식공유자

스플래시스크린이랑 앱 아이콘 서로 다르게 사진 임시로 한 번 바꾸면 원형아이콘의 정체가 뭔지 드러날것같습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이영훈님.

안드로이드 앱 실행 시 스플래시 스크린이 원형 애니메이션에서 지정한 이미지로 전환되는 현상에 대해 고민이 있으신 것 같습니다. Expo와 React Native를 사용하면, Android에서 기본적으로 제공되는 스플래시 스크린 설정이 앱 실행 시 애니메이션처럼 보일 수 있습니다.

이 문제를 해결하기 위해서는 다음을 고려해 보세요:

기본 동작을 수정하기: app.json 또는 app.config.ts 파일에서 expo-splash-screen 설정 외에 AndroidManifest 파일과 관련 설정을 검토해 보세요. 특히, backgroundColor나 이미지 설정이 기본 애니메이션에 영향을 줄 수 있으므로 이를 다시 확인하고 필요한 경우 해당 파일에서 직접적으로 수정해야 합니다.
안드로이드 스플래시 수정: Android의 res 디렉토리 내에 있는 기본 이미지나 설정 파일(mipmap-, drawable-)을 확인하고 불필요한 기본 리소스를 삭제하거나 맞게 수정하여 안드로이드 첫 동작을 제어할 수 있습니다.
다양한 스플래시 스크린 라이브러리의 활용: react-native-splash-screen 또는 다른 라이브러리들을 검토하여, 애니메이션이나 초기 로딩 화면이 필요한 경우 이를 활용해 커스터마이즈할 수 있습니다.

유사한 문제를 해결한 경험을 공유해 드리겠습니다:
- react-native Splash Screen 질문 드립니다!: 스플래시 스크린 문제 해결 시 추가적으로 어떤 것들을 고려할 수 있는지 확인해 보세요.
- 안드로이드 Default Splash Screen 없애는 방법: 안드로이드의 기본 스플래시 화면 제거에 대한 더 깊은 정보를 제공합니다.

이 외에도 스플래시 스크린의 전환이 의도하지 않게 보이는 경우, 직접 코드와 설정 파일을 조금 더 조정하여 UI 전환을 부드럽게 할 수 있는 방법들을 지속적으로 시도해 보시는 것도 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

안드로이드 애니메이션 관련 질문