ChatGPT 2편) Flutter & ChatGPT API 활용하여 심플한 AI채팅서비스 만들기

ChatGPT에게 뜬금없는 질문을 던져보았다.

개인의 취향에 따라 다르다는 현명하고 중립적인 인공지능의 정석다운 답변을 주었지만, 뒤에 엉뚱한 말을 덧붙인다.

내 이름을 '소주 한병하는' 행동으로 인식했나보다.

 

완벽하지만 때로는 바보같은 이 ChatGPT를 간단하게 활용해보고 싶었다.

OpenAI에서 쉽게 사용 가능한 API를 제공하고 있고, 최근에 Flutter 프로젝트에 대한 열망이 있었기 때문에

이 두개를 활용해서 간단한 GPT모델과 채팅을 할 수 있는 서비스를 만들어보기로 마음먹었다.

항상 그렇듯이, 3시간 해커톤 컨셉으로 최대한 빠르게 배포까지 하는 목표로 시작하였다.

---

위에 뜬금없는 질문 캡쳐본도 내가 만든 서비스로 질문 한 것이다.

자세히 보면 챗GPT 서비스 화면과 다르다.

좌 : ChatGPT 공식 홈페이지

우 : 내가 만든 Simple GPT Talk

 

사실상 같은 기능이다.

하지만 ChatGPT 사이트에 들어가서 대화를 시작하기 까지 귀찮은 과정이 포함된다.

ChatGPT 사이트 검색 -> 접속 -> 로그인 -> 대화 시작 -> 발화

 

하지만 이 모든 과정을 생략하고, 채팅창과 같은 익숙한 화면에서 원클릭으로 ChatGPT를 사용할 수 있다는 점을 내세울 수 있는

서비스를 제작하였다.

 

제작은 Flutter로 하였다.

최근에 지인 개발자분이 Flutter Web으로 웹개발 + 배포까지 원큐에 진행하는 모습을 보여주셨다.

그때 오랜만에 신선한 충격을 느꼈으며, 나도 해보아야겠다는 생각을 하였는데

이번 기회에 플러터 웹으로 제작하고, Firebase hosting으로 배포까지 쉽게 완료할 수 있었다.

 

Flutter 코드 일부

Flutter는 요즘 뜨고있는 선언형 UI를 채택하였다.

나는 기존에 안드로이드 네이티브 개발자로서, 모든 UI 디자인은 xml파일에서 따로 제작하였다.

하지만 코드레벨에서 모든 UI배치와 기능까지 구현하는 이 방식에 적응하는게 쉽지만은 않았지만

계속 하다보니 적응이 되었다.

 

그리고 코드 길이가 어쩔수없이 길어지는 구조라, 보기 힘들다는 단점도 있는 것 같지만

하다보니 처음보다는 적응이 되었다. (여전히 코드가 세로로 길어지는 구조는 불만이긴 하다)

 

심플한 인트로 화면도 하나 추가하였다.

chatgpt api 연동은 github에서 여러 오픈소스를 참고하였고,

api 키 발급은 OpenAI 공식홈페이지에서 발급받을 수 있었다.

 

하지만 무료 플랜이라, 서비스로 출시하기에는 무리가 있다는 이슈가 있었다.

홍보를 하지 않는이상 문제는 없겠지만, 사용자가 많아지면 당연히 유료플랜을 사용해야 할 것이다.

하지만 나는 취미로 한번 만들어 본 것이기 때문에 API는 무료플랜 그대로 적용하였다.

 

웹개발은 개발 뿐만이 아니라 배포도 큰 일이다.

안드로이드 개발을 할 때는, 앱 개발을 해서 배포용 파일을 하나 뽑은 다음 스토어에 올리면 끝이였지만

웹 개발은 호스팅 업체를 선정해서 배포까지 하는 과정이 매우 복잡하다.

 

하지만 Flutter + Firebase Hosting 으로 매우 쉽게 진행할 수 있다는 정보를 얻고 시도해보았다.

firebase login
firebase init

프로젝트 처음에 이 명령어 두개로 프로젝트에 firebase를 탑재해주고

 

flutter build web
firebase deploy

이 두줄이면 모든 과정이 완성된다.

정말 놀랍게도 내 서비스가 바로 호스팅 되어있었고

수정 후 배포 또한 저 두줄로 끝나는 멋진 기능을 보여주었다.

 

그렇게 최종 완성된 사이트는 

https://simplegpttalk.web.app/

이렇게 배포가 성공적으로 되었으며,

Flutter의 장점을 최대한 활용하여 안드로이드, iOS 버전도 만들어볼 예정이다.

 

simplechatgpt