Flutter는 Android와 iOS를 하나의 코드로 모두 만들 수 있기 때문에 Android와 iOS를 따로 개발하는 것 보다는 훨씬 할 일이 적습니다. 단, 처음에 Android와 iOS 앱을 만들 때 필요한 환경 설정을 하는데 다소 시간이 걸리기 때문에 미리 진행해 주시기 바랍니다.
Flutter : Android와 iOS 앱을 하나의 코드로 구현할 수 있도록 도와주는 프레임워크
VSCode : 코드를 작성할 때 사용하는 에디터 (Android Studio 보다 가벼워서 VSCode로 진행해요!)
Android Studio : Android를 개발하기 위해 필요
Xcode : iOS를 개발하기 위해 필요
명령 프롬프트에 flutter --version 이라고 검색했을 때, 아래와 같은 문구가 뜨면 설치가 완료!
💡
버전은 다를 수 있습니다.
2. Visual Studio Code
💡
Visual Studio Code (줄여서 VSCode) 앞으로 실제 코드를 작성할 편집 툴입니다.
Flutter 개발은 Android Studio와 VSCode 둘 중 원하는 툴을 사용하여 개발할 수 있는데 VSCode가 더 가볍기 때문에 앞으로 수업은 VSCode에서 진행하도록 하겠습니다.
VSCode를 설치하신 뒤, Extension까지 설치해 주세요 👍
우측 하단에 한국어로 변경하는 팝업이 뜨는데, VSCode 사용법을 인터넷에 검색했을 때 대부분의 자료가 영어로 되어 있기 때문에, 가급적 적용하지 않기를 권장 드립니다. (수업 자료도 영어 버전으로 되어있어요!)
해당 알람을 다시는 보지 않으려면 우측 톱니바퀴 ⚙ 아이콘을 누른 뒤 Don't Show Again을 선택해 주세요. (만약 사라져서 버튼을 누르지 못했다면 다음번에 눌러주세요!)
2) Extension 설치
💡
VSCode는 Flutter 뿐만 아니라 다양한 개발을 모두 할 수 있는 통합 에디터입니다. VSCode에서 Flutter 앱 개발을 하려면 VSCode에 Extension 탭에서 아래 목록의 Extension 들을 설치해야 합니다.
Flutter : VSCode에서 Flutter 개발 환경 지원
Dart : Flutter 개발 시 사용되는 Dart 개발 환경 지원
Awesome Flutter Snippets : Flutter 개발 시 자주 쓰이는 코드 자동 완성 지원
좌측에 extension 아이콘(동그라미)을 선택해 주세요.
flutter 라고 검색한 뒤, 해당 익스텐션을 선택하고 install 버튼을 눌러 설치해주세요.
바로 아래에 있는 Awesome Flutter Snippets 익스텐션도 설치해주세요.
dart 라고 검색하신 뒤, 해당 익스텐션을 설치해주세요. 만약 uninstall이라고 뜨신다면 이미 설치가 되셨으니 넘어가시면 됩니다.
그러면 window에서는 iOS 앱 개발을 할 수 없는 건가요?
애플의 정책상 iOS 앱은 macOS에서만 개발이 가능합니다. 😂
하지만 Flutter로 작성한 코드는 Android 뿐만 아니라 iOS에서도 이용할 수 있으니 향후 macOS가 생기신다면 기존 소스코드를 그대로 사용하여 iOS 앱도 출시할 수 있습니다.
Android Studio 사용성 개선을 위해 Google에 데이터를 공유하고 싶으시다면, Send usage statistics to Google 버튼을 누르시고, 그렇지 않으시면 Don't send 버튼을 눌러주세요.
Setup Wizard가 실행되면, Next 버튼을 눌러주세요.
Next 버튼을 눌러주세요.
원하시는 테마를 선택하신 뒤 Next를 눌러주세요.
만약 계정 이름이 한글이거나 띄어쓰기가 들어가 있다면Your Android SDK location contains non-ASCII characters 혹은 your path contains white space etc. 라도 뜨며 진행이 안됩니다.
💡
에러가 없으신 분들은 Next 버튼을 누르고 26번으로 넘어가 주세요
Android SDK Location 경로를 직접 만들어주도록 하겠습니다.
이런 경우, 아래 그림과 같이 Android SDK Location에 C:\Users\내 계정이름\Local까지만 선택해 복사해 주세요.
탐색기를 열고 주소창에 붙여 넣은 뒤 엔터를 눌러주세요.
현재 Local이라는 폴더에 들어와 있고, 여기에 Android라는 폴더를 만들어 주세요. (대문자로 시작합니다)
생성한 Android 폴더에 들어간 뒤 Sdk 라는 폴더를 만들어주세요. (대문자로 시작합니다)
생성한 Sdk 폴더 안으로 들어가 주세요.
윈도우 검색창에 명령이라고 검색한 뒤 명령 프롬프트를 우클릭하여 관리자 권한으로 실행해 주세요. 그냥 실행하면 안됩니다!
실행할지 물어보는 팝업이 뜨면 예를 눌러서 실행해주세요.
아래 명령어를 복사한 뒤 명령 프롬프트에 붙여 넣어주세요. 아직 실행하시면 안됩니다.
mklink /D C:\android-sdk
다음 탐색기에서 주소창을 클릭해 주세요.
주소를 복사해 주세요.
복사한 경로를 명령 프롬프트 android-sdk 뒤에 붙여 넣어주세요. 참고로 아래 그림과 같이 사이에 띄어쓰기가 있어야합니다.
명령어를 실행해 아래와 같이 기호화된 링크를 만들었다고 뜨면 성공입니다.
💡
Android/Sdk 폴더에 바로가기를 C 드라이브 바로 밑에 생성하는 과정입니다.
다시 Android Studio Setup Wizard로 돌아와서, 아래 그림과 같이 Android SDK Location 밑에 폴더 아이콘을 선택해 주세요.
그러면 아래와 같이 경로를 선택하는 창이 뜹니다.
아래 코드를 복사해서 아래 그림과 같이 경로 선택창의 주소에 붙여 넣고 OK를 눌러주세요.
C:\android-sdk
이제 경로 관련 빨간 에러가 사라지고 활성화된 Next 버튼을 눌러주세요.
Finish를 눌러서 세팅을 진행해 주세요.
중간에 앱이 디바이스를 변경할 수 있도록 허락하는 팝업이 뜨면 예를 선택해주세요.
모든 세팅이 완료되면 Finish를 클릭해 주세요.
2) Android Command-line Tools 설치
💡
Android Command-line Tools는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
아래와 같이 Android Studio가 실행되면, More Actions를 클릭한 뒤 SDK Manager를 클릭해주세요.
SDK Tools를 선택해 주세요.
아래 이미지와 같이 선택한 뒤 OK를 선택해 주세요.
💡
이미 선택되어 있거나 다른 항목이 체크되어 있는 경우, 그대로 두시면 됩니다.
Dialog가 뜨면 OK 버튼을 눌러주세요.
Accept를 선택한 뒤 Next를 선택해 주세요.
설치가 완료되면 Finish 버튼을 눌러주세요.
3) Android Virtual Devices 설치
💡
앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 AVD(Android Virtual Device, 컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
More Actions → Virtual Device Manager를 선택해주세요.
💡
아래와 같이 이미 에뮬레이터가 설치되어 있으신 경우에는, 4. Android Licenses과정으로 넘어가셔도 됩니다. (에뮬레이터의 이름은 달라도 상관 없습니다)
Create Virtual Device를 선택해주세요.
기본적으로 선택되어 있는, Phone → Pixel 2 디바이스를 Next 버튼을 눌러 생성합니다.
가상 최신 버전 Android OS를 설치해 주세요.
💡
23.04.12일 기준으론 UpsideDownCake OS가 최신 버전이지만, 더 최신 버전이 있다면 해당 버전으로 진행해 주세요.
설치가 완료되면 Finish 버튼을 눌러 주세요.
설치한 최신 버전의 OS를 선택하신 뒤 Next 버튼을 눌러 진행해 주세요.
Finish 버튼을 눌러 Virtual Device 설치를 완료 해주세요.
성공적으로 추가된 Virtual Device를 확인하시고, 이제 Android Studio는 종료해주세요!
4) Android Licenses
cmd를 검색해서 명령 프롬프트를 실행해줍니다.
flutter doctor라고 입력한 뒤 엔터를 누릅니다.
아래와 같이 Android toolchain의 좌측에 [!] 표시가 되어있습니다.
문제를 해결하기 위해 flutter doctor --android-licenses를 복사해서 실행해 줍니다.
실행하면 라이센스에 대한 동의를 여러번 구하는데, y를 입력하고 엔터를 눌러 진행해줍니다.
flutter doctor 를 입력했을 때 아래와 같이 Android toolchain의 좌측에 체크([v]) 되었다면 완료!
💡
Flutter 최신 버전에서 window 개발도 지원하기 시작하면서 flutter doctor를 입력했을 때 아래와 같이 Visual Studio - develop for windows 항목이 노란색으로 뜰 수 있는데, window 개발할 때 필요한 내용이므로 일단 그대로 넘어가셔도 됩니다.
최종 설치 확인
cmd를 검색해서 명령 프롬프트를 실행해줍니다.
flutter doctor 를 입력했을 때 아래와 같이 모든 항목이 체크([v]) 되었다면 설치 완료!
💡
만약 Error: Unable to find git in your PATH. 에러가 뜨는 경우, 아래 링크를 참고하여 진행해 주세요.
Intel 칩을 사용하는 맥북은 왼쪽 Mac with Intel chip을 Apple 칩을 사용하는 맥북은 오른쪽 Mac with Apple chip을 선택해 주세요.
💡
좌측 상단 Apple 로고 클릭 → 이 Mac에 관하여를 클릭하여 Intel 칩인지 Apple 칩인지 확인할 수 있습니다.
Intel chip
Appl chip
다운로드 팝업이 뜨면 저장 버튼을 눌러주세요.
바탕화면 하단에 휴지통 좌측에 있는 다운로드 폴더를 클릭한 뒤 Finder에서 열기 버튼을 클릭해 주세요.
다운로드가 완료된 android-studio~~.dmg 파일을 실행해 주세요.
아래와 같은 창이 뜨면 왼쪽에 Android Studio를 드래그해서 Applications에 떨어뜨려주세요.
설치가 완료되면 좌측 상단에 빨간 X를 눌러서 아래 화면을 종료해 주세요.
💡
바탕화면에 아래 사진과 같은 파일이 생겼다면 휴지통으로 드래그해 삭제하셔도 됩니다.
우측 상단에 돋보기🔍 아이콘을 클릭하고, 팝업창이 뜨면 android라고 입력해 주세요. 그리고 아래와 같이 Android Studio가 자동완성으로 뜨면 엔터를 눌러 실행해 주세요.
아래와 같이 팝업이 뜨면 열기 버튼을 눌러주세요.
아래와 같은 창이 뜬다면 OK 버튼을 눌러주세요.
Import Android Studio Settings 팝업이 뜨면 Do not import settings를 선택하신 뒤 OK 버튼을 눌러주세요.
안드로이드 스튜디오 사용 데이터를 구글에 전달하여 사용성 개선에 참여하고 싶다면 Send usage statistics to Google을 선택해주시고, 그렇지 않은 경우 Don't send를 선택해 주세요.
다음과 같은 안드로이드 스튜디오 설정 화면이 나오면 Next 버튼을 눌러주세요.
Finish 버튼을 눌러 Android SDK 설치를 진행해 주세요.
설치가 완료되면 Finish 버튼을 눌러주세요.
아래와 같은 화면이 뜨면 Android Studio 설치 완료!
2) Android Command-line Tools 설치
💡
Android Command-line Tools는 Flutter에서 Android에 명령을 내리기 위해 필요합니다.
Android Studio에서 More Actions를 선택한 뒤 SDK Manager를 선택해 주세요.
그러면 아래와 같이 Preferences for New Projects 팝업이 뜨면 SDK Tools 탭을 선택 → Android SDK Command-line Tools (latest) 선택 → Apply 를 선택해 주세요.
팝업이 뜨면 OK 버튼을 클릭해 주세요.
라이센스에 Accept를 선택하여 동의하고 Next를 선택하여 설치를 진행해 주세요.
설치가 완료되면 Finish 버튼을 눌러주세요.
OK 버튼을 눌러주시면 설치 완료!
3) Android Virtual Devices 설치
💡
앱을 개발시 실제 휴대폰을 연결하여 개발을 진행할 때도 있지만, 대부분의 경우 Virtual Device(컴퓨터에 가상의 휴대폰을 띄우는 소프트웨어)를 이용하여 개발합니다.
Android Studio에서 More Actions를 클릭한 뒤 AVD Manager를 선택해 주세요.
Create Virtual Device...를 선택해 주세요.
하드웨어를 선택하는 화면이 나오면 Next를 눌러서 기본으로 설정된 Pixel 2 휴대폰을 설치하도록 하겠습니다.
휴대폰에 설치할 Android OS를 선택하는 화면입니다. Q 옆에 있는 Download 버튼을 클릭하여 OS를 다운로드해 주세요.
💡
R 버전은 Virtual Device에서 문제가 있다고 해요. 그래서 Q 버전으로 진행할게요!
설치가 완료되면 Finish 버튼을 눌러주세요.
Q 옆에 Download 버튼이 사라졌습니다. 우측에 현재 선택된 OS 버전이 29인지 확인한 뒤 Next 버튼을 눌러주세요.
Finish 버튼을 눌러 Virtual Device 설치를 완료해 주세요.
아래와 같이 Pixel 2 API 29 라는 Virtual Device가 추가되었습니다.
이제 좌측 상단에 빨간 버튼을 눌러 창을 종료해 주세요.
하단에 Android Studio 아이콘을 우클릭한 뒤 종료 버튼을 눌러를 Android Studio를 종료해 주세요.
💡
Android Studio를 클릭한 상태에서 단축키(Cmd + Q)를 누르셔도 됩니다.
4) Android Licenses
터미널에서 flutter doctor라고 입력한 뒤 엔터를 누릅니다.
아래와 같이 Android toolchain의 좌측에 [!] 표시가 되어있습니다.
문제를 해결하기 위해 flutter doctor --android-licenses를 복사해서 터미널에 붙여 넣고 실행해 주세요. 실행시 라이센스에 대한 동의를 여러번 구하는데, y를 입력하고 엔터를 눌러 진행해 주세요.
모든 동의가 완료되면 All SDK package licenses accepted 라고 뜹니다.
마지막으로 터미널에 flutter doctor 를 입력했을 때 아래와 같이 모든 항목이 체크 완료되면 완료!
4. Visual Studio Code
💡
Visual Studio Code (줄여서 VSCode) 앞으로 실제 코드를 작성할 편집 툴입니다.
Flutter 개발은 Android Studio와 VSCode 둘 중 원하는 툴을 사용하여 개발할 수 있는데 VSCode가 더 가볍기 때문에 앞으로 수업은 VSCode에서 진행하도록 하겠습니다.
다운받은 VSCode-darwin-universal.zip 파일을 실행해 압축을 풀어주세요.
압축이 풀리고 생성된 Visual Studio Code 파일을 드래그해서 왼쪽 응용 프로그램에 떨어뜨려 주세요.
화면 우측 상단 돋보기 🔍 아이콘을 클릭한 뒤 visual 이라고 검색해 주세요. 그리고 하단에 Visual Studio Code가 보이면 엔터를 눌러 실행해 주세요.
아래와 같은 팝업이 뜨면 열기 버튼을 눌러주세요.
그러면 아래와 같이 VSCode가 실행되면 설치 완료!
💡
우측 하단에 한국어로 변경하는 팝업이 뜨는데, VSCode 사용법을 인터넷에 검색시 대부분의 자료가 영어로 되어 있기 때문에, 가급적 적용하지 않기를 권장 드립니다. (수업 자료도 영어 버전으로 되어있어요!)
해당 알람을 다시는 보지 않으려면 우측 톱니바퀴 ⚙ 아이콘을 누른 뒤 Don't Show Again을 선택해 주세요. (만약 사라져서 버튼을 누르지 못했다면 다음번에 눌러주세요!
2) Extension 설치
💡
VSCode는 Flutter 뿐만 아니라 다양한 개발을 모두 할 수 있는 통합 에디터입니다. VSCode에서 Flutter 앱 개발을 하려면 VSCode에 Extension 탭에서 아래 목록의 Extension 들을 설치해야 합니다.
Flutter : VSCode에서 Flutter 개발 환경 지원
Dart : Flutter 개발 시 사용되는 Dart 개발 환경 지원
Awesome Flutter Snippets : Flutter 개발 시 자주 쓰이는 코드 자동 완성 지원
좌측에 extension 아이콘(주황 동그라미)을 선택해 주세요.
flutter 라고 검색한 뒤, 해당 첫 번째 항목을 선택하고 install 버튼을 눌러 설치해주세요.
바로 아래에 있는 Awesome Flutter Snippets 익스텐션도 설치해주세요.
dart 라고 검색하신 뒤, 해당 익스텐션을 설치해주세요. 만약 uninstall이라고 뜨신다면 이미 설치가 되셨으니 넘어가시면 됩니다.
모든 설치가 완료 되었습니다!
최종 설치 확인
터미널에서 flutter doctor라고 검색한 뒤 아래와 같이 화면이 나온다면 모든 설치가 완료하신 것입니다.
💡
다운로드 폴더에 있는 파일들은 모두 삭제하셔도 됩니다.
💡
고생하셨습니다! 원래 개발 환경을 설정하는데 시간이 많이 들어갑니다 😂
그럼 수업 때 뵙도록 하겠습니다 🙂
