https://www.youtube.com/watch?v=9O35FgFTFrA
1. 이건 꼭 알아야 한다[^1]
[? 질문] Cursor AI를 설치한 뒤, Flutter 개발 환경을 어떻게 구성하고 첫 앱(Hello World) 을 실제로 실행까지 할 수 있는가[^2]
[= 답] Cursor 공식 사이트에서 설치·로그인 후(단축키 Ctrl + I로 AI 패널 확인), Flutter SDK를 내려받아 압축 해제 및 환경 변수 Path에 등록하고 flutter doctor로 검증한 다음, flutter create로 프로젝트를 생성해 폴더 루트에서 flutter run으로 실행한다.[^2]
[? 질문] Cursor AI의 AI 어시스턴트를 이용해 Flutter 코드 수정을 어떤 흐름으로 수행하는가[^3]
[= 답] 채팅창에 자연어로 요구사항(예: “화면 중앙에 Hello World 표시”, “배경색을 파란색으로 변경”)을 입력하면 Cursor가 main.dart를 중심으로 코드를 편집하고, 이후 저장(accept)한 뒤 실행/핫리로드로 결과를 확인한다.[^3]
[? 질문] Flutter의 핫 리로드(Hot Reload) 는 개발 과정에서 무엇을 개선해 주는가[^4]
[= 답] 수정 후 앱을 껐다 켜지 않고도 실행 중인 상태에서 R 입력만으로 변경 사항을 즉시 반영해 빠른 개발 사이클을 가능하게 한다.[^4]
2. 큰 그림[^2]
이 콘텐츠는 Cursor AI(코딩 보조 도구) 를 설치해 로그인하고, Flutter 개발환경(Flutter SDK, 환경변수, flutter doctor) 을 구축한 다음, 첫 Flutter 앱(Hello World) 을 만들어 실행 및 AI로 수정해 보는 실습형 튜토리얼이다.[^2] 윈도우 환경을 기준으로 다운로드/설치부터 명령어 실행, 브라우저(Chrome)로 앱 실행까지의 실제 흐름을 따라간다.[^5]
- Cursor AI의 AI 어시스턴트 패널을 열어 자연어로 코드를 수정하는 기본 동작(단축키 포함)을 보여준다.[^3]
- Flutter가 왜 필요한지(멀티플랫폼, 단일 코드베이스, 핫리로드, 성능) 를 네이티브 개발 방식과 비교해 맥락을 만든다.[^6]
- Flutter SDK 설치 → 환경 변수 설정 →
flutter doctor점검 →flutter create/flutter run→ AI로 UI 변경 → 핫 리로드로 즉시 확인까지 한 번에 경험시키는 것이 핵심 흐름이다.[^7]
3. 하나씩 살펴보기[^2]
3.1 목표 화면 미리보기: “중앙에 Hello World”가 뜨는 순간[^1]
영상은 결과를 먼저 보여주듯, 실행된 창에서 “중앙에 헬로우월드가 나오는” 것을 기대한다고 말하고, 잠시 기다리면 실제로 “헬로우 월드” 텍스트가 표시되는 장면을 확인시킨다.[^1] 이는 이후에 진행할 설치/설정/수정 과정을 통해 최종적으로 도달할 결과를 미리 제시하는 역할을 한다.[^1]
- “이제 창이 하나 떴죠”라고 하며 실행 창이 열렸음을 언급한다.[^1]
- 중앙에 Hello World가 표시되는지 확인한다.[^1]
- 이 장면이 뒤쪽 실습(텍스트 중앙 배치, 배경색 변경, 핫리로드)에서 다시 재현된다.[^8]
3.2 오늘 실습 로드맵 선언: 설치 → 환경 구축 → 앱 생성 → AI 수정 → 실행[^2]
화자는 “드디어 실전에 들어가는 시간”이라며 커서 AI 설치와 Flutter 개발환경 구축 후 첫 앱을 만들겠다고 선언한다.[^2] 강의를 마치면 “직접 앱을 만들고 실행할 수” 있게 된다고 목표를 분명히 한다.[^2]
이어 전체 진행 순서를 단계적으로 나열한다.[^2]
- Cursor AI 설치 및 로그인[^2]
- Cursor AI 인터페이스 확인(특히 AI 패널)[^3]
- Flutter 개발환경 설정(Flutter SDK 설치)[^6]
- Flutter 앱 생성[^7]
- Cursor AI로 코드 수정[^9]
- 앱 실행까지 진행[^7]
여기서 화자는 “STK”라고 발음/표기하지만 문맥상 Flutter SDK 설치를 의미하며, 이후에도 “플루터 닥터(Flutter doctor)”를 통해 설치 검증을 수행한다.[^10]
3.3 Cursor AI 설치: cursor.com 다운로드 → exe 실행 → 실행 확인[^5]
3.3.1 공식 사이트 이동과 다운로드[^5]
화자는 “웹 브라우저를 열고 커서닷컴으로 이동”하라고 안내한다.[^5] 공식 웹사이트에서 Download 버튼을 클릭하면, 본인 환경이 윈도우이므로 Windows용 EXE 파일이 다운로드된다고 설명한다.[^5]
- 다운로드 버튼을 클릭한다.[^5]
- 윈도우에서는 EXE 설치 파일을 받는다.[^5]
3.3.2 설치 파일 실행과 Cursor 실행[^11]
다운로드 완료 후 “설치 파일을 실행”하라고 말하고, 설치가 완료되면 Cursor를 실행하라고 안내한다.[^11] 설치 완료 직후 실제 실행 화면으로 넘어가며, “커서 AI를 실행한 모습”이라고 설명한다.[^12]
- 설치 파일 실행 → 설치 완료 → 프로그램 실행[^11]
- 실행된 Cursor 화면을 확인[^12]
3.4 Cursor AI 로그인/계정 설정: Sign in → 웹 로그인 → Google 계정 사용[^12]
Cursor를 처음 실행하면 회원가입/로그인 화면이 뜬다고 말한다.[^12] 화자는 이미 설치 및 로그인이 되어 있지만, 일반적으로는 다음 흐름을 따라간다고 설명한다.[^12]
- 처음 실행 시 회원가입(Sign up) 또는 로그인(Sign in) 선택 화면이 나타남[^12]
- 가입의 경우 이메일/비밀번호 입력으로 가입 가능[^12]
- “사인(Sign in)”을 누르면 웹사이트가 뜨고, 화자는 구글 계정으로 로그인을 진행한다.[^13]
- 로그인 완료 후 “현재 계정 상태”를 확인할 수 있다고 말한다.[^14]
- Cursor AI 내부에서도 어카운트 정보를 확인할 수 있다고 덧붙인다.[^14]
[!NOTE] 계정 흐름의 의미
이 영상의 설치 파트는 “프로그램 설치”만이 아니라, 이후 AI 기능을 쓰기 위한 “로그인/계정 연결”까지를 설치 절차의 일부로 다룬다.[^12]
3.5 Cursor AI 인터페이스 핵심: 파일 탐색기/편집기/AI 패널, 단축키 Ctrl+I[^3]
화자는 Cursor AI의 화면 구성 요소를 왼쪽·가운데·패널로 나눠 설명한다.[^3]
- 좌측: 파일 탐색기[^3]
- 중앙: 코드 편집기[^3]
- (우측/별도 영역): AI 어시스턴트 패널[^3]
특히 AI 패널이 보이지 않을 때는 Ctrl + I 단축키로 패널을 열 수 있다고 강조한다.[^3] 이 패널이 “바로 커서 AI 핵심”이며, 여기서 “원하는 코드를 자연어로 요청”할 수 있다고 말한다.[^3] 그리고 Ctrl+I는 “유용한 단축키”로 꼭 기억하라고 반복한다.[^3]
- [? AI 패널이 안 보이면 어떻게 하나]
[= Ctrl + I를 눌러 AI 어시스턴트 패널을 띄운다][^3]
3.6 Flutter 소개: 네이티브의 이중 개발 비용 문제 → Flutter의 단일 코드베이스/핫리로드/성능[^6]
Flutter SDK 설치로 넘어가기 전에, 화자는 “설치하기 전에 Flutter에 대해서 간단히 알아보자”고 한다.[^6] 여기서 Flutter의 필요성을 네이티브 개발 방식의 구조적 문제로부터 설명한다.[^6]
3.6.1 Flutter 이전: iOS/Android를 각각 다른 언어로 따로 개발[^6]
모바일 앱은 원래 네이티브로 개발했고, iOS는 “스위프트, 오브젝트C” 등의 언어로, 안드로이드는 “자바, 코틀린” 등으로 따로 개발했다고 설명한다.[^6] 그 결과:
- 같은 앱이라도 iOS용/Android용으로 각각 개발해야 함[^6]
- 서로 다른 언어와 개발 환경을 관리해야 함[^6]
- “두 번의 개발 비용”이 필요하다고 표현[^6]
- 유지보수도 어려움: 버그 수정/기능 수정이 양쪽 플랫폼에서 모두 필요[^6]
3.6.2 Flutter 이후: 하나의 코드베이스로 여러 플랫폼 지원[^15]
Flutter가 나오고 나서는 “하나의 코드 베이스”로 iOS/Android 등 여러 플랫폼을 지원하게 됐다고 말한다.[^15] 추가로 Flutter의 특징을 몇 가지로 정리한다.[^15]
- Dart 언어 사용, “매우 쉬운 언어”라고 언급[^15]
- 핫 리로드(Hot Reload): 코드 변경 사항을 즉시 확인 가능[^15]
- “네이티브 앱에 준하는 성능” 제공[^15]
이 설명은 뒤에서 실제로 배경색 변경 후 R로 핫리로드를 실행하는 데로 연결된다.[^4]
3.7 Flutter SDK 설치(윈도우 기준): 다운로드 → 압축 해제 → Path 등록 → flutter doctor로 검증[^10]
화자는 Flutter 공식 웹사이트에서 시작해 SDK를 내려받고, 환경 변수에 추가한 뒤 flutter doctor로 설치 상태를 확인하는 흐름을 실제로 진행한다고 말한다.[^10]
3.7.1 Flutter 사이트에서 다운로드 경로 안내[^16]
- Flutter 웹사이트 접속[^16]
- “Get Started(스타트)” 클릭[^16]
- 플랫폼에서 Windows, 타겟에서 Android를 선택하는 흐름을 보여줌[^16]
- “Download and Install” 파일을 다운로드한다고 말한다.[^16]
3.7.2 압축 해제: 특정 경로에 Flutter SDK 풀기[^17]
다운로드한 Flutter SDK 압축 파일을 실행해 “특정 경로에 압축을 풀겠다”고 말한다.[^17] 예시로 Flutter 버전 폴더(“Flutter 3.3.21”처럼 들리는 버전명)를 언급하며 압축을 풀어둔 상황을 보여준다.[^17]
- SDK를 설치형이 아니라 압축 해제 방식으로 준비[^17]
- 이후 환경 변수 Path에 해당 경로를 넣기 위한 전 단계[^17]
3.7.3 환경 변수 Path 추가: 고급 시스템 설정 → 환경 변수 → Path 편집[^10]
화자는 SDK 폴더 경로를 복사한 뒤, 윈도우 설정에서 “고급 시스템 설정”을 검색해 들어간다고 한다.[^10] 그 창에서 환경 변수(Environment Variables) 로 들어가 Path를 편집하고, Flutter SDK의 경로를 추가해야 한다고 강조한다.[^10]
구체 흐름:
- 설치된 Flutter 폴더 경로를 복사[^17]
- 설정 검색: “고급 시스템 설정”[^10]
- 고급 시스템 설정 창 → 환경 변수 클릭[^10]
- 환경 변수의 Path 항목 편집[^10]
- (화자 본인 PC에는 기존 경로가 있어 “옛날 것”도 보이지만) 신규로 경로를 지정했다고 설명[^10]
- 확인을 눌러 Path 지정 완료[^18]
3.7.4 설치 검증: 터미널/명령 프롬프트에서 flutter doctor 실행[^19]
Path 설정이 제대로 됐는지 확인하기 위해 명령 프롬프트(또는 터미널)를 열어 flutter doctor를 실행하라고 안내한다.[^19] 이 명령은 Flutter 개발 환경이 제대로 설정되었는지 검사해 주며, 실행 시 필요한 패키지를 다운로드하고 최종 결과를 보여줄 것이라고 설명한다.[^20]
- 명령 프롬프트 실행[^19]
flutter doctor입력[^19]- 패키지 다운로드/진행 후 결과 출력 예상[^20]
- 결과로 Flutter 관련 내용이 나오면 “정확하게 설치가 완료”된 것이라고 확인한다.[^21]
[!TIP] 설치 체크의 기준
flutter doctor결과에 Flutter 관련 진단 내용이 출력되는 것을 “설치 완료 확인”의 기준으로 삼는다.[^21]
3.8 첫 Flutter 앱 생성: Cursor 터미널에서 flutter create → 폴더 생성 → 프로젝트 구조 확인[^7]
환경 설정이 끝났다고 보고, 화자는 “이제부터 첫 번째 앱을 만들어 보자”고 한다.[^7] 그리고 Cursor AI의 터미널에서 명령어를 입력하면 “헬로월드 앱 폴더”가 생성된다고 설명한다.[^7] 생성된 폴더를 Cursor에서 열면 Flutter 기본 구조가 생성된 것을 확인할 수 있다고 한다.[^7]
또한 앱 생성/수정 방식은 두 가지 흐름으로 제시된다.[^9]
- 먼저 Flutter 기본 프로젝트 생성 → 그 다음 AI에게 “헬로월드 앱 만들어 주세요”처럼 수정 요청[^9]
- 처음부터 AI에게 “플루터로 헬로 월드 앱을 만들어 주세요”라고 말해, 생성 명령을 안내받아 그대로 실행[^9]
즉, Cursor AI는 “코드 수정 도구”뿐 아니라 “어떤 명령을 실행할지 안내받는 도구”로도 사용된다.[^9]
3.9 Cursor AI에게 프로젝트 생성 요청: “플루터로 헬로월드 새로 만들어 주세요” → flutter create ... 제안[^22]
화자는 Cursor AI 앱을 열고 채팅창에 “플루터로 헬로월드 새로 만들어 주세요”라고 입력하라고 시연한다.[^22] 엔터를 치면 Cursor AI가 명령어 형태로 응답하는데, 그 내용이 flutter create hello_app(혹은 hello world app 계열)처럼 Flutter 프로젝트 생성 명령이라는 점을 보여준다.[^22]
- AI가 명령을 “이렇게 하세요” 형태로 제시[^22]
- 해당 명령은 앞서 말한 프로젝트 생성 명령과 동일하다고 연결[^22]
- 이 명령을 Cursor 내에서 바로 실행할 수도 있고, 복사해서 새 터미널에 붙여넣고 실행할 수도 있다고 말한다.[^22]
3.10 생성 후 실행 준비: cd로 프로젝트 이동 → 프로젝트 루트에서 실행해야 하는 이유[^23]
프로젝트가 생성되면, 현재 경로가 해당 폴더가 아닐 수 있으니 cd로 “헬로월드 앱” 폴더로 이동한 다음 flutter run을 해야 실행이 된다고 설명한다.[^23]
또한 앞으로 프로젝트를 할 때는 “프로젝트 안 디렉토리 루트(프로젝트 루트)에서 실행하는 게 좋다”고 강조한다.[^23] 그 이유는:
-
Cursor가 다른 디렉토리의 내용을 참조하거나 수정할 때 문제가 발생할 수 있기 때문[^24]
-
따라서 폴더를 열 때도 “Open Folder”로 생성된 프로젝트 폴더 루트를 열고 진행하라고 안내[^23]
-
[? 왜 항상 프로젝트 루트에서 실행해야 하나]
[= Cursor가 다른 디렉토리를 참조/수정하며 문제를 낼 수 있으므로 프로젝트 루트를 기준으로 작업한다][^24]
3.11 flutter run으로 첫 실행: Chrome 창이 뜨고 기본 카운터 앱 확인[^25]
화자는 flutter run으로 실행하면 크롬 브라우저 창이 하나 뜨면서 기본으로 생성된 Flutter 앱 화면이 출력될 것이라고 설명한다.[^25] 처음 실행은 시간이 좀 걸릴 수 있다고 말하고, 실제로 새 창이 뜬 뒤 “Flutter 데모 홈페이지” 같은 기본 화면이 나온다고 한다.[^25]
또한 기본 앱 기능으로:
- 버튼을 클릭하면 클릭한 횟수만큼 숫자가 증가하는 기본 카운터 예제가 동작함[^26]
즉, 이 시점에서 확인하는 것은 “환경 구축과 실행이 정상적으로 됐는지”이며, 출력되는 화면은 기본 템플릿 앱이다.[^26]
3.12 AI로 UI를 “Hello World 중앙 텍스트”로 변경: 채팅 요청 → main.dart 편집/삭제/신규 생성 → 적용[^27]
기본 카운터 앱을 “화면 중앙에 헬로 월드 텍스트 표시”로 바꾸고 싶다고 말하며, 해당 문장을 복사해 Cursor 채팅창에 입력한다.[^27] 엔터를 치면 Cursor AI가 라이브러리 아래의 main.dart 파일 내용을 “아마 추가할 것”이라고 예고한다.[^27]
이후 “Cursor AI가 어떻게 편집하는지”를 보여주겠다고 하며, 실제로 main.dart를 읽고 편집을 시작하는 장면을 보여준다.[^28]
편집 결과에 대해 화자는 다음을 관찰/설명한다.[^29]
- 기존에 있던 코드 일부(갈색 표시로 보이는 삭제 대상)가 삭제됨[^29]
- 신규로 “헬로월드 앱”이 생성됨[^29]
- 요구사항이 “화면 중앙 텍스트 표시”였기 때문에 중앙에 Hello World를 표시하는 위젯을 생성함[^29]
그리고 이 변경을 실제 파일에 반영하려면 “Accept(업셉트) 파일”을 해야 내용이 변경된다고 말한다.[^30] 즉 Cursor AI의 제안/패치 상태에서 최종 반영(accept) 단계를 거쳐야 한다는 흐름을 포함한다.[^30]
[!IMPORTANT] Cursor 편집 반영 단계
Cursor AI가 코드를 생성/수정해도, 사용자가 변경사항을 Accept해야 실제 파일에 반영된다.[^30]
3.13 변경된 앱 재실행: flutter run 후 “중앙 Hello World” 확인 + AI가 수행한 정리 언급[^8]
수정 반영 후 다시 실행하면, 크롬 창에서 중앙에 Hello World가 표시될 것이라고 안내한다.[^8] 이때 Cursor 어시스턴트가 “헬로우 월드 텍스트만 크게 표시”, “불필요한 걸 제거”, “한글 주석도 추가”했다고 말하는 부분을 함께 보여준다.[^31]
실제로 창이 뜨고, 기대한 대로 중앙에 Hello World가 보이는지 확인한다.[^8]
- 실행 창이 뜸[^8]
- 잠시 기다리면 “헬로우 월드” 문구가 표시됨[^8]
- 채팅으로 기능 요구 → 수정된 화면 확인까지 연결됨[^32]
3.14 두 번째 수정: 배경색을 파란색으로 변경 + 실행 중 R로 핫리로드 체험[^4]
다음 실습으로 “배경색을 파란색으로 변경해 주세요”를 진행한다고 한다.[^33] Cursor 채팅창에 다시 요청을 입력하고, 앱을 종료하지 않은 상태에서 변경사항을 반영하는 방법을 소개한다.[^4]
핵심은 Flutter의 핫 리로드다.[^4]
- 앱을 껐다 켜지 않고도 변경 가능[^4]
- 터미널에서 “핫 리로드라고 해서 R만 입력”하면 변경이 된다고 설명[^4]
- Cursor에서는 배경색을 블루로 바꾸는 코드 변경이 이미 적용된 상태를 보여줌[^34]
- accept 후, 터미널에서
R을 입력해 핫 리로드를 수행한다.[^35]
R 입력 후 “핫 리스타트” 같은 출력이 보인다고 언급하며(표현상 혼용이 있으나 핵심은 즉시 반영), 실제 앱 화면에서 배경색이 파란색으로 바뀐 것을 확인한다.[^36]
- [? 예전에는 변경 확인을 어떻게 했고, Flutter는 무엇이 다른가]
[= 예전에는 앱을 껐다 켜며 확인했지만, Flutter는 핫 리로드로 즉시 변경을 확인할 수 있다][^37]
[!TIP] 핫 리로드 사용 포인트
실행 중인 터미널에서R입력으로, 앱 재실행 없이 UI 변경 결과를 빠르게 확인한다.[^4]
3.15 마무리 정리: 오늘 한 것들(설치/환경/첫 앱/AI 수정/핫리로드) + 다음 강의 예고[^38]
마지막으로 화자는 “오늘의 주요 학습 내용”을 다시 정리한다.[^38]
- Cursor AI 설치 및 계정 설정 완료[^38]
- Flutter SDK 설치와 개발 환경 구축[^38]
- 첫 Flutter 앱인 HelloWorld 앱 생성[^38]
- AI 어시스턴트를 활용한 코드 수정 2가지 수행(중앙 텍스트 표시, 배경색 변경)[^38]
- 핫 리로드로 빠른 개발 사이클을 체험[^38]
다음 강의에서는 더 복잡한 앱을 만들면서 Cursor 앱의 고급 기능을 활용하겠다고 예고한다.[^39] 구체적으로 “UI 디자인부터 데이터 저장, 실제 사용 가능한 앱”을 다음 시간에 만든다고 말하며 마무리 인사를 한다.[^39]
4. 핵심 통찰[^2]
- [h 이 영상의 목표는 ‘개념 설명’이 아니라, 설치→실행까지 한 번에 끝내는 재현 가능한 절차 제공이다.] 단계(다운로드, Path, doctor, create, run)가 모두 실습 중심으로 연결된다.[^2]
- [h Cursor AI는 ‘코드 자동 생성’뿐 아니라 ‘필요한 명령어를 제시해 주는 가이드’로도 사용된다.] “플루터로 헬로월드 만들어줘” 요청에
flutter create ...가 돌아오는 흐름이 이를 보여준다.[^22] - [h Flutter의 강점(단일 코드베이스, 핫리로드)은 곧바로 실습(배경색 변경 후 R)으로 증명된다.] 말로만 소개하지 않고 실제 변경 반영 속도를 체험시키는 구조다.[^36]
- 실행 행동: 변경 후 앱을 끄지 말고 터미널에서
R로 반영을 먼저 시도한다.[^4]
- 실행 행동: 변경 후 앱을 끄지 말고 터미널에서
- [m 프로젝트 루트에서 열고 실행하라는 조언은 Cursor의 편집/참조 범위 문제를 예방하기 위한 운영 팁으로 제시된다.] “항상 루트에서 실행”을 습관화하라고 한다.[^24]
- 실행 행동:
flutter create후에는 Cursor에서 Open Folder로 생성된 프로젝트 폴더를 다시 열고 진행한다.[^23]
- 실행 행동:
5. 헷갈리는 용어 정리[^10]
- Cursor AI: 코드 편집기 형태의 도구로, AI 어시스턴트 패널에서 자연어로 코드/작업을 요청할 수 있다고 설명한다.[^3]
- AI 어시스턴트 패널: Cursor AI의 핵심 패널로, 보이지 않으면 Ctrl + I로 열 수 있다.[^3]
- Flutter SDK(영상에서는 “STK”로도 발음/표기): Flutter 개발에 필요한 도구 묶음. 다운로드 후 압축 해제하고 Path에 등록한다.[^10]
- 환경 변수 Path: 명령 프롬프트에서
flutter같은 명령을 인식시키기 위해 Flutter SDK 경로를 추가하는 시스템 설정 값.[^10] - flutter doctor: Flutter 개발 환경이 제대로 설정됐는지 검사하는 명령어로 소개된다.[^19]
- flutter create: Flutter 프로젝트(기본 템플릿 포함)를 생성하는 명령으로 제시된다.[^22]
- flutter run: 생성한 프로젝트를 실행하는 명령으로, 크롬 창이 뜨며 앱이 구동되는 흐름을 보여준다.[^25]
- Hot Reload(핫 리로드): 실행 중인 앱에 변경사항을 즉시 반영하는 기능. 터미널에서
R입력으로 실행하는 것으로 안내한다.[^4]
참고(콘텐츠 정보)[^2]
- 제목: Cursor AI 설치부터 처음 만든 Flutter 앱 – Hello World 완벽 해설[^2]
- 채널: 렙업코딩[^2]
- 길이: 17분 35초[^2]
- 링크: https://www.youtube.com/watch?v=9O35FgFTFrA[^2]
[^1]: @[00:00] “이제 창이 하나 떴죠.” / @[00:05] “중앙에 헬로우월드가 나오는 거죠.” / @[00:14] “이게 헬로우 월드라고 이렇게 표시되는 걸 확인…”
[^2]: @[00:18] “드디어 실전에 들어가는 시간입니다.” / @[00:23] “커서 AI를 설치하고 플루터 개발 환경을 구축한 다음 우리의 첫 번째 앱을…”
[^3]: @[03:09] “좌측에는 파일 탐색기… 중앙… 코드 편집기… AI 어시선트 패널…” / @[03:20] “컨트롤 i를 누르시면… AI 어시선트 패널” / @[03:20] “원하는 코드를 자연으로 요청…”
[^4]: @[15:33] “핫 리로드라고 해서 R만 입력…” / @[16:31] “플루터의… 강점… 핫 리로드 가능”
[^5]: @[00:53] “먼저 커서 AI를 설치해 보겠습니다.” / @[00:56] “웹 브라우저를 열고 커서닷컴…” / @[01:02] “다운로드… 윈도우로 EXE 파일…”
[^6]: @[03:42] “플루터 이전에 모바일 앱은 네이티브로…” / @[03:53] “iOS… 스위프트 오브젝트 C… 안드로이드는 자바 코틀린…” / @[04:01] “두 번의 개발 비용…” / @[04:15] “버그 수정이나 기능을 두 플랫폼 모두…”
[^7]: @[08:33] “이제부터는 첫 번째 앱을…” / @[08:41] “커서 AI 터미널에서… 명령… 헬로월드 앱이라는 폴더가 생성…”
[^8]: @[14:10] “플루터 런 명령으로 실행… 중앙에 헬로월드…” / @[14:57] “이게 헬로우 월드…”
[^9]: @[08:49] “헬로월드 앱을 만들어 주세요… 코드가 변경” / @[09:05] “이와 같은 과정을… 아니면 처음부터 플루터로…”
[^10]: @[04:45] “환경 변수에 추가… 플러터 닥터로…” / @[06:10] “환경 변수… 패스 부분에… 경로를 추가”
[^11]: @[01:09] “다운로드가 완료되었다면 설치 파일을 실행…” / @[01:35] “설치가 완료되면… 실행…”
[^12]: @[01:41] “처음 실행하면 회원 가입…” / @[02:12] “처음 실행하게 되면 회원 가입이나 로그인이…”
[^13]: @[02:23] “사인을 누르게 되면 웹사이트가 뜨고” / @[02:29] “구글 계정으로 로그인…”
[^14]: @[02:38] “로그인이 완료되면… 계정 상태를 확인” / @[02:53] “커서 AI에서… 어카운트 정보…”
[^15]: @[04:19] “플로터가 나온 다음부터는 하나의 코드 베이스로…” / @[04:30] “다트 언어…” / @[04:34] “핫 리로드…” / @[04:38] “네이티브 앱에 준화하는 성능…”
[^16]: @[05:11] “스타티드 클릭하고 윈도우즈… 다운로드 앤 인스톨 파일을 다운로드”
[^17]: @[05:28] “압축 파일을… 특정 경로에 압축을 풀…” / @[05:34] “플러터 3.321로 압축을…”
[^18]: @[06:39] “확인을 누르게 되면 패스가 지정…”
[^19]: @[07:08] “명령… 플루터 닥터…” / @[08:00] “명령 프롬프트… 플루터 닥터…”
[^20]: @[07:37] “패키지가 필요한 부분을 다운로드…” / @[07:51] “최종 결과…”
[^21]: @[08:18] “이 명령어는… 검사를 해 줍니다.” / @[08:25] “내용이 나오게 되면… 설치가…”
[^22]: @[09:19] “채팅창에… 만들어 주세요” / @[09:32] “플루터 크리에이트…” / @[09:38] “복사… 터미널… 엔터… 폴더 생성”
[^23]: @[10:00] “CD로 헬로월드 앱으로 이동… 플루터 런…” / @[10:27] “프로젝트… 디렉토리 루트에서 실행…”
[^24]: @[10:55] “커서가 다른 디렉토리에 있는 내용을 또 참조하거나 수정… 문제가 발생… 항상… 프로젝트 루트…”
[^25]: @[11:13] “디바이스를 크롬으로…” / @[11:54] “새로운 창이 하나오고” / @[12:13] “플루터 데모 홈페이지…”
[^26]: @[12:19] “버튼을 클릭… 숫자가 증가…”
[^27]: @[12:28] “화면 중앙에 헬로 월드 텍스트…” / @[12:38] “메인 다트 파일에요 내용을…”
[^28]: @[13:16] “메인 다트 파일을 읽고… 편집을 시작…”
[^29]: @[13:27] “갈색 부분… 삭제… 신규로… 생성” / @[13:40] “화면 중앙에… 위젯을 생성…”
[^30]: @[13:49] “업세트(accept) 파일 할 경우에 내용이 변경”
[^31]: @[14:35] “헬로우 월드 텍스트만 크게 표시… 불필요한 걸 제거… 한글 주석…”
[^32]: @[15:11] “채팅창에… 기능을 넣고… 수정된 화면…”
[^33]: @[15:17] “배경색을 파란색으로 변경…”
[^34]: @[15:47] “백그라운드 컬러를 블루로 바꾸는 거.”
[^35]: @[16:02] “핫 리로드 R만 입력…” / @[16:09] “R을 입력…”
[^36]: @[16:24] “파란색으로 화면이 바뀐 것…”
[^37]: @[16:31] “예전에는 항상 앱을 껐다가 켜고…” / @[16:31] “핫 리로드…”
[^38]: @[16:54] “커서 AI 설치 계정 설정… 플루터 SK 설치… 헬로월드 앱… 코드 수정… 핫 리로드…”
[^39]: @[17:17] “다음 강의에서는 더 복잡한… 고급 기능…” / @[17:22] “사용자 인터페이스 디자인… 데이터 저장… 실제 사용 가능한 앱…”