[Fuse] iOS & Android 앱 만들기
재미있는 녀석이 나타났다!
Fuse를 알게 된 건 2014년 겨울이나 2105년 이른 봄이었던 것 같습니다. 튜토리얼을 따라 하면서 받은 느낌은 제대로 만들면 물건이겠는데 였지만 당시는 개발환경이나 기능들이 너무 열악해 상용 소프트웨어를 만들기에는 갈길이 멀어 보였습니다.
2016년 10월, 페이스북에서 fuse가 언급된 것을 보고 홈페이지를 확인해 보니 "해볼 만하겠네"라는 느낌이 들어 간단히 테스트를 해봤습니다.
1. Fuse?
2. 인스톨
3. Fuse 앱 시작하기
4. UI 구현 예제
5. 마무리
1. Fuse?
What is Fuse?Fuse는 쉽고 빠르고 재미있게 iOS와 Android 네이티브 앱을 디자인하고 개발할 수 있는 개발 도구입니다. XML 기반의 fuse UX 마크 업 언어로 iOS와 Android에서 공유할 수 있는 UI/GUI를 구현하고 별도의 스레드에서 동작하는 자바 스크립트(ES5)로 비즈니스 로직을 구현합니다. 작성된 코드는 각 플랫폼의 네이티브 코드로 동작하므로 기존의 하이브리드 앱에서 제공하지 못했던 미려한 GUI 효과를 쉽게 빠르게 구현할 수 있습니다. 라고 Fuse 팀이 말했습니다.
2. 인스톨
Fuse 홈페이지에서 베타 버전의 개발도구를 다운로드할 수 있습니다. Mac과 Windows 버전을 제공하고 있는데 iOS 테스트는 xcode가 필요하기 때문에 Mac에서만 할 수 있습니다.
설치를 마치고 터미널에서 "fuse"라고 입력하면 GUI 콘솔을 실행할 수 있습니다. 하지만 CLI로 하는 게 더 편한 것 같습니다. "fuse help"라고 입력하여 CLI 명령들을 확인할 수 있습니다.
3. Fuse 앱 시작하기
아래 명령을 사용하여 새 프로젝트와 디렉토리를 생성합니다:
fuse create app <projectname> [optional path]
프로젝트 디렉터리로 이동하면 아래와 같은 파일이 생성되어 있습니다.
firstApp.unoproj : Uno 프로젝트 파일
MainView.ux : 비어있는 UI 구현 파일
Fuse는 C#에서 파생된 Uno라는 언어로 구현되어 있다고 하니 시간 내서 Uno와 C#도 살펴봐야 할 것 같네요.
Fuse를 사용하며 좋았던 것 중 하나가 UI의 변경 사항을 실시간으로 확인해 볼 수 있는 preview 기능을 제공한다는 것입니다. 에디터에서 태그를 선택하면 프리뷰 화면에 해당 영역이 하이라이트 되어 좋았습니다. preview 명령은 아래와 같이 사용할 수 있으며 -tios나 -tandroid 옵션을 사용하지 않으며 시뮬레이터가 실행됩니다.
fuse preview
fuse preview -tios
fuse preview -tandroid
4. UI 구현 예제
이 번 포스팅에서는 안드로이드의 Toolbar와 Navigation drawer를 구현해보며 Fuse에서 UI 레이아웃과 애니메이션 효과를 구현하는 방법을 살펴보도록 하겠습니다.
소스 코드는 여기에서 확인할 수 있습니다.
4.1 에디터 플러그인 설치
Fuse는 sublime3와 atom의 플러그인을 제공하는데 저는 주로 사용하는 atom에 플러그인을 설치했습니다.
4.2 안드로이드 SDK 경로 설정
Windows : %appdata%/../Local/FuseTools/Fuse/sdkConfig.json
MacOS : ~/.fuse/sdkConfig.json
Fuse 앱을 단말기에서 테스트 하기 위해서는 Android SDK와 xcode가 필요하다. Android SDK와 NDK가 기본 설치 경로가 아닌 곳에 설치되어 있다면 위에 있는 sdkConfig.json 파일의 경로를 수정해줍니다.
4.3 Panel 추가
<App>은 Fuse 앱의 최상위 객체이고 자식 태그를 추가하여 앱을 구현할 수 있습니다.
위 예제에서는 앱의 레이아웃을 구성할 때 사용하는 <Panel> 오브젝트를 추가합니다. "ux:Name"을 사용하여 오브젝트에 이름을 지정하면 앱 내의 다른 코드에서 해당 오브젝트에 접근할 때 사용할 수 있다. 해당 예제를 안드로이드 단말기에서 실행하면 아래와 같은 결과를 볼 수 있습니다.
실행화면 #14.4 ToolbaryLayout가 status bar 아래 출력되도록 해보자
StatusBarConfig를 사용해 status bar의 생상과 스타일을 지정할 수 있습니다. 단, 안드로이드와 iOS의 동작이 다른 듯하니 주의해야 겠다.
<DockPanel>과 <StatusBarBackground>을 사용하면 ToolbarLayout을 status bar의 하단에 출력할 수 있다.
실행화면 #24.5 Toolbar 메뉴 아이콘 추가
<Image> 태그를 사용하여 ToolbarLayout에 메뉴 아이콘을 추가합니다.
<MultiDensityImageSource>를 사용하면 해상도에 따른 이미지를 지정할 수 있는데 해상도별 디렉토리를 전역 속성으로 설정할 수 있으면 좋을 것 같은데 이미지 지정을 위해 코드가 너무 길어지는 것이 아쉽습니다.
4.6 Toolbar에 타이틀 추가
<Text> 태그를 사용하여 ToolbarLayout에 타이틀을 추가하면 아래와 같은 결과를 확인할 수 있습니다.
실행화면 #45. 마무리
베타 테스트 중이고 가볍게 살펴본 것이라 확신할 수는 없지만 이미지, 문자열 같은 리소스를 효율적으로 사용하기가 힘든 것 같은 느낌을 받았습니다.
하지만 GUI의 변경을 실시간으로 확인할 수 있는 점, 직관적인 언어와 툴 그리고 쉬운 애니메이션 구현 같은 장점은 Fuse를 좀 더 살펴봐야겠다는 생각이 들게 하네요. 다음 포스팅에서는 안드로이드의 Navigaiton view를 만들면서 애니메이션 구현에 대해서 살펴보도록 하겠습니다.
