앞서 우리는 앱개발에 필요한 프로그래밍 언어인 Dart 에 대해 알아보았습니다.
(1편 바로가기 → [앱개발] 1. Dart 언어에 대해 알아보자. – 앱개발 입문자를 위한 완전 정리)
Java는 IntelliJ 와 Eclipse, C/C++/C# 은 Visual Studio, Python은 VS Code 라는 개발도구에서 많이 사용합니다.
그렇다면 Dart라는 언어를 어디서 사용할 수 있을까요?
바로 앱개발을 포함해 많은 곳에서 사용할 수 있는 강력한 프레임워크 Flutter 입니다. 이번 포스팅은 Dart 언어를 활용하는 앱 개발도구인 플러터 프레임워크에 대해 알아보겠습니다. 개발 자체에 문외한이거나 다른 언어를 사용하다가 궁금해서 보시는 분들 등 모든 분들에게 알기 쉽고 정확하게 정리하였으니 천천히 읽어보시길 바랍니다!
Flutter란 무엇인가?
모바일 앱을 만들고 싶을 때, 안드로이드는 Java/Kotlin, iOS는 Swift/Objective‑C로 구별되어 따로 개발해야 한다는 생각이 일반적이었습니다. 그게 아니라면 Spring framwork 혹은 전자정부프레임워크에 Web View로 감싸는 방식으로 개발이 되었습니다.
하지만 최근엔 하나의 코드베이스로 Android + iOS를 포함해 웹과 데스크톱까지 모든 부분을 개발하는 방식이 각광 받고 있습니다.
하이브리드 프레임워크라고 분류하거나 크로스 플랫폼이라고도 불리고 있으며 그 중심에 있는 것이 바로 Flutter입니다.
Flutter는 Google 이 만든 UI 프레임워크(Software Toolkit)로, Dart 언어를 기반으로 작동합니다.
왜 크로스플랫폼 앱 개발이 중요할까?
✔ 비용과 시간 절감
- Android용 코드와 iOS용 코드를 별도로 작성하지 않아도 됩니다.
- 한 번 작성하고 두 플랫폼에 적용이 가능하기에 인건비가 줄어들고 개발해야 할 리소스의 양이 줄어듭니다.
✔ 유지보수 및 관리가 쉬움
- 코드가 Android / iOS 용으로 분리되어 있으면 기능 업데이트 시 두 코드 베이스를 동기화 해야 합니다.
- 크로스 플랫폼으로 작성하면 버그 수정·기능 추가 시 하나의 코드에서 처리가 가능합니다.
✔ 사용자 도달 범위 증가
- Android + iOS 모두 지원하기에 더 많은 유저에게 도달이 가능합니다.
- 웹/데스크톱까지 확장이 가능하고 이를 목적으로 이용하면 멀티플랫폼 전략이 가능합니다.
Flutter의 핵심 특징
✔ 위젯 기반 구조
UI 요소가 모두 위젯(widget) 형태로 존재합니다. 버튼, 텍스트, 이미지, 레이아웃, 스크롤 등등의 기능들이 전부 위젯으로 존재합니다.
Text("Hello Flutter"),
ElevatedButton(onPressed: () {…}, child: Text("Click"))“위젯”이란 이미 기능이 내장되어 있는 조립부품이라고 생각하시면 됩니다. 우리가 마치 프라모델의 부품을 조립하거나 레고의 블록을 조립하듯 위와 같은 소스코드처럼 조합해서 앱 화면을 구성합니다.
✔ 위젯 기반 구조의 장점
UI를 작게 나눠서 관리할 수 있음
- 화면을 작은 단위로 쪼개서 재사용이 가능합니다.
- 예: 동일한 스타일 버튼을 여러 화면에서 재사용
코드가 직관적
- “이 버튼은 어디에 있고, 어떤 글씨인지”가 코드에서 직관적으로 보입니다.
- HTML/CSS처럼 스타일과 구조가 분리되어 복잡하게 연결되는 문제가 없습니다.
빠른 UI 변경 가능
- Hot Reload와 결합하면 화면을 수정했을 때 즉각적으로 반영할 수 있습니다.
- 디자인 시안 및 레이아웃 조정이 즉시 가능합니다.
재사용성
- 우리가 class를 정의하거나 function 을 구성해서 만들어 두고 사용하듯이 위젯 하나만 정의해 두면, 여러 화면에서 재사용이 가능합니다.
- 프로젝트의 유지보수 및 소스코드 관리가 편리하고 효율적입니다.
✔ 빠른 개발 — Hot Reload
조금 전 장점에서 언급한 내용입니다. 코드를 수정한 뒤 몇 초 만에 앱 화면이 갱신되는 기능이며 이로 인해 개발 속도가 매우 빠르고, UI 조정·디자인 작업에 최적화되어 있기에 프론드엔드 개발 시 엄청난 효율을 발휘합니다.
✔ 네이티브급 성능
화면 그리기(Graphics Rendering)를 직접 처리하기 때문에 React Native처럼 JavaScript ↔ Native 브릿지 문제가 없습니다.
그로 인해 애니메이션, 스크롤, 렌더링 성능이 매우 우수합니다.
✔ 단일 언어 + 단일 코드베이스
“Dart” 라는 하나의 언어로 Android + iOS + 웹 + 데스크톱까지 커버가 가능합니다.
광범위하고 호환성이 좋은 개발 도구이기에 앱 개발을 처음 시작하는 개발자 및 웹개발을 해오던 기존 개발자들에게도 진입 장벽이 낮습니다.
✔ 강력한 생태계와 패키지
공식 패키지 저장소인 pub.dev 에는 수천 개의 플러그인 및 패키지가 있습니다. 카메라, 지도, 채팅, 결제 등 대부분 기능이 미리 만들어져 있기 때문에 개발 속도가 상당히 빠른 편에 속합니다.
구조 살펴보기
앱 개발을 시작할 때 플러터 프로젝트 내부 구조는 보통 아래와 같습니다.
my_flutter_app/
├ lib/
│ └ main.dart
├ pubspec.yaml
├ android/
├ ios/
└ web/lib/main.dart가 진입점이며home:위젯,MaterialApp또는CupertinoApp으로 구성 됩니다.pubspec.yaml에서 패키지·버전·에셋 등을 관리합니다.
간단한 코드 예제
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter',
home: Scaffold(
appBar: AppBar(title: Text('Flutter 입문')),
body: Center(
child: Text(
'첫 Flutter 앱입니다!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}코드가 어떻게 동작하고 어떻게 구성되는지 참고 할 만한 예제 코드입니다.
- 앱이 어떤 구조로 생겼는지
- 위젯이 어떻게 쌓이는지
- 화면이 어떻게 구성되는지
직관적으로 이해할 수 있습니다.
장점과 단점
장점
- 크로스플랫폼 개발 가능
- 네이티브급 성능
- 매우 빠른 개발 속도
- 생태계·패키지 다양
- UI 커스터마이징 자유
단점
- 앱 용량이 다소 큰 편 → 설치 용량 신경 써야 함
- 다른 플랫폼(예: 웹, 데스크톱)에서는 아직 성숙 단계
- Dart 자체 생태계는 일부 언어(Java, JavaScript에 비해 작은 편)
어떤 사람들이 배우면 좋은가?
- Android + iOS 앱 개발을 동시에 시작하고 싶은 입문자
- 사이드프로젝트나 스타트업 MVP를 빠르게 만들고자 하는 개발자
- UI 중심 개발을 선호하는 사람
- 기존 웹 개발자에서 앱 개발로 시프트하려는 사람
외부 참고자료
- Flutter 공식 사이트: https://flutter.dev
- Flutter 시작하기 가이드: https://docs.flutter.dev/get-started/codelab
- 패키지 검색(pub.dev): https://pub.dev
마무리
이번 글에서 Flutter가 무엇인지, 왜 중요한지, 어떻게 시작하는지까지 전체 그림을 살펴보았습니다. 웹 개발이 주력인 저로서도 가끔 분위기 환기 혹은 스스로의 개발 역량에서 또 다른 역량을 갖추기 위해 앱 개발에 관심을 갖고 있는 편입니다. 앱 개발을 공부하면서 복습 및 정리 포스팅과 사이드 프로젝트 1인 개발 등 관련하여 많은 포스팅을 할 예정이니 많은 관심 부탁드립니다.
다음 편 예고
다음 글에서는 실제 “Flutter 설치 가이드와 Dart 언어 설치 가이드” 를 포스팅 할 예정입니다. 저와 함께 앱 개발 공부를 시작하실 분들은 많은 기대 부탁드립니다.