[Flutter 입문] Flutter와 개발 환경 설정

김동연·2025년 3월 24일
flutter내일배움캠프

개발기록일지(Flutter)

목록 보기
1/32

1. Flutter

  • Google에서 만든 크로스 플랫폼 UI, 프레임워크
  • 크로스 플랫폼 : 한번의 코드 작성으로 여러 플랫폼, 모바일 같은 경우 안드로이드, 아이폰 앱을 만들 수 있다는 의미
  • UI : User Interface. 사람과 기기의 상호작용을 하게 해주는 시스템. 모바일 앱 화면 외에도 키보드, 마우스, 스크린 터치등의 물리요소도 포함
  • 프레임워크 : Frame(틀) + Work(일)의 합성어. 어떤 일을 할 때 틀을 제공해서 편리하게 일을 하게해줌.

Flutter의 특징

1. 오픈소스: 누구나 코드 확인 및 수정이 가능한 소프트웨어.

(버그 수정 및 유지 보수가 유리함)

2. 자체 그래픽 엔진: Skia-스키아, impeller-임펠러 덕분에 다른 크로스 플랫폼에 비해서 빠르다

  • React Native: javascript코드를 작성하면 안드로이드/아이폰의 UI요소를 찾아서 그리는 방식. (네이티브 브릿지)
  • Flutter: 자체 그래픽 엔진을 사용해서 바로 그림
  • 안드로이드, IOS 모두 같은 디자인으로 개발 가능.

3. 핫리로드

  • Dart 가상머신 위에서 앱이 작동을 해 Dart 코드가 업데이트 됐을 때 앱 전체를 다시 컴파일하는 방식이 아닌 변경된 부분만 반영 가능.

4. AOT 지원

  • 개발 시(JIT 컴파일러)

    코드작성 → 컴파일(DartVM이 해석 가능한 바이트코드) → DartVm에서 실행 → DartVM에서 기계가 해석가능한 코드로 컴파일→ 실행

  • 배포 시

    코드작성 → 컴파일(기계가 해석가능한 바이트코드) → DartVM에서 실행 → 실행
    앱 배포후 실행시 빠름

5. Dart 언어의 쉬운 난이도

  • Dart 가 Java, Javascript 등 다른 언어의 문법과 비슷해서 기존에 다른 프로그래밍 언어를 사용해 본적이 있으면 쉽게 학습가능

6. 쉬운 UI 구성

  • HTML, CSS 를 한번 접해본 적이 있다면 구조가 비슷해서 쉽게 구성가능

7. 다양한 플랫폼 지원

  • 안드로이드, 아이폰, 웹, 윈도우, 맥, 리눅스 앱 개발 가능

8. 다양한 기업들에서 사용중

  • https://flutter.dev/showcase
  • 국내에서도 스타트업들에서 Android, IOS 각각 개발하는 것보다 Flutter 로 개발 선호
  • 큰 기업에서도 신규 프로젝트로 플러터 사용하는 케이스 다수

2. Flutter 개발환경

필요한 툴 다운받기

- 1. Homebrew 설치

- 2. Git 설치

  • brew install git

- 3. Xcode

  • Xcode 다운로드
  • 위 링크에서 로그인 후 스크롤 내려서 Xcode 16 의 Vide Details 클릭

  • Xcode 16.xip 클릭하여 다운

- 4. Android Studio

*약관 동의 후 인텔 맥이면 좌측, 실리콘맥(M1,M2,M3) 이면 우측 클릭

- 5. Visual Studio Code (VSCode)

- 6. Flutter SDK

  • SDK archive 클릭

  • 3.24.3 다운(인텔맥이면 x64, 실리콘맥이면 arm64)
  • 실리콘 맥 (m1, m2, m3)을 사용중이라면 다운 후 뒤로가기 하여 아래의 명령어 복사
  • 터미널에 붙여넣고 엔터
  • sudo softwareupdate --install-rosetta --agree-to-license

개발 환경 세팅하기

  • XCode 설치

    • 다운받은 파일 더블클릭해서 압축풀기
    • 압축 푼 Xcode 파일 응용프로그램에 드래그해서 이동
    • xcode 실행 후 나오는 화면에서 iOS도 체크 후 Download & Install

  • Android Studio 설치

    • 설치파일 실행 후 아래처럼 드래그

  • Command line tools 설치

    • 안드로이드 스튜디오 실행 후 좌측 상단의 Android Studio 클릭 후 Settings 클릭 
    	- SDK Tools 탭에서 Command-line Tools 체크 후 Apply 클릭

  • 안드로이드 스튜디오 Flutter 플러그인 설치
    - 좌측의 플러그인 탭에서 flutter 검색 후 Install 클릭

  • 안드로이드 가상머신 설치

    • Help 에서 Find Action 클릭

    • device manager 입력 후 Vitual Device Manager 선택

  • Create virtual device 클릭

- nexus 5 검색 후 선택 후 Next 클릭

- API 34 선택(없다면 다운로드)

- Finish 클릭

- 실행해보기

  • VSCode 설치
    - 다운받은 VSCode zip 파일 압축 해제 후 응용프로그램으로 드래그해 이동

  • VSCode 플러터 Extensions 설치
    - VSCode 실행 후 좌측 Extensions 탭 클릭 후 flutter 검색하여 Flutter extensions 설치

  • 플러터 SDK 설치
    - finder에서 바탕화면으로 이동 후 커맨드 + 화살표위 버튼을 입력해서 홈디렉토리로 이동.
    - development라는 폴더 생성
    - flutter sdk 압축해제 후 development폴더로 이동

    - `nano ~/.zshrc` 명령어로 .zshrc 파일 열어서 아래 내용 제일 하단에 붙여넣기
    
    ```dart
    export PATH=$HOME/development/flutter/bin:$PATH
    ```
    
- `source ~/.zshrc` 명령어로 .zshrc 파일의 내용이 바뀌었다고 시스템에 알려주기!
- `flutter --version` 명령어로 설치 잘 되었나 확인

  • Flutter doctor로 구성 진단하기
    - flutter doctor 란? flutter 개발환경 구성이 잘 되었는지 진단해주는 도구

    - CocoaPods 경고가 뜬다면?
    
    `brew install cocoapods` 명령어로 설치
    
- android license 관련 문구가 포함된 경고가 뜬다면?
    
    `flutter doctor --android-licenses` 명령어 입력 후 동의 여부 묻는 화면에서 y입력 후 엔터(3~4번정도 물어봄)

  • flutter 프로젝트 생성해보기
    - 커맨드 파레트 (커맨드 + p) 실행 후 flutter 입력 후 new project 선택

    - Application 선택

    - 바탕화면에 proj 폴더 생성 후 선택

    - 생성되는 flutter_application_1 이름 사용

    - 완료

  • iOS 시뮬레이터에서 실행해보기
    - 커맨드 파레트(커맨드 + p) 에서 flutter select 입력 후 Select Device 선택

    - Start iOS Simulator 선택

    - VSCode 우측 상단의 실행버튼 우측 작은 화살표 클릭 수 Run Without Debugging 클릭

    - 완료

profile
김동연
다음 포스트

[Flutter 입문] Flutter 기초 다지기

0개의 댓글