본격적으로 Flutter 앱 개발을 시작해 보자. 우선 배운게 있으면 써봐야겠다. 니꼬쎔이 무료강의를 따라 만든 3개의 앱, 사실 온라인 강의를 들으며 만들었던 결과물들은 실제로 쓸 일이 거의 없다.
그래도 열심히 들었던 수업의 결과물로 뭔가 하나를 내 스스로 해보고 싶어졌다. 바로 앱 3개를 1개로 합치는 것이다.
수업을 듣다가 쳅터를 넘어갈 때마다 분명 main.dart 파일은 동일한데, 이전에 작성한 코드들은 사라져 있었다. 니꼬쎔이 아예 새로 촬영을 한 것이다. 그래서 3개 앱을 만드는 동안 3개의 main 파일을 만들고, 새로 하위 폴더를 만들면서 이름 충돌이 생겼다.
그래서 각 프로젝트마다 이름을 붙였고, 하나의 폴더 안에 3개 각각 main 파일, 하위 폴더들을 구성 할 수 있었다. (main_webtoon.dart, main_wallet.dart, main_pomodoro.dart)
Cursor야 해줘 – 업무 지시하기
- 질문 -
@main_webtoon.dart @main_wallet.dart @main_pomodoro.dart
위 3개의 main.dart 파일들이 3개의 어플들인데, 난 하나의 어플로 합치고 싶어.
lib폴더 안에 있는 모든 연결된 기능들, 파일들이 온전히 유지되면서 3개의 main.dart를 하나의 ,dart 파일로 실행 할 수 있고.
모든 화면 아래에 메뉴 버튼이 있어서 3개의 어플 화면을 전환할 수 있으면 좋겠어.
너가 스스로 새로운 .dart 파일을 생성할 수 있으면 해줘.
만약 한번에 해결 할 수 없다면, 어떤 식으로 진행 해야 하는지 순서를 나열해줘한 번에 해결할 수 있으면 뚝딱 만들어 주고, 못한다면 어떤 식으로 해야 하는지 방법을 나열해 달라고 했다. 결과는?
- Cursor 대답 -
다음은 세 개의 어플리케이션(웹툰, 지갑, 뽀모도로)을 하나의 어플리케이션으로 통합하면서 하단에 메뉴 버튼(BottomNavigationBar) 을 이용해 화면 전환을 할 수 있도록 하는 예시입니다.
기존의 각 파일은 그대로 유지하면서,
새로운 엔트리 포인트(main 함수)를 가지는 파일(예, toonflix/lib/main_combined.dart)을 생성하는 방식으로 진행할 수 있습니다.
아래는 통합 파일의 예시 코드와 함께 진행 순서를 정리한 내용입니다.
---
진행 순서
각각의 앱 화면을 분리된 위젯으로 사용하기
웹툰의 경우, 기존 toonflix/lib/screens/webtoon_home_screen.dart에 정의된 HomeScreen 위젯을 사용합니다. (다른 앱과 이름이 겹치므로, 별칭(alias)을 사용하여 webtoon.HomeScreen()처럼 호출)
뽀모도로의 경우, 기존 toonflix/lib/screens/pomodoro_home_screen.dart에 정의된 HomeScreen 위젯을 별칭(alias)로 pomodoro.HomeScreen()처럼 사용합니다.
지갑의 경우, 기존 toonflix/lib/main_wallet.dart 파일에 있던 코드를 재사용하되, 내부의 MaterialApp/Scaffold를 그대로 쓰면 중첩 문제 등이 있을 수 있으므로 새 위젯(예, WalletScreen)으로 추출하여 본문(content)만 포함하도록 합니다.
새로운 통합 앱 파일 생성
예제에서는 toonflix/lib/main_combined.dart 파일을 생성합니다.
이 파일은 앱 전체의 엔트리 포인트가 되며, 상단에서 웹툰/지갑/뽀모도로 위젯들을 import합니다.
또한, 기존 MyHttpOverrides와 같이 필요한 설정(예, HttpOverrides)도 포함합니다.
하단 메뉴(BottomNavigationBar)를 포함한 최상위 Scaffold 생성
CombinedHomeScreen 위젯을 만들어 IndexedStack 또는 단순히 배열의 현재 인덱스에 해당하는 위젯을 보여주고, 하단 메뉴를 통해 탭 전환을 구현합니다.
하단 메뉴는 각 탭에 대응하는 아이콘(웹툰: 책, 지갑: 지갑, 뽀모도로: 타이머)과 라벨을 표시하게 합니다.
MaterialApp의 home으로 CombinedHomeScreen 사용
CombinedApp 위젯을 생성하고, MaterialApp의 home에 CombinedHomeScreen을 지정합니다.
main 함수에서는 HttpOverrides를 설정한 후 CombinedApp을 실행합니다.
한번의 요청으로 간단하게 새로운 main.dart 파일을 생성해 줬다. 실행하니 요청한 대로 화면 하단에 3개의 메뉴 버튼이 추가되어서 자유롭게 3개의 화면을 이동 할 수 있었다.
‘딸깍 코딩’으로 해결됐다? 면 좋겠지만, 디테일한 에러가 생겼다. 수정 요청을 해보자.
Cursor야 그림 몰라? – 에러 해결하기
도저히 Cursor ai가 못 알아듣고 반복된 수정을 하기에 스크린샷을 찍어서 다시 수정 요청을 하였다. 아쉽게도 해당 모델에게는 이미지 분석이 안된다는 메시지가 나왔다. 그렇다면 반대로 이미지를 인식하는 모델이 있다는 이야기? 나중에 유료 결제해서 오류를 해결하도록 해보자.
전체 채팅(ctrl + L)로 수정 요청을 할 때 질문 하는 팁은 내가 코드 어디 부분에서 문제가 되는지 알고 있다면 “어디부터 어디 사이에서 이런 문제가 있어, 해결해 줘.” 이렇게 요청하는 게 방법이다.
Flutter 앱 화면에서 오류가 있을 경우, inspector에 어떤 문제가 있는지 보여주기에 좀 더 뾰족한 질문, 수정 요청을 할 수 있다.
- 질문 -
inspector에 보이는 에러를 보면 A RenderFlex overflowed by 76 pixels on the right. 라고 나오는데 해결해줘
- Cursor 대답 -
다음과 같이 버튼 Row를 FittedBox로 감싸서 내부 내용이 넘치지 않게 축소되도록 처리할 수 있습니다. 이를 적용하면 FractionallySizedBox로 지정한 너비 내에서 버튼들이 자동으로 크기를 줄여서 overflow 에러가 발생하지 않게 됩니다.
<code>
이렇게 수정하면 Inspector에서 "A RenderFlex overflowed by 76 pixels on the right" 에러가 발생하지 않고, 버튼들이 부모 위젯의 제한된 너비 내에서 적절히 크기를 조정하여 표시됩니다.Cursor야 다음엔 잘하자?- 앱 완성하기
작업을 마쳤다. 한 번의 요청으로 너무나도 쉽게 3개의 앱을 하나로 합쳐진 모습에 놀랐지만, 2가지 오류를 해결하기까지는 시간이 오래 걸렸다.
결론적으로 애러를 해결하기 위해서는 Ai에게 최대한 뾰족하게 지시를 해줘야 했다.
예) 코드 몇 번째 줄에서 어떤 에러가 생겼어. 해결해 줘.
예) 이전 파일 에는 이렇게 돼있는데 네가 만든 파일에는 없어, 적용해 줘.
아~ 왜 개발자 유튜버들이 Ai 코딩이 아직 멀었다 하는지 알겠다. 디테일이 부족하다. 결국 사람이 검토하고 어딜 수정해야 하는지 알고 지시를 해야 한다.
그래도, 고생을 하긴 했지만 의도한 대로 결과물이 나와서 만족한다.
플러터를 공부하면서 Cursor Ai에게 코딩을 시키면 어느 정도 할 수 있을지 궁금했었는데, 대충 알았다. 아무것도 없는 바닥부터 시작하면 오히려 더 유용하게 써먹을 수 있을 듯하다.
다음엔 플레이 스토어에 앱을 출시하는 과정을 다뤄볼까 한다.
