Flutter 입문 기록 — 감성과 기능의 균형 속으로

Flutter를 처음 접했을 때, 나는 마치 새로운 세상에 발을 들인 느낌이었다.
백엔드 개발에 익숙했던 내가, "화면을 그린다"는 것에 이렇게 설렐 줄은 몰랐다.
이 글은 Flutter의 가장 기초적인 개념부터 개발 환경 세팅, 그리고 기본 구조에 대해 정리한 기록이다.

---

🌱 Flutter란?

Flutter는 구글에서 만든 크로스 플랫폼 프레임워크로,
한 번의 코드 작성으로 iOS, Android, 웹, 데스크톱 앱까지 만들 수 있는 놀라운 기술이다.
무엇보다 UI를 구성하는 방식이 선언적(declarative)이라 하나의 컴포넌트도 마치 예술처럼 느껴진다.

---

🧱 Flutter의 기본 구조

Flutter의 모든 것은 위젯(Widget)이다.
화면에 보이는 모든 요소(텍스트, 버튼, 이미지 등)는 전부 위젯으로 구성된다.

void main() {
  runApp(const MyApp());
}

runApp은 위젯을 루트에 붙여주는 역할을 하며,
MyApp은 보통 StatelessWidget 혹은 StatefulWidget으로 정의된다.

---

Flutter를 시작하는 방법은 사용하는 운영체제에 따라 조금 다르다.
나는 맥북과 윈도우를 오가며 작업하는 편이라, 두 환경 모두 설치해 보았다.
그 과정을 아래에 정리해 보았다.

---

🪟 Windows에서 Flutter 설치하기

1. Flutter SDK 다운로드
   공식 사이트에서 Windows용 Flutter SDK를 ZIP으로 다운로드한다.
2. 압축 해제 후 환경 변수 설정
   예: C:\flutter에 압축 해제 후, 환경 변수(PATH)에 C:\flutter\bin을 추가한다.
3. Android Studio 설치 및 설정
   - Android Studio 설치
   - Android SDK 설치
   - Virtual Device 생성
   - Flutter & Dart 플러그인 설치
4. 설치 확인
   명령 프롬프트에서 아래 명령어 실행

flutter doctor

---

🍎 macOS에서 Flutter 설치하기 (Homebrew 이용)

1. Homebrew로 Flutter 설치

brew install --cask flutter

2. 환경 변수 설정 (zsh 기준)

export PATH="$PATH:/opt/homebrew/Caskroom/flutter/latest/flutter/bin"

※ 이 경로는 brew --prefix flutter로 확인 가능

3. Xcode 설치 및 설정
   - App Store에서 Xcode 설치
   - xcode-select --install로 CLI 도구 설치
   - Xcode 실행 후 초기 설정
4. Android Studio 설치 (iOS & Android 개발을 모두 하기 위해)
5. 설치 확인

flutter doctor

---

✨ 공통 단계: 프로젝트 생성 및 실행

1. Flutter 프로젝트 생성

flutter create my_first_app
cd my_first_app
code .

2. 앱 실행 (에뮬레이터 실행 후)

flutter run

Flutter는 한 번 환경만 잘 구축해 두면,
그 이후는 마치 종이 위에 그림 그리듯 부드럽고 직관적이다.

---

📂 Flutter의 폴더 구조

lib/
  └─ main.dart        // 앱 진입점
  └─ screens/         // 화면 단위 위젯
  └─ widgets/         // 공통 위젯
  └─ models/          // 데이터 모델
  └─ themes/          // 테마 설정

폴더를 이렇게 정리해 두면 확장성 높은 구조로 유지보수가 쉬워진다.

---

🧬 Flutter의 3가지 기본 클래스

1. StatelessWidget

상태를 가지지 않는 정적인 위젯이다. UI가 외부 입력에 따라 바뀌지 않는 경우에 사용된다.

import 'package:flutter/material.dart';

class HelloWidget extends StatelessWidget {
  const HelloWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      '안녕하세요, Flutter!',
      style: TextStyle(fontSize: 20),
    );
  }
}

2. StatefulWidget + State

사용자의 상호작용 등으로 인해 상태가 변하는 동적인 위젯이다.
이때 상태 로직은 State 클래스 내부에서 관리된다.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('현재 값: $_count', style: const TextStyle(fontSize: 20)),
        ElevatedButton(
          onPressed: _increment,
          child: const Text('증가'),
        ),
      ],
    );
  }
}

setState()는 상태가 변경되었음을 Flutter에게 알려 UI를 다시 빌드하게 해준다.

---

🧭 Flutter의 라우터 (Navigator)

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NextPage()),
);

push, pop을 이용해 스택 구조로 페이지 이동을 제어할 수 있다.

---

🎨 테마와 템플릿

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(bodyMedium: TextStyle(fontSize: 16)),
  ),
);

템플릿은 Flutter 프로젝트 생성 시 기본 제공되어 빠르게 시작할 수 있다.

---

🛠️ VS Code Extension 추천

• Flutter: Flutter 개발에 필수적인 공식 확장
• Dart: Dart 문법 지원
• Flutter Widget Snippets: 자주 쓰는 위젯 템플릿 제공
• Bracket Pair Colorizer 2: 중괄호 구분 쉽게
• Error Lens: 코드 상에서 에러를 바로 시각화

---

☁️ 마치며

Flutter는 단순히 앱을 만드는 도구를 넘어서,
사용자와 감정을 연결하는 UI를 설계할 수 있는 캔버스였다.
이제 막 첫 페이지를 넘겼지만, 앞으로의 여정이 설렌다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 여정입니다.