[flutter] 플러터(Flutter)에서 웹(Web) 지원하기

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, iOS와 Android에 뛰어난 성능과 높은 품질의 애플리케이션을 배포할 수 있습니다. 하지만, 오직 iOS와 Android만을 지원하는 것은 개발자들에게 제한적일 수 있습니다. 따라서, 플러터에서 웹(Web)을 지원하는 방법을 알아보도록 하겠습니다.

Flutter 웹 지원 활성화

현재, 플러터의 웹 지원은 실험적인 단계에 있습니다. 따라서, 웹 지원을 활성화하기 위해서는 몇 가지 추가 설정 작업이 필요합니다.

  1. 최신 버전의 플러터 SDK 설치
    $ flutter channel dev
    $ flutter upgrade
    
  2. 웹 지원 활성화
    $ flutter config --enable-web
    
  3. 웹용 프로젝트 생성
    $ flutter create mywebproject
    

위의 단계를 완료하면, 플러터 프로젝트에서 웹을 포함한 다양한 플랫폼을 지원할 수 있게 됩니다.

웹용 애플리케이션 개발

웹용 플러터 애플리케이션을 개발하기 위해서는 몇 가지 주요 사항을 알아야 합니다.

1. 웹용 화면 구성

플러터는 크로스 플랫폼 프레임워크로, 웹용 애플리케이션의 화면을 구성하기 위해서는 자바스크립트나 HTML을 사용하지 않고도 플러터의 위젯을 활용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyWebApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('플러터 웹 앱'),
        ),
        body: Center(
          child: Text('안녕하세요!'),
        ),
      ),
    );
  }
}

위의 예시에서는 MyWebApp 클래스를 정의하여 MaterialApp을 이용해 웹 앱 화면을 구성하였습니다. 화면의 제목과 본문은 AppBarText 위젯을 사용하여 생성합니다.

2. 웹 호스팅

웹용 플러터 애플리케이션을 호스팅하기 위해서는 정적 파일 서버가 필요합니다. 따라서, 애플리케이션을 웹 호스팅에 배포해야 합니다. Firebase 호스팅을 사용하거나, GitHub Pages와 같은 서비스를 이용하여 배포할 수 있습니다.

웹용 플러터 애플리케이션 빌드 및 배포

플러터로 개발된 웹 애플리케이션은 정적 웹 애플리케이션으로 빌드됩니다. 따라서, 웹 애플리케이션을 빌드하고 배포하기 위해서는 몇 가지 추가적인 단계가 필요합니다.

  1. 웹 애플리케이션 빌드
    $ flutter build web
    
  2. 빌드된 앱 배포 빌드된 웹 애플리케이션은 build/web 디렉토리에 생성됩니다. 해당 디렉토리의 파일을 호스팅 서버에 업로드하면 웹 애플리케이션이 배포됩니다.

결론

플러터에서 웹을 지원하기 위해서는 웹 지원을 활성화하고 웹용 프로젝트를 생성해야 합니다. 화면은 플러터의 위젯을 이용하여 구성할 수 있으며, 호스팅을 통해 웹 애플리케이션을 배포할 수 있습니다. 플러터의 웹 지원은 현재 실험적인 단계이지만, 앞으로 더 발전하여 더 많은 플랫폼을 지원할 것으로 기대됩니다.

참고 자료