kkh.dev
Yellosis | Cross-Platform App Developer | 2025-08 - 2025-08

Cym702: For Pets

#앱개발#마이그레이션#Flutter#React-Native#성능최적화

React-Native → Flutter 프레임워크 변경과 동시 성능 향상 애플리케이션

Cym702: For Pets

기술 스택

Vue2JavaScriptVueXSCSSApexChartReact-NativeTypeScriptFlutterOpenCV

주요 기능

  • React-Native → Flutter 완전 마이그레이션
  • 웹뷰 국가별 도메인 분리
  • 번역 서비스 연동 (Indexed DB 활용)
  • DoS 공격 방지 (디바이스 고유값 기반)
  • OpenCV 이미지 처리 연동

상세 내용

React-Native → Flutter 프레임워크로 변경과 동시에 성능을 향상시킨 애플리케이션입니다.

구현 내용

  • React-Native → Flutter 마이그레이션: open-cv, oauth, 웹뷰 통신 bridge protocol 등 작업
  • 웹뷰 국가별 분리: 일본 전용 웹뷰, 한국 전용 웹뷰 등 국가별 도메인 생성
  • 번역 사이트 개발: 번역본 변경 시 실시간으로 앱 내 글 변경
  • API 보안 강화: 봇(Bot)을 이용한 무차별적인 SMS 인증 API 공격 방어

성과

  1. 기술적 의사결정 및 성능 최적화 (React-Native → Flutter)

    • 앱 시작 속도 60% 단축 및 초기 카메라 로딩 속도 50% 개선
    • CPU 점유율 95% 감소 및 배터리 소모량 67% 절감
    • APK 설치 크기 65% 축소
    • 장시간 사용 시 발생하던 발열 및 프레임 드랍 문제 해결
  2. 웹뷰 국가별 도메인 생성

    • 언어 길이에 따른 UI/UX 문제 해결
    • 각 나라별 출시 기능 제공
  3. 번역 서비스 연동

    • i18n 라이브러리 대신 서버 database에 번역본 저장
    • Indexed DB를 이용하여 번역본 캐싱 및 실시간 반영

배운 점

  • React-Native에서 Flutter로 마이그레이션으로 성능 60% 개선
  • CPU 점유율 95% 감소 및 배터리 소모량 67% 절감
  • APK 용량 65% 축소
  • 번역 서비스를 서버 기반으로 변경하여 유지보수성 향상