Flutter 로 웹툰 앱 만들기 (1)

조미서·2023년 10월 2일

이 글은 노마드 코더 - Flutter 로 웹툰 앱 만들기를 참고하여 작성하였습니다.
작성자 : 조미서
개발 환경 : Mac OS, Android Studio, Visual Studio Code

🧑🏻‍💻#1 INTRODUCTION

#1.0 Introduction

Flutter는 처음에 iOS와 안드로이드로만 개발되게끔 출시되었다.
근래에 도입된 Flutter의 멀티플랫폼 지원은 굉장히 폭 넓어졌다. (웹 사이트 어플리케이션을 만들고, iOS 및 안드로이드 어플리케이션, 맥OS, 윈도우, 리눅스, 심지어 사물인터넷과 같은 임베디드 어플리케이션까지)

앞으로 만들어나갈 3개의 어플리케이션 소개
1. UI 어플리케이션 - Flutter로 어떻게 UI를 만들어 내는지에 대해 알아보고 Flutter 코드를 작성하면서 익숙해져 보고 최적의 개발 경험과 단축키 설정을 위해 Visual Studio Code를 어떻게 커스터마이징 하는지 배운다.
2. Pomodoro 어플리케이션 - Flutter 앱 내에서 어떻게 데이터와 상호작용 시킬 수 있는지 알아본다.
3. 웹툰 어플리케이션 - UI 제작과 함께 API를 통해 어떻게 동적인 데이터를 fetch 해올 수 있는지 알아본다. Navigation이나 애니메이션 등을 추가해 볼 것이고, 사용자의 핸드폰 내의 data storage에 대해 알아본다.

#1.1 Requirements

flutter는 dart 언어의 특성을 굉장히 많이 사용한다
-> Dart 시작하기를 수강하고 듣기를 추천

#1.2 Why Flutter

Flutter를 배우려면 단순히 Dart 언어랑 flutter 프레임워크에 대해 배우기만 하면 된다.

처음 Flutter는 단순 iOS나 안드로이드 어플리케이션을 만드는 크로스 플랫폼 프레임워크였다. -> 이후에 계속적으로 추가해 나가면서 웹/맥OS/윈도우/리눅스/임베디드 까지 범위를 넓혔다.

다양한 거대 브랜드들이 Flutter를 사용하고 있다! 참고

Wonderous - flutter가 뭘 할 수 있는지 알려주는 tutorial app

I/O Photo Booth - flutter로 개발한 웹 어플리케이션

FLOKK - 연락처 관리 앱

Flutter Plasma - 비디오가 아닌 플러터 코드로만 만든 데모 쇼

Google I/O Pinball - flutter로 만든 게임

#1.3 How. Flutter Works

네이티브 프레임워크가 동작하는 방식 - 버튼이나 test input 등 모든 요소들을 만들어달라고 운영체제에게 이야기하면 운영체제가 안드로이드 상의 버튼 혹은 iOS 상의 버튼을 만들어 줌 (직접적인 소통)

Flutter or Dart code가 동작하는 방식 - flutter에선 실제 iOS 혹은 안드로이드 버튼을 만들어내는 기능이 존재하지 않는다 (직접적인 소통 x) 대신에 c언어나 c++ 언어로 짜여진 엔진들을 사용하여 실제 어플리케이션의 UI를 렌더링 하는데 책임을 진다
flutter 혹은 Dart 코드를 작성하면 그 코드는 Flutter 프레임워크 상에서 이용이 된다 (Flutter 프레임워크는 애니메이션, Painting, Gestures 등 여러 가지 요소를 포함)

flutter는 내 운영체제에 내장된 플랫폼을 widget을 사용하지 않는다!
엔진이 모든 것을 그려주기 때문에!! (운영체제는 엔진만 돌릴 뿐 결국 엔진이 프레임워크를 동작시키고 그려주는 모든 역할을 수행함)

flutter 사용할 때 발생하는 문제점 중 하나 - 네이티브 위젯을 사용하지 않음
-> iOS와 똑같은 스타일의 위젯이나 요소들을 구현하는 데 한계가 있음

하지만 어플리케이션의 호스트에 의존할 필요가 없다 - iOS나 안드로이드 플랫폼에 의존할 필요가 없어 화면 상의 픽셀을 통해 무엇이든지 가능한 자율성이 높아짐 (렌더링 엔진에 의해 그려지기 때문에) 그리고 이것이 어플리케이션이 다양한 기기 상에서 똑같이 보일 수 있는 이유이다

결국 Flutter가 하는 건 단순히 엔진을 어플리케이션 내부에 집어넣고 우리가 짠 Dart 코드를 컴파일 한 후 유저가 (맥OS, 윈도우, iOS, 안드로이드) 어플리케이션을 실행시킬 때 엔진을 가동 시키는 runner 프로젝트를 실행시킨다. 그 이후에 엔진이 모든 UI를 프레임워크와 함께 그려준다.

Embedder의 역할은 호스트 플랫폼 상에서 엔진을 가동하는 역할을 한다.

#1.4 Flutter vs React Native

네이티브 앱 운영체제 상에서 가능한 위젯을 사용하고 싶을 때는 React Native로 만드는 것을 추천 (React Native에서는 버튼을 하나 만들면 iOS와 안드로이드에서 서로 다르게 보인다)

아주 세밀한 디자인 요구사항이 들어가 있고 요소들이나 애니메이션들을 전부 커스터마이징해야 한다면 Flutter 사용

#1.5 Recap

Flutter가 작동하는 방식은 비디오 게임 엔진과 유사하다.
운영체제는 렌더링과 같은 동작은 아무것도 하지 않음
대신에 Flutter 엔진이 UI를 그려주는 역할을 함 (다양한 플랫폼에서도 동작 가능한 하나의 어플리케이션을 만들 수 있는 이유)
또한 이로 인해 화면 상의 모든 픽셀들을 자유자재로 다룰 수 있다.

React Native는 자바스크립트를 이용하여 운영체제와 소통하고 해당 운영체제가 가지고 있는 컴포넌트처럼 똑같이 운영체제로 하여금 컴포넌트를 렌더링 한다.

자신만의 버튼, Navigation 바, input, 카드 등 모든 것 직접 만드는 등 아주 세밀하고 커스터마이징이 많이 들어간 디자인의 경우 Flutter 사용이 좋다.

React Native는 호스트 플랫폼 디자인을 가지고 만들고 싶을 때 사용하는 것이 좋다.

🧑🏻‍💻#2 HELLO FLUTTER

#2.0 Installation

플러터 설치하기
이미 끝냈으므로 넘어감

#2.1 Dart Pad

Flutter를 컴퓨터에 설치할 수 없거나, 안 하고 싶지만 Flutter를 사용해 보고 싶을 때 온라인에서 Dart 코드를 실행할 수 있게 해주는 Dart Pad를 실행하면 된다.

하지만 Dart pad는 다른 파일을 만들지 못하므로 모든 코드가 한 파일에 있어야 한다.

#2.2 Running Flutter

터미널에서 원하는 경로로 이동하고 flutter create dklsj(원하는 이름)을 입력하면 flutter와 관련한 것들이 실행된다

다음으로 새로 만든 파일로 이동 후 cd dklsj
vscode를 실행해 준다. code .

vscode에서 flutter를 실행(제공되는 모든 개발자 도구를 활용하기 위해)
하기 전 미리 dart extension과 flutter extension을 설치!

다양한 폴더 중에

lib 폴더 -> main.dart 존재
linux 폴더 -> 데스크탑 앱을 만들 때 필요한 설정 파일들 존재
macos 폴더 -> macOS 앱 개발을 위한 설정 파일들 존재
android 폴더 -> 안드로이드 앱 개발을 위한 설정 파일들 (Android Studio 프로젝트도 존재)
이 중 우리가 중점적으로 다룰 것은 main.dart 파일

main.dart 파일에 있는 부분 중 색상 부분을 수정하고 run 시켜 시뮬레이터가 잘 작동되는지 확인하기

#2.3 Hello World

import 'package:flutter/material.dart';

void main() {
	runApp(App());	// runApp 함수는 package~material에서 import 된 것
}

위 코드에서 시작

runApp 함수는 void 함수이므로 아무것도 return 하지 않는다. 그리고 하나의 argument를 필요로 하는데, Widget이라는 타입을 필요로 한다.

void runApp(Widget app)

Widget은 레고 블럭을 조립하는 것과 같이 여러 Widget들을 합치는 방식으로 앱을 만든다.
Widget 참조 - flutter Widget catalog

Widget을 만든다는 건 단순히 class를 만드는 것이다!

class를 Widget으로 만들기 위해선 flutter SDK에 있는 3개의 core Widget 중에 하나를 extend(상속) 받아야 한다.

그중 우리는 StatelessWidget을 상속받는 데, 이것은 build라고 불리는 메소드를 구현해야만 한다. (*모든 Widget은 build 메소드를 구현해야 한다)

build 메소드는 Widget의 UI를 만든다

import 'package:flutter/material.dart';

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

class App extends StatelessWidget{	// 앱의 root

  @override		// 부모 class에 이미 있는 메소드를 override
  Widget build(BuildContext context) {		// Widget 리턴
    return MaterialApp(				// CupertinoApp을 리턴할 수도 있다
      home : Scaffold(
      	body : Text('Hello world!'), 				// MaterialApp class의 property
        ),
    );		
  }

}

앱의 root Widget은 두 개의 옵션 중 하나를 return 해야 함
(이것은 우리가 어떤 family 스타일을 사용할지 flutter에게 말해준다.)

material 앱을 return 한다
cupertino 앱을 return 한다
material과 cupertino는 각각 구글과 애플의 디자인 시스템

scaffold - 화면의 구조를 제공

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
        ),
        body: Center(
          child: Text('Hello world'),
       ),
      ),
    );
  }
}

출력:

#2.4 Recap

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello flutter!'),
        ),
        body: Center(
          child: Text('Hello world'),
       ),
      ),
    );
  }
}

위 코드에서 App은 그냥 일반 class였는데 이것을 Widget으로 바꾸기 위해서 flutter의 core Widget 중 하나인 StatelessWidget을 상속받음
Widget이 된다는 것은 build 메소드를 구현해야 할 의무가 생김
build 메소드는 또 다른 Widget을 return 해야 한다

그렇게 만든 App Widget은 앱이 시작할 때 뜨는 첫 번째 Widget이기 때문에 앱의 root라고 할 수 있다 root에서 우리는 Material 디자인과 iOS 디자인 중에 하나를 선택해야 하는 결정을 해야 한다. -> App Widget의 build 메소드가 Material App Widget을 return 함

home은 Widget을 return 하는 property이다. home 안에 또 다른 Widget(Scaffold)를 넣어준다.

Scaffold는 화면의 구성 및 구조에 관한 것들(ex. appBar, body)을 가지고 있는 Widget이다. appBar에 또 다른 Widget AppBar 사용
AppBar에도 다양한 옵션들이 있다 (ex. title, backgroundColor, centerTitle, elevation)

body는 navigation bar 아래 있는 부분 전부를 말한다. body 안에 또 다른 Widget을 사용한다.
-> Center Widget - child를 가운데 정렬해 주는 Widget을 만들어준다.

이 모든 Widget들이 결국 dart class를 사용하고 있다는 것을 이해해야 한다.

#2.5 Classes Recap

flutter는 객체지향 프레임워크 (거의 모든 게 class)
Widget은 class이다.
flutter에서 어떤 Widget이던지 마우스를 갖다 대면 constructor를 볼 수 있다.

Widget을 사용할 때마다 class를 인스턴스화하고 있다는 것을 알아야 한다
dart는 class를 만들 때마다 new 키워드를 붙이지 않아도 된다.

클래스 정리 클래스 부분을 다시 읽고 복습해 보자

조미서

이전 포스트

다트의 시작 (2)

다음 포스트