Flutter 3화 - UI 기초(클래스, 객체, 속성, Text)

비전공자들도 쉽게 Flutter를 통해 UI를 학습할 수 있도록 최대한 쉽게 설명해보겠습니다.

1. 클래스, 객체

1-1. 예시를 통해 클래스 알아보기

클래스를 설명할 때 가장 흔히 쓰는 비유는 "설계도"입니다. 예를 들어, 여러분이 자동차를 만든다고 상상해봅시다. 자동차를 만들기 위해서는 먼저 자동차가 어떻게 생겼고, 어떤 기능을 가지고 있는지에 대한 설계도가 필요하겠죠?

예를 들어, 자동차라는 클래스를 만들어 보겠습니다. 이 클래스는 자동차의 특징(속성)과 기능(메서드)을 정의합니다.

class Car {
  String color; // 색깔
  int speed; // 속도

  // 자동차가 가속하는 기능
  void accelerate() {
    speed += 10;
    print('속도가 $speed km/h로 증가했습니다.');
  }
}

color와 speed는 자동차의 속성입니다. 자동차가 어떤 색깔인지, 얼마나 빠르게 달리는지를 나타냅니다. 속성에 대해서는 이후에 더 자세히 알아보겠습니다.

accelerate()는 자동차의 기능(메서드)입니다. 자동차가 가속할 때 어떻게 해야 하는지를 정의합니다.

이 설계도를 바탕으로 만들어진 물건들을 바로 객체라고 합니다.

1-2. 객체는 왜 필요할까요? (객체 지향 프로그래밍)

객체를 사용하는 이유는 프로그램을 더 쉽게 만들고 관리하기 위해서입니다.

이해할 수 있게 간단한 예시를 들어보겠습니다.

여러분이 큰 마을을 건설하는 프로젝트를 맡고 있다고 가정해 봅시다. 이 마을에는 여러 종류의 건물들이 필요하겠죠? 예를 들어, 집, 상점, 학교, 병원 등이 있을 것입니다.

1. 조직화

각각의 건물을 만들 때마다 건물의 설계도를 새로 만드는 건 비효율적이겠죠? 대신, 집, 상점, 학교, 병원 같은 설계도(클래스)를 만들어 놓고, 그 설계도를 바탕으로 건물을 하나씩 지어 나가면 훨씬 더 효율적입니다. 이렇게 하면 건물을 만들 때 필요한 속성(예: 색깔, 크기)이나 기능(예: 문 열기, 전등 켜기)을 미리 정의해 둘 수 있어서 코드가 훨씬 체계적이게 됩니다.

2. 재사용

이제 집을 한 채 지어봤다고 합시다. 이 집을 조금만 수정해서 다른 크기나 색깔의 집을 여러 채 더 지을 수 있겠죠? 이게 바로 객체를 재사용할 수 있는 장점이에요. 클래스를 한 번 정의해 놓으면, 그 클래스를 바탕으로 여러 객체(집)를 만들 수 있습니다. 이렇게 하면 같은 코드를 반복해서 쓰지 않아도 되죠.

3. 유지보수

마을의 모든 집에서 창문 크기를 바꾸고 싶다고 가정해봅시다. 만약 각 집이 따로따로 만들어졌다면, 각각의 집마다 일일이 수정을 해야 합니다. 하지만, 클래스를 사용했다면, 클래스 설계도(예: House 클래스)에서 한 번만 수정하면 됩니다. 그러면 그 클래스를 기반으로 만들어진 모든 집 객체가 자동으로 수정됩니다. 이렇게 하면 유지보수가 훨씬 쉬워집니다.

이와 같은 객체의 장점들을 살려 프로그래밍을 하는 것을 객체 지향 프로그래밍(OOP)라고 합니다.

2. 속성

Flutter에서 "속성"이란, 쉽게 말해 어떤 물건(위젯)이 가진 특징이나 설정이라고 생각하면 됩니다.

만약에 여러분이 스마트폰 앱을 만든다고 상상해봅시다. 이 앱에는 여러 가지 버튼, 텍스트, 이미지 등이 있을 것입니다. 여기서 각 버튼이나 텍스트, 이미지는 모두 "위젯"이라고 불리는 작은 조각들로 이루어져 있습니다.

이제, 각 위젯이 어떤 모습을 가질지 정해야 합니다.

텍스트: 어떤 글자를 보여줄지, 글자의 크기나 색깔은 무엇인지.

버튼: 버튼의 색깔, 크기, 누르면 어떻게 반응할지.

이때, 텍스트의 크기나 버튼의 색깔 같은 것들이 바로 "속성"입니다. 속성을 통해 위젯이 어떻게 보여야 할지, 어떻게 행동해야 할지를 정할 수 있습니다.

만약에 화면에 "안녕하세요!"라는 글자를 보여주고 싶다면, 아래와 같은 코드로 작성할 수 있습니다.

Text(
  '안녕하세요!', // 이 텍스트가 화면에 보이게 됩니다.
  style: TextStyle(
    fontSize: 24, // 글자의 크기를 24로 설정
    color: Colors.blue, // 글자의 색깔을 파란색으로 설정
  ),
)

코드 이해하기

위 코드를 설명해보겠습니다.

fontSize: 24는 글자의 크기를 24로 설정하는 속성입니다.

color: Colors.blue는 글자의 색깔을 파란색으로 설정하는 속성입니다.

이 속성들이 모여서 "안녕하세요!"라는 글자가 어떻게 화면에 나타날지를 결정하게 됩니다.

한마디로 "속성"은 앱의 각 부분이 어떻게 보여야 하고, 어떻게 작동해야 하는지를 설정하는 방법이라고 생각하면 됩니다. 이걸 이용해서 여러분은 앱의 모양과 느낌을 원하는 대로 바꿀 수 있습니다!

3. Hello, World! 출력 예제

Dart 코드 구조 이해하기

Flutter 앱의 진입점은 main.dart 파일입니다. 이 파일에는 앱의 구조와 UI를 정의하는 코드를 작성합니다.

main() 함수는 Dart 프로그램의 시작 지점입니다. 여기서 runApp() 함수를 호출하여 Flutter 앱을 실행합니다.

아래는 runApp() 함수 내에 간단한 텍스트("Hello, world!")를 포함시키고, F5를 눌러 Flutter 앱을 실행시키면 해당 텍스트("Hello, world!")를 출력하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

실행 결과 이해하기

예제 코드 분석

import 'package:flutter/material.dart';
Flutter의 기본 위젯과 Material Design을 사용하기 위해 필요한 라이브러리를 가져옵니다.

main() 함수
Flutter 앱의 진입점입니다. 이 함수에서 runApp()을 호출하여 앱을 실행합니다.

runApp()
이 함수는 위젯을 인수로 받아 앱을 실행하고, 그 위젯을 화면에 렌더링합니다.

Center 위젯
자식 위젯을 화면의 중앙에 배치합니다.

Text 위젯
화면에 텍스트를 표시합니다. 여기서는 'Hello, world!'라는 텍스트를 나타냅니다.

textDirectionTextDirection.ltr
텍스트의 방향을 왼쪽에서 오른쪽(ltr)으로 설정합니다. 이 설정은 Flutter에서 텍스트가 올바르게 렌더링되도록 보장합니다.

4. 글자 꾸미기 예제(TextStyle)

1번 출력 예제에서 style을 추가해보겠습니다. 폰트 사이즈(fontSize)와 글자 색상(color)를 설정하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 24, // 텍스트 크기를 24로 설정
          color: Colors.blue, // 텍스트 색상을 파란색으로 설정
        ),
      ),
    ),
  );
}

 

실행 결과 이해하기

예제 코드 분석

첫번째로, TextStyle 클래스 객체를 생성합니다.

TextStyle(fontSize: 24, color: Colors.blue,)

두번째로, Text 클래스 객체 내의 속성 값으로 TextStyle 객체를 전달합니다.

Text('Hello, world!', textDirection: TextDirection.ltr,
  style: TextStyle(
    fontSize: 24, // 텍스트 크기를 24로 설정
    color: Colors.blue, // 텍스트 색상을 파란색으로 설정
  ),
)

만약 클래스의 다양한 속성을 확인하고 싶다면?

VSCode에서는 Extensions를 통해 코드를 보기 좋게 꾸미고, 마우스 커서를 위에 놓으면(hovering) 설명을 표시합니다.

클래스 위에 커서를 놓고 잠시 기다리면, 해당 클래스의 속성들과 설명을 확인할 수 있습니다.
아래는 Text 클래스 위에 마우스를 놓은 예시입니다.