[RN] 움직이는 Webp 로딩 애니메이션 구현하기
2024-01-13T18:01:37.000Z
앱 로딩 화면이 심심하다는 의견이 있어서, 정적 이미지를 대신해서 애니메이션을 추가하기로 기획이 되었다.
디자이너 분께서는 프레임마다 각각 png 파일을 제공해주셨고, 이를 webp로 변환해서 사용할 필요가 있었다.
🛠️ 테스트/개발 환경
- react: v18.2.0
- react-native: v0.71.11
- react-native-fast-image: v8.6.3 (RN 빌트인 <Image> 컴포넌트 대신 사용)react-native-fast-image의 <FastImage> 컴포넌트는, RN 빌트인 <Image> 컴포넌트에 비해서 경험상 다음의 이점이 있다고 느끼기 때문에 사용했다.
- 이미지 깜빡임(
Flickering) 덜함 - 이미지 로딩 속도 빠름
🚨RN Android에서는 기본적으로
gif,webp를 지원하지 않는다!
따라서 React Native 공식 문서에서 설명하는 것처럼,
android/app/build.gradle에 사진 속 코드처럼 필요한 의존성을 추가해 주어야만 정상적으로 기능하게 된다.
🫠 Webp 이미지가 움직이지 않는 문제
React Native 공식 문서에서 설명한 것처럼 Android 설정을 추가로 작성해 주었음에도 불구하고, 나의 Webp 이미지는 도통 움직일 생각을 안 했다..
한참을 삽질하다가, “내가 지금 사용하는 이미지 컴포넌트가 빌트인 Image 컴포넌트가 아닌, FastImage를 사용해서 그런 것은 아닐 까?” 하는 생각이 들었다.
그래서 react-native-fast-image 깃허브 저장소의 Issues 게시판에서, 내가 현재 겪고 있는 이슈를 검색하니 관련된 글을 찾을 수 있었다.
해당 라이브러리 개발자의 답변을 정리하면 다음과 같다.
- “(내가 만든)
react-native-fast-image는 IOS 라이브러리SDWebImage, Android 라이브러리Glide를 래핑하여 RN에서 WebP를 쉽게 사용할 수 있도록 한 것이다.” - “하지만, Glide는 WebP 관련해서 문제가 있는 것 같다.”
- “그러니 ~~(내가 고치기는 좀 그렇니)~~ 너 스스로 방법을 찾고, 잘 된다면 다른 이들에게도 공유해라.”
해당 글은 2017년에 작성되었지만, 현재까지도 이 라이브러리는 Android를 지원하지 않는다… 😭
스크롤을 내려서 다른 개발자가 작성한 답변을 보면, webpdecoder 종속성 관련 설정을 수정하면 문제가 해결될 것처럼 얘기를 나눈 것을 확인할 수 있다.
만약 이게 옳은 방법이라면, 다음과 같은 방식으로 문제를 해결할 수 있을 것이다.
node_mobules/reatc-native-fast-image/android/build.gradle파일에서,webpdecoder종속성을 추가 또는 수정한다.- 이후, 오픈소스 라이브러리를 커스텀할 수 있는 툴인 patch-package를 사용하여, 수정한 내용을 패치한다.
만약 patch-package를 사용하지 않고 내 로컬환경에서만 라이브러리 코드를 수정한다면 다음과 같은 문제가 발생할 수 있기 때문에 필수적으로 사용해야 한다.
node_modules폴더는.gitignore에 등록되어 있기 때문에, 커스텀한 라이브러리를 동료들과 공유할 수 없으며, 빌드 환경과도 싱크가 되지 않는다.yarn install명령어를 실행하면 내가 작성한 코드가 덮어씌워지기 때문에,install할 때마다 다시 수정해야 한다.
정리가 되었으니, 이제 실제로 코드를 수정해보자.
사진속 표시한 부분에 webpdecoder 종속성을 추가하면 될 것처럼 보였기에, 아까 게시글 답변중 하나를 참고 하여 다음과 같이 추가해 주었다.
implementation "com.github.zjupure:webpdecoder:2.1.${glideVersion}"하지만 위와 같이 작성 후 빌드를 하였더니, 해당 버젼이 유효하지 않다고 빌드가 실패되었다…
현재 여기서 환경변수로 사용중인 glideVersion은 4.12.0이다. 그렇다면 내가 실제로 설치하려고 한 버젼은 2.1.4.12.0이 되는데, 이게 유효한 버젼인지를 확인할 필요가 있다.
webpdecoder는 Maven Central Repository에 등록되어 있고, 여기서 모든 가능한 버젼을 확인할 수 있다.
하지만 예상과는 달리 2.1.4.12.0 버젼은 실제로 존재하는 버젼이었다.
따라서 “해당 버젼 자체에 문제가 있는 것은 아닌가” 생각이 들어, 한 단계 높은 버젼인 2.1.4.13.2를 사용하기로 하였다.
이 경우, 기존 환경변수 glideVersion 자체를 변경하게 된다면 해당 환경변수에 의존하고 있던 다른 implementation 문에 예상치 못한 문제를 발생시킬 수 있으니, 다음과 같이 직접 버젼을 작성하였다.
implementation "com.github.zjupure:webpdecoder:2.1.4.13.2"예상한 대로, 이번에는 빌드가 성공하였다.
수정한 내용을 패치하기 위해, 터미널에 다음과 같이 입력한다.
$ yarn add patch-package # 패키지가 설치되어 있다면 패스
$ patch-package react-native-fast-image
정상적으로 패치가 되었다면, 위 사진과 같이 프로젝트 루트 경로의 patches 폴더 내부에 패치 내용이 저장될 것이고, 이를 원격 저장소에 올려서 버젼 관리하면 된다.
✅ 이젠 된다!
<FastImage>+Animated Webp조합의 로딩 애니메이션
빌트인 <Image> 컴포넌트를 사용했다면 React Native 공식 문서에서 설명한 방식만 따라하면 되었겠지만, FastImage를 같이 사용하려니 제법 복잡해진 것 같다.
좀 힘들었지만, 덕분에 java 프로젝트 종속성을 추가/수정하는 방법을 간단히 배울 수 있었고, 더 좋은 이미지 컴포넌트를 그대로 사용할 수 있게 되어 뿌듯했다. 😎
