프로젝트에서 보기 →

Cursor로 코딩없이 Flutter 앱 개발 - Gemini API로 AI 채팅 앱 만들기

태그
기술 cursor ai 자동화
시작일
종료일
수정일

https://www.youtube.com/watch?v=0LxUf3MKxIs

1. 이건 꼭 알아야 한다[^1]

[? 질문] Cursor(커서)와 Flutter를 이용해 “코딩을 최소화”하면서 AI 채팅 앱을 실제로 만들 수 있는가[^2]
[= 답] 커서에서 프롬프트로 MVVM 구조/파일 생성 → 채팅 UI 구현 → Gemini API 연동 → 프롬프트로 캐릭터 부여 순서로 진행하면, 개발자가 아니어도 “내 채팅GPT 같은 앱”을 30~40분 내에 형태까지 만들 수 있다고 안내한다.[^3]

[? 질문] 왜 OpenAI(ChatGPT) 대신 Google Gemini API를 쓰는가[^4]
[= 답] Gemini는 사용이 비교적 간편하고, 무엇보다 “현재 시점에 무료 사용량이 꽤 많아” 비용 부담 없이 실습하기 좋기 때문이다.[^5]

[? 질문] Gemini API 키를 앱에 넣을 때 무엇을 주의해야 하는가[^6]
[= 답] API 키는 타인에게 노출되면 무단 사용으로 요금/오남용 문제가 생길 수 있으므로 공개 저장을 피하고, 가능하면 .env 같은 방식으로 분리해 관리하라고 강조한다.[^7]

2. 큰 그림[^2]

이 콘텐츠는 Cursor를 “코드 자동 생성/수정 도구”로 활용해 Flutter 기반의 AI 채팅 앱을 만들고, Google Gemini API로 실제 대화까지 연결하는 전체 과정을 따라가는 실습형 튜토리얼이다.[^8] 단순 채팅 UI를 넘어, 프롬프트를 조정해 역할극/캐릭터형 AI로 만드는 방법을 보여준다.[^9]

  • Cursor 프롬프트 기반 개발: 폴더 구조(MVVM) 생성부터 기능 추가(상태관리/버블 표시), UI 개선까지 “프롬프트로 지시→AI가 수정→사람이 필요한 부분만 수동 반영” 흐름으로 진행한다.[^10]
  • Flutter 채팅 UI + iOS 감성(Cupertino/Swift 스타일): 초기 단순 디자인을 만든 뒤, 애플 디자인 철학을 참고해 더 직관적이고 깔끔한 채팅 화면으로 다듬는다.[^11]
  • Gemini API 연동과 보안 감각: API를 “웨이터(중개자)”에 비유해 쉽게 설명하고, 키 발급/문서 복사/패키지 설치/서비스 코드 작성까지 실습한 뒤, 키를 하드코딩하지 않도록 .env 관리도 시도한다.[^12]

3. 하나씩 살펴보기[^1]

3.1 오늘 만들 앱의 컨셉: “나만의 채팅GPT + 역할(캐릭터) 부여”[^2]

📸 0:09

강의자는 오늘 Cursor와 Flutter로 Gemini API 기반 AI 채팅 앱을 만들 것이라고 소개한다.[^2] 여기서 목표는 “그냥 단순 채팅 앱”이 아니라, 예시 영상처럼 특정 사고방식/대사 스타일로 말하는 AI, 즉 롤플레잉 또는 역할을 부여한 AI와 대화하는 형태다.[^3]

  • 강의자는 이를 “원형적 사고로 대사하게 만든 AI” 같은 표현으로 설명하며, 결국은 “여러분만의 뭔가 캐릭터를 정해주고 대화할 수 있는 앱”이라고 말한다.[^3]
  • 간단히 말하면 “나만의 ChatGPT를 하나 만든다”는 느낌으로 이해하면 된다고 정리한다.[^3]

또한 OpenAI(ChatGPT) 대신 Google Gemini를 쓰는 이유를 명확히 한다.[^5]

  • Gemini가 사용하기도 비교적 편하고,[^5]
  • 무엇보다 “현재 무료로 사용할 수 있다”는 점을 강점으로 든다.[^5]
  • 일반적으로 API는 일정 비용이 드는 경우가 많은데, Gemini는 “꽤 많은 양의 무료 제공량”이 있어 실습에 유리하다고 한다.[^5]

3.2 전체 진행 로드맵: 5단계로 끝낸다[^8]

📸 0:57

강의자는 앞으로의 작업을 다섯 가지 단계로 나눠 제시한다.[^8]

  1. Flutter 프로젝트 준비[^8]
  2. 기본 채팅 UI 디자인(애플 Cupertino 스타일 활용 예정)[^8]
  3. Google Gemini API 가입 및 키 발급[^8]
  4. 발급받은 키로 실제 대화 호출 함수 구현[^8]
  5. AI 프롬프트 수정으로 캐릭터/맞춤형 AI 앱으로 확장[^8]

이 5단계가 이후 영상의 흐름(프로젝트 생성 → UI → API 키 → 호출 → 프롬프트 캐릭터화)을 그대로 구성한다.[^8]

3.3 개발 환경 사전 준비: 설치를 건너뛰지 말 것[^13]

📸 1:50

본격 시작 전에 강의자는 “개발 환경 설정”을 먼저 하라고 강조한다.[^13]

  • Flutter 앱 개발에 필요한 프로그램으로 Android Studio와 (맥 iOS 개발 관련 도구로 언급되는) Xcode를 설치해야 한다고 말한다.[^13]
  • 또한 Flutter SDK 설치도 필요하다고 안내한다.[^13]

다만 설치 과정을 강의에서 자세히 다루면 복잡해지고 길어지므로, 커뮤니티 자료에 간단 안내가 있지만 블로그/유튜브를 보며 차분히 따라 하는 것을 권장한다.[^14]
그리고 “처음부터 세팅을 잘 해놔야 나중에 오류가 안 생긴다”며, 필요한 경우 강의를 잠깐 멈추고 설치부터 끝내라고 한다.[^14]

3.4 Cursor에서 Flutter 프로젝트 생성: 폴더 이름은 소문자 권장[^15]

📸 2:56

세팅이 됐다는 가정 하에, Cursor에서 프로젝트를 만드는 흐름을 보여준다.[^15]

  1. Cursor를 켠 뒤 Open Folder로 원하는 위치에 폴더를 만든다.[^15]
  2. 폴더 생성 시 “소문자로만 폴더를 생성”하라고 주의한다.[^15]
  3. 예시로 “AI2” 같은 폴더를 만들어 연다.[^16]

그 다음 터미널을 연다.[^17]

  • 단축키(백틱/컨트롤+백틱)로 열거나,[^17]
  • 안 되면 UI에서 우클릭 후 “Run Terminal Command” 등으로 터미널을 띄우는 방법도 언급한다.[^17]

터미널에서 Flutter 프로젝트를 만든다.[^18]

  • flutter create .를 입력하면 폴더에 Flutter 프로젝트가 생성된다.[^18]
  • 생성 후 iOS/Android 외에도 Linux/macOS/web/windows 등이 보이는데, 강의자는 지금은 필요 없어서 “복잡하니까 지우겠다”는 취지로 정리한다.[^19]
  • 다만 실제로는 작업 중 android, ios 폴더는 가끔 들어갈 일이 있어 유지한다고 설명한다.[^20]

[!NOTE] 작업 중심 폴더
강의자는 주로 작업할 곳이 lib 폴더라고 짚는다.[^20] android/ios는 가끔만 들어간다고 한다.[^20]

3.5 MVVM 패턴으로 구조 만들기: Cursor 프롬프트로 폴더/파일 자동 생성[^21]

📸 4:32

강의자는 프로젝트를 MVVM 패턴으로 작업할 것이고, Cursor에게 명령할 때도 그런 방식으로 진행하겠다고 한다.[^21]

이 시점부터 Cursor의 핵심 사용법은 “프롬프트로 코드베이스를 태그하고, 원하는 패턴/폴더/파일을 만들어 달라고 지시”하는 것이다.[^22]

그가 사용한 프롬프트의 핵심 요소는 다음 취지다.[^22]

  • 코드베이스(또는 특정 폴더)를 태그하고
  • “MVVM 디자인 패턴을 사용해서 프로젝트를 만들 것”
  • “필요한 폴더와 파일 생성”
  • “아래 지시를 따라라”
  • 그리고 지금은 “기능 구현이 아니라 디자인 작업만” 할 것이므로 그 점을 포함하라고 한다.[^22]

커서 호출은 단축키로 진행한다.[^23]

  • 맥은 Command + I, 윈도우는 Control + I로 Cursor의 AI 편집/명령을 연다고 설명한다.[^23]

실행 결과, Cursor가 MVVM 폴더 구조(예: View / ViewModel / Service 등)를 만들었다고 보여준다.[^24]
또 main.dart에 넣으라고 제안한 부분이 있는데, 강의자는 “이건 직접 변경할게요. 가끔 직접 변경해야 되는 것도 있다”고 말한다.[^25]

  • 즉, Cursor가 만들어준 결과를 그대로 믿기보다, 사람이 검토하고 필요한 부분을 손보는 흐름을 강조한다.[^25]

3.6 iOS 빌드 준비: CocoaPods 초기화(Podfile)와 설치(pod install)[^26]

📸 6:21

iOS 기준 작업을 하려면 iOS 폴더에서 CocoaPods 설정이 필요하다고 진행한다.[^26]

  1. 터미널에서 cd ios로 iOS 폴더로 이동한다.[^26]
  2. pod init을 실행해 Podfile을 만든다.[^27]
    • 강의자는 Podfile을 “필요한 파일/의존성을 적어놓고 설치하는 것”이라고 쉽게 설명한다.[^27]
  3. Podfile을 수정해야 하는데, 그 수정 내용은 유튜브 댓글이나 커뮤니티 자료로 제공할 수도 있다고 말한다.[^28]
    • 다만 커뮤니티 자료는 커뮤니티 멤버만 볼 수 있어 “오셔서 보셔야 한다”고 양해를 구한다.[^29]
  4. 수정 후 pod install을 실행하면 필요한 항목을 내려받고 Podfile.lock 같은 파일이 생기며 완료된다고 한다.[^30]

3.7 Android Studio로 시뮬레이터 실행( iOS도 가능 ): 개발자 친화 기능 강조[^31]

📸 7:48

강의자는 iOS 앱 개발이라도 Android Studio에서 계속 작업하는 편이라고 말한다.[^31] 이유는 Android Studio가 “개발자 친화적”이고, 여기서 iOS 시뮬레이터도 돌아가며 작업 흐름이 편하다는 것이다.[^31]

진행 흐름:

  • Android Studio를 켜고 Open으로 프로젝트 폴더를 연다.[^32]
  • 처음엔 Android 뷰만 보일 수 있는데, “Android Project” 같은 뷰 옵션을 눌러 전체 프로젝트 구조를 본다.[^33]
  • 디바이스 선택에서 iOS 시뮬레이터를 켜면 아이폰 15 시뮬레이터가 뜬다고 보여준다.[^34]

안드로이드 에뮬레이터 설정도 안내한다.[^35]

  • Device Manager → “New Device / Create Virtual Device”로 생성할 수 있고,[^35]
  • 픽셀(Pixel) 기기(예: Pixel 8/8a)를 예로 들며,[^36]
  • 최신 API로 “API 35”를 언급하고, 넥스트/이름 설정/피니시로 만든 뒤 실행(런닝)하는 모습을 설명한다.[^37]

3.8 의존성 받기: pubspec.yaml과 “Flutter Pub Get”[^38]

📸 10:26

앱을 실행하기 전에 pubspec.yaml에서 필요한 의존성을 설치해야 한다고 설명한다.[^38]

  • pubspec.yaml을 클릭하면 아래에 “Flutter Pub Get” 버튼이 보이는데,[^38]
  • 이것을 한 번 눌러 필요한 파일을 다운로드 받는다고 한다.[^38]

그 다음 실행(Run)하면 처음 빌드가 조금 걸리니 기다리라고 안내한다.[^39]
iOS도 마찬가지로 iOS 폴더 쪽 설정 후 동일하게 진행하면 된다고 덧붙인다.[^40]

3.9 첫 실행 결과: “디자인만 적용, 기능은 아직”[^41]

📸 11:42

앱이 실행되면 매우 기본적인 화면이 뜨는데, 강의자는 이것이 “디자인만 적용된 상태”라고 설명한다.[^41]

  • 기능이 없어서 채팅 입력이 안 되거나 제한적일 수 있다고 말한다.[^41]
  • 안드로이드/아이폰 둘 다 비슷하게 동작하는 것을 보여주고,[^42]
  • 이후엔 iOS 중심으로 진행하겠다며 안드로이드 화면은 잠시 꺼둔다.[^43]

또 시뮬레이터 옆에서 버튼을 실제로 누를 수 있는 등, 에뮬레이터/시뮬레이터 UI 조작 팁도 언급한다.[^44]

3.10 “메시지 버블이라도 떠야 테스트 가능”: 전송 버튼 동작 구현(Provider 상태관리)[^45]

📸 12:45

강의자는 “디자인만 있어도 테스트하려면 메시지가 뜨는 것까지는 해야 한다”며, 전송 버튼 클릭 시 메시지 버블이 나타나게 기능을 추가하자고 한다.[^45]

이때 프롬프트 전략을 구체적으로 설명한다.[^46]

  • 이제는 전체 코드베이스 태그까지는 필요 없고, lib 폴더만 태그해서 작업 범위를 제한한다.[^46]
  • 프롬프트는 기능을 작은 요구사항 단위로 나눠서 쓰면 Cursor가 이해하기 쉽다고 말한다.[^46]
    • 예: “전송 버튼 클릭 시 메시지 버블이 정상적으로 나타나도록” 같은 식으로 분리.[^46]

Cursor가 작업을 마치면, 가끔 “민감한 것/함부로 건드리면 안 되는 것”은 커서가 직접 수정하지 않고 사용자에게 하라고 안내하는 경우가 있다고 한다.[^47]
여기서는 Provider 패키지로 상태관리 구현을 했다고 나오고, 사용자는 안내에 따라 pubspec.yaml dependency에 provider를 추가하고 설치하면 된다고 설명한다.[^48]

설치 방법은 2가지로 소개한다.[^49]

  • Android Studio의 “Flutter Pub Get” 버튼으로 설치하는 방법,[^49]
  • 또는 터미널에서 커서가 제시한 명령으로 설치하는 방법.[^49]
    강의자는 자신은 버튼 방식이 편해서 주로 그걸 쓴다고 개인 취향도 덧붙인다.[^49]

3.11 Android Studio의 강력한 생산성: Hot Reload / Hot Restart[^50]

📸 14:48

기능을 추가한 뒤, 강의자는 Android Studio를 쓰는 큰 이유로 Hot Reload / Hot Restart를 강조한다.[^50]

  • 코드를 바꿀 때마다 앱을 껐다 켤 필요 없이
    • Hot Reload로 변경사항이 즉시 반영되는 경우가 많고,[^50]
    • 반영이 안 되면 Hot Restart로 아예 재시작하면 된다고 한다.[^51]
  • 이를 “진짜 꿀”, “너무 좋은 기능”이라며 적극 활용하라고 한다.[^52]

Hot Reload 후 실제로 메시지 버블이 나타나는 것을 보여주며 “신기하죠”라고 반응을 유도한다.[^53]
다만 현재는 AI 응답이 실제 호출이 아니라 “샘플 응답”으로 나온 상태임을 설명한다.[^54]
또 화면을 스크롤할 때 색이 바뀌는 등(아래로 내리면 밝아지고 위로 올리면 어두워지는) UI 동작도 언급한다.[^54]

3.12 UI가 너무 단순하다 → “애플 쿠퍼티노/스위프트 감성”으로 개선[^55]

📸 16:06

강의자는 기존 디자인이 “너무 단순하고 깔끔하지 않다”고 평가하고,[^55] 이제 “플러터로 애플 쿠퍼티노 감성”을 넣어보자고 한다.[^56]

그가 작성한 UI 개선 프롬프트의 요구사항은 다음과 같다.[^57]

  • “아래 수정 작업 진행”
  • 애플 스위프트 디자인을 참고해서 UI 개선
  • UI 요소가 더 직관적이고 심미적으로 보이도록 폰트/버튼/레이아웃 수정
  • 타겟이 모바일이므로 모바일 사용자 경험에 최적화된 시각화 디자인 적용
  • 메시지 입력/출력 시 단순히 “뿅” 나타나지 말고, 더 매끄럽고 “쫀득한” 마이크로 인터랙션 효과 추가
  • 예시를 적어 주면 더 좋다는 팁도 덧붙인다.[^57]

Cursor가 개선 작업을 했다고 하고, 결과적으로 디자인이 “아까보다 낫고 iOS스럽다”는 느낌으로 변한 것을 보여준다.[^58]
강의자는 실제 iOS 메시지 앱과 비교해 “비슷하죠”라며 감성 방향이 맞았음을 확인한다.[^59]

다만 애니메이션(인터랙션)은 아직 원하는 느낌이 아니어서, 추가 프롬프트로 더 수정해보기로 한다.[^60]

3.13 애니메이션/인터랙션 튜닝: “아쉬운 점을 그대로 적는 게 제일 좋다”[^61]

📸 18:08

강의자는 메시지 버블 애니메이션이 원하는 대로 안 들어간 것 같다고 말하며,[^60] 다음과 같은 요구를 프롬프트로 더한다.[^60]

  • 메시지 버블이 나타날 때 옆에서 나타나는 애니메이션이면 좋겠다[^60]
  • AI 응답은 보통 로딩이 걸리므로 2초 정도 로딩 표현을 넣어보자[^60]

수정 후 실행해보니 “되긴 하는데 어색”하고, 어디가 첫 번째/마지막 메시지인지 헷갈린다고 한다.[^62]
그래서 이런 식으로 “보면서 아쉬운 점을 그대로 적어 주는게 사실 제일 좋다”고 조언한다.[^61]

또 긴 프롬프트를 쓸 때의 개인 작업 방식도 공유한다.[^63]

  • 강의자는 Cursor뿐 아니라 ChatGPT도 함께 사용하며,[^63]
  • 요구사항을 “한정(=제한 조건)하고 정교하게 정리해서 전달”하는 편이라고 한다.[^63]
  • 결과가 중요하니, 먼저 ChatGPT에게 “이걸 어떻게 구현하면 좋을까” 같은 식으로 물어 정리한 다음 Cursor에 넣는 방식이 효율적일 수 있다고 제안한다.[^64]

그 뒤 다시 시뮬레이터에서 확인하면서, 애니메이션이 “재밌게 바뀌긴 했지만 샘플 응답이 나올 때마다 계속 같은 연출이 반복된다”는 식의 관찰을 덧붙인다.[^65]

또 채팅 버블 색상(검은색)이 불편해서 흰색으로 바꾸는 수정을 추가로 진행하고,[^66] 재시작 후 “깔끔하게 변경됐다”고 확인한다.[^67]

3.14 Gemini API 준비: Google AI Developer에서 키 발급[^68]

📸 21:13

이제 본격적으로 Gemini API를 붙이는 단계로 넘어간다.[^68]

  1. 구글에서 “Google AI Developer”를 검색해 해당 페이지로 간다.[^68]
  2. 구글 로그인으로 진행한다.[^68]
  3. 페이지에서 “Get API key” 흐름으로 들어가 API 키 만들기를 진행한다.[^69]
  4. 프로젝트 선택/생성(“기존 프로젝트에서 API 생성하기”를 누르라고 안내) 후 키를 발급받는다.[^69]

여기서 강의자는 매우 강하게 보안 주의를 준다.[^7]

  • 강의 영상 때문에 키가 노출될 수 있지만, 본인은 “나중에 삭제할 것”이라고 말한다.[^70]
  • 그리고 API 키는 절대로 다른 사람이 볼 수 있게 저장하면 안 된다고 경고한다.[^7]
  • 이유: 누군가 키를 가져가 사용하면 요금 발생 등 문제가 생길 수 있기 때문이라고 설명한다.[^7]
  • 키는 메모장 등 안전한 곳에 저장하라고 하고, 본인도 메모장에 저장하는 모습을 말로 설명한다.[^71]

[!WARNING] API 키 보안 경고
API 키를 노출하면 타인이 무단으로 사용해 요금/쿼터 소진 문제가 생길 수 있으니 공개 저장을 피하라고 강하게 말한다.[^7]

3.15 API란 무엇인가: “레스토랑의 웨이터” 비유로 이해시키기[^12]

📸 21:34

강의자는 시작 전에 API와 Gemini를 간단히 설명한다.[^12]

  • API를 레스토랑 주문 과정에 비유한다.[^12]
    • 손님(우리 앱)이 주방(외부 시스템, 예: Gemini)로 직접 가지 않고
    • 웨이터(API)에게 주문(요청)을 전달하면
    • 웨이터가 주방에 전달하고 결과(응답)를 가져온다는 구조다.[^12]
  • 따라서 API는 “우리 앱의 요청을 다른 시스템에 전달하고, 결과를 다시 받아 사용하는 중개자”라고 정리된다.[^12]

API 사용의 장점도 말한다.[^72]

  • AI를 직접 만드는 것은 현실적으로 어렵지만,[^72]
  • API를 이용하면 AI 기능을 쉽게 가져다 쓸 수 있고,[^72]
  • 여러 API를 결합해 서비스를 만들 수도 있다고 한다.[^73]

단점/리스크도 언급한다.[^74]

  • 비용 문제가 생길 수 있고,[^74]
  • AI 성능에 의존성이 생길 수 있으며,[^74]
  • 요청/응답 구조라 속도(로딩) 이슈가 있을 수 있고,[^74]
  • 외부로 통신하므로 보안 문제가 발생할 수 있다고 말한다.[^75]

다만 이번 강의는 로컬에서 테스트하는 수준이므로 보안은 과하게 신경 쓰지 않아도 된다고 덧붙인다.[^76]

3.16 문서 활용 전략: 공식 문서 코드를 복사해 “require” 폴더에 저장[^77]

📸 24:41

강의자는 공식 문서를 봐도 처음엔 이해가 어렵기 때문에,[^77] Cursor에게 일을 시키기 위한 “재료”로 문서 내용을 복사해 프로젝트 안에 저장하는 방식을 쓴다.[^77]

구체 단계:

  1. Developer Documentation → Quickstart 탭으로 간다.[^78]
  2. 언어/환경을 Dart/Flutter로 맞춘다(Flutter를 쓰기 때문).[^78]
  3. 페이지의 내용을 아래로 쭉 전체 복사한다.[^79]
  4. Cursor로 돌아와 프로젝트에 require 폴더를 만들고,[^80]
  5. 그 안에 “Gemini API를 설명하는 마크다운 파일”(예: api.md)을 만들어 붙여 넣고 저장한다.[^80]

또 다른 문서(예: “텍스트 생성”) 쪽에서는 Node.js 탭을 클릭한 뒤,[^81] 그중에서도 “대화형 채팅 빌드” 섹션만 골라 복사해 같은 파일에 추가 저장하는 방식도 보여준다.[^82]

이렇게 하는 목적은 Cursor가 프로젝트 맥락에서 “Gemini API를 어떻게 쓰는지” 참고할 수 있도록, 문서 내용을 **프로젝트 내부 지식(참고자료)**로 만들어 주는 것이다.[^83]

3.17 Cursor에게 Gemini 연동 지시: 라이브러리 태그 + 로컬 테스트 명시[^83]

📸 26:14

그 다음 커서의 Composer(프롬프트 입력 영역)에서 요구를 작성한다.[^83]

  • 방금 만든 Gemini 문서 마크다운을 참고하게 하고,[^83]
  • Gemini를 사용하는 방법에 맞춰 라이브러리(lib)를 수정해서,[^83]
  • “Gemini API 이용한 AI 대화형 앱으로 만들어” 달라고 지시한다.[^83]
  • 그리고 “로컬에서만 테스트할 거야”라고 조건을 준다.[^83]

이 지시 후 Cursor가 작업하는 동안, 강의자는 동시에 패키지 설치를 진행한다.[^84]

3.18 Flutter 패키지 설치: google_generative_ai 추가[^84]

📸 26:49

Gemini 연동을 위해 강의자는 google_generative_ai 패키지를 사용한다.[^84]

  • 문서에서 패키지 이름을 복사해 pubspec.yaml에 추가한다.[^84]
  • 이후 설치가 올바른지 체크하고,[^85]
  • Cursor가 수정한 파일들도 읽어보며 적용한다.[^85]

Cursor가 만든 서비스 코드(예: AIService.dart)에 “YOUR API KEY” 같은 섹션이 있을 수 있는데,[^86] 여기에는 본인 키를 넣어야 하며 “내 걸 따라 쓰는 게 아니라 여러분 키를 쓰는 것”이라고 강조한다.[^87]

3.19 API 키 하드코딩 vs .env 분리: 더 안전한 관리로 개선[^88]

📸 27:50

강의자는 단순히 코드에 API 키를 박아넣는 방식(하드코딩) 대신, 파일로 관리하는 방법도 알려주겠다고 한다.[^88]

  • .env 파일로 관리하고 싶다고 Cursor에게 말해 방법을 진행한다.[^88]
  • .env로 분리하면 좋은 점:
    • 코드에 키가 그대로 들어가 있으면 앱이 배포되거나 누군가 다운로드 받았을 때 키 노출이 쉬워진다는 위험이 있다.[^89]
    • 그래서 옛날 수학처럼 X, Y처럼 “Gemini API 키”를 변수/환경값으로 분리해 관리하자는 취지다.[^90]

구체적으로는:

  • Flutter에 환경변수 관련 패키지를 추가하고,[^91]
  • .env 파일을 만들고,[^92]
  • 그 안에 GEMINI_API_KEY=... 형태로 본인 키를 넣는 방식으로 설명한다.[^93]
  • 이렇게 하면 코드에서는 키가 직접 드러나지 않아 “조금 더 안전하게 관리할 수 있다”고 말한다.[^94]

이후 다시 flutter pub get 등을 실행해 세팅을 반영한다.[^95]

3.20 실제 대화 테스트: “안녕”을 보내고 Gemini 응답 확인[^96]

📸 29:18

세팅이 끝나면 앱에서 실제로 Gemini와 대화가 되는지 테스트한다.[^96]

  • 강의자는 예시로 “안녕”을 입력하며 “지금 대화하는 거거든요”라고 말한다.[^96]
  • 이어서 “넌 누구야 이름이 뭔데”라고 물어보니,[^97]
  • Gemini가 이름이 없고 “구글에서 훈련된 대규모 언어 모델” 같은 식으로 자신을 설명했다고 반응한다.[^98]

여기까지로 “기본적으로 AI가 들어갔다”고 판단하고, 다음 단계는 성격(캐릭터) 부여라고 전환한다.[^99]

3.21 캐릭터/말투 넣기: AIService의 프롬프트를 교체한다[^99]

📸 30:00

강의자는 AI 성격을 어디서 설정하냐면 Service 폴더의 AIService 파일에서 프롬프트를 추가/수정하면 된다고 안내한다.[^99]

그는 예시로 “장원영 럭키비키” 스타일을 프롬프트로 따서 미리 준비한 것이 있고,[^100] 그걸 복사해서 붙여 넣어 테스트한다.[^100]

중요한 포인트는 “프롬프트는 상세해야 한다”는 것이다.[^101]

  • 만들고자 하는 캐릭터가 “어떤 식으로 답변해야 되는지”를 상세히 적어야 원하는 톤이 나온다고 말한다.[^101]
  • 그래서 본인이 정리해둔 예시(어떤 말투, 어떤 방향으로 답할지 등)가 필요하다고 언급한다.[^102]

프롬프트를 바꾼 후 테스트 대화 예시가 나온다.[^103]

  • 사용자가 “나 어제 마라탕 먹어서 슬퍼”라고 하자,[^103]
  • AI가 “긍정적인 마음으로 기다려 보는 건 어때요” 같은 식으로 “럭키” 톤으로 답변한다고 설명한다.[^103]
  • 또 “마라탕 말고 탕후루” 같은 식으로 이어지는 대화도 보여주며, 캐릭터성 있는 말투가 구현됨을 확인한다.[^104]

강의자는 이런 방식으로 “잼미 스타일”, “분하게 구워줬어요” 같은 밈/캐릭터 등 여러 스타일로 확장할 수 있다고 말한다.[^105] (예시로 흑백요리사 등 유행 콘셉트도 언급)[^105]

3.22 결과 정리와 확장 아이디어: 채팅 앱을 넘어 다양한 AI 도구로[^106]

📸 32:04

강의자는 생각보다 쉽고 빠르게 만들 수 있었다고 말하며,[^106] 지금까지 몇 분 걸렸냐는 말에 “30~40분이면 금방”이라고 언급한다.[^106]

그리고 API를 이용하면 채팅 앱뿐 아니라 다양한 AI 기능 앱을 만들 수 있다고 확장 아이디어를 덧붙인다.[^107]

  • 문서 정리해주는 AI[^107]
  • 대본 써주는 AI[^107]
  • 기타 업무 자동화/콘텐츠 제작 보조 등 다양한 형태 가능성을 열어둔다.[^107]

3.23 마무리: 다음 주제 예고와 커뮤니티/댓글 참여 요청[^108]

📸 32:18

끝으로 강의자는 여기까지 따라온 시청자에게 고생했다고 인사하고,[^108] Cursor로 채팅앱을 만들고 애플 스타일로 디자인을 다듬고 API로 실제 대화까지 구현해봤는데 “재밌죠”라고 소감을 묻는다.[^109]

또 시청자에게 다음 행동을 요청한다.[^110]

  • 오늘 배운 걸 바탕으로 독특하고 창의적인 채팅 앱을 만들어 공유해 달라[^110]
  • 배우고 싶은 주제가 있으면 댓글로 남겨달라[^111]
  • 최근 “웨이라(wayra?)”라는 영상/사진 AI 회사의 API가 공개돼 사진을 영상처럼 움직이게 해본 적이 있는데, 기회되면 그것도 다뤄보겠다고 예고한다.[^112]

마지막으로 강의가 허술할 수 있지만 좋아해줘서 감사하고, 구독자 200명 넘은 것에 대한 감사 인사를 전하며 영상을 마친다.[^113]

4. 핵심 통찰[^2]

  1. [h Cursor 개발의 현실은 “완전 무코딩”이 아니라 “AI가 대부분 만들고, 사람은 위험/민감 지점만 확인·반영”하는 협업이다.] 커서가 main.dart 수정이나 의존성 추가 같은 부분에서 사용자가 직접 하게끔 남기는 사례가 반복된다.[^25]
  2. [h 프롬프트는 요구사항을 쪼개고(기능 단위), 범위를 좁히며(lib만 태그), 관찰된 문제를 그대로 적을수록 결과가 개선된다.] 강의자는 기능 요청을 나눠 쓰라고 하고, 아쉬운 점을 그대로 적는 것이 가장 좋다고 말한다.[^46]
  3. [h 공식 문서를 “프로젝트 내부 참고자료(마크다운)”로 저장해 Cursor의 근거로 쓰는 방식은, 초보자가 API 연동을 빠르게 진행하게 해준다.] 문서 복사→require 폴더→커서 지시가 그 전략이다.[^80]
  4. [c API 키 보안은 초보 단계부터 습관을 들여야 한다.] 키 노출 시 무단 사용/요금 위험을 경고하고 .env로 분리해 하드코딩 위험을 낮추는 흐름을 보여준다.[^7]
  5. [h ‘AI 채팅 앱’의 재미는 UI보다 “프롬프트 캐릭터 설계”에서 크게 올라간다.] 기본 Gemini는 밋밋하지만, 프롬프트를 상세히 쓰면 말투/태도를 쉽게 바꿀 수 있음을 대화 예시로 확인시킨다.[^101]

실행 관점에서의 구체 행동:

  • lib만 태그하고 “전송 버튼/버블 표시/스크롤/로딩”처럼 기능을 잘게 나눠 프롬프트로 요청한다.[^46]
  • UI는 “애플 스위프트 디자인 철학 참고 + 폰트/버튼/레이아웃 + 마이크로 인터랙션”처럼 심미/사용성 기준을 명시한다.[^57]
  • Gemini 연동 시 문서 코드를 통째로 이해하려 애쓰기보다, 문서를 프로젝트에 붙여넣어 Cursor가 적용하게 한다.[^79]
  • API 키는 절대 공유하지 말고, 가능하면 .env로 분리한다.[^7]

5. 헷갈리는 용어 정리[^12]

  • Cursor(커서): 프롬프트로 코드 생성/수정/리팩터링을 도와주는 개발 도구로, 강의에서는 MVVM 구조 생성과 기능 구현을 지시하는 “AI 코딩 파트너”로 사용한다.[^22]
  • Flutter(플러터): 하나의 코드베이스로 iOS/Android 등 여러 플랫폼 앱을 만들 수 있는 프레임워크/SDK로 설명된다.[^20]
  • MVVM 패턴: Model-View-ViewModel 구조로 폴더/파일을 나누는 설계 방식. 강의에서 Cursor에게 이 패턴대로 프로젝트 구조를 만들게 한다.[^21]
  • Cupertino 디자인/위젯: iOS 느낌(애플 감성)의 UI를 만들기 위한 Flutter 스타일/컴포넌트 개념으로 언급된다.[^56]
  • API: 외부 시스템(예: Gemini)에 요청을 전달하고 응답을 돌려받는 “중개자”로, 레스토랑의 웨이터에 비유된다.[^12]
  • Provider: Flutter 상태관리 패키지로, 메시지 버블 표시 같은 UI 상태를 관리하기 위해 추가했다고 설명된다.[^48]
  • Hot Reload / Hot Restart: Android Studio에서 코드 변경 사항을 빠르게 반영하는 기능. 리로드로 반영 안 되면 리스타트로 재시작하라고 안내한다.[^50]
  • .env 파일: API 키 같은 민감 정보를 코드 밖 파일로 분리해 관리하는 방식으로, 하드코딩 노출 위험을 낮추기 위해 사용한다.[^88]
  • google_generative_ai: Gemini 연동을 위해 추가하는 Flutter/Dart 라이브러리(패키지)로 소개된다.[^84]

참고(콘텐츠 정보)[^1]

  • 제목: Cursor로 코딩없이 Flutter 앱 개발 - Gemini API로 AI 채팅 앱 만들기[^1]
  • 채널: freAiner 프리에이아이너[^1]
  • 길이: 34분 30초[^1]
  • 링크: https://www.youtube.com/watch?v=0LxUf3MKxIs[^1]

[^1]: @[00:01]~@[34:19] 영상 전체(인사, 제작 목표, 실습, 마무리) 내용. [^2]: @[00:09] “커서와 플러터 언어… 제미나이 API 이용해서… AI 채팅 앱…” [^3]: @[00:18]~@[00:37] 단순 채팅이 아니라 역할/롤플레/원형적 사고 AI, “여러분만의 채치피티” 설명. [^4]: @[00:42] 오픈AI 챗GPT를 안 쓰고 구글 제미나이를 쓰는 이유 제기. [^5]: @[00:42]~@[00:49] “지금 현재 무료로… 꽤 많은 양의 무료 제공량…” [^6]: @[27:17]~@[27:43] 서비스 파일에 API 키를 넣는 흐름과 “여러분의 API 키” 강조. [^7]: @[24:11]~@[24:16] “API 키는 절대로 다른 사람이 볼 수 있게 저장하면 안 됨… 요금 발생…” [^8]: @[00:57]~@[01:37] 5단계 로드맵(프로젝트, UI, API 키, 호출 함수, 프롬프트 수정). [^9]: @[01:37] “AI 프롬프트를 수정해서… 캐릭터… 맞춤형 AI 채팅앱” [^10]: @[04:32]~@[06:01] MVVM 패턴으로 구조 생성, 커서가 만든 것 + 직접 수정 언급. [^11]: @[01:16]~@[01:27] 쿠퍼티노 스타일 UI 예고 + @[16:24]~@[18:04] 스위프트 디자인 참고해 UI 개선. [^12]: @[21:34]~@[22:07] API를 레스토랑 웨이터 비유로 설명. [^13]: @[01:50] 개발 환경 설정 필요 언급. [^14]: @[02:08]~@[02:38] 안드로이드 스튜디오, Xcode, Flutter SDK 설치 필요/설치 중요/외부 자료 참고 권장. [^15]: @[02:56]~@[03:09] Cursor에서 폴더 만들기, 소문자 권장. [^16]: @[03:15]~@[03:21] 예시 폴더 생성(AI2). [^17]: @[03:27]~@[03:40] 터미널 여는 방법(단축키/우클릭 등). [^18]: @[03:40]~@[03:55] flutter create .로 프로젝트 생성. [^19]: @[04:02]~@[04:16] 여러 플랫폼 폴더가 생기지만 필요 없으면 정리. [^20]: @[04:16]~@[04:32] lib에서 주로 작업, android/ios는 가끔 필요. [^21]: @[04:32]~@[04:40] MVVM 패턴으로 작업할 것. [^22]: @[04:58]~@[05:17] 커서 프롬프트 구성(코드베이스 태그, MVVM, 폴더/파일 생성, 디자인만). [^23]: @[05:28] 커맨드 I/컨트롤 I로 실행. [^24]: @[05:45]~@[06:01] 뷰/뷰모델/서비스 구조 생성 결과. [^25]: @[05:49]~@[06:01] main.dart 수정은 직접, “가끔 직접 변경해야” 언급. [^26]: @[06:21]~@[06:37] cd ios로 이동. [^27]: @[06:48] Pod init과 Podfile 설명. [^28]: @[07:00]~@[07:12] Podfile 수정 내용 공유 위치(댓글/커뮤니티) 언급. [^29]: @[07:12]~@[07:33] 커뮤니티 자료는 멤버 전용이라 양해. [^30]: @[07:41] pod install로 설치, lock 파일 생성 언급. [^31]: @[07:48]~@[08:19] iOS도 Android Studio로 작업 선호, iOS 시뮬레이터 가능. [^32]: @[08:19]~@[08:32] Android Studio에서 폴더 오픈. [^33]: @[08:37]~@[08:46] Android Project 뷰로 전체 프로젝트 보기. [^34]: @[08:55]~@[09:08] iOS 시뮬레이터 실행(아이폰 15). [^35]: @[09:08]~@[09:21] 안드로이드 Device Manager 언급. [^36]: @[09:36] 픽셀 기기 언급. [^37]: @[09:45]~@[10:10] API 35, 이름 설정, 실행 흐름. [^38]: @[10:26]~@[10:40] pubspec.yaml에서 Flutter Pub Get. [^39]: @[10:49]~@[11:07] 첫 실행은 시간이 걸림. [^40]: @[11:07]~@[11:11] iOS도 동일하게 pub get 후 실행. [^41]: @[11:42]~@[11:54] 기본 디자인만, 기능 없어 입력 제한. [^42]: @[11:48]~@[11:54] 안드/ios 모두 비슷. [^43]: @[11:59] 이후 iOS 중심 진행. [^44]: @[11:23]~@[11:30] 시뮬레이터 옆 버튼도 클릭 가능. [^45]: @[12:45]~@[12:51] 테스트 위해 메시지 뜨게 만들자. [^46]: @[13:03]~@[13:28] lib 폴더 태그, 기능을 나눠 프롬프트 작성. [^47]: @[13:39]~@[13:52] 커서가 못 건드리는 건 사용자에게 요청, 천천히 읽기. [^48]: @[13:52]~@[14:12] Provider 패키지 추가 안내. [^49]: @[14:12]~@[14:39] 터미널로도 설치 가능 vs 버튼이 편함. [^50]: @[14:48]~@[15:05] Hot Reload/Hot Restart 장점 설명. [^51]: @[15:14]~@[15:31] 로드 안 되면 리스타트. [^52]: @[15:31]~@[15:38] “진짜 꿀” 강조. [^53]: @[15:38]~@[15:44] 메시지 버블 나타남. [^54]: @[15:50]~@[15:57] 샘플 응답, 스크롤 시 색 변화 언급. [^55]: @[16:06]~@[16:13] 디자인이 단순/깔끔하지 않다고 평가. [^56]: @[12:11]~@[12:25] 쿠퍼티노 활용 예고 및 필요성 언급. [^57]: @[16:24]~@[17:03] 스위프트 디자인 참고, 폰트/버튼/레이아웃, 마이크로 인터랙션 요구 프롬프트. [^58]: @[17:37]~@[17:55] 로드 후 iOS스러운 디자인 변화. [^59]: @[18:00]~@[18:04] iOS 메시지 앱과 비교 “비슷하죠”. [^60]: @[18:08]~@[18:58] 인터랙션 미흡 지적, 애니메이션/로딩 2초 요청. [^61]: @[19:16]~@[19:24] “아쉬운 점 그대로 적는 게 제일 좋다” [^62]: @[19:04]~@[19:10] 어색함, 첫/마지막 구분 어려움 지적. [^63]: @[19:34]~@[19:51] 긴 프롬프트는 ChatGPT로 정리해서 전달. [^64]: @[19:51]~@[19:57] “방법 아냐?”처럼 물어보고 정리 활용 제안. [^65]: @[20:17]~@[20:24] 애니메이션이 응답마다 반복되는 관찰. [^66]: @[20:37]~@[20:52] 버블 검은색 불편 → 흰색으로 변경 요청. [^67]: @[21:06]~@[21:13] 리스타트 후 깔끔하게 변경 확인. [^68]: @[21:13]~@[21:27] Google AI Developer 검색/로그인. [^69]: @[23:45]~@[24:00] Get API key, API 키 만들기, 기존 프로젝트에서 생성. [^70]: @[24:00]~@[24:11] 강의용 키라 노출되지만 나중에 삭제할 것. [^71]: @[24:16]~@[24:26] 메모장에 저장 언급. [^72]: @[22:16]~@[22:32] AI 직접 만들기 어려움, API로 사용 가능. [^73]: @[22:32]~@[22:38] 여러 API 결합 가능. [^74]: @[22:38]~@[23:02] 비용, 의존성, 속도 문제 언급. [^75]: @[23:10]~@[23:19] 보안 문제 가능성. [^76]: @[23:19]~@[23:30] 로컬 테스트라 크게 신경 안 써도 됨. [^77]: @[24:41]~@[24:47] 문서 봐도 이해 어려움 → 복사 활용. [^78]: @[24:47]~@[24:53] Documentation→Quickstart→Dart/Flutter. [^79]: @[24:53]~@[25:00] 전체 내용 복사. [^80]: @[25:11]~@[25:30] require 폴더 만들고 api 마크다운 파일에 붙여넣기. [^81]: @[25:30]~@[25:43] 텍스트 생성, Node.js 클릭. [^82]: @[25:43]~@[25:59] 대화형 채팅 빌드 섹션만 복사. [^83]: @[26:14]~@[26:30] 문서 참고해 lib 수정, Gemini 기반 대화형 앱, 로컬 테스트 프롬프트. [^84]: @[26:49]~@[27:03] google_generative_ai 패키지 추가. [^85]: @[27:03]~@[27:11] 설치 확인 및 커서 수정 파일 읽기. [^86]: @[27:17]~@[27:24] AIService 파일의 YOUR API KEY 섹션. [^87]: @[27:33]~@[27:43] “여러분의 API 키”, 따라 쓰지 말 것. [^88]: @[27:50]~@[28:13] .env 파일로 관리하고 싶다, 방법 알려주겠다고 함. [^89]: @[28:13]~@[28:20] 하드코딩이면 앱 배포/다운로드 시 키 노출 위험. [^90]: @[28:20]~@[28:31] X,Y처럼 키를 따로 정의해 관리 비유. [^91]: @[28:36]~@[28:42] 플러터에 관련 패키지 추가 언급. [^92]: @[28:42]~@[28:52] .env 파일 만들기. [^93]: @[28:52]~@[28:58] env에 Gemini API 키 입력. [^94]: @[29:03]~@[29:08] 더 안전하게 관리 가능. [^95]: @[29:08]~@[29:16] pub get 등 실행 완료 언급. [^96]: @[29:18]~@[29:27] “안녕” 대화 테스트. [^97]: @[29:27]~@[29:40] “넌 누구야 이름이 뭔데” 질문. [^98]: @[29:40]~@[29:51] 이름 없고 LLM이라고 답변. [^99]: @[30:00]~@[30:09] 성격 넣기, AIService 파일에서 프롬프트 추가. [^100]: @[30:09]~@[30:27] 장원영 럭키비키 프롬프트 준비/복사. [^101]: @[30:39]~@[31:05] 원하는 답변 방식 상세히 적어야 함. [^102]: @[30:51]~@[30:57] 정리해놓은 예시가 필요하다는 취지. [^103]: @[31:12]~@[31:33] “마라탕 먹어서 슬퍼”에 럭키 톤 답변. [^104]: @[31:33]~@[31:44] “마라탕 말고 탕후루” 등 대화 예시. [^105]: @[31:49]~@[32:04] 다양한 밈/캐릭터 스타일로 확장 가능(예시 언급). [^106]: @[32:04]~@[32:11] 생각보다 쉽고 30~40분이면 만든다는 언급. [^107]: @[32:11]~@[32:18] 문서 정리, 대본 작성 등 다양한 AI 앱 아이디어. [^108]: @[32:18]~@[32:33] 고생했다는 인사. [^109]: @[32:33]~@[33:00] 커서로 만들기 신기/재미 언급. [^110]: @[33:00]~@[33:14] 창의적 채팅 앱 만들어 공유 요청. [^111]: @[33:14]~@[33:23] 배우고 싶은 것 댓글 요청. [^112]: @[33:23]~@[33:40] 영상/사진 AI 회사 API(웨이라) 다룰 수도 있다고 예고. [^113]: @[34:05]~@[34:12] 구독자 200명 감사 인사 및 마무리.

← 프로젝트에서 보기