티스토리 뷰

반응형

 
최근 재미있는 실험(?) 을 하였는데요. 

이번에 처음으로 Flutter를 사용해 하나의 앱을 개발하게 되었고, 이 과정을 공유 드리려고 합니다. 

글을 시작하기 앞써 필자는 안드로이드 앱 개발을 10년 이상, iOS 앱 개발을 약 3년이상 개발 경력을 갖고 있습니다. 


들어가기 앞써

Flutter로 개발한 프로젝트는 Dobilbe 이라는 앱입니다. 

DoBible은 바쁜 일상 속에서도 단 한 줄의 말씀으로 마음의 중심을 잡고, 하루를 새롭게 시작할 수 있는 앱입니다. 
 

왜 시작하였는가?

 
이번 프로젝트의 가장 큰 특징은 공식 문서나 강의 없이, 오로지 AI(ChatGPT)의 도움만으로 앱을 완성했다는 점입니다.

Flutter 는 하나의 언어로 여러 플랫폼을 만들 수 있는 장점이 있습니다. 예를들어 코드 1개로 안드로이드, iOS 앱을 출시 할  수 있습니다. 그러다 보니 네이티브(Android, iOS)의 UI 구성 방식이나 상태 관리, 네비게이션 등 기존 네이티브 개발과는 다른 철학을 가지고 있는 프레임워크 입니다. 

이번 프로젝트의 시작은 단순한 호기심에서 시작하였는데요. 평소라면 문서나 튜토리얼부터 살펴봤겠지만, 이번에는 AI의 응답만으로 어디까지 개발이 가능할까? 라는 호기심에서 실험을 시작했습니다.

참고로 공부는 하지 않았습니다. 대신 AI 에게 질문했습니다.
Flutter의 구조는 물론, 세부 위젯 활용 방법조차 모르던 상태였지만, 필요한 것이 생기면 그때그때 질문하며 구현하는 방식으로 진행했습니다.
 


어떻게 질문 하였는가?


AI 로 개발을 할 때에 가장 중요한 것은 어떤 프롬프트를 작성하는가? 라고 생각됩니다.

프롬프트는 AI에게 원하는 결과를 얻기 위해 입력하는 텍스트 지시문입니다.

AI 의 프롬프트는 웹 브라우저의 검색과 다르게 문장으로 프롬프트를 작성할 수록 좋은 피드백을 받을 수 있습니다. 그래서 저의 첫 프롬프트는 AI 에게 ‘개발하고자 하는 앱의 배경과’과 ‘앱 화면 구성 방법’ 에 대해서 질문을 하였습니다.
 



생각보다 AI 의 답변은 구체적이었습니다.

메인화면, 말씀 뽑기화면, 설정 화면까지 전체적인 앱의 구성에 대한 정의를 내려주었고, 화면 구성 방향을 제시 해주었습니다. 

무엇보다 구성 예시를 제안하면서 각 구성요소의 역할이 무엇인지 자세히 알려주었습니다.
 



페이지 기획의 큰 그림이 어느 정도 완성되어, 이제 본격적으로 개발을 시작했습니다.

스플래시 화면을 구성하고, '오늘의 말씀'을 보여주었는지 여부에 따라 서로 다른 엔드포인트 화면으로 이동할 수 있도록 로직을 만들 계획을 갖고 프롬프트에 입력하였습니다.



 
AI의 피드백을 보면서 놀란것은 구현 방식에 대한 설명과 그와 맞는 예제 코드를 제공한다는 것입니다. 

제공한 예제 코드에 대한 설명도 함께 제공하여, 코드에 대한 이해하는데 어려움이 없었습니다. 그러다보니 제공한 코드를 그대로 사용하는 것이 아닌 제공된 코드를 바탕으로 재구성하여 개발하였습니다.
 



JSON 데이터 구성

 
단순히 프롬프트를 입력하는 것만으로 기획과 개발이 가능하다는 점을 확인했고, 데이터 구성도 프롬프트를 통해 시도해보았습니다.

데이터 구성 JSON 으로 데이터를 구성하고 이 JSON을 어떻게 파싱해야하는 것에 대해서도 AI 가 할 수 있는지 실험을 하였습니다. 

먼저는 필요한 JSON 을 생성해달라고 하였습니다. 예를 들어서 ‘사람들에게 힘이 되는 문구 100개를 만들어줘’ 와 같이 JSON 을 AI 에게 요청하면 100개의 문구로 구성된 JSON을 제공해줍니다. 

여기서 더 나아가 JSON 구성도 변경할 수 있습니다. reference, referenceFullName, Topics 와 같이 필드를 추가해서 변경해달라는 프롬프트를 작성하였고, AI는 의도에 맞게 JSON을 재구성하여 제공하였습니다.



JSON 이 구성되었으니 파싱을 해야했습니다. 이번에도 AI 에게 JSON 파싱하는 방법에 대해서 물어봤습니다. 

JSON 파싱 시 필요한 Dart 모델 구성과 JSON 파싱 방법을 코드로 알려주어 적용하는데 어려움이 없었습니다.

 


개발에 필요한 질문을 AI에게 던졌고, 그 응답을 기반으로 코드를 수정·적용하면서 빠르게 기능을 완성해 나갔습니다. 개발 경력이 있다보니 AI의 답변을 그대로 사용하기 보다 응용해서 사용하였고, AI 응답에 추가된 설명을 보면서 개발 학습이 되면서 간단한 기능은 직접 개발하면서 진행하였습니다.
 


에러에 대한 처리


개발 시  에러가 발생하면 에러 메시지는 그대로 붙여넣고 원인을 파악하고, 대안을 얻는 방식이었습니다.

에러 메시지만 던져도 AI가 그동안 질문한 것과 맥락을 파악해서 그런지 프로젝트에 맞는 답변을 주었습니다. 



플로터는 멀리 플랫폼을 지원하지만 에러에 대한 처리는 플랫폼에 대한 이해가 있어야 수정할 수 있습니다. 

플랫폼에 나오는 이슈까지 AI 도움으로 해결 하면서 플랫폼 특성의 이슈를 빠르게 해결하며 개발에 속도를 높일 수 있었습니다.

 

앱 아이콘 구성하기


1인 개발자로써 가장 어려운 것은 디자인 입니다. 이 디자인 부분을 AI의 도움으로 어느정도 해결하였습니다.

원하는 색상과 앱의 컨셉을 간단히 기록하여 이것과 부합되는 아이콘 만들어줄 것을 요청하였고,

그 결과 받은 앱 아이콘 기반으로 앱 아이콘을 구성하였습니다. 

아쉽게도 제가 사용한 AI 툴에서 제공하는 앱 아이콘은 앱에 바로 사용은 힘들어서, 디자인 시안 기반으로 앱 아이콘을 디자인 하여 적용하였습니다.



마무리


바이브 코딩이라는 말이 요즘 주변에서 쉽게 들을 수 있습니다. 자연어인 프롬프트 기반으로 코딩하는 바이브 코딩은 개발 언어를 모르는 개발자에게 개발 속도를 올릴 수 있는 코딩 방법이라고 생각합니다. 
이번 개발 과정은 단순히 검색의 연장선이 아닌, 대화 기반 개발에 가까웠습니다. AI 와 대화를 앱의 구조부터 상세 기능까지 대부분이 아래 흐름으로 진행되었습니다.

"이런 걸 만들고 싶어."
AI가 구조 제안 및 코드 스니펫 제공
코드 적용 및 수정
예상치 못한 이슈 발생 → 다시 질문
(반복)

이처럼, 개발 과정 전체가 질문과 응답의 흐름으로 구성되었고, 저는 그 흐름을 빠르게 따라가며 앱을 완성할 수 있었습니다.

Flutter를 처음 접한 입장에서, AI를 통해 질문하고 구현하는 방식만으로도 앱을 개발할 수 있다는 경험은 인상 깊었습니다. 물론 기존의 개발 지식과 경험이 기반이 되었지만, 이번 프로젝트를 통해 공부의 흐름 자체가 질문 중심으로 변화하고 있다는 것을 실감하게 됐습니다.

이번 프로젝트를 통해 질문력만으로도 앱을 만들 수 있다는 결론을 내릴 수 있었습니다. 앞으로의 개발 문화와 환경이 변화될 것으로 생각됩니다. 질문을 잘하는 개발자가 높은 대우를 받는 날이 머지않은 거 같습니다.

반응형
댓글