작업 계기
앱 개발자에 관심을 가지고 준비하고 있으며 Flutter를 공부하며 간단하게 프로젝트를 진행해보았다.
Flutter를 활용하여 Gemini API와 연동된 단일 페이지 챗봇 애플리케이션을 개발하는 프로젝트를 진행하였다.
개요
프로젝트의 목표는 dart 언어 학습 및 플러터의 여러 위젯 활용 및 공부이며 기본적인 학습 이후
Flutter를 사용하여 Gemini API와 통합된 단일 페이지 챗봇 애플리케이션을 개발하는 것 입니다.
이를 통해 사용자는 앱 내에서 Gemini AI와 실시간으로 상호 작용할 수 있습니다.
프로젝트의 전체 코드 ➡️ GitHub 저장소
기술스택
- 프레임워크: Flutter
- 언어: Dart
- API: Gemini API
- 개발도구: VS Code
구조
앱 화면에 필요한 이미지 파일은 assets/icons/images 파일로 구별하여 관리하였고
메인 소스코드는 lib 폴더에서 분리하여 관리하였다.
플러터 위젯
기본적으로 최소한의 화면을 구축하기 위한 위젯들을 학습하였다.
추후 계속해서 공식문서를 통해 공부하며 여러 위젯의 사용법을 학습 할 예정이다.
기본 Widget
- content, 글자, 아이콘
- Text()로 채팅 메세지 구현, Icon() -> Icons
- TextButton -> (Text, Outlined, Filled, Elevated) 버튼
- IconButton -> Icon(), svg
Layout -> children: [ ]
- column (세로)
- row (가로)
- stack (쌓는)
AppBar
TabBar
BottomNavBar
(전체) Scafford -> body
Flutter와 Dart의 공식 패키지 관리 사이트
https://pub.dev/
Flutter 및 Dart 애플리케이션을 개발하는 데 필요한 다양한 패키지들을 찾아볼 수 있다.
앞으로의 개발에 많이 활용 예정.
트러블 슈팅
대부분의 내용은 강의를 수강하며 이해하였고, 단일페이지 개발이기 때문에 문제가 없었지만, 강의 제작과 강의 수강간의 텀이 존재하고, 강의만으로 해결하지 못하는 부분이 있었다.
에러 없이 동작하며 디버그 콘솔에서는 동작하지만 실제 구현 앱 화면에서는 동작하지 않는 문제가 발생하였다. 아래사진을 보자
앱 화면에서는 동작하지 않지만 콘솔에서는 정상적으로 동작하고 있다.
문제가 발생한 부분의 코드이다.
강의에서는 동작하였지만 플러터 버전이 바뀌었는지 직접 구현 할 때는 동작하지 않아 일단 콘솔에서 동작하는지 확인하려고 toString()으로 사용하였다.
하지만 이렇게 하니 앱 화면에 Instance of 'TextPart'라는 메시지가 떴다.
_chatList[index].parts?.first가 Part 객체이기 때문이다.
Part 객체를 그냥 toString()으로 출력하면 객체의 기본 toString 메서드가 호출되어 객체의 타입을 출력된 것이다.
강의에서는 .text로 바로 작성했지만 Part 객체가 바뀌었는지 text를 사용할 수 없어 Part를 타고들어가서 확인하고 수정하였다.
수정 이후에는 정상동작 하였다.
결과
플러터로 Gemini API 사용하여 단일 페이지 챗봇 화면 구현
마무리
Flutter의 직관적인 UI 구성과 빠른 개발 속도가 좋았으며, Gemini API를 통해 AI와의 자연스러운 상호 작용을 구현할 수 있었습니다.
특히, ios, android, web에서 일관된 사용자 경험을 제공할 수 있다는 점이 장점인 것 같다.
또한 API 통신 시 발생할 수 있는 예외 상황에 대한 처리나, 환경 변수의 안전한 관리의 필요성을 느꼈고 이러한 문제들을 해결하면서 Flutter와 Dart에 대한 이해도를 높일 수 있었고, 전반적인 개발 역량을 향상시킬 수 있었다.
추가로 vscode에서 작업 시 마켓플레이스에 GitHub Copilot AI 프로그램을 사용하는 것이 좋아보인다.
현재는 배워나가는 과정으로 직접 입력했지만, 단순한 폰트 관련이라던지, 패딩, 보더 같은 단순 코드는 AI를 활용해 빠르게 작성하는 것이 좋을 것 같다고 느꼈다.
