Flutter 문서 원본 보기

===기기에 독립된 사용자 인터페이스===

지금까지 모바일을 겨냥한 [[크로스 플랫폼]] [[프레임워크]]는 [[아파치 코르도바]]처럼 웹 뷰를 사용하되 여기에 사용되는 자원을 각 기기에 미리 심는 방식, 즉 앱이 로컬 웹 서버로 돌아가도록 해서 웹 앱보다는 빠르고 OS 관계 없이 똑같은 인터페이스를 제공하거나<ref>하지만 운영체제의 기본 웹브라우저를 사용하므로 웹브라우저에 따라 모양이 좀 다를 수는 있다.</ref>, 리액트 네이티브나 [[자마린]]처럼 각 OS의 네이티브 기능을 최대한 활용해서 인터페이스는 조금 차이가 나지만 빠른 속도를 추구하는 방법이 있는데, Flutter는 이들 둘과는 아예 다르다. 각 OS의 네이티브 그래픽 기능을 최대한 활용하되 각 OS의 유저 인터페이스를 무시하고 몽땅 Flutter가 자체 제공한다. 즉, 각 OS는 그림 그릴 캔버스만 제공하고 그 위에 뭘 표현할지는 Flutter의 렌더링 엔진인 Skia<ref>Skia는 Flutter의 전유물은 아니다. 별도의 프로젝트로 운영하고 있으며, 크롬, 크롬OS, 안드로이드도 사용하고 있으며 구글 바깥에서도 파이어폭스, [[리브레오피스]] 같은 소프트웨어가 그래픽 렌더링에 Skia 엔진을 사용하고 있다.</ref>가 다 그려버리는 것. 그 때문에 OS에 관계 없이 똑같은 모습의 유저 인터페이스를 제공한다. Flutter는 두 가지 인터페이스 디자인을 기본 제공한다. OS에 따라 디자인을 달리 하는 것도 가능해서 안드로이드에서는 머티리얼, iOS에서는 쿠퍼티노 인터페이스<ref>[[애플]]이 아니라 [[구글]]에서 자사의 머티리얼 디자인과 구별하기 위해 붙인 이름이다. 애플 폰사가 쿠퍼티노에 있기 때문에 이런 이름을 붙였다.</ref> 를 사용하는 식으로 할 수도 있고 그 반대로도 할 수 있다! 같은 앱에서 입맛에 맞게 어떤 부분은 머티리얼, 어떤 부분은 쿠퍼티노 디자인을 적용할 수도 있다. 다만, 똑같은 기능을 하는 인터페이스라고 해도 모양이나 크기가 다를 수 있으므로 이를 감안해야 한다. 네이티브 UI를 활용하는 것에 비해서 속도 면에서 불리하지 않은가 싶을 수 있는데 테스트 결과를 보면 상당히 준수하게 나온다. 렌더링 엔진인 Skia는 [[C++]]로 구현했는데 최적화를 무척 잘 했는지 성능이 아주 좋다. 그리고 지금도 계속 최적화를 하고 있어서 업데이트 될 때마다 어느 정도나 성능을 향상시켰는지 공지한다.

그런데 Skia는 [[iOS]]에서 초기 로딩 지연 문제가 있었는데, 이를 해결하기 위해서는 렌더링 엔진을 처음부터 다시 설계해야 했다. [[구글]]은 새로운 엔진인 Impeller를 구현했고, 3.7부터 프리뷰로 발표한 다음 3.10부터 [[iOS]]에는 기본 렌더링 엔진으로 정식 적용했다. [[안드로이드]]는 여전히 Skia를 기본으로 쓰고 있지만 3.10을 발표하면서 프리뷰로 적용할 수 있도록 발표했다. 차후에 [[안드로이드]]도 Impeller로 이사갈 가능성이 높다. Skia를 Impeller로 바꾸어도 기존 코드를 건드릴 필요가 전혀 없다.

다만 Flutter 웹은 [[HTML]]와 CSS, [[자바스크립트]]<ref>Flutter가 나오기 전부터 [[Dart]]는 [[자바스크립트]]로 컴파일할 수 있는 기능을 제공했다.</ref>를 사용한다. 이쪽은 이 두 가지만 가지고도 어지간히 다 할 수 있기도 하고<ref>아파치 코르도바가 내장한 [[HTML]]을 UI에 사용하는 방식으로 크로스 플랫폼 모바일 앱을 구현할만큼 HTML과 CSS만 있으면 웬만한 UI는 다 구현할 수 있다.</ref> 웹 표준을 무시하면 매장당하는 문제도 있다. Flutter를 웹 개발에 쓰면 사실상 [[HTML]]나 CSS 코딩 없이 [[Dart]]만으로 다 만들 수 있다.<ref>애초에 Flutter의 구조가 웹 구조에 힌트를 얻은 것이기도 하다. [[자바]] 기반 아파치 위켓 웹 [[프레임워크]]는 모든 것을 위젯으로 보고 모든 구성요소를 위젯 트리 구조로 구성하며, [[XML]] 같은 것을 쓰지 않고 UI도 코드로 몽땅 처리하는 데다가 stateless와 stateful 개념을 가지고 있어서 많은 면에서 Flutter와 닮아 있다.</ref>