[Flutter] Flutter 기초 #01 - UI 디자인 원리 & 선언적 UI 구성

#01 Flutter 기초 - UI 디자인 원리 & 선언적 UI 구성

목차

Ⅰ Flutter의 UI 디자인 원리

01. Flutter의 디자인 원리 핵심 개념

02. Flutter UI의 주요 특징

03. 위젯 트리 구조의 이해

04. Flutter 디자인 원리의 장점

Ⅱ Flutter의 선언적 UI 구성

01. 선언형 UI란?

02. 선언형 UI & 명령형 UI

03. Flutter가 선언형 UI를 채택한 이유

---

Ⅰ Flutter의 UI 디자인 원리

01. Flutter 디자인 원리의 핵심

• Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현
• Flutter에서는 ' 모든 것이 위젯이다' 라는 철학을 바탕으로 디자인이 이루어짐
• 버튼, 텍스트 이미지뿐만 아니라 레이아웃, 화면 구성 요소까지 모두 위젯 형태로 구현
• Flutter 앱 디자인은 여러 위젯을 적절한 위치에 배치하고, 동작과 스타일을 추가하는 것을 의미

---

02. Flutter UI의 주요 특징

특징	설명
모든 것이 위젯	Flutter에서는 UI 요소뿐만 아니라, 레이아웃과 동작도 위젯 형태
위젯의 계층 구조	위젯은 트리 형태의 계층 구조로 구성되며, 부모-자식 관계로 연결
상태 관리	Flutter는 위젯의 상태를 통해 UI를 동적으로 업데이트
반응형 디자인	Flutter의 위젯은 화면 크기와 해상도에 맞게 자동으로 조정

---

03. 위젯 트리 구조의 이해

위젯 트리란?

• Flutter는 위젯 트리(Widget tree)라는 계층 구조를 통해 UI를 랜더링
• 위젯 트리는 부모-자식 관계로 이루어지며, 부모 위젯이 자식 위젯을 포함하는 트리 형태의 구조

 

위젯 트리 구조 예시

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter App'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    ),
  );
}

 

위젯 트리 구조의 시각화

MaterialApp
 └── Scaffold
     ├── AppBar
     │    └── Text('Flutter App')
     └── Center
          └── Text('Hello, Flutter!')

---

04. Flutter 디자인 원리의 장점

• 재사용성
  • 위젯을 모듈화하여 여러 화면에서 재사용 할 수 있음
• 유연성
  • 모든 UI 요소를 위젯으로 처리하므로 커스터마이징이 쉬움
• 일관성
  • 동일한 UI 코드를 IOS와 Android에서 동일하게 사용 가능

---

Ⅱ Flutter의 선언적 UI 구성

01. 선언형 UI란?

선언형 UI

• 선언형 UI란 앱의 상태에 따라 UI를 설명하고 빌드하는 방식
• 현재 상태가 어떻게 보일지 선언적으로 기술하고 Flutter가 상태 변화에 따라 UI를 자동으로 업데이트

 

선언형 UI의 장점

• 코드가 간결하고 직관적
  • 상태에 따라 UI를 간단하게 정의
  • 명령형 UI 방식처럼 UI 변경을 수동으로 처리할 필요가 없음
• 쉬운 상태 관리
  • UI는 상태를 기반으로 자동으로 업데이트
  • 메서드를 통해 상태만 변경하면, Flutter가 자동으로 빌드 메서드를 호출해 UI를 다시 생성
• 낮은 버그 가능성
  • 상태에 따라 UI를 선언적으로 정의하기 때문에, UI 업데이트 로직을 명시적으로 관리할 필요 없음

---

02. 선언형 UI & 명령형 UI

선언형 UI

• 앱의 상태가 변경될 때, UI가 자동으로 업데이트 되는 방식
• 어떠한 최종 상태를 선언
• ex) Flutter StatefulWidget

return ViewA(
  color: red,
  child: ViewB(
    color: yellow,
  ),
);

 

명령형 UI

• 상태 변경 시 UI 업데이트 로직을 직적 명령하여 화면을 변경하는 방식
• 어떠한 상태가 되도록 명령
• ex) JavaScript를 이용한 DOM 조작

ViewA a = ViewA();
ViewB b = ViewB();
a.setColor(red);
b.setColor(yellow);
a.add(b)

---

03. Flutter가 선언형 UI를 채택한 이유

• 상태 기반 UI 업데이트가 더 직관적
  • 명령형 UI는 상태 변경 시 UI 업데이트 로직을 직접 관리해야 하므로 복잡도가 높음
  • 선언형 UI는 상태만 변경하면 Flutter가 자동으로 UI를 다시 빌드
• Hot Reload 기능과 호환
  • Flutter의 Hot Reload 기능은 코드 변경 시 빠르게 UI를 업데이트함
  • 선언형 UI 방식과 잘 맞아 빠른 피드백을 제공