플러터로 만든 Webapp과 Website, 구분하기 쉽지 않죠? 완벽한 가이드와 실습 예제

웹 개발자라면 누구나 웹사이트와 웹앱을 구분할 줄 알아야 합니다.

하지만 플러터가 등장하면서 두 가지의 경계가 다소 모호해졌습니다.

이 블로그 게시물에서는 플러터를 사용하여 웹사이트와 웹앱을 구축하는 방법을 비교하고 대조하며, 언제 어떤 것을 선택해야 하는지 명확하게 안내해 드리겠습니다.

1. 웹사이트 vs 웹앱: 기본 개념 정리

 

웹사이트는 일반적으로 웹 브라우저를 통해 접근하는 정적 또는 동적 콘텐츠 페이지들의 모임입니다.

정보 제공, 온라인 쇼핑 또는 단순히 온라인 존재를 나타내는 데 사용됩니다.

웹앱은 웹 브라우저에서 실행되는 응용 프로그램이지만, 일반적인 웹사이트보다 더 많은 기능과 상호 작용을 제공합니다.

웹앱은 모바일 기기에서 사용하기 위해 최적화될 수 있으며, 오프라인 기능, 알림, 위치 서비스 등과 같은 네이티브 모바일 기능에 액세스할 수 있습니다.

 

핵심 차이점 요약

구분웹사이트웹앱

 

목적	정보 제공, 온라인 쇼핑, 온라인 존재 구축	기능 제공, 사용자 상호 작용
기능	제한적	다양하고 풍부
오프라인 기능	없음	있을 수 있음
네이티브 기능	없음	모바일 기기에서 사용 가능
설치	필요 없음	필요할 수 있음

2. 플러터로 웹사이트 구축

 

플러터는 웹사이트 개발을 위한 강력한 도구입니다. 다음은 플러터로 웹사이트를 구축하는 장점과 단점입니다.

 

장점

• 단일 코드베이스: 웹, 모바일, 데스크톱 앱을 위한 단일 코드베이스로 개발 가능
• 뛰어난 성능: Dart 언어와 Skia 렌더링 엔진으로 인해 빠른 성능 제공
• 풍부한 위젯: 다양한 UI 위젯 제공으로 빠르고 쉽게 UI 구축 가능
• 핫 리로드: 코드 변경 후 빠른 실시간 미리보기 제공

단점

• SEO 최적화 어려움: 일부 SEO 기능 지원 불가능
• 백엔드 통합 복잡: 백엔드 시스템과의 통합이 다소 복잡할 수 있음
• 커뮤니티 규모 상대적으로 작음: 다른 웹 개발 프레임워크 대비 커뮤니티 규모가 작음

3. 플러터로 웹 개발 준비

 

플러터로 웹 프로젝트를 시작하려면 다음 단계를 따르세요.

 

3.1. 플러터 설치: 플러터 SDK를 설치합니다. 공식 설치 가이드를 참고하세요.

 

3.2. 플러터 웹 프로젝트 생성

flutter create my_web_project
cd my_web_project

 

3.3. 웹 지원 활성화

flutter config --enable-web

 

3.4.웹 빌드 확인

flutter devices

 

3. 웹사이트 개발 예제

 

이제 간단한 웹사이트를 만들어보겠습니다. 웹사이트는 주로 정보 제공 목적이므로, 정적인 페이지를 구성합니다.

main.dart

import 'package:flutter/material.dart';

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

class MyWebsite extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome to My Website'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is a simple website built with Flutter.',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Text(
              'Enjoy exploring!',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

 

4. 웹앱 개발 예제

 

이제 사용자와 상호작용이 많은 웹앱을 만들어보겠습니다.

간단한 To-Do 리스트 앱을 예제로 사용합니다.

main.dart

import 'package:flutter/material.dart';

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

class MyWebApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do List Web App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToDoListPage(),
    );
  }
}

class ToDoListPage extends StatefulWidget {
  @override
  _ToDoListPageState createState() => _ToDoListPageState();
}

class _ToDoListPageState extends State<ToDoListPage> {
  final List<String> _todos = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    setState(() {
      _todos.add(_controller.text);
      _controller.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('To-Do List'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Add a task',
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _addTodo,
              child: Text('Add'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _todos.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_todos[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

5. 웹사이트와 웹앱 배포

 

플러터로 개발한 웹사이트와 웹앱을 배포하기 위해서는 flutter build web 명령을 사용합니다.

flutter build web

build/web 디렉토리에 생성된 파일들을 웹 서버에 배포하면 됩니다.

 

6. 결론

 

플러터를 이용하면 웹사이트와 웹앱 모두 쉽게 개발할 수 있습니다. 이 가이드에서는 간단한 웹사이트와 웹앱을 예제로 살펴보았습니다. 플러터의 강력한 UI 구성 요소와 도구들을 활용하여 더 복잡하고 매력적인 웹 애플리케이션을 개발해보세요.