Fuse (Fusetool) - OpenGL을 사용한 UI, 크로스 플랫폼

안녕하세요 박스여우입니다.

얼마전인 4월 초에 열렸었던 마이크로소프트 커뮤니티에 방문하여 여러 커뮤니티를 만났고, 여러가지 세션을 통해 인공지능, 네트워킹 등 여러가지를 배웠습니다.

하지만 저에게 가장 도움이 되었던 것은 Sencha 커뮤니티 대표님을 만나 이야기를 나누었던 점 입니다. 앱개발자로 여러가지 앱을 개발해 보았고 앞으로도 개발할 예정이지만, 앱 컨텐츠를 생산해 낼때 가장 마음에 걸리는 것이 플랫폼 문제였습니다. 안드로이드, IOS 뿐만 아니라 앞으로 계속해서 나오는 플랫폼도 대비할 필요가 있습니다. 그런 걱정을 크로스 플랫폼을 제공해주는 Sencha를 통해 해결해 보고자 여러가지 대화를 나누어 봤지만, Sencha는 이제 더이상 모바일 플렛폼에서는 좋지 못하다는 말씀을 해주셨습니다. 그래서 대표님께서는 요즘 유행하는 Fuse를 소개해 주셨습니다.

Fuse는 Sencha와 마찬가지로 크로스 플랫폼을 지원하고, Uno라는 언어를 사용하여 C++, .Net, JavaScript로 크로스 컴파일을 할 수 있습니다. 또, Fuse의 가장 강력한 점은 OpenGL ES로 UI를 그린다는 점 입니다!! (세상에..)

Fuse : https://www.fusetools.com/

Fuse의 크로스 컴파일 방식은 단순히 IOS와 Android뿐만 아니라 .Net, EXE, CMake(OSX), WebGL등의 다양한 플렛폼을 지원합니다. 하지만 아직 출시된지 얼마 되지 않았기때문에 호환성등의 문제들이 발생할수도 있을 것 같습니다. 하지만 OpenGL SE의 표준을 철저히 따르기 때문에 직접 만든 Shader가 아닌 이상 호환성에 문제가 발생한 가능성은 낮을것 같네요.

그럼, 이런 엄청난 기능을 가진 Fuse를 사용해 볼까요?

우선, Fuse의 공식 홈페이지인 https://www.fusetools.com/에 접속하셔서  Let's do this를 클릭합시다.

그뒤에 이메일과 약관에 동의하신뒤에 다운로드를 받으시면 됩니다.

Fusetool 설치 과정을 거치신뒤에 Fuse를 켜 봅시다!

그럼 이런 창이 뜰텐데요, 아무래도 웹 기반이다 보니 Sublime Text를 사용합니다.

따라서 위의 Sublime IDE와 Sblime Plugin을 모두 Install해 주세요

그리고 다음창으로 넘어가면 Get Examples버튼이 있는데, Fuse에서 공식적으로 제공해 주는 여러 탬플랫이나 예제들입니다.

우선, 저희는 Fuse 사용방법을 느끼기 위해(배우는게 아니라) 예제는 나중에 살펴봅시다.

Done을 눌러주세요!

그다음 메인화면에서 New Project!

경로와 프로젝트의 이름을 설정해 주시고, 위에는 Fuse project와 Example project 두 가지가 있는데요,

Example Project는 예제로 이미 구현되어 있는 프로젝트이기 때문에 Fuse project를 선택해 줍시다.

그러면 요렇게 새로운 프로젝트가 생겼습니다.

프로젝트를 선택하시고 Open in Sublime Text를 눌러주세요

그럼 이렇게 Sublime Text IDE로 프로젝트가 열립니다.

그럼 MainView.ux를 선택하시면 저 위의 달랑 두 줄의 코드만 적혀있습니다.

    <Panel>
    <Text TextColor="#999">Test Text!!</Text>
    </Panel>

그럼 그 두 줄의 코드 사이에 위의 코드를 넣어줍시다.

HTML을 다뤄보신 분이라면 정말 익숙하게 작성하실 수 있을것 같습니다.

그럼 마지막으로 수정한 결과를 봐야겠죠?

그럼 다시 메인화면으로 돌아가서 프로젝트를 선택하시고, Preview를 눌러주세요

그다음 Start!

그러면 이런 콘솔창이 뜰텐데, 조금 기다리시면 됩니다.

그럼 아까 추가했던 TEXT가 출력되어 있는 모습을 볼 수 있습니다.

Preview를 통해 볼 수 있는 화면은 아마 Fuse 자체의 애뮬레이터 같습니다. 안드로이드 스튜디오보다 훨씬 가볍다는 느낌이 드네요

한가지 더 좋은점은 해당 애뮬레이터를 켜 두고 Sublime text에서 코드를 수정한 뒤에 Ctrl + S를 누르면 수정한 것이 다시 컴파일 할 필요없이 바로 적용된다는 점 입니다. 정말 편리하네요

아직까지 Fuse가 유명하지 않아서 오픈소스나 정보량이 많지는 않지만, 앞으로 많이 사용하게될 느낌을 받습니다. ㅋㅋ