🛠️ [Programming 이것 저것] 안드로이드앱 개발 첫 단추, Flutter 설치 및 설정 따라하기

Flutter SDK를 설치하는 방법을 쉽고 자세하게 안내해 드릴게요. 차근차근 단계를 밟아나가면 됩니다.

* 사전 필수 프로그램 설치

  - VSCode 설치

  - Git 설치

  - 안드로이드 스튜디오 설치

  - 위에 3개는 각 대표 홈페이지에 다운로드 링크도 있고 설치도 기본으로 설치하면 간단하게 마무리 됩니다. 

약간의 설정이 필요한 Flutter 설치 이제 시작합니다.

1단계: Flutter SDK 다운로드하기

가장 먼저 Flutter SDK를 우리 컴퓨터에 다운로드해야 합니다. 마치 요리를 시작하기 전에 필요한 재료를 마트에 가서 사 오는 것과 같아요.

• 웹 브라우저 열기: 크롬, 엣지, 파이어폭스 같은 웹 브라우저를 실행해 주세요.
• Flutter 공식 웹사이트 접속: 주소창에 https://flutter.dev/docs/get-started/install/windows 라고 입력하고 엔터 키를 누르세요. 그러면 Flutter 공식 문서의 Windows 설치 페이지로 이동할 거예요.
• SDK 다운로드: 페이지 중간쯤에 "Get the Flutter SDK"라는 제목과 함께 파란색 다운로드 버튼이 보일 거예요. 자신의 윈도우 버전에 맞는 버튼 (일반적으로 ".zip" 파일)을 클릭해서 다운로드하세요.
• 다운로드 완료 기다리기: 다운로드에는 약간의 시간이 걸릴 수 있습니다. 웹 브라우저 하단이나 다운로드 관리자 창에서 다운로드 진행 상황을 확인할 수 있어요. 파일 이름은 보통 flutter_windows_x.xx.x-stable.zip과 비슷할 거예요.

2단계: Flutter SDK 압축 해제하기

다운로드한 Flutter SDK는 압축 파일(.zip) 형태로 되어 있습니다. 이 파일을 우리가 사용할 수 있도록 압축을 풀어줘야 해요. 마치 포장된 재료를 꺼내서 손질하는 것과 같은 과정이라고 생각하시면 돼요.

• 다운로드 폴더 열기: 다운로드한 .zip 파일이 있는 폴더를 여세요. 보통 "다운로드" 폴더에 있을 거예요.
• 압축 해제: 다운로드한 flutter_windows_x.xx.x-stable.zip 파일을 마우스 오른쪽 버튼으로 클릭하세요. 메뉴가 나타나면 "압축 풀기..." 또는 "Extract All..."과 같은 옵션을 선택하세요.
• 압축을 풀 폴더 지정: 압축을 풀 위치를 선택하는 창이 나타날 거예요. Flutter SDK는 경로가 너무 길거나 공백이 포함된 폴더에 있으면 문제가 발생할 수 있으므로, C 드라이브 바로 아래에 새로운 폴더를 만들고 그 폴더에 압축을 푸는 것을 추천합니다. 예를 들어, C:\flutter 라는 폴더를 만들고 그곳에 압축을 풀어주세요. 이렇게 하면 경로가 간단해져서 나중에 작업하기 편해집니다.
• 압축 풀기 실행: 압축을 풀 폴더를 지정했으면 "확인" 또는 "Extract" 버튼을 클릭해서 압축을 풀어주세요. 압축 해제에는 약간의 시간이 걸릴 수 있습니다.

3단계: 환경 변수 설정하기

이제 Flutter SDK를 우리 컴퓨터의 "길"에 등록해 줄 거예요. 이렇게 하면 우리가 어느 폴더에서든 flutter 명령어를 사용할 수 있게 됩니다. 마치 우리가 자주 가는 식당의 주소를 기억해두면 언제든 쉽게 찾아갈 수 있는 것과 같아요.

• "고급 시스템 설정" 열기:
  • Windows 검색창 (화면 왼쪽 아래 돋보기 모양)에 "환경 변수"라고 입력하세요.
  • 검색 결과에 "시스템 환경 변수 편집"이 나타나면 클릭하세요.
  • "시스템 속성" 창이 뜨면 아래쪽에 있는 "환경 변수..." 버튼을 클릭하세요.
• "Path" 변수 편집:
  • "환경 변수" 창이 뜨면 "시스템 변수" 목록에서 "Path" 라는 변수를 찾아서 선택한 후 "편집..." 버튼을 클릭하세요.
  • "환경 변수 편집" 창이 나타납니다.
• Flutter SDK 경로 추가:
• "새로 만들기" 버튼을 클릭하세요.
• Flutter SDK를 압축 해제한 폴더 안에 있는 bin 폴더의 경로를 입력해야 합니다. 우리가 C:\flutter 폴더에 압축을 풀었다면 경로는 C:\flutter\bin 이 됩니다. 이 경로를 정확하게 입력해 주세요.
• "확인" 버튼을 클릭해서 "환경 변수 편집" 창을 닫으세요.
• "환경 변수" 창에서도 "확인" 버튼을 클릭하세요.
• "시스템 속성" 창에서도 "확인" 버튼을 클릭해서 모든 창을 닫으세요.

4단계: Flutter Doctor 실행하기

마지막으로 Flutter가 제대로 설치되었는지, 그리고 개발에 필요한 다른 도구들이 잘 설정되어 있는지 확인하는 과정을 거칠 거예요. 마치 병원에 가서 건강 검진을 받는 것과 비슷하다고 생각하시면 돼요.

• 명령 프롬프트 또는 PowerShell 열기:
  • Windows 검색창에 "cmd" 또는 "powershell"이라고 입력하세요.
  • 검색 결과에 "명령 프롬프트" 또는 "Windows PowerShell"이 나타나면 클릭해서 실행하세요.
• flutter doctor 명령어 실행: 열린 명령 프롬프트 또는 PowerShell 창에 flutter doctor 라고 입력하고 엔터 키를 누르세요.
• 결과 확인: flutter doctor 명령어는 우리 컴퓨터의 Flutter 개발 환경을 점검하고, 문제가 있는 부분을 알려줍니다. 처음 실행하면 몇 가지 필요한 도구를 더 설치하라고 나올 수도 있어요. 메시지에 따라 필요한 작업을 진행해 주세요. 모든 것이 잘 설정되었다면 "No issues found!" 또는 비슷한 메시지가 나타날 거예요.

이제 윈도우에 Flutter SDK가 성공적으로 설치되었고, Flutter 앱을 개발할 준비가 완료되었습니다! 🎉

혹시, 오류가 난다면... 저처럼 ㅠㅠ




flutter doctor를 실행한 결과를 보니,  몇 가지 부분에서 추가적인 설정이 필요하다는 것을 flutter doctor가 알려줍니다.

주요 문제점:

1. Android toolchain 관련 문제: 안드로이드 앱을 개발하기 위한 도구가 몇 가지 부족하고, 라이선스에 동의해야 합니다.
2. Visual Studio 관련 문제: 윈도우 앱 개발을 위해서는 Visual Studio가 필요하지만, 아직 설치되어 있지 않거나 필요한 구성 요소가 없는 것 같습니다.

하나씩 차근차근 해결해 보도록 해요!

1. Android toolchain 문제 해결하기

이 부분은 안드로이드 스마트폰이나 에뮬레이터(가상 스마트폰)에서 우리가 만든 앱을 실행하고 테스트하기 위해 필요한 설정입니다.

• cmdline-tools 설치:

  • flutter doctor 결과에 나온 안내처럼, 안드로이드 SDK 관리자 도구를 이용해서 cmdline-tools라는 것을 설치해야 합니다.
  • Android Studio를 실행해 주세요.
  • Android Studio 상단 메뉴에서 "More Actions" (또는 톱니바퀴 모양의 "Settings") 버튼을 클릭하세요.
  • 나타나는 메뉴에서 **"SDK Manager"**를 선택하세요.
  • "Android SDK" 창이 뜨면 상단의 탭 중에서 **"Android SDK"**가 선택되어 있는지 확인하고, 오른쪽 아래에 있는 "SDK Tools" 탭을 클릭하세요.
  • "SDK Tools" 목록에서 "Android SDK Command-line Tools (latest)" 옆에 있는 체크박스를 선택하세요. (이미 선택되어 있다면 넘어가도 됩니다.)
  • 오른쪽 아래의 "Apply" 버튼을 클릭하세요.
  • "Install" 확인 창이 뜨면 "OK" 버튼을 클릭해서 설치를 진행하세요. 설치가 완료될 때까지 기다려 주세요.
  • 설치가 완료되면 "OK" 버튼을 클릭해서 창을 닫으세요.

• Android 라이선스 동의:

• 다시 명령 프롬프트 또는 PowerShell 창을 열어 주세요.
• flutter doctor 결과에 나온 안내처럼 flutter doctor --android-licenses 라고 입력하고 엔터 키를 누르세요.
• 그러면 안드로이드 SDK 라이선스에 동의할지 묻는 메시지가 여러 번 나올 거예요. 각 메시지마다 y 를 입력하고 엔터 키를 눌러서 동의해 주세요. 모든 라이선스에 동의하고 나면 다시 명령 프롬프트로 돌아올 거예요.

2. Visual Studio 문제 해결하기 (선택 사항)

이 부분은 우리가 만든 Flutter 앱을 윈도우 데스크톱 앱으로도 만들고 싶을 때 필요한 설정입니다. 만약 안드로이드나 웹 앱 개발만 관심 있다면 이 단계를 건너뛰어도 괜찮아요. 하지만 나중에 윈도우 앱 개발도 하고 싶다면 설치하는 것이 좋습니다.

• Visual Studio 다운로드:
  • flutter doctor 결과에 나온 링크 (https://visualstudio.microsoft.com/downloads/)를 웹 브라우저에 입력해서 Visual Studio 다운로드 페이지로 이동하세요.
  • Community 버전 (무료)을 다운로드하세요.
• Visual Studio 설치:
  • 다운로드한 설치 파일을 실행하세요.
  • Visual Studio Installer 창이 뜨면 "계속" 버튼을 클릭하세요.
  • 설치할 워크로드를 선택하는 화면이 나오면 "C++를 사용한 데스크톱 개발" 옆에 있는 체크박스를 선택하세요. 이 워크로드에는 윈도우 앱 개발에 필요한 도구들이 포함되어 있습니다.
  • 오른쪽 아래에 있는 "설치" 버튼을 클릭해서 설치를 시작하세요. 설치에는 시간이 오래 걸릴 수 있습니다.
  • 설치가 완료되면 컴퓨터를 재부팅하라는 메시지가 나올 수 있습니다. 재부팅 후 다시 flutter doctor를 실행해 보세요.

다시 flutter doctor 실행하기

위의 단계를 모두 완료했거나, 윈도우 앱 개발을 건너뛰었다면 다시 명령 프롬프트 또는 PowerShell 창을 열고 flutter doctor 를 실행해 보세요. 이번에는 문제점이 모두 해결되고 아래와 비슷한 메시지가 나타날 거예요.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.29.3, on Microsoft Windows [Version 10.0.19045.5737], locale ko-KR)
[√] Windows Version (10 Pro 64비트, 22H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 2024.3.2)
[√] VS Code (version 1.99.3)
[√] Connected device (3 available)
[√] Network resources
No issues found!

여기까지 오니 일단은 Flutter 설치 및 설정이 완료되네요. ^^