Fuse 플랫폼에 대한 시작

기존에 Ionic과 AngularJS에서 크로스플랫폼용 하이브리드 앱을 만들다 보면서 느낀점은 Native만큼의 UI/UX를 제공하기 힘들다는 것이다. 이번에 프로젝트를 마치고 Fuse라는 툴을 접해 보았는데 UI/UX가 Native 성능을 가지는 크로스 플랫폼용 플랫폼이며 OpenGL을 사용하여 성능이 뛰어나다. 다만, 아직까지 베타 테스트 중이며 UI/UX에 집중되어 있기 때문에 Native 자원에 접근하는 부분은 조금 미약하다. 하지만 향후 크로스플랫폼 개발로 UI/UX에 혁신을 가져올 수 있을것으로 기대한다. 

소개 슬라이드

먼저 소개 슬라이드를 보면 6페이지에 보여 주듯이 XML형태의 마크업 언어와 자바스크립트로 화면을 구성하며 이것은 Fuse 라이브러리를 통해 Uno 플랫폼로 전달 된다. Uno 플랫폼은 .NET framework가 빠진 C#버전이며 Uno Core에 의해 컴파일 되고 이것은 다시 C++이나 Java, ObjectC 등의 Native 언어로 컴파일 되어 각각의 플랫폼에 탑재될 수 있다. 

샘플들은 https://www.fusetools.com/examples에서 확인해 볼 수 있다. 

사용 에디터 및 설치

기본적으로는 Sublime Text 3 에디터를 권장하고 있다. VS Code에서는 Fuse 확장을 이용할 수 있다. 

Atom

1. 설치 파일 다운로드 및 설치
– https://atom.io

2. 플러그인 설치
– 메뉴 -> File -> Settings
– [+ Install] 클릭 -> ‘fuse’ 검색 -> 설치

Visual Studio Code

1. 설치 파일 다운로드 및 설치
– https://code.visualstudio.com/
– Visual Studio Code 실행

2. 플러그인 설치
– 메뉴 -> 보기 -> 확장
– ‘fuse’ 검색 -> 설치 -> 프로그램 재시작

Sublime Text 3

1. 쉬운 방법: 퓨즈 설치 후 대시보드에서 ‘Setup Guide’ 클릭
– https://www.fusetools.com/downloads
– 퓨즈 실행 -> ‘Setup Guide’ 클릭 -> 서브라임 및 플러그인 설치

2. 직접 설치 파일 다운로드 및 설치
– https://www.sublimetext.com/3
– 퓨즈 설치 -> 퓨즈 실행 -> ‘Setup Guide’ 클릭 -> 플러그인 설치

fuse를 설치하면 DASHBOARD가 나오며 기본적인 프로젝트를 생성 후 Preview 버튼을 통해 각 플랫폼별 에뮬레이팅 실행이 가능하다. 

MainView.ux

기본 코드를 생성해 보았다. 코드는 다음과 같이 XML형태의 마크업 언어로 작성된다. 

<App>
	<ClientPanel>
		<Page ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
			<DockLayout />
			<float4 ux:Property="HeaderColor" />
			<float4 ux:Property="HeaderTextColor" />
			<string ux:Property="Instructions" />
			<StackPanel Dock="Top">
				<Panel Color="{Property self.HeaderColor}" Height="45">
					<Text Value="{Property self.Title}" FontSize="22"
						  Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
				</Panel>
			</StackPanel>
			<Panel Height="10%" Color="#0008" Alignment="Bottom">
				<WhileActive Invert="true" Threshold="0.4">
					<Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
				</WhileActive>
				<Text Value="{Property self.Instructions}" Margin="20" TextColor="#fff" Alignment="Center" />
			</Panel>
		</Page>
		<PageControl>
			<PageWithTitle Title="Basic animation" HeaderColor="#595FFF" HeaderTextColor="#fff"
						   Color="#FEFDFC" Instructions="Tap and hold the rectangle">
				<Panel>
					<Rectangle ux:Name="myRectangle" Color="#4894E5" Width="80" Height="80" CornerRadius="0">
						<WhilePressed>
							<Rotate Degrees="45" Easing="CubicInOut" Duration="0.5" />
							<Scale  Factor="2"   Easing="CubicInOut" Duration="0.5" />
							<Change myRectangle.Color="#FC5185"      Duration="0.3" />
							<Change myRectangle.CornerRadius="15" 	 Duration="0.3" />
						</WhilePressed>
					</Rectangle>
				</Panel>
			</PageWithTitle>
			<PageWithTitle Title="Logic with JavaScript" HeaderColor="#F68FD7" HeaderTextColor="#FFF" Color="#FFF"
						   Instructions="Tap the screen to add items" >
				<JavaScript>
					var Observable = require('FuseJS/Observable');
					items = Observable();
					function addItem(){
						items.add({
							color : [Math.random(), Math.random(), Math.random(), 1],
							height : (Math.random() + 1.0) * 80
						});
					}
					module.exports = {
						items : items,
						addItem : addItem
					};
				</JavaScript>
				<Panel Tapped="{addItem}">
					<ScrollView>
						<Panel>
							<ColumnLayout ColumnCount="3"/>
							<Each Items="{items}">
								<Rectangle ux:Name="item" Color="{color}" Height="{height}" Margin="5" CornerRadius="5">
									<AddingAnimation>
										<Change item.Opacity="0" Duration="0.3" />
									</AddingAnimation>
								</Rectangle>
							</Each>
						</Panel>
					</ScrollView>
				</Panel>
			</PageWithTitle>
			<PageWithTitle Title="Realtime effects" HeaderColor="#2CAE3F" HeaderTextColor="#fff"
						   Color="#FFF" Instructions="Use the slider to blur the logo">
				<Grid RowCount="2">
					<Image File="Assets/FuseLogo.png" Color="#000">
						<Blur ux:Name="myBlur" Radius="0"/>
					</Image>
					<Slider Margin="40,0" Alignment="VerticalCenter">
						<ProgressAnimation>
							<Change myBlur.Radius="10" />
						</ProgressAnimation>
					</Slider>
				</Grid>
			</PageWithTitle>
		</PageControl>
	</ClientPanel>
</App>

특이한 점은 마크업 내부에 자바스크립트를 내장할 수 있다는 것이다. 

App – 최상위 객체
DockPanel – 상하좌우에 객체를 붙일 수 있는 레이아웃 객체
StatusBarBackground – 상태바의 높이를 위해 존재. 이게 없으면 풀스크린 형태
ScrollView – 스크롤뷰. 기본은 세로로 움직인다.
StackPanel – 자식들이 겹치지 않고 순서대로 쌓이게 해주는 컨테이너
Slider – 0 ~ 100% 등의 값을 설정하는데 사용할 수 있는 슬라이더
Button – 버튼
Switch – on 또는 off를 표현하는 그래피컬한 버튼

Local로 빌드한 화면이다. 빌드를 완료하면 OpenGL에 의해 해당 앱 Preview화면에 구동된다. 

Command Prompt 명령어

fuse create app HelloWorld ./

프로젝트를 생성한다.

fuse preview

미리보기를 한다. 

fuse preview -tios

fuse preview -tandroid

각 플랫폼별 미리 보기를 지정할 수 있다. 

fuse build --target=iOS --run
fuse build --target=Android --run

빌드하려면 target을 지정한다.