[플러터] 6. 플러터 구조

Flutter는 고성능, 고품질의 iOS, Android, 웹(tech preview) 앱을 단일 코드 베이스로 개발할 수 있는 모바일 앱 SDK입니다.

 

스크롤 동작, 글씨, 아이콘과 같이 플랫폼 별로 달라지는 부분들을 아울러서 서로 다른 플랫폼에서도 자연스럽게 동작하는 고성능의 앱을 개발할 수 있게 하는 것이 Flutter의 목표입니다.

 

Flutter의 장점
● 높은 생산성
    ○ 단일 코드베이스로 iOS와 Android 개발할 수 있습니다.
    ○ 모던하고 표현적인 언어 그리고 선언적 접근법을 통해 단일 OS에서 더 적은 코드로 더 많은 것을 할 수 있습니다.
    ○ 쉽게 프로토타입을 제작하고 반복할 수 있습니다.
        √ 앱 실행 중에 코드를 바꾸고 리로드하여 개발을 할 수 있습니다. ( hot reload)
        √ 앱이 중단된 지점에서 문제를 수정하고 디버깅을 이어나갈 수 있습니다.

● 아름답고, 고도로 커스터마이징된 UX를 만들 수 있습니다.
    ○ Flutter의 자체 프레임워크를 사용하여 머티리얼 디자인과 쿠퍼티노 (iOS) 스타일의 풍부한 위젯들을 만들 수 있습니다.
    ○ OEM 위젯의 제한없이 맞춤형의 아름다운 브랜드 주도 디자인을 실현할 수 있습니다.

 

핵심 원리

Flutter는 현대적인 react-style 프레임워크, 2D 렌더링 엔진, 바로 이용 가능한 위젯들, 그리고 개발 툴들을 포함합니다.

이러한 구성 요소들을 통해 앱을 디자인, 개발, 테스트 그리고 디버깅할 수 있습니다. 모든 것은 몇가지 핵심 원리들을 중심으로 구성됩니다.

 

모든 것은 위젯입니다

위젯은 Flutter 앱 UI의 기본 단위입니다. 모든 위젯은 UI의 불변 선언입니다. 

뷰, 뷰 컨트롤러, 레이아웃 그리고 기타 다른 속성들을 분리하는 다른 프레임워크들과 다르게, Flutter는 일관적이고 통일된 오브젝트 모델을 갖고 있는데, 그것이 바로 위젯입니다.

 

 

위젯은 다음의 것들을 정의할 수 있습니다:

● 구조적인 요소 (예: 버튼이나 메뉴)

● 스타일적인 요소 (예: 폰트나 색상)

● 레이아웃 요소 (예: 패딩)

● 기타 등등…

위젯은 구성을 기반으로 계층 구조를 형성합니다. 

각 위젯은 내부에 중첩되고 부모의 속성들을 상속받습니다.

별도 “application” 오브젝트가 없는 대신 최상위 위젯이 그 역할을 하게 됩니다.

 

프레임워크에게 위젯을 계층 구조 상 다른 위젯으로 교체하게 함으로써, 사용자 상호작용과 같은 이벤트를 구현할 수 있습니다. 프레임워크는 새로운 위젯과 기존 위젯을 비교하고 효을적으로 UI를 업데이트하게 됩니다.

 

구성 > 상속

위젯은 종종 강력한 효과를 내기 위해 단일 목적의 여러 작은 위젯들로 구성됩니다. 

예를 들어, 일반적으로 사용되는 Container 위젯은 painting, positioning, sizing과 같은 레이아웃 관련 위젯들로 구성됩니다. 

좀더 구체적으로 Container는 LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox, Transform 위젯들로 구성됩니다. 

커스터마이징을 위해 Container의 서브 클래스를 만들기 보다는 앞서 언급한 위젯들 혹은 그외 다른 간단한 위젯들을 참신한 방법으로 조합할 수 있습니다.

 

가능한 조합의 수를 최대화하기 위해 클래스 계층 구조는 얕고 넓습니다.

다른 위젯들과 함께 구성하는 방식으로 위젯의 레이아웃을 조작할 수 있습니다.

예를 들어, 위젯을 가운데로 위치시키려면 그 위젯을 Center 위젯으로 감싸면 됩니다.

패딩, 정렬, 행, 열, 그리드와 같은 여러 레이아웃 위젯들이 있는데, 이러한 레이아웃 위젯들은 그 자체로 시각적 표현을 갖고 있지는 않습니다.

이들의 유일한 목적은 다른 위젯의 레이아웃을 제어하는 것이기 때문입니다. 만약 어떤 위젯이 어째서 이렇게 렌더링된건지 궁금하다면, 인근에 위치한 다른 위젯들을 살펴보면 알 수 있습니다.

 

Flutter 프레임워크는 각각의 층이 이전 층에 의해 빌드되는 일련의 층으로 구성되어 있습니다.

 

프레임워크의 상위 레이어로 갈수록 하위 레이어보다 더 빈번히 사용됩니다. 

Flutter의 계층화된 프레임워크를 구성하는 전체 라이브러리는 API 문서에서 확인할 수 있습니다.

이러한 설계의 목표는 개발자로 하여금 더 적은 코드로 더 많은 일을 할 수 있게 하는 것입니다.

예를 들어, 머티리얼 계층은 위젯 계층의 기본적인 위젯들을 조합하여 만들어지고, 위젯 계층은 렌더링 계층의 하위 레벨 오브젝트들의 조합으로 만들어집니다.

계층들은 앱을 만드는데 많은 옵션을 제공합니다. 

프레임워크의 풍부한 표현력을 활용할 수 있는 커스터마이즈한 접근법을 선택하거나 위젯 계층의 블럭들을 사용하세요, 혹은 이것들을 조화롭게 잘 조합하여 사용하세요. 

Flutter가 제공하는 자체 위젯들을 사용하거나, Flutter 팀에서 프레임워크 개발할 때 사용한 것과 동일한 도구와 기술들을 갖고 직접 커스텀 위젯도 만들 수 있습니다.

모든 것은 공개되어 있습니다. 프레임워크의 하위 계층을 뜯어보지 않고도 상위 레벨의 위젯 컨셉만으로도 생산성을 높일 수 있습니다.