간단한 iOS 네이티브 앱을 Flutter로 처음 포팅한 경험(feat: Rose's 자동 스크린 캡쳐 플러그인)

소개

기존에 iOS 네이티브로 만들었던 간단한 유틸 앱을 Flutter로 처음 포팅해 본 경험을 정리해 보았습니다 😊

이 앱은 주변 비콘(BLE)의 신호 강도(RSSI)를 확인하는 매우 단순한 구조의 앱으로, 화면도 하나뿐인 소규모 앱입니다.
iOS 앱은 주차장 내비게이션 앱을 만들 때 필요하여 연구 목적으로 개인적으로 활용하려고 만들어 두고 혼자 사용하고 있었는데...

최근에 아파트 현장에 설치를 시작하여 나 말고도 현장 점검하는 회사 직원들도 사용하게 되었다.

혼자 사용할 때는 불편함이 없었는데 회사 동료가 사용해야 하기 되니 디자인도 신경 쓰이고 안드로이드 사용자도 많아서 Flutter로 포팅하는 게 좋을 것 같았다. 왜냐하면 회사 직원의 70%인 안드로이드 사용자는 아이폰을 휴대해야 해서 불편했다, 안드로이드 사용자에게 필요한 앱이기도 해서 회사에 도움이 될 것 같기도 하고

무엇보다도 iOS 앱을 Flutter 앱으로 포팅하는 스터디 및 개인 학습 목적으로 진행했습니다.

Flutter는 이론적으로는 공부해 봤지만, 실제 회사 프로젝트에 적용해 본 경험은 없었습니다.
정리하자면, 이번에 아래와 같은 이유로 포팅을 시작하게 되었습니다.

• 개인 학습 목적

• 나 말고 실제 회사 직원들과 협력사 직원들이 사용하게 됨, 그래서 디자인도 새롭게 예쁘게 수정해야 함

• 안드로이드용 앱이 없어서 불편, 회사에 도움이 되는 앱 개발

• 회사에서도 능률을 위해 Flutter가 더욱 필요해질 것이라는 판단

• 이 정도로 단순한 앱이라면 연습 삼아 포팅하기에 적절하다고 생각

진행 방법

사용한 도구

• MacBook

• Stitch

• VS Code

• Claude CLI

• Codex

비콘 스캔 결과를 리스트로 보여주는 구조라 전반적으로 난이도는 낮은 편이었습니다.

작업 순서

1. Stitch에서 화면 UI 수정

2. 작업용 폴더 생성 후 VS Code 실행

3. 기존 iOS 앱 소스를 작업 폴더로 복사

4. Claude CLI 실행

5. Stitch에서 만든 UI 리소스를 stitch 폴더에 추가

6. UI와 기존 소스를 기반으로 Flutter 앱 생성 플랜 작성 요청

7. Claude의 질문에 답변, 모르는 부분은 Codex에 질문하며 보완

8. 플랜이 완성되고 codex에게 검토 요청

9. Claude 에게 플랜대로 개발 요청

10. 막히는 부분 Codex에게 수정시켜 중간중간 문제 해결

11. 우여곡절 끝에 테스트 배포까지 완성

스티치 작업물

ALT

한국 앱 스크린샷

ALT

다양한 설정을 보여주는 모바일 앱의 스크린샷

작업 폴더 구조

ALT

컴퓨터의 파일 관리자 스크린샷

클로드와 나눈 대화 요약

목표

• iOS 비콘 리더 앱을 Flutter로 포팅

• Android + iOS 동시 지원

내가 수행한 작업

Phase 1. 프로젝트 생성 및 구조

• flutter create navi_beacon_reader

• 폴더 구조 생성

  • config

  • models

  • providers

  • services

  • screens

  • widgets

  • utils

• pubspec.yaml 의존성 추가

  • provider

  • dchs_flutter_beacon

  • permission_handler

Phase 2. 핵심 코드 작성

Phase 3. 플랫폼 설정

• Android

  • AndroidManifest.xml: BLE / 위치 권한 추가

• iOS

  • Info.plist: 위치 / 블루투스 권한 설명 추가

  • Podfile: iOS 13.0 설정

Phase 4. 테스트

• 단위 / 위젯 테스트 16개 모두 통과

• flutter analyze → No issues found

Codex가 수정한 내용

1. main.dart

   • useMockService: false (항상 실제 비콘 서비스 사용)

2. beacon_service_impl.dart

   • UUID 필터링 추가

3. 앱 이름 변경

   • iOS / Android 모두 “주차장 비콘 리더”

4. permission_handler.dart

   • iOS 권한 간소화 (위치 권한만)

5. Podfile

   • permission_handler 설정 추가

6. pubspec.yaml

   • 버전: 0.1.2+202601290001

   • flutter_launcher_icons 추가

실행 테스트

• Android (SM-N950N) → 정상 실행

• iOS 무선 디버깅 → 속도가 느려 중단

최종 상태

• 코드 분석: No issues found

• 협업 방식:

  • Claude → 코드 작성

  • Codex → 수정 및 최적화

결과 배포 가능한 앱

iOS (TestFlight)

• https://testflight.apple.com/join/UUd8USJZ

Android

• https://chamsule.gabia.io/images/common/asDocument/navibletest.apk

실행 시킨 iOS/안드로이드 앱 화면 비교

ALT

비콘 모니터 스캔 목록의 스크린샷

ALT

비콘 모니터 스캔 목록의 스크린샷

ALT

비콘 모니터 스캔 목록의 스크린샷

ALT

아이폰과 안드로이드 폰에서의 비교 화면

ALT

아래 누워있는 아이폰은 비콘 신호를 발송하는 기능을 수행중

중간중간 로즈님의 훅으로 동작하는 자동으로 찍힌 스크린샷들 (auto-screenshot 플러그인 뿌듯)

플러그인 참고 링크: https://github.com/LinaYoun/auto-screenshot

ALT

자동으로 찍힌 스크린샷이 저장된 폴더

<첫번째 자동 스크린샷과 중간에 찍힌 일부분 캡처 >

ALT

자동으로 찍힌 스크린샷 샘플1

ALT

자동으로 찍힌 스크린샷 샘플2

결과와 배운 점

• 디자인을 Stitch로 먼저 잡는 방식 추천

• 두 에이전트(Claude + Codex)의 협업 시너지가 매우 큼

• 약 4시간 만에 배포까지 완료

• 앞으로는 Flutter + AI 중심으로 지속적인 스킬 업 예정

많이 부족한 글 읽어주셔서 감사합니다.