[미니사례] AI 처음 써보며 Flutter 앱을 빌드해본 경험

소개

Flutter로 AI를 활용해 모바일 앱을 만들어보고 싶었지만, 환경 설정과 초기 코드 작성이 가장 큰 진입 장벽이었다.

이번 안드로이드 스터디 과정을 통해 로즈님의 가르침에 따라 Android Studio와 Flutter를 설치했고, Stitch를 이용해 간단한 앱 디자인을 직접 만들어보게 되었다. 이후 해당 디자인을 기반으로 Flutter 프로젝트를 생성하여, 아이폰과 안드로이드 기기에서 동일한 화면을 띄워보는 경험을 할 수 있었다.

이 과정에서 AI 코딩 에이전트(Codex)를 활용해, 맥북 환경에서 Flutter 프로젝트를 생성하고 실제 안드로이드 / iOS 기기에 hello world 수준의 앱을 설치해보는 미니 실험을 진행했다.

진행 방법

1️⃣ 개발 환경 준비

맥북
Android Studio + Flutter 설치 및 설정
VS Code 설치 후 extension codex 설치 및 설정 사용
실제 안드로이드 폰 / 아이폰 준비
프로제트를 위한 폴더 생성(폴더명: flutter_application_1)

2️⃣ 디자인 파일 준비

Stitch에서 간단한 고객 검색 기능의 앱 화면 디자인 제작
screen.png 파일로 저장
VS Code 프로젝트 폴더에 screen.png 추가

3️⃣ Codex 활용

프로제트를 위한 폴더 안에 (폴더명: flutter_application_1) screen.png 추가한다.
VS Code 를 실행하고 그 프로젝트 폴더를 연다.

Codex를 Flutter 예제 코드 생성 및 개발 전반을 돕는 코딩 에이전트로 사용했다.

처음 Codex에게 요청한 프롬프트는 아래와 같다.

screen.png 디자인을 참고하여 flutter 프로젝트를 만들어줘

디자인 → 코드 변환을 기대한 매우 단순한 프롬프트
Flutter 프로젝트 구조 생성 여부를 확인하는 목적

4️⃣ Codex 결과물 확인

Flutter 프로젝트 기본 구조: ✅ 정상 생성
UI 구성: screen.png와 거의 유사한 수준으로 생성
전체 구조를 참고해 세부 UI는 직접 수정

5️⃣ 빌드 및 실행

안드로이드 폰 빌드: ✅ 정상 빌드
아이폰 빌드: ✅ 정상 빌드
실제 기기에 앱 설치 후 실행 확인
아래 그림은 codex가 만들어준 기본 빌드후 코덱스에게 제목만 '현장명으로 검색'으로 바꾸라고 한 결과 아이폰/안드로이드 폰에서의 화면이다. (참고: 타이틀이 중앙/좌측 정렬로 ui가 조금 다르다.)

결과와 배운 점

👍 좋았던 점

디자인 파일 하나로 프로젝트 출발점을 빠르게 만들 수 있었음
Flutter 프로젝트 구조를 이해하는 데 큰 도움
안드로이드 / iOS 모두 정상 빌드되어 성취감이 큼

🤔 아쉬운 점

UI 디테일(간격, 색상, 위젯 선택)은 직접 수정 필요
iOS 빌드는 여전히 기본 설정 지식이 필요함

💡 배운 점

AI는 처음 0 → 1 단계를 넘기는 데 매우 강력함
프롬프트는 단순해도 의도가 명확하면 충분히 유효함
Flutter + AI 조합으로 개발에 대한 심리적 장벽이 크게 낮아짐

특히 실제 폰에 앱을 설치해보니,

"플러터 프로젝트에 AI를 적용해 보니 자신감이 생겼다"

라는 느낌을 강하게 받았다.

읽는 분들께 한마디 💬

Flutter나 앱 개발을 처음 시작하는 분들
디자인은 있지만 코드가 막막한 분들
"내가 과연 앱을 만들 수 있을까?" 고민하는 분들께

👉 AI를 개발 파트너로 두고 시작해도 충분히 괜찮다고 말해주고 싶다.

완벽하지 않아도, 실제 기기에 앱 하나 설치해보는 경험만으로도 다음 단계로 나아갈 용기가 생긴다 🚀

🔥<24기 AI 스터디> 슈퍼얼리버드 신청하기 🔥