brunch

You can make anything
by writing

C.S.Lewis

by GMIND May 15. 2022

Flutter와 SwiftUi 1

Dart와 Swift

Flutter는 구글에서 발표한 멀티 플랫폼 어플리케이션 프레임워크*이며, SwiftUi는 애플에서 발표한 애플 iOS 어플리케이션의 UI를 개발하는 라이브러리*이다. Flutter와 SwiftUi는 2010년대 후반부터 어플리케이션 개발 트렌드의 새로운 모습을 보여주고 있다.

*) 프레임워크와 라이브러리 모두, 개발을 위한 사전 정의된 도구 및 환경을 의미한다. 프레임워크는 하나의 프로그램처럼 그 프레임워크가 제시하는 범위 내에서만 개발자가 개발을 해야 한다. 하지만 라이브러리는 개발자가 라이브러리를 자유롭게 가져와 사용할 수 있다.

기존의 Html/CSS 기반의 웹 어플리케이션 개발, 안드로이드 어플리케이션 개발, UIKit을 이용한 iOS 개발의 경우, 프로그래밍에 사용되지 않는 마크업 언어를 이용하여 레이아웃을 개발하였다. 마크업 언어는 말 그대로 워드나 웹페이지처럼 정적인 일반 문서를 작성하는 언어를 의미한다. 이들은 워드를 작성할 때와 마찬가지로 단락 별로 내용을 엄격하게 구별한다. 이런 마크업의 언어를 통해 레이아웃*을 구성한다는 것은, 문서 자체를 활용하는 방식이다 보니 동적인 특징을 지니지 못한다는 문제를 가진다.

*) 레이아웃 : 어플리케이션에서 화면을 보여주는 시각적 구조

문서는 프로그램이 아니기 때문에 문서를 동적으로 보여주거나 레이아웃을 수정하기 위해서는, 프로그램을 통한 제어가 필요하다. 따라서 동적인 어플리케이션 개발을 위해, 마크업 언어로 작성된 레이아웃의 일부를 동적으로 움직일 수 있게 조절하는 방향으로 발전해왔다. 예를 들어 HTML 언어로 작성된 웹 페이지를 동적으로 보여주기 위해, Javascript라는 프로그래밍 언어를 사용하기도 한다.

이와 반대로 Flutter와 SwiftUi는 프로그래밍 언어로 UI를 작성한다. 프로그래밍 언어로 작성하면, 코드는 변하지 않지만 코드 안의 조건에 따라 레이아웃의 결과가 변한다. 따라서 프로그래밍 언어를 활용하는 경우에는 그 작성한 코드를 편집 없이 계속해서 사용할 수 있다는 재사용가능성을 염두에 두고 만들어진다. 이를 선언형 UI라고 한다.

프로그래밍 언어로 작성하면 화면의 구성이 자유롭기 때문에 동적인 특징을 지니게 되고, 레이아웃 자체가 프로그램이 될 수 있다. 따라서 어플리케이션 개발의 중심 언어를 가지고 UI를 작성할 수 있으므로, 개발자 입장에서는 개발의 통일성을 느낄 수 있다. 마찬가지로 UI 라이브러리 제작자 입장에서는 더 간단한 문법으로 작성할 수 있게 되었다.

Flutter와 SwiftUi는 각각 Dart, Swift라는 다른 언어를 사용하는 것을 제외하면, 상당히 비슷한 부분을 많이 보여주고 있다. 이들의 앱 화면은 하나의 커다란 레이아웃 객체*이며, 이 객체에 여러 자식 객체들을 달아서 화면의 아이템을 표현한다. 각 객체들은 또 다른 자식 객체를 가짐으로써, 객체의 좌표, 색상, 애니메이션 등을 지정하거나 추가할 수 있다. 하나의 앱 화면은 객체라는 가지들로 구성되어 있는 트리 구조**를 형태인 것이다.

*) 객체 : 클래스(코드 덩어리를 만드는 규칙)를 따라 만들어진 재사용 가능한 코드뭉치

**) 트리 구조 : 나무의 모양처럼, 뿌리에서 가지가 나오고 가지에서 나뭇잎이 나오는 모양의 자료 구조

Artist 'KimJinNyeong' with Gallery MIND

keyword