반응형 animation2 [React Native] 리액트 네이티브에서 스플래시 스크린에 애니메이션 구현하기 (lottie + react-native-bootsplash) 앱의 첫인상이 앱 아이콘이라면 스플래시 스크린은 앱을 만나러 가는 길이라고 정의할 수 있다. (중요하단 뜻이다.)이번에는 react-native-bootsplash 모듈을 통해서 스플래시스크린을 지정하는 방법을 알아보려 한다. 우선 스플래시스크린이 무엇인가? 앱에 처음 접속했을 때 뜨는 로딩화면으로서 프론트단에서의 앱 로딩 - 백엔드에서 정보를 가져오는 등 복잡한 구동이 진행되고 있을 때 사용자에게서 그것을 숨기고 덜 지루한 느낌(ux)을 주기 위해 구현한다. 로고만 있는 정적인 화면부터 누구나 아는 넷플릭스 스크린같은 동적인 화면도 많다.다만 아무리 검색해봐도 정적인 화면이 1초도 안 나오고 애니메이션부터 시작하는 스플래시 스크린을 구현하는 방법을 찾지는 못했다.그럼 어떻게 할까? 애니메이션의 배경색.. 2024. 7. 12. [React Native] 리액트 네이티브에서 Lottie 사용하여 애니메이션 넣기 (RN 0.73) Lottie는 에어비앤비에서 제공하는 라이브러리로, 많은 사람들이 공유한 애니메이션을 무료로 이용할 수 있고 커스텀까지 가능하다.무게가 큰 gif 파일에 비해 가벼운 json 파일만으로 웹, 앱 등 다양한 곳에 멋진 애니메이션을 넣을 수 있다.하지만 react native 0.73의 최신 버전을 활용하는 필자는 호환되는 버전을 찾는 데 어려움을 느꼈기 때문에 사용 방법을 정리해 보려 한다. 1. 설치로띠를 이용하기 위해서는 2가지의 모듈을 설치해야 한다. 사실상 버전 정보 때문에 이 글을 쓰는 것과 다름없다. 버전이 맞지 않으면 오류가 난다...어떤 오류인지는 밑에서 설명하겠다. 아래 command를 통해 두 모듈을 설치한다.npm i --save lottie-react-native@6.7.2npm i .. 2024. 4. 17. 이전 1 다음 반응형
