Flutter 독학하다 포기했다면? 이 강의 하나로 끝내세요!
#소프트웨어 

Flutter(플러터)란?

구글이 출시한 크로스 플랫폼 GUI 애플리케이션 프레임워크인 플러터(Flutter). 함께 알아볼까요?

2023-06-19 | 박성돈

Flutter(플러터)는 어떤 프로그램?

Flutter는 Google에서 개발하고 관리하는 오픈 소스 모바일 앱(Application) 개발 프레임워크(Framework)입니다. 이 프레임워크는 Android와 iOS 등 다양한 플랫폼에서 동작하는 앱을 개발하기 위해 사용되며, 모바일 앱(Application)의 개발 속도를 높이기 위한 다양한 기능과 도구를 제공합니다.

Flutter는 Dart라고 하는 언어를 사용해 개발합니다. 구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어이며, 2011년 10월에 공개되었습니다. 기본적으로 C언어의 문법과 거의 같으며 프로그래머들에게 자연스럽게 다가가는 Dart의 목적에 맞게, 기존 프로그래밍 언어들의 특징들이 많이 보입니다. 이것은 다른 언어를 경험해 본 유저라면 쉽게 접할 수 있는 장점이 됩니다.

Flutter의 UI 구성 요소는 위젯으로 이루어져 있습니다. 이 위젯들은 서로 다양하게 조합되어 복잡한 UI를 만들어냅니다. Flutter에서는 머티리얼 디자인 스타일의 위젯과 iOS 스타일의 위젯을 기본적으로 제공하며, 커스터마이징이 가능한 다양한 위젯들도 제공합니다.

Flutter의 가장 큰 장점 중 하나는 빠른 개발 속도입니다. Flutter는 “핫 리로드”라는 기능을 제공하며, 이 기능을 사용하면 코드를 수정하면서 실시간으로 앱을 테스트할 수 있습니다. 개발자는 새로운 기능을 더 빠르게 테스트하고 디버깅할 수 있습니다.

요약하면, Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, Dart 언어를 사용하며, 뛰어난 성능과 빠른 개발 주기를 제공한다고 볼 수 있습니다.

 

flutter_02

 

프레임워크란?

위에서 Flutter에 대해 모바일 앱 개발 “프레임워크(Framework)”라는 표현을 사용했습니다. 프레임워크에 대해 저만의 방식으로 풀어서 이해해 보았습니다.

Frame + Work 가 결합된 형태로 생각해 볼 수 있을 것 같습니다.

Frame = 틀, 구조, 뼈대

Work = 일, 작업

직역을 해보면 “틀을 가지고 작업한다.” 즉, “어떠한 틀의 형태로 구조를 만들어 일관되게 작업하는 것” 정도로 이해할 수 있겠습니다. 이런 개념을 가지고 아래 내용을 참고하면 좀 더 이해가 쉬울 것 같습니다.

아래는 다양한 검색을 통해 정리된 내용을 발취해 보았습니다.

  • 특정 프로그램이나 애플리케이션을 개발하기 위해 사용되는 기본적인 구조를 제공하는 코드 라이브러리입니다.
  • 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것
  • 소프트웨어에서의 프레임워크는 ‘특정 프로그램을 개발하기 위한 여러 요소들과 메뉴얼인 룰을 제공하는 프로그램’

 

flutter dart

 

Flutter(플러터)에서 사용되는 Dart 는 어떤 언어일까?

Dart(다트)는 Google이 2011년 웹 프런트엔드 개발을 위해 만든 언어입니다. 지금은 웹, 서버, 모바일 애플리케이션 및 IoT 디바이스와 같은 다양한 플랫폼에서 사용될 수 있습니다. 처음에는 웹 브라우저 내에서 JavaScript를 대체하기 위해 개발되었지만, 이후에는 Flutter 프레임워크를 통해 네이티브 모바일 앱 개발에도 널리 사용되게 되었습니다.

Dart는 그 자체로도 강력한 언어이지만, Flutter와 결합되었을 때 그 진정한 잠재력이 발휘됩니다. Flutter에서 Dart를 사용하면, 한 번의 코드 작성으로 iOS와 Android 모두에서 실행되는 높은 성능의 네이티브 앱을 빠르게 개발할 수 있습니다.

 

flutter_03

 

Flutter(플러터)의 특징 중 Hot Reload(핫 리로드) 기능

일반적으로 네이티브 iOS 또는 Android 개발을 하다 보면 기능 구현을 위한 개발 뿐만아니라 코드 변경 이후 빌드 시간입니다.

변경한 내용에 대해 빠르게 확인해보고 싶지만, 그럴 수가 없는 게 현실이고, 프로젝트가 커지면 커질수록 이 대기시간은 기하급수적으로 증가하게 됩니다.

Flutter는 이런 부분에서 굉장한 장점으로 내세우는 기능이 바로 Hot Reload(핫 리로드) 입니다. 코드 변경 또는 수정 후 저장하면 변경사항을 즉각적으로 확인할 수 있는 기능입니다. 이 기능으로 인해 실시간으로 앱을 테스트 및 디버깅, 빠른 개발을 할 수 있습니다.

 

flutter_04

 

Flutter(플러터)를 설치하는 간단한 과정 설명

  1. Flutter SDK 다운로드: 먼저 Flutter 공식 웹사이트로 가서 Flutter SDK를 다운로드 받아주세요. 보통 ‘stable’ 버전을 선택하면 됩니다. 다운로드 받은 zip 파일을 원하는 위치에 압축 해제합니다.
  2. 환경변수 설정: 압축 해제한 Flutter SDK의 경로를 컴퓨터의 환경 변수에 추가해야 합니다. 환경 변수를 설정하는 것은 Flutter 명령어를 컴퓨터 어디서나 실행할 수 있게 해줍니다.
    1. ‘제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정’으로 이동합니다.
    2. ‘환경 변수’ 버튼을 클릭합니다.
    3. ‘시스템 변수’ 섹션에서 ‘Path’ 변수를 찾아 클릭하고 ‘편집’ 버튼을 누릅니다.
    4. ‘새로 만들기’ 버튼을 누르고 압축 해제한 Flutter SDK의 ‘bin’ 디렉토리 경로를 입력합니다.
  3. IDE 설치: 개발 환경으로 Android Studio, IntelliJ IDEA, VS Code(Visual Studio Code) 등의 IDE를 선택하여 설치할 수 있습니다. 각각의 공식 다운로드 페이지에서 설치 파일을 다운로드 받아 설치하면 됩니다.이들 IDE에서 Flutter 개발을 위한 환경 설정을 하려면, IDE의 ‘플러그인’ 또는 ‘익스텐션’ 설정 메뉴에서 ‘Flutter’와 ‘Dart’를 찾아 설치해주세요.
  4. Flutter 설치 확인: 모든 설치가 완료되면, 명령 프롬프트나 터미널을 열고 ‘flutter doctor’ 명령어를 실행하여 Flutter 도구가 올바르게 설치되었는지 확인합니다. 이 명령은 시스템에 Flutter가 제대로 설치되었는지, 추가로 필요한 도구나 설정이 있는지 확인해줍니다.

이제 Flutter가 제대로 설치되었으며, 앱을 개발하기 위한 준비가 완료되었습니다. 이제 Flutter를 사용하여 앱을 개발할 수 있습니다.

지금까지 구글에서 개발하고 관리하고 있으며, 점차 영향력을 확장하고 있는 Flutter(플러터)의 개념 및 특징, 간단한 설치 과정에 대해 다루어 보았습니다. 이후에는 설치 과정에 대한 상세한 설명을 추가해 보려고 합니다.

 

Flutter 배우는데 Dart 언어 찍먹해서 되겠어요?

모두의연구소 오름캠프 [Flutter 모바일 앱 과정] 수강생의 인터뷰입니다.다른 프레임워크에 비해 꾸준하게 개발되서 플러터를 선택했는데,가장 근간인 Dart를 제대로 배울 수 있어서 좋았다고 하는데,자세한 내용은 영상에서 만나요!모두의연구소 오름캠프 [Flutter 모바일 앱 과…

 

국내 최초 플러터(Flutter) 도서 저자 오준석 직강 | 오름캠프 Flutter 모바일 앱 과정

No Description