이제 플러터 개발 환경을 만들어 보겠습니다.
비주얼 스튜디오 코드 설치
플러터 공식 사이트(https://docs.flutter.dev/get-started/install)에 가서 여러분의 개발 환경에 맞는 기기로 가 보시면,
다음 세 가지 환경을 중 한 가지를 구성하라고 이야기하고 있습니다.
- Visual Studio Code 1.77 혹은 그 이상 버전과 플러터 확장 프로그램(Extension)
- 2024년 11월 현재 최신 버전은 1.95입니다.
- 안드로이드 스튜디오(Android Studio) 2023.3.1 (Jellyfish) 혹은 그 이상 버전과 플러터 플러그인(Plug-in)
- 2024년 11월 현재 최신 버전은 2024.2.1 (Ladybug)입니다.
- IntelliJ IDEA 2023.3 혹은 그 이상 버전과 플러터 플러그인
- 기본 골격은 같으나 안드로이드 스튜디오보다 버전이 빠르고, 플러그인은 동일한 것을 사용합니다.
- 2024년 11월 현재 최신 버전은 2024.3입니다.
플러터 개발 팀은 현재 공식 개발 툴로 VSCode를 추천하고 있습니다.
원래는 안드로이드와 iOS용 하이브리드 프레임워크였던 탓인지 안드로이드 스튜디오가 기본 개발 툴이었는데,
어느 시점부터 범용 개발을 하게 된 탓인지, 안드로이드 스튜디오가 기본이 아니게 되었습니다.
그래서 꼭 안드로이드 스튜디오가 없어도, VSCode와 플러터만 있으면 어느 컴에서건 웹 앱은 개발이 가능한 상태가 되죠.
여기선 저도 동일하게 사용하는 VSCode로 소개하겠습니다.
참고로 저는 셋 다 사용해 봤습니다만, 아래 두 가지 IDE는 편하긴 한데 JVM 기반에서 돌기 때문에 좀 무겁습니다.
IntelliJ IDEA는 Community Edition을 사용하지 않으시면 유료고요.
비주얼 스튜디오 코드 설치는 굳이 따로 다루지 않겠습니다.
단순한 프로그램 설치이기 때문이라 제가 딱히 말씀드릴 게 없습니다.
많이 쓰시는 윈도의 경우 https://code.visualstudio.com/docs/setup을 참조하시면 되겠죠.
사용하시는 컴의 OS에 따라 알맞은 페이지를 가서 설치 및 주의 사항을 확인하시면 되겠습니다.
단지, 여러분이 앞으로 프로그램을 개발하실 때 프로젝트를 저장할 폴더를 생각해두셔야 하는데,
제가 추천하는 위치는 "문서" 폴더 혹은 여러분의 "사용자 폴더"에 'project' 같은 이름으로 별도 폴더를 만드시는 것입니다.
이 폴더들은 윈도를 쓰시던 맥을 쓰시던 대체로 oneDrive나 iCloud를 통해서 클라우드에 자동으로 백업을 하시게 될 텐데요.
이런 폴더를 이용하시면 임의의 로컬에 작업 폴더를 만드셨을 때보다는 훨씬 안전하게 작업을 하실 수가 있습니다.
일단 VSCode를 설치하시고 나면, 잊지 말고 VSCode용 확장 프로그램을 설치하셔야 합니다.
왼쪽의 확장 관리 메뉴에서 flutter로 검색하시면, 마켓플레이스에서 flutter 관련 여러 가지 확장이 나오는데,
그냥 플러터 팀에서 제공하는(제공자가 Dart Code입니다) 기본 확장을 설치하시면 됩니다.
참고로 이걸 설치하면, 플러터를 개발할 때 쓰는 프로그래밍 언어인 다트(Dart)용 확장까지 같이 설치됩니다.
플러터 SDK 설치
예전에는 플러터 SDK 가 압축된 파일을 받은 다음, 위치를 지정해서 압축을 푼 뒤 접근할 수 있도록 path를 지정한다~라는,
뭔가 원시적인(?) 방법을 사용했었는데요.
이젠 그럴 필요 없이, 닥치고 명령 팔레트에 > flutter라고 입력하려고 해 봅니다.
윗부분을 클릭하고 입력하셔도 되고, 단축키 control + shift + p (맥은 command + shift + p)를 누르셔도 됩니다.
그러면 아래 그림 같이 메뉴가 뜹니다.
여기서 Flutter: New Project를 선택하시면, 일단 VSCode와 플러터 SDK가 연결이 되어있지 않기 때문에,
에러 팝업이 하단에 뜹니다. 이미 깔려있으면 SDK 경로를 알려달라고 하고, 아니면 Download SDK를 하라고요.
자, 여기서 옛날 같으면 사이트 가서 수동으로 다운로드하고 배치파일 경로 연결하고 했겠지만...
이젠 아닙니다!
설치할 경로를 물어봐서 알려주고 나면, 자기가 알아서 거기다 설치하고 플러스 자동으로 배치파일 세팅까지 다 해줍니다!
(사실 완전 자동은 아니고 버튼 - Add SDK to PATH - 은 눌러줘야 합니다)
그래서 대문짝만 하게(?) 설치 폴더에 대한 경고가 붙어 있습니다.
- 설치 경로 사이에는 특수 문자나 공백이 포함되어 있으면 안 됩니다. (예: c:\Program Files\ )
- 설치 경로는 관리자 권한이 필요한 곳에는 안됩니다.
그래서 가능하면 "사용자 폴더" 같은 곳을 권장하고 있습니다.
그런데, 사실 엔간한 SDK들은 사용자 폴더를 사용하시는 게 정신 건강에 좋습니다.
파이썬 같이 굳이 자기가 시스템 안에 설치하는 애들은 어쩔 수 없지만요(...)
어쨌든 저런 과정을 거치면, 플러터 SDK 자체는 이제 설치가 끝났습니다. 이제 설치 타깃에 대한 설치들을 해야 합니다.
설치 타깃들을 위해 필요한 것들
일단 개발 환경이 뭐냐에 따라 좀 갈립니다.
| 웹 | 크롬 브라우저 (https://www.google.com/intl/ko_kr/chrome) |
| 안드로이드 | 안드로이드 스튜디오 (https://developer.android.com/studio?hl=ko) |
| Windows | Visual Studio 2022 (https://learn.microsoft.com/ko-kr/visualstudio/install/install-visual-studio?view=vs-2022) |
| Git for Windows (https://gitforwindows.org) | |
| iOS / macOS | Xcode (https://developer.apple.com/xcode) |
웹과 안드로이드는 컴퓨터 뭐 쓰시냐에 상관없이 저 툴을 각각 설치하셔야 하고,
나머지는 컴을 뭐 쓰시냐에 따라 개발이 가능하냐 불가능하냐가 아예 갈립니다.
리눅스에서는 웹과 안드로이드 이외에 리눅스 데스크톱용 앱을, 크롬 OS에서는 그냥 웹과 안드로이드용만 가능합니다.
(별 데서 다 돌아가죠?)
웹 개발을 위해서 크롬을 반드시 써야 한다는 게 좀 호불호가 갈릴 수 있겠네요. 크롬을 안 쓰시는 분들도 많아서.
디버그 툴로도 연결해서 쓰기 때문에 이게 좀 그렇습니다. 구글에서 만들었다고 밀착이 많이 되어 있습니다.
각각의 설치 방법은... 뭐 그냥 프로그램 설치라서요. 딱히 언급 안 드리겠습니다.
각각의 사이트에 친절하게 언급이 되어 있으니 제가 링크 걸어드린 사이트 참고하셔서 설치하시면 되겠습니다.
모바일 관련 추가로 신경 쓰실 부분
좀 신경을 써야 할 것이, 안드로이드와 iOS를 개발할 때 사용할 디바이스 시뮬레이터(Simulator)를 설정하는 부분입니다.
모바일용 앱을 개발할 때는 여러분이 기기를 모두 가지고 있는 게 아니기 때문에,
실제 기기에서 어떻게 올라갈지 가상으로 확인하기 위한 시뮬레이터를 이용합니다.
iOS의 경우 실제 기기가 없어도 좋을 만큼 대부분의 기능을 돌려볼 수 있는 시뮬레이터를 제공하고,
안드로이드도 UI 한정으로 플러터가 필요로 하는 것들은 어지간하면 확인하실 수 있으니 많이 활용하시게 됩니다.
이런 것들은 좀 섬세하게 설명드리고 싶기는 한데, 여러분들이 또 모바일 타깃으로 하신다는 보장도 없고,
지금 이 시간이 모바일 개발을 위한 강의 시간도 아니고 하기 때문에, 각각의 설치를 위한 링크 정도만 제공해 드리겠습니다.
안드로이드 시뮬레이터 관련:
- 윈도 환경: https://docs.flutter.dev/get-started/install/windows/mobile#configure-your-target-android-device
- 맥 환경: https://docs.flutter.dev/get-started/install/macos/mobile-android#configure-your-target-android-device
iOS 시뮬레이터 관련: https://docs.flutter.dev/get-started/install/macos/mobile-ios#configure-your-target-ios-device
일단 타깃 준비를 저렇게 마치고 나면, 개발에 빠진 것이 없는지 환경을 체크해 봅니다.
플러터 설치 상태를 확인하는 명령이 있는데요. flutter doctor라는 명령입니다.
이건 업그레이드를 마친 뒤에 자동으로 실행되기도 합니다.
$ flutter doctor
이걸 돌리면, 다음과 같은 결과 화면이 뜹니다.
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 14.4.0 23E214 darwin-arm64, locale en)
[!] Android toolchain - develop for Android devices
[!] Chrome - develop for the web
[✓] Xcode - develop for iOS and macOS (Xcode 16)
[!] Android Studio (not installed)
[✓] VS Code (version 1.95)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 3 categories.
저 예제는 iOS 개발 환경 세팅을 마친 상태인데요. [!] 가 뜨는 것들은 설치나 세팅이 정상적으로 되지 않았다는 의미입니다.
자기가 필요 없는 환경은 굳이 세팅하지 않아도 되니 신경 쓰지 않아도 됩니다.
그런데, 안드로이드를 개발하실 분들은 한 가지 더 신경 쓰실 메뉴가 있습니다.
[!] Android toolchain - develop for Android devices
제가 따로 설명을 안 드렸습니다만, 안드로이드 SDK 설치 과정에 따로 있습니다.
안드로이드 라이선스 설정 동의를 해 주는 부분이 있습니다. 안드로이드 SDK 설치를 해 주셨는데 이게 뜨면, 다음과 같이 해 주시면 됩니다.
flutter doctor --android-licenses
이 부분을 정상 처리하시고 나서 다시 flutter doctor를 돌려보시면 정상적으로 넘어가실 겁니다.
잘 안 되는 부분이 있으시면 플러터 설치 사이트의 각 환경 부분을 참고하세요. 저보다 훨씬 친절하게 되어 있습니다. 영어로(...)
이제 플러터 진짜로 돌려봅시다
이제 대충 설정 마쳤으면, 뭐가 돌아가는지 한 번 돌려보도록 해 봅시다.
아까처럼 다시 명령 팔레트에 > 입력하고 Flutter: New Project 선택하시면, 다음 화면이 뜰 겁니다.
여기서 선택을 해 주시는데, 그냥 Application을 해 주시면 플러터 초기 개발하시던 분들이 많이 보시던 앱이 세팅됩니다.
플로팅 버튼 누르면 카운트 올라가는 앱, 기억하시는 분들 많을 겁니다. 안드로이드 기본 앱도 그런 것 있죠.
예전엔 선택의 여지없이 그게 기본이어서 일단 그거 세팅하고 내부 코드 지우고 시작하고 했는데요.
이젠 그냥 심플하게 Empty Application 선택하시면 깔끔하게 시작하실 수 있습니다.
여기서 폴더를 물어보는데요.
주의하실 점이, 여기서 물어보는 폴더는 여러분의 프로젝트 파일들이 깔리는 폴더가 아니고,
여러분의 프로젝트가 설치되는 폴더를 물어보는 겁니다.
Select a folder to create the project라고 친절하게 물어보는데, 저는 영어를 못해서(...) 헷갈렸었네요.
예를 들면 여러분의 프로젝트 이름을 (아직 설정하지 않으셨지만) "sample"이라고 만드실 예정이시면,
저기가 문서 폴더라고 했을 때, 일부러 새로운 폴더 버튼을 눌러서 sample 폴더를 만드실 필요가 없습니다.
일단 프로젝트 생성하실 폴더 위치를 정하시기만 하면 되고요. 저 상태에서 버튼을 누르면,
드디어 플러터 프로그램이 하나 생겼네요. 아직 돌려보진 않았지만(?)
다음 잊지 말고 빌드하실 타깃을 확인하셔야 합니다.
참고로 저는 아이폰을 충전하느라 자주 제 맥에 물려놓고 있는데, 자꾸 우선적으로 물리 iOS를 잡아서 원치 않게 거기다 실행하려고 합니다.
이 상태로 아무 수정 없이 그대로 돌리면, 앱이 실행됩니다.
아, 예전에는 터미널 열고 flutter run 하고 그랬는데, 이젠 그냥 소스상에서 누르면 되는 위치가 있습니다.
어쨌든 누르면, 다음 앱이 실행됩니다. 처음 빌드할 때는 좀 시간이 걸립니다.
정리
오늘은 쓸데없이(?) 길었네요. ^^;
주말이 또 다가왔습니다.
일단 이제 플러터로 기존에 엔트리에서 설명드렸던 프로그래밍 기본 원리를 다시 잡아가는 시간을 다음 주부터(!) 가질 텐데요.
주말 사이에는 다른 이야기를 소소하게 해 보겠습니다.
아마도 제가 즐기는 게임 이야기라던가, 아니면 책 이야기 같은 좀 짧게 쓸만한 이야기가 될 것 같습니다.
오블완 챌린지를 하다 보니 좀 억지스럽게 주말 연명을 하는 듯한데, 이렇게나마 다른 얘기도 하게 되니 나쁘지 않은 듯도 하네요.
