Flutter의 웹(Web) 지원 방법

Flutter의 웹(Web) 지원 방법

Flutter는 모바일(Android, iOS)뿐만 아니라 웹(Web) 플랫폼도 지원하는 크로스플랫폼 프레임워크입니다. 하나의 코드베이스로 모바일과 웹을 동시에 개발할 수 있어, 개발 효율성을 높일 수 있습니다.

이 글에서는 Flutter 웹 지원을 활성화하는 방법과 반응형 UI, 웹 전용 기능을 활용하는 방법을 알아보겠습니다.

---

1. Flutter 웹(Web) 지원 개요

Flutter 웹은 HTML, CSS, JavaScript로 컴파일되어 브라우저에서 실행됩니다. 웹 지원을 활용하면 기존 Flutter 앱을 웹으로 확장할 수 있으며, 다음과 같은 이점을 얻을 수 있습니다.

• 모바일과 웹을 하나의 코드베이스로 관리 가능
• 빠른 성능과 네이티브 같은 UI 제공
• Progressive Web App(PWA)로 변환 가능

하지만 Flutter 웹은 네이티브 앱과 차이가 있어 몇 가지 고려해야 할 사항이 있습니다.

• 브라우저의 성능 제한(특히 애니메이션 및 렌더링)
• 파일 시스템 및 일부 플러그인의 제한
• 마우스 및 키보드 입력 최적화 필요

다음 섹션에서는 Flutter 웹을 활성화하고 실행하는 방법을 설명하겠습니다.

---

2. Flutter 웹 활성화 및 실행

(1) Flutter 웹 지원 활성화

Flutter는 기본적으로 웹을 지원하지만, 웹 프로젝트를 처음 시작하는 경우 다음 명령어를 실행하여 웹 지원을 활성화할 수 있습니다.

flutter config --enable-web

이제 Flutter 프로젝트를 웹에서 실행할 수 있도록 설정되었습니다.

(2) 웹 빌드 및 실행

Flutter 앱을 웹 브라우저에서 실행하려면 다음 명령어를 사용합니다.

flutter run -d chrome

이 명령어를 실행하면 http://localhost:8000과 같은 URL에서 앱을 실행할 수 있습니다.

(3) 웹용 최적화 빌드

Flutter 웹을 배포하려면 최적화된 빌드를 생성해야 합니다.

flutter build web

이 명령어를 실행하면 build/web 폴더가 생성되며, 이 폴더를 웹 서버에 업로드하여 배포할 수 있습니다.

---

3. 반응형 웹 UI 구현

Flutter 웹에서는 다양한 화면 크기에 대응하기 위해 반응형 UI를 구현해야 합니다. MediaQuery와 LayoutBuilder를 사용하여 웹 브라우저에서도 최적화된 UI를 제공할 수 있습니다.

(1) MediaQuery를 활용한 반응형 UI

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveScreen(),
    );
  }
}

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text('반응형 웹 UI')),
      body: Center(
        child: Text(
          '화면 너비: ${screenWidth.toStringAsFixed(2)} px',
          style: TextStyle(fontSize: screenWidth * 0.02),
        ),
      ),
    );
  }
}

위 코드에서는 화면 크기에 따라 텍스트 크기가 자동으로 조정됩니다.

(2) LayoutBuilder를 활용한 다중 레이아웃 지원

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveLayout(),
    );
  }
}

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('반응형 웹 레이아웃')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 800) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(width: 200, height: 200, color: Colors.blue),
                SizedBox(width: 20),
                Container(width: 200, height: 200, color: Colors.red),
              ],
            );
          } else {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(width: 200, height: 200, color: Colors.blue),
                SizedBox(height: 20),
                Container(width: 200, height: 200, color: Colors.red),
              ],
            );
          }
        },
      ),
    );
  }
}

화면 크기에 따라 Row 또는 Column 레이아웃을 적용하여 반응형 UI를 구현할 수 있습니다.

---

4. 웹 전용 기능 활용

(1) URL 기반 라우팅

Flutter 웹에서는 go_router 패키지를 사용하여 URL 기반 네비게이션을 구현할 수 있습니다.

flutter pub add go_router

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: GoRouter(
        routes: [
          GoRoute(path: '/', builder: (context, state) => HomeScreen()),
          GoRoute(path: '/about', builder: (context, state) => AboutScreen()),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('홈')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/about'),
          child: Text('소개 페이지로 이동'),
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('소개')),
      body: Center(child: Text('소개 페이지')),
    );
  }
}

위 코드에서는 go_router를 활용하여 웹 브라우저에서 URL을 기반으로 네비게이션을 구현했습니다.

---

결론

Flutter 웹 지원을 활용하면 모바일과 웹을 하나의 코드베이스로 관리할 수 있습니다. 반응형 UI와 웹 전용 기능을 적용하면 보다 최적화된 웹 앱을 만들 수 있습니다.

이제 Flutter 웹을 활용하여 더욱 다양한 플랫폼에서 앱을 제공해 보세요!