AI와 함께 Flutter 프론트엔드 개발 학습하기
Python 및 ADK 프레임워크 경험 부족으로 인한 개발 장벽 극복을 위해 AI 코딩 파트너 Antigravity 활용
반복적 학습 워크플로우를 통해 ADK 기반 에이전트와 연동되는 Flutter 프론트엔드 개발 기술 습득
모듈식 스킬 구조화 및 13회의 반복을 거쳐 재사용 가능한 개발 스킬(Reusable Developer Skill)과 Flutter 프론트엔드 구현 성공
AI 기반 학습 루프의 작동 방식
본문에서는 AI 코딩 파트너 Antigravity를 활용한 반복적 학습 루프(Iterative Learning Loop) 구축 과정을 상세히 설명함.
1. 스킬 실행(Execute Skill): 코더 에이전트가 정의된 스킬 워크플로우를 실행하여 초기 결과물 생성
2. 결과 평가(Evaluate Output): 작성자(Author) 에이전트와 함께 코드 및 산출물을 검토하며 구조적 문제점 식별
3. 격차 분석(Identify Gaps): 코더 에이전트의 지침 부족, 잘못된 가정, 통합 문제 등 개선점 도출
4. 스킬 업데이트(Update Skill): 발견된 격차를 해소하기 위해 스킬 파일(SKILL.md) 및 참조 문서 수정
5. 재실행(Rerun): 변경된 스킬로 초기화 후 다시 실행하여 점진적으로 이해도와 코드 품질 향상
이 과정은 점진적 개선(Incremental Improvement)을 통해 복잡한 기술 학습 곡선을 완만하게 만드는 데 효과적임.
모듈식 스킬 구조화의 이점
초기에는 단일 파일(SKILL.md)로 스킬을 관리했으나, 에이전트가 탐색하기 어렵다는 문제점을 발견함. 이를 해결하기 위해 모듈식 스킬 구조(Modular Skill Structure)를 도입함.
참조 폴더(References Folder): `agent_discovery.md`, `frontend_usage.md` 등 각 단계별 가이드라인을 별도 파일로 분리하여 명확한 지침 제공
단계별 페이즈(Phased Approach): 스킬 실행을 여러 단계로 나누고, 각 단계마다 검토 및 승인 절차를 추가하여 제어 흐름(Control Flow) 강화
결과적으로, 코드 생성 품질 향상뿐만 아니라 작성자 본인의 ADK 및 Flutter에 대한 이해도를 심화시키는 데 기여함.
프론트엔드 개발을 위한 에이전트 인터페이스 분석
ADK 기반 에이전트와 연동되는 Flutter 프론트엔드를 개발하기 위해, 에이전트의 인터페이스 및 API 분석(Interface and API Analysis)이 선행됨.
`AGENT_INTERFACE_NOTES.md`: 에이전트의 소스 코드를 분석하여 주요 기능, 노출된 인터페이스, API 작동 방식 등을 기록
`FRONTEND_USAGE_NOTES.md`: 프론트엔드의 사용자 인터페이스(UI) 요구사항 및 기능 명세 정의
`FRONTEND_ARCHITECTURE_NOTES.md`: 서비스, 클래스, 상태 관리, 데이터 모델 등 애플리케이션 아키텍처 설계
`FRONTEND_DESIGN_NOTES.md`: 색상, 폰트 등 시각적 디자인 요소 정의
이러한 사전 분석 및 설계 단계를 통해 에이전트의 동작 방식을 명확히 이해하고, 이를 기반으로 일관성 있는 프론트엔드 개발을 진행할 수 있었음.
부분 이벤트 처리 및 마크다운 렌더링 문제 해결
ADK 서버에서 스트리밍되는 이벤트는 종종 부분적으로 전달되어, 이를 그대로 렌더링하면 UI 파편화(UI Fragmentation) 문제가 발생함.
문제점: 각 부분 이벤트를 개별 메시지로 표시하여 텍스트가 깨지고 가독성 저하
해결 과정: Antigravity에게 SSE 스트리밍 방식 및 이벤트 데이터 구조에 대해 질문하며 '바이브 학습(Vibe Learning)' 수행
수정 코드: `AgentProvider` 클래스에서 `partial` 플래그 확인 및 `contentText`를 순차적으로 누적(Sequential Aggregation)하여 완전한 메시지로 재구성
추가 개선: `flutter_markdown` 패키지를 활용하여 에이전트가 생성하는 마크다운(Markdown) 텍스트를 올바르게 렌더링하도록 수정하여 가독성 확보
개발 환경 설정 및 초기 스킬 설치
프로젝트 시작 시, 개발 환경 설정을 위해 필요한 도구와 초기 스킬을 설치함.
CLI 도구 설치: `npx skills add google/agents-cli --skill google-agents-cli-adk-code` 명령어를 통해 ADK CLI 도구 및 관련 기능을 설치
Flutter 스킬 추가: `npx skills add flutter/skills` 명령어로 Flutter 개발에 필요한 기본 기능 습득
Dart MCP 서버: Dart 확장 기능을 통해 설치되어 Flutter 개발 환경 준비 완료
이러한 초기 설정은 Antigravity가 ADK 및 Flutter 프로젝트를 이해하고 코드를 생성하는 데 필요한 기본적인 지식 기반(Knowledge Base)을 제공함.
