비개발자가 Flutter로 첫번째 프로젝트 배포하기 - 할일 캘린더 (Todo Calendar)

안녕하세요 스테디빌더입니다. 😃

 
그동안 따로 개발을 진행하느라 flutter 기초 학습 관련 글을 정리할 시간이 없었네요.
이럴 바엔 차라리 개발하면서 겪은 경험담을 풀어보려고 합니다.
 
flutter 초보자, 비개발자의 아주아주 초보스러운 실수들과
삽질들을 겪어가며 배포까지 완성하는 내용의 포스팅될 예정이예요. 😱
 
비슷한 입장의 아예 코드를 모르거나, 초보자, 비개발자분들께서 봐주신다면 제 경험담을 통해 조금이나마 도움이 되어 드렸으면 좋겠고,
개발자 선배님들이 보신다면 부디 조언을 아끼지 말아주세요 : )
 
참고로 이 카테고리는 ‘디벨로그(개발일지)’ 형식으로,
특성상 혼잣말을 하듯 작성할 예정입니다.
-했다. -했음. 등의 반말 말투로 쓰게되는 점 양해 부탁드립니다.
 
⚠️ 주의 ⚠️ 제가 좀 말이 많아요. 죄송 죄송. 😥
 
그럼 시작해 볼게요 : )
 

 
 

---

📌 코딩 하나도 몰라도 앱을 만들 수 있을까 ?

 
“어떤 기반으로 앱을 만들어야 할까 ?”
“아니, 내가 과연 만들 수는 있나 ?”
 
이 고민을 하고 있을 때, 우연히 구독하고 있던
노마드코더님의 Flutter Vs React 강의 영상을 보게 되었다.
 
👉 노마드코더 Flutter 영상 보기

 
 
“비개발자가 Flutter로 앱을 만들 수 있을까?” 라는 질문에서, 이 영상 하나로 “나도 Flutter 해볼까?” 라는 생각이 들었다.
 
그래서 바로 시작해봤다.

 
📌 Flutter 설치 및 첫 프로젝트 실행 과정 기록:

👉 블로그 글 보기

Flutter를 선택한 이유와 초심 찾기: 스테디빌더의 개발 이야기

 
 
 
 

---

 

📌 일단 해볼까 ? 뭐부터 해야 하지 ?

( with 🚀 Flutter 개발 환경 설정 )
 
시작은 빨랐다.
고민을 할 시간도 아까웠다.
💡 일단 해보는거다 !
 
“. . . 그런데 뭐부터 해야 하지 ?” 🤔
 
이럴 때 생각난 것은 구글보다 ChatGPT(https://chatgpt.com/) 였다.
이유는 단순하다.
 
많은 유튜버들이 ChatGPT 를 활용해서 Flutter 를 배우고 있었기 때문이다.
그래서 바로 물어봤다.
 
"Flutter로 안드로이드 앱 개발을 해보고 싶어."
"Flutter 설치하는 방법은 ?"
 
정말 신기했다.
1초도 안 걸려서 flutter 앱 개발 환경 설명부터
설치 방법, 초기 앱 코드까지 쫘아아악 써내려 간다.
 
시작에 대한 기록은 남기지 않아서 기억이 가물가물하지만,
ChatGPT 가 알려주는 환경을 세팅하는 부분이 기억난다.
 
우선 flutter 공식 홈페이지를 알려줬다.
 
 
 
 

---

⚙️ Flutter 설치 과정 (Windows 기준) - 초보자를 위한 환경 설정 가이드

 
https://flutter.dev/ 로 가서 그냥 시작을 했다. Get Started !

Flutter - Build apps for any screen

 
넘어가다 보면 “Start building Flutter Android apps on Windows” 페이지가 나오는데,
설명이 잘 되어 있어서 하나하나 시키는대로 환경을 설정해 나갔다.
 
✅ 1. Git for Windows 설치
✅ 2. Android Studio 설치
✅ 3. Visual Studio Code (VSCode) 설치
✅ 4. Flutter SDK 다운로드 및 설치
Git for Windows 도 설치해보고, Android Studio 도 설치했다.
Visual Studio Code (이하 VSCode) 도 설치했고, 드디어 Flutter SDK 도 설치했다.
 
결국, 가르쳐 주는 대로 하니까 어찌저찌 설치는 성공했다.
생각보다 어렵지 않았던게 좋았다!
 
ChatGPT 로만 개발 환경  세팅 가능할까 ?
⚠️ ChatGPT가 주는 답변은 100% 내 상황과 맞지 않을 수도 있다!

예를 들면,

• VSCode에서 Flutter SDK를 자동으로 설정했는데,
• ChatGPT는 환경 변수 설정까지 필요하다고 안내했다.
• 실제로는 자동 세팅되었기 때문에 추가 설정이 필요 없었다.

💡 결론: 정확한 질문을 해야 정확한 답변을 얻을 수 있다!
 
 
 
 

---

🛠️ Flutter 첫 프로젝트 실행 – 기본 앱 구조 이해와 실행

 
ChatGPT 가 알려주는대로 최초의 프로젝트를 생성해 보았다.
VSCode 터미널에서 아래 명령어를 입력했다.

flutter create my_first_app

 
⚠️ 현재 터미널의 경로에서 폴더를 생성하며 프로젝트가 생성된다.
 
 
프로젝트를 만들고 바로 실행이 가능하다고 했다.
 

 
음 ? 아직 아무것도 안했는데 . . . ?
 
< Flutter 프로젝트를 생성하면 기본적으로 실행 가능한 카운터 앱 ! >

 
 

 
“와 진짜? 이게 된다고?!!!”
개발 공부를 조금 해봤던 나로써는 굉장히 당황되었다 !
 
와우 ! 기본 UI 가 있는 앱을 제공해 주는 것이냐 ?!
java 나 c 언어를 초등학생 때 깔짝깔짝 배울 땐
콘솔에 ‘Hello, world !’ 를 찍는게 다였던 것 같은데…
 
이건 신세계 . . .
 
 
 
 

---

🤔 이제 뭐하지? Flutter 초보자 미니 프로젝트 추천 (간단한 앱 아이디어)

 
맞다.
이제부터가 문제지.
누가 가르쳐주는 것도 아니고…
 
또 ChatGPT 에 물어봤다.
“첫 프로젝트 돌려봤어. 그런데 이제 뭐 해야 해? 난 비개발자에 초보자라서 아무것도 몰라. 알려줘.”
 
1초의 고민도 없다. (나와 같이 물어보는 사람이 많은가?)
flutter 의 기본 내용 - main.dart 가 무엇인지, 기본 구조는 어떤지 등 - 이 주욱 나왔다.
 
음, 기초 개념이구만 ? 알겠어.
그런데 아직은 흥미가 나지 않아.
뭔가 재미있는 건 없을까 ?
 
“초보 수준으로 미니 프로젝트 추천해줘 !”
 
🎯 ChatGPT의 추천 리스트:
✅ 랜덤 명언 앱
✅ 카운터 앱 (숫자 증가)
✅ 오늘 뭐 먹지? (메뉴 추천)
✅ 할 일 리스트 앱 (To-Do List)
✅........
✅.....
 
Flutter 초보자가 도전할 미니 프로젝트 추천!
 
다양한 리스트를 한 번에 알려준다.
(이후에 혹시나 해서 100개 정도 알려달라고 했더니 진짜 됨)
 
“뭐야. 겁내 똑똑해… 무서워… 😱😱😱”
 
그럼 내 선택은 바로~
📌 할 일 리스트다 !
 
💡 이렇게 시작된 것이 나의 첫 번째 Flutter 앱 개발 여정이었다.
 
 
 
 

---

📖 배워가는 과정을 기록하다. – Flutter 블로그 시작

 
Flutter 개발을 하면서 기록의 중요성을 깨달았다.
그래서 블로그도 함께 시작하게 되었다.
 
💡 나처럼 Flutter 개발을 처음 시작하는 사람에게 분명 도움이 될 것이다!
 
📌 Flutter 앱 개발 초보자가 배우는 과정 기록:
 
플로팅 버튼 추가하기 ✨
👉 블로그 글 보기

Flutter 미니 프로젝트 만드는 과정을 블로그에 남겨보자. 첫번째 프로젝트는...?

 
다이얼로그(Dialog) 기능 구현 💬
👉 블로그 글 보기

To-Do List 앱 Step 2-0. 플로팅버튼 띄우기

 
완료 버튼, 수정, 삭제 버튼까지 추가 🛠
👉 블로그 글 보기

To-Do List 앱 Step 10. 디자인 입히기 (colorScheme속성 , Card 위젯)

 
처음으로 플로팅 버튼이란 것도 띄워보고,
다이얼로그라는 것도 처음 알게 되었다.
 
점점 흥미를 붙이게 되었고,
완료 버튼, 수정, 삭제 버튼까지 구현하게 되었다.
 
< 중간 단계 , 충분히 완성도가 있다고 생각했다. >
 

 
 
실컷 재미있게 앱을 만들어 나가고 있을 때…
💥 첫 번째 위기가 찾아왔다…! 💥
 
📌 (다음 글에서 계속…)
 
 
 

---