목록으로 돌아가기
ANTTIME
플레이스토어 다운로드 80만 Web3 포인트 채굴 앱
프로젝트 요약
담당 시작일
24.04.15.
포지션
프론트(크로스플랫폼 앱개발)
테크스택
React Native
Style Sheet
Zustand
React Native Reanimated
React Native IAP
React Native Firebase
Tanstack Query
React Native Code Push
팀 구성
프론트
1
백엔드
1
PM
1
디자인
1
관련링크
When ANTs Mine, TIME Shine.
ANTTIME은 시간이라는 자산을 수익화할 수 있는 블록체인 기반 T2E(Time-to-Earn) 프로젝트입니다. 이 TIME 생태계에서 창작, 소유, 수익 창출 등 다양한 경제 활동에 참여할 수 있습니다. 또한 노드 검증자가 되어 블록체인에 직접 참여할 수도 있습니다. ANTTIME과 함께 당신의 시간을 더욱 가치 있게 만드세요.
맡은 역할
work_section_background_image

프로덕션과 테스트 환경 분리

안드로이드 Flavor와 iOS 스키마 분리

  • • 프로덕션과 개발 환경 분리
    • 각 개발 환경에 대해 Firestore 설정 및 그에 맞는 환경 변수 파일 구성
    • iOS용 Xcode 빌드 스키마와 Android용 Android Flavor를 사용하여 네이티브 빌드 중 react-native-firebase의 환경별 설정 구성
프로덕션과 테스트 환경 분리_image

복잡한 채굴 애니메이션 구현

좌표 기반 타임라인 애니메이션

  • • 기존 Lottie 애니메이션을 캐릭터의 신체 부위 별 애니메이션을 독립적으로 실행되도록 분리
    • 기존 Lottie 애니메이션으론 여러가지 스킨 조합의 경우의 수를 표현하는데에 한계가 존재. 신체 부위 별로 아바타를 교체할 수 있으려면 각 파츠 별로 애니메이션을 따로 구현해야하는 상황 발생.
    • react-native-reanimate로 각 파츠 별 애니메이션 설정. 타임라인 기능으로 각 애니메이션의 실행시기를 정확하게 맞춤.
    • 앱이 백그라운드 상태가 되거나 애니메이션 페이지에서 벗어나면 클린업 함수로 타임라인 제거. 캐릭터 idle 상태로 전환 최적화.
복잡한 채굴 애니메이션 구현_image

신체 부위 별 스킨 업데이트

연휴 별 스킨 추가 이벤트 진행

  • • 사용자가 앱 내 화폐를 사용하여 구매할 수 있는 스킨 페이지 개발
    • 신체 부위 별 애니메이션 분리 이후, 앱 내 화폐로 스킨을 갈아끼울 수 있는 스킨샵 추가
    • 인앱 재화 구매(In-app Purchase) 후 착용 시 해당 파츠만 교체되며 나머지 스킨은 유지
    • 여러 연휴 및 명절을 기념하는 스킨 출시 이벤트를 진행할 수 있는 초석 마련.
신체 부위 별 스킨 업데이트_image

React Native 버전 업데이트

RN 0.68에서 0.74로.

  • • RN 버전이 노후화로 인해 서드 파티 라이브러리들의 지원이 중단되는 상황 대처
    • 새로운 라이브러리들이 기존 RN 버전(0.68)을 지원하지 않아 버전을 낮춰서 설치해야되는 상황이 빈번하게 발생.
    • React Native Upgrade Helper를 사용하여 0.68에서 0.74로 업그레이드하고 그에 맞게 네이티브 코드 수정 (Flipper 제거, Fabric 구성, iOS/Android config 파일 업데이트).
    • 새로운 RN 버전에 맞게 서드파티 라이브러리 구성도 업데이트 완료.
React Native 버전 업데이트_image
Thanks for Reading목록으로 돌아가기
Ascii3DLily
© 2025
Made by Bumang