ram2 🚗

🔗  출처 링크

https://www.technologyreview.kr/ai-reinvents-the-metaverse-world/

📆  발행일 : 2021-11-18

💻  요약

💡 생각 정리

평소 메타버스에 관심이 많이 있었는데, AI가 메타버스를 현실화 시킬 수 있음을 확인하게 되었다.

AI와 메타버스가 과연 어떻게 관련이 있으며, 이를 통해 어떤 결과가 나타날 수 있는지 궁금증을 가지고 있었는데, 두 분야는 꽤나 밀접한 관련이 있음을 알게 되었다. 

앞으로 두 분야가 융합하여 메타버스를 실현하기 위한 과정과 필요한 것들은 무엇이 있는지를 경험을 통해 확인하고 싶다.

🚨 이슈

책을 따라하다 보니, 버전이 맞지 않아서 그렇구나 하고 넘어갔던 부분 중, 그래서는 안되는 부분이 있었다.

책에서 storyboard를 언급하고, 이를 사용하는데, 생각보다 중요한 역할을 하고 있었다.

이 부분은 처음 프로젝트를 생성할 때, User interface 설정을 'SwiftUI''가 아닌, 'Storyboard'로 설정해야 했다.

그렇게 하니, 이름은 조금 다르지만, storyboard를 사용할 수 있었다 !

💻 문법 정리

아웃렛 변수 (Outlet Variable)

객체에 대한 속성을 지정할 때 연결

@IBOutlet weak var lblHello: UILabel!

@IBOutlet : @IBOutlet으로 정의된 변수를 아울렛 변수라고 부른다.

• IB는 Interface Builder의 약자이며, @IB로 시작되는 변수나 함수는 인터페이스 빌더와 관련된 변수나 함수라는 것을 의미.
• @IBOutlet은 객체를 소스 코드에서 참조하기 위해 사용하는 키워드.
• 주로 색상, 크기, 모양, 선의 두께, 텍스트 내용 등 객체의 속성 제어에 사용됨.

var lblHello : 변수를 선언할 때 var 키워드 사용. 그 뒤에 변수 이름을 지정하여 선언한다.

UILabel! : 선언하고자 하는 변수 타입을 나타냄.

• 위 코드에서는 레이블 객체에 대한 변수를 선언하므로 UILabel 클래스 타입 선택. (UI=User Interface)

strong / weak : 아웃렛 변수를 추가할 때 나타나는 팝업 창의 'Storage' 에서 선택할 수 있음.

• 메모리 회수 정책을 나타내는 키워드
• 일반적으로 객체를 참조하기 위한 아웃렛 변수는 strong 사용. (default)
• weak는 변수 정의 앞에 추가된다.
• strong으로 선언된 변수는 다른 곳에서 참조하고 있는 경우, 메모리에서 제거되지 않지만, weak는 다른 곳에서 참조하고 있더라도 시스템이 임의적으로 메모리에서 제거할 수 있음.
• 메모리 관리 이슈 때문에 두 가지 정책을 사용.
  • strong으로 선언된 변수끼리 상호 참조하는 일이 생길 경우, 앱이 종료되기 전까지 메모리에서 제거되지 않기 때문에 메모리 누수 발생.
  • 이런 경우, 둘 중 하나를 weak로 지정하면, 시스템에서 임의 제거가 가능하므로 상호 참조할 때도 사용하지 않는 경우에는 메모리 삭제될 수 있음.

액션 함수 (Action Function)

객체에 이벤트를 넣고 싶을 때 연결

@IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }

@IBAction : @IBAction으로 정의된 함수를 액션 함수라고 부른다.

• 객체의 이벤트를 제어하기 위한 키워드 이다.
• 버튼을 누르거나, 피커가 선택되는 등 특정 객체에서 원하는 이벤트가 발생했을 때 정해진 작업을 실행하기 위해 사용.

func btnSend : 함수를 선언할 때 func 키워드를 사용해서 선언한다.

(_ sender: UIButton) : 액션 함수가 실행되도록 이벤트를 보내는 객체. 

• 여기에서는 버튼 객체에서 이벤트가 발생했을 때 해당 액션 함수를 실행시킬 것이므로 UIButton 클래스 타입 선택.

lblHello.text : 레이블 객체가 가지고 있는 속성 중 텍스트 내용을 의미하는 속성.

txtName.text! : 텍스트필드 객체가 갖고 있는 속성 중 텍스트 내용을 의미하는 속성.

• 끝에 붙는 !는 옵셔널 변수의 강제 언래핑을 의미
• 스터디에서는 !를 사용하지 말라고 했다...

📍 swift에서는 문장 끝에 ';' 새미콜론을 붙이지 않는다. 하지만 붙인다고 해서 에러가 나진 않는다 ^^

📍 상수와 변수, 함수, 메서드의 이름 지정 규칙은 다음과 같다.

• 숫자로 시작할 수 없음
• 예약어나 키워드로 등록된 단어는 이름으로 사용할 수 없음
• 이름에서 어떤 역할인지 알 수 있어야 함.
• 명사+동사 또는 전치사로 이루어진 단어를 연결해서 사용
• 클래스의 이름은 대문자로 시작
• 변수, 상수, 메서드는 소문자로 시작

이로써 첫째 마당 끝 !!

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var lblHello: UILabel!
    @IBOutlet weak var txtName: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    
    @IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hello, " + txtName.text!
    }
}

📱 결과

🍎 정리

swift를 하면서 가장 놀랐던 점 중 하나는, 변수와 함수를 추가하는 방식이었다.

Storyboard에서 객체를 끌어 코드 편집기로 연결하면, 자동으로 일부 코드가 생성된다.

또한 이름과 Connection, type을 지정할 수 있다는 것...

굉장히 신선하면서도 충격적이면서도 편리했다. 약간 재미있기도 했다..🫠

Swift에 대하여

swift는 ios, macOS, watchOS, tvOS의 앱 개발을 위한 프로그래밍 언어이다.

C와 Objective-C 개발과 비슷하게 느낄 수 있다.

swift는 C와 굉장히 비슷하다. 왜냐! C의 기본적인 type들을 제공하기 때문이다.

integers -> int
floating-point -> Double, Float
Boolean -> Bool
textual data -> String
Collection Types -> Array, Set, Dictionary

swift는 C처럼 변수를 사용하여 값을 저장한다. 여기에는 Constants가 있는데, swift에서의 constants는 c보다 더 강하다.

constants는 본래 값이 변하지 않는 변수로 이해하면 되는데, 이 constant 변수는 swift에서 코드를 더 안전하고 명확하게 해준다. 

Tuple은 value들을 그룹화 하여 전달, 생상할 수 있으며 여러 value들을 함수로부터 return 해야할 때 사용할 수 있다.

다음은 swift의 가장 강력한 powerful한 특징이다. 바로 Optional이다. 이는 값이 있으면 값을, 없다면 nil을 사용한다. 이 타입은 클래스 뿐 아니라 모든 유형에 대해 사용할 수 있다. 

swift는 type-safe 언어이다. 즉, 우리가 짠 코드에서 잘못된 타입을 사용하면 이에 대한 경고를 주어 인지하게 해준다. 

그 예로, 일반 String 변수에 optional string 변수를 사용할 때 오류를 발생시킨다.

Constants and Variables

Constant와 variable의 이름을 지을 때는 해당 값과 비슷하게 정하는 것지 좋다.

Constant(상수)는 일단 설정되면 변경할 수 없지만, Variable(변수)는 나중에 다른 값으로 설정할 수 있다.

Constants와 Variable을 사용하기 위해서는 사용 전에 선언 해야 한다. 상수와 변수는 각각 선언에 사용하는 키워드가 다르다.

정리하면 다음과 같다.

const -> let
variable -> var

변수 선언의 예를 보면 이러하다. (공식 문서에서 제시한 예시이다.)

let maximumNumberOfLoginAttempts = 10 // 최대값이 변경되지 않는다.
var currentLoginAttempt = 0 // 초기 값을 설정한다.
var x = 0.0, y = 0.0, z = 0.0 // 이렇게 한 줄에 구분해서 선언할 수 있다.

type annotations

상수나 변수를 선언할 때 type annotiation을 사용하여 어떤 유형의 값을 저장할 수 있는지 명확하게 할 수 있다.

다음과 같이 welcomMessage에 String 변수가 들어갈 수 있음을 지정하는 것이다. 여기에서 ':' 즉 콜론은 ~의 유형이다 라는 의미를 나타낸다.

var welcomeMessage: String // String value만 저장할 수 있다.

welcomeMessage = "Hello" // 다음과 같이 String 값을 에러 없이 저장할 수 있다.

var red, green, blue: Double // 이렇게 콤마로 구분하여 한 줄에 선언할 수 있다.

Naming Constants and Variables

이제 Step 6 !!!

지금까지 우리가 만든 앱은, next 버튼을 누르면 이전에 나왔던 단어를 볼 수 없었다.

그래서 이번 단계에서는 'Like' 버튼을 눌러, 원하는 단어를 기억해보려고 한다.

이번 목표는 다음 화면과 같다.

Add the business logic

MyAppState 에서 다음과 같이 코드를 수정해보자.

lib/main.dart

// ...

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  // ↓ Add the code below.
  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

// ...

• 지금 우리는 favorites 라고 불리는 property를 MyAppState에 추가한 것이다. 이 property는 빈 리스트 [] 로 초기화된다.
• 또한, generics를 사용하여 목록에 단어쌍인 <WordPair>[]만 포함할 수 있도록 지정한 것이다. 이는 우리 앱을 더 강력하게 만드는 데 도움을 주는데, Dart가 WordPair 이외의 것을 추가하려고 할 때 우리 앱을 실행하는 것조차 거부하기 때문이다. 
  즉, WordPair 이외의 것은 추가하지 못하도록 하는 것이다. 이렇게 하면, favorites 목록을 통해 우리가 원하는 개체(ex. null)가 숨겨질 수 없음을 알 수 있다.
  List 대신 Set을 사용해도 된다. Set은 []가 아닌, {}을 통해 표현한다.
• 또한, toggleFavorite() 메소드를 추가할 수 있는데, 이는 만약 favorites 리스트에 현재 단어가 있는 경우 이를 없애거나, 만약 리스트에 없다면 추가할 수 있다. 이 두 경우, 코드는 notifyListerners();를 호출해야 한다.

Add the button

이제 좋아요 버튼을 만들어서 'Next' 버튼 왼쪽에 만들어줄 것이다. 버튼을 Next 옆에 두기 위해서는 Row 위젯이 필요하다.

먼저 현재 존재하는 버튼을 Row로 감싼다.

MyHomePage의 build()메소드로 가서, ElevatedButton 위에 커서를 두고 Refactor 메뉴를 열어 Wrap with Row를 선택한다.

이를 저장하면, Column을 적용했을 때와 비슷하게 children이 왼쪽에 치우져진 것을 확인할 수 있다. (Column은 위로..!)

이를 우리가 원하는 모양으로 수정하기 위해서는 Column에서 한 것과 비슷하게 center를 맞춰주면 된다.

Row에서는 mainAxisAlignment를 통해 맞출 수 있다.

이를 적용한 코드이다.

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,   // ← Add this.
              children: [
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

다시 Row를 적용하기 전으로 돌아간 것을 볼 수 있다. 즉, 센터가 맞춰진 것을 확인할 수 있다.

이제, 우리는 Like button을 추가해서 이를 toggleFavorites()와 연결할 것이다.

이를 위해, 코드랩에서는 다음과 같이 직접 도전해보길 권장하고 있다.

모두 직접 한 번 해보길..!

• MyHomePage에 버튼을 추가한다.
• ElevatedButton.icon()을 사용한다.
• build 메소드의 가장 윗 부분에 word pair가 favorite으로 선택됐는지의 여부에 따라 적절한 icon을 선택한다.
• SizedBox를 사용해서 두 버튼 사이의 여백을 둔다.

코드랩에서 제공한 코드는 이러하다

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    // ↓ Add this.
    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [

                // ↓ And this.
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),

                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이렇게 하면, 다음과 같은 결과를 얻을 수 있다!!

이제 step 6이 끝났다!!!

다음 스텝에서는 우리가 좋아요 한 단어가 무엇인지를 보여주도록 할 예정 !!

전체 코드를 첨부한다 !

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton.icon(
                  onPressed: () {
                    appState.toggleFavorite();
                  },
                  icon: Icon(icon),
                  label: Text('Like'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    appState.getNext();
                  },
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다.

하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 word가 한 눈에 들어오지 않는다.

우리는 사용자가 느끼기에 조금 더 쉽게, 원하는 정보를 얻을 수 있도록 해야한다. 

그래서 이번 스텝에서는 이러한 시각적인 요소(디자인) 에 조금 신경을 써보려고 한다.

코드랩에서 제시한 다음 우리의 목표는 이 이미지와 같다.

Extract a widget

현재 우리 코드에서는 word pair를 다음과 같이 나타내고 있다.

Text(appState.current.asLowerCase)

이 코드를 조금 더 복잡하게 바꿔보려고 한다. 이 코드를 별도의 위젯으로 빼는 것이 좋다고 한다. 

이처럼 UI의 각 요소에 대해 별도의 위젯을 갖는 것은 Flutter에서 코드의 복잡성을 관리하는 중요한 방법이다. 

(+ 내 경험에 비추어보면, 이를 따로 위젯으로 빼서 만들어두면 나중에 또 쓰일 때 다시 코드를 짜거나, 이전 코드를 찾아 복붙하는 일을 하지 않아도 된다. 또한, 수정사항이 있을 때도 쉽게 찾아서 수정할 수 있다. 그래서 작은 단위로 위젯을 만드는 것을 추천한다 !!)

물론 Flutter에서는 위젯을 extract 하기 위한 도구가 있지만, 위젯을 사용하기 전에 extract되는코드가 필요한 것에만 접근하는지를 확인해야 한다. 우리 코드를 예로 보면, 현재 appState에 접속하지만, 우리가 원하는 정보는 현재 단어 쌍만 알면 되는 것이다.

그래서 이제  MyHomePage  위젯의 코드를 다음과 같이 바꿔보자..!!

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();  
    var pair = appState.current;                 // ← Add this.

    return Scaffold(
      body: Column(
        children: [
          Text('A random AWESOME idea:'),
          Text(pair.asLowerCase),                // ← Change to this.
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],      // ← 7
      ),
    );
  }
}

// ...

이제 Text 위젯은 더이상 appState를 언급하지 않아도 된다.

그리구, 이제 Refactor 메뉴를 통해 다음과 같이 위젯 extract를 해볼 것이다.

두 가지 방법이 있다.

1. refactor 하고 싶은 위젯에서 우클릭 -> Refactor 메뉴를 선택 -> "BigCard" 입력 -> 엔터

2. Move your cursor to the piece code you want to refactor (Text, in this case), and press Ctrl+. (Win/Linux) or Cmd+. (Mac). (나만 헷갈렸나.. Cmd랑 .을 같이 누르면 된다..!!!)

이후 방법은 위 영상을 따라하면 된다 ! 

이처럼 extract widget 하는 방법을 잘 따라했다면, 다음과 같은 클래스가 하나 생성됐음을 확인할 수 있다 !

// ...
class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    return Text(pair.asLowerCase);
  }
}
// ...

이제 이 refactoring을 통해 앱이 어떻게 작동하는지 확인해볼 것이다.

Add a Card

이제 우리가 목표라고 했던 그 화면을 기억 하는가...?

이 이미지를 보면 vastweb이 파란색 카드 안에 있는 것을 확인할 수 있다.

이제 카드를 만들어볼 것이다 !

아까 사용했던 refactor 메뉴를 이용할 것인데, 이번에는 extract 하지 않고, Wrap with Padding을 해볼 것이다.

위에서 언급한 두 가지 방법보다 내가 자주 사용하는 방법을 잠깐 언급해보려 한다.

refactor 메뉴를 불러오는 또 다른 방법은 vscode 좌측에 있는 전구 아이콘을 누르는 것이다.

이렇게 전구 아이콘 -> Wrap with Padding 을 선택하면, 자동으로 Padding이 위젯을 감싸는 것을 볼 수 있다.

그리고, Padding 크기를 8.0 -> 20 으로 바꿔준다.

이제, 위에서 만든 Padding 위젯을 Card 위젯으로 감싸줄 것이다. 즉, Padding 위젯의 상위 위젯으로 Card 위젯을 만드는 것이다.

padding 옆에 있는 전구 아이콘을 눌러서 (위에서 언급한 두 가지 방법을 사용해도 된다.) Wrap with widget...을 선택한다.

그리고, 만들어진 widget 텍스트를 지우고, Card를 입력한다. 그렇게 하면 빨간 줄도 사라질 것이다 !

중간점검을 해보자..!

여기까지 잘 따라 왔다면 다음과 같은 화면을 볼 수 있다.

Theme and style

이제 카드 색을 바꿔줄 건데, 일관된 색 구성을 유지하는 것이 좋기 때문에, 앱의 테마를 사용해서 색을 선택할 것이다.

main.dart에서 BigCard 클래스를 다음과 같이 수정한다.

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);         // ← Add this.

    return Card(
      color: theme.colorScheme.primary,    // ← And also this.
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(pair.asLowerCase),
      ),
    );
  }

// ...

이렇게 위에서 추가한 두 코드는 굉장히 많은 일을 한다.

• 먼저, 첫번째 코드는 앱의 현재 테마를 Theme.of(context)로 불러온다.
• 두 번째 코드는 테마의 colorScheme 속성과 동일하게 카드의 색상을 정의한다. 
  • 색 구성표는 많은 색을 포함하고 있으며, 기본 색은 앱의 primary color(앱을 정의하는)이다.

즉, 우리는 두 코드를 추가함으로써 MyApp 클래스에서 정의한 theme color를 불러온 것이다.

만약, 위의 seedColor를 바꾸면, 해당 카드의 색도 같이 바뀌게 된다.

이렇게 theme color를 사용하면, 앱의 전체적인 메인 색을 바꿔야 할 때, 그 색이 사용된 코드를 하나씩 찾지 않고, MyApp의 theme에서 색만 바꿔주면, 모두 바뀌게 된다.

TextTheme

지금까지 완성한 화면을 보면 이러하다.

하지만, 카드 안에 있는 글씨가 검은색이며, 크기가 너무 작아 읽기 힘들다.

이제 BigCard의 build() 메소드를 고쳐서 이러한 문제를 해결해볼 것이다.

다음과 같이 BigCard의 코드를 수정해보자

lib/main.dart

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    // ↓ Add this.
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),
        // ↓ Change this line.
        child: Text(pair.asLowerCase, style: style),
      ),
    );
  }

// ...

• theme.textTheme을 사용함으로써 app의 font theme에 접근할 수 있다. 이 클래스는 bodyMedium(medium size의 텍스트를 위한), caption(이미지를 위한), headlineLarge(large headlines를 위한)과 같은 속성들을 포함하고 있다.
• displayMedium property는 공식 문서에, "짧고 중요한 텍스트를 사용할 때" 라고 나와있다. 우리가 사용한 경우와 같다 !
• displayMedium 는 이론적으로 null이 될 수 있다. 하지만 Dart는 null-safe이기 때문에 null이 되도록 내버려두지 않는다.. 그래서, 이런 경우에는 ! 연산자를 사용해서 우리가 뭘 하고 싶은지 Dart가 알 수 있도록 해야 한다. 우리가 사용한 것은 이 경우에 해당하지 않는당..ㅎㅎ
• displayMedium 에 copyWith() 를 호출하면, 우리가 정의한 수정사항과 함께 텍스트 스타일의 복사본이 return 된다. 우리가 했던 경우를 살펴보면, 우리는 텍스트 색상만 변경한 것이다.
• 또 다른 새로운 색상을 얻고 싶다면, 앱의 테마에 다시 접근하면 된다. 

지금까지 한 결과이다..!!

후... step 5... 생각보다 길다.....

하지만...! 벌써 50%는 했으니.. 괜찮다....!!!!!!

계속 가보자구...

Improve accessibility

flutter는 기본적으로 앱에 엑세스 할 수 있다. 예를 들어서, flutter 앱은 앱의 모든 텍스트들을 올바르게 표시해서 TalkBack 및 VoiceOver와 같은 것들이 접근할 수 있다.

pair.asLowerCase보다는 upper camel case가 screen reader가 정확하게 단어를 인식하는 것에 도움이 될 수 있다.

자세한 부분은 코드랩을 보시길...... (절대 귀찮아서 생략하는게 맞습니다..ㅎㅎ)

그래서..! 결국 다음과 같이 코드를 수정해보자.

그러면, 이제 screen readers가 명확하게 각 단어 쌍들을 읽을 수 있다. (물론, UI에는 변화가 없을 것이다!)

// ...

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }

// ...

변화를 확인하고 싶다면, screen reader를 직접 사용해보시길...!!

Center the UI

이제..!! UI의 센터를 맞춰서 시각적인 불편함을 해소해 볼 것이다.

먼저, BigCard 는 Column의 부분임을 기억해야 한다. Column은 기본적으로 자식들을 top으로 한번에 두지면, 이를 쉽게 override 할 수 있다.

MyHomePage의 build() 메소드로 가서, 다음과 같이 바꿔보자..!

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,  // ← Add this.
        children: [
          Text('A random AWESOME idea:'),
          BigCard(pair: pair),
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

// ...

이렇게 하면, Column 안에 있는 children들이 main(vertical=수직) axis에 맞춰 center가 된 것을 확인할 수 있다.

사실 Column 안에 있는 children들은 이미 main axis 방향의 center가 맞춰져 있다. 즉, 가로 센터로 설정되어 있는데, 적용되지 않은 것처럼 보인다.

그 이유는, Column 자체가 센터가 아니기 때문이다. 그래서, Column의 센터를 맞춰주면 우리가 원하는 센터 위치로 둘 수 있다.

Column에서 전구 아이콘을 누르거나, cmd . 또는 ctrl . 을 눌러 Refactor menu를 열어준다.

Refactor menu -> Wrap with Center

그 결과, 화면의 센터에 위치한 결과를 확인할 수 있다 !!!

이제 조금 디테일적인 UI를 수정할 차례이다.

• 일단, 카드 위에 있는 "A random AWESOME idea:" 텍스트는 없애도 되므로 지워주겠다.
• 카드와 "Next" 버튼 사이에 여백이 있으면 더 좋을 것 같으므로, SizedBox 위젯을 사용해서 두 위젯 사이에 '공간'을 만들어준다

MyHomePage에서 다음과 같이 코드를 수정하면 된다.

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

// ...

이제, 다음과 같은 결과를 얻을 수 있다.

우리가 처음에 목표한 이미지와 일치하다 !!!!!

이렇게.. 길었던 step5가 끝났다..!!!

그저 보고 만들기만 했다면, 빨리 끝났을테지만, 이해하고, 이를 정리하다보니 굉장히 길게 느껴졌다...

그만 적고 싶은 순간도 많이 있었지만...!!!!

그래도 step 5 끝 !!

아참! 혹시 몰라 필요한 사람들을 위한 전체 코드...!!

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BigCard(pair: pair),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                appState.getNext();
              },
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    Key? key,
    required this.pair,
  }) : super(key: key);

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    var style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20),

        // ↓ Make the following change.
        child: Text(
          pair.asLowerCase,
          style: style,
          semanticsLabel: pair.asPascalCase,
        ),
      ),
    );
  }
}

// ...