SlideShare a Scribd company logo
1 of 13
Download to read offline
Fuse 소개
김응식
2015.06.04
Fuse 알게된 계기
• 실리콘벨리를 꿈꾸는 판교사람들 - https://www.facebook.com/groups/pantechtalk/
• 지난 5월 13일 수요일 저녁 7시에 판교공공지원센터에서 Fuse 세미나 개최 - https://
www.facebook.com/
photo.php?fbid=10153215972257088&set=gm.679147015563971&type=1&th
eater
Fuse 란?
• 퍼포먼스와 애니메이션에 중점을 둔 크로스 플랫폼 앱 개발 도구임
• 소개 동영상 - Fuse 소개 영상(유투브)
Fuse의 탄생 배경
• Designer의 레이아웃이나 애니메이션 등의 각가의 디자인 작업들이 개발자에게 전달되는
과정이 매끄럽지 못하다고 생각함
• 하이브리드 앱의 경우의 디자이너가 애니메이션에 대해서 고려하지 않거나 설명할 수 없
는 경우가 많음. 설명해도 기획자나 개발자가 못 알아들을 수도...
• 하이브리드 앱의 경우 화면 레이아웃은 퍼블리셔Publisher가 담당하는데 역시 애니메이션
과 같은 사용성을 고려하기 쉽지 않은 것이 현실
• 최종 Native에 반영하는데 있어 Android와 iOS의 플랫폼이 상이하여 디자인 가이드라인
이 반영되기 어려운 것이 현실
Fuse의 문제 해결 과정
• 1단계: 개발언어 통합 - Android, iOS 각각 Java와 Objective-
C(또는 Swift)로 나누어진 언어 대신하여 C#에서 .Net을 제거한
Uno라는 언어를 사용하여 C++/.Net/Javascript로 크로스 컴파일
을 할 수 있도록 새로운 마크업 언어를 만듬
• 2단계: 화면 레이아웃, 타이포그라피, 애니메이션, 이벤트 트리
거, ...등을 포함하는 새로운 Fuse 라이브러리 생성
• 3단계: HTML과 거의 흡사한 새로운 마크업 언어(xml)를 생성
Fuse 특징 (1/2)
•OpenGL ES 렌더링을 사용하여 네이티브의 퍼포먼스를 실현
•1080p 영상을 재생하면서 실시간 Blur를 구현할 수 있을 정도의 성능
•OpenGL을 사용하는 게임 들에서 발견되는 발열과 배터리 소모 이슈는 iOS
의 Quartz Composer와 같이 GUI Rendering 방식과 동일하게 Idle상태에서
는 자원 사용을 전혀하지 않음
•OpenGL ES 표준을 철저히 따르고 있기 때문에 호환성 문제는 아직 발견되
지 않음. (단, 자체 제작한 Shader를 사용하는 경우 호환성에 문제가 있을 수
있음)
Fuse 특징 (2/2)
•레이아웃 구성에 있어 자체적으로 제공하는 콤포넌트를 사용하는 경우 Uno
code(C++)에 대한 이해없이 화면을 구성 가능
•크로스 플랫폼 지원 Target: .Net EXE, Android, iOS, MSVC12, CMake(OS
X), 그리고 WebGL
Fuse UX 레이아웃 특징
•Fuse UX XML 마크업은 각 콤포넌트를 직관적으로 이해할 수 있도록 제작되
어 Android XML 코드 보다 훨씬 가독성이 높다는 평가를 받고 있음
•각 콤포넌트의 레이아웃 내에서 제스처, 애니메이션, 색상, 크기 등 다양한 변
화를 중첩하여 사용할 수 있음
•애니메이션은 Easing Curves를 기본적으로 지원하여 다양한 애니메이션 효
과를 간단하게 구현 가능
•마크업 내에 필요한 경우 Javascript도 사용 가능
참고) Easing Curves - http://easings.net/
Fuse 데모
•Fuse beta SDK 설치 과정: Mono Framework, Fuse SDK
•Fuse 예제
•Fuse 라이브 코딩
Fuse의 목표 그리고 ...
•아직 Closed-beta 단계, 베타테스터에게는 Daily Build를 제공
•궁극의 목표는 디자인너 또는 퍼블리셔가 손쉽게 레이아웃을 만들 수 있도록 하
는 것이 목표
•1.0 릴리즈는 2015년 하반기 예정, 무료 버전, ...
•코드 에디터는 Sublime Text 3를 사용하고 있으며 당분간 자체적인 IDE 제작
계획은 없음 (Fuse 인원이 약 20명 수준인 점을 감안)
•Sublime Text 3에 자동완성 가능한 Extension을 Fuse SDK 설치시 자동 설치
하도록 되어 있음
•현재 약 1만명 정도 베타 테스트 신청 중이나 약 300명 정도에게만 공개되있음
(2015년 5월 현재)
Fuse 회사 소개
• 퓨즈는 노르웨이 오슬로에 기반을 둔 스타트업이다.
2015년 1월 280만달러(약 30억원)를 투자받는 데
성공하고 최근 미국도 진출함
• ▶임수미 Fuse 미국지사장(왼쪽)과 안더슨 라센
Fuse 최고경영자(오른쪽)
관련 뉴스 techcrunch.com/2015/01/27/fuse-raises-2-8-million-for-a-cross-platform-app-development-
platform-where-designers-play-a-bigger-role/
Q & A
감사합니다!

More Related Content

What's hot

Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅
JinKwon Lee
 
1.openseminar
1.openseminar1.openseminar
1.openseminar
NAVER D2
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
jinwook shin
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
NAVER D2
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
Leonardo Taehwan Kim
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기
Hyeonmin Kim
 
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
Kenu, GwangNam Heo
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
Sang Seok Lim
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
Tai Hoon KIM
 

What's hot (20)

Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
Golang+on+analytics+and+blockchain
Golang+on+analytics+and+blockchainGolang+on+analytics+and+blockchain
Golang+on+analytics+and+blockchain
 
1.openseminar
1.openseminar1.openseminar
1.openseminar
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권
 
어플리케이션 및 웹 개발
어플리케이션 및 웹 개발어플리케이션 및 웹 개발
어플리케이션 및 웹 개발
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선[D2 오픈세미나]1.무한스크롤성능개선
[D2 오픈세미나]1.무한스크롤성능개선
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
 
지금 우리에게 필요한 것은
지금 우리에게 필요한 것은지금 우리에게 필요한 것은
지금 우리에게 필요한 것은
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
JavaScript MEAN 스택
JavaScript MEAN 스택JavaScript MEAN 스택
JavaScript MEAN 스택
 
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
대규모 프로젝트 개발이야기 - 이승헌, 유나이트 코리아 2014
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
 
모두의 클라우드 딥러닝
모두의 클라우드 딥러닝모두의 클라우드 딥러닝
모두의 클라우드 딥러닝
 

Viewers also liked

웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
Hansung University
 
Linked Data Technology and Status
Linked Data Technology and StatusLinked Data Technology and Status
Linked Data Technology and Status
Myungjin Lee
 
Linked Data in Healthcare and Life Sciences
Linked Data in Healthcare and Life SciencesLinked Data in Healthcare and Life Sciences
Linked Data in Healthcare and Life Sciences
James G. Boram Kim
 
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
NAVER D2
 

Viewers also liked (20)

Weirdmeetup xamarin-presentation
Weirdmeetup xamarin-presentationWeirdmeetup xamarin-presentation
Weirdmeetup xamarin-presentation
 
웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
웹의 또 다른 모습, 글로벌 데이터베이스 Linked open data
 
도서관 Linked Open Data의 필요성
도서관 Linked Open Data의 필요성도서관 Linked Open Data의 필요성
도서관 Linked Open Data의 필요성
 
쉽게 이해하는 LOD
쉽게 이해하는 LOD쉽게 이해하는 LOD
쉽게 이해하는 LOD
 
Linked Data Technology and Status
Linked Data Technology and StatusLinked Data Technology and Status
Linked Data Technology and Status
 
Linked Data in Healthcare and Life Sciences
Linked Data in Healthcare and Life SciencesLinked Data in Healthcare and Life Sciences
Linked Data in Healthcare and Life Sciences
 
링크드 데이터 사례
링크드 데이터 사례링크드 데이터 사례
링크드 데이터 사례
 
Open Data and Linked Data
Open Data and Linked DataOpen Data and Linked Data
Open Data and Linked Data
 
공공데이터와 Linked open data
공공데이터와 Linked open data공공데이터와 Linked open data
공공데이터와 Linked open data
 
Angular2를 위한 타입스크립트
Angular2를 위한 타입스크립트Angular2를 위한 타입스크립트
Angular2를 위한 타입스크립트
 
Sublime text editor 3 설정 및 사용법 v1.4
Sublime text editor 3 설정 및 사용법 v1.4Sublime text editor 3 설정 및 사용법 v1.4
Sublime text editor 3 설정 및 사용법 v1.4
 
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
[222]딥러닝을 활용한 이미지 검색 포토요약과 타임라인 최종 20161024
 
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
Linked Data 4 principles
Linked Data 4 principles Linked Data 4 principles
Linked Data 4 principles
 
LOD(linked open data) part 1 lod 란 무엇인가
LOD(linked open data) part 1   lod 란 무엇인가LOD(linked open data) part 1   lod 란 무엇인가
LOD(linked open data) part 1 lod 란 무엇인가
 
LOD (linked open data) part 2 lod 구축과 현황
LOD (linked open data) part 2   lod 구축과 현황LOD (linked open data) part 2   lod 구축과 현황
LOD (linked open data) part 2 lod 구축과 현황
 
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
 
결제를 구현하고 싶은 개발팀을 위한 안내서
결제를 구현하고 싶은 개발팀을 위한 안내서결제를 구현하고 싶은 개발팀을 위한 안내서
결제를 구현하고 싶은 개발팀을 위한 안내서
 

Similar to Fuse소개

NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
Jubok Kim
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Sung-tae Ryu
 

Similar to Fuse소개 (20)

Unity소개
Unity소개Unity소개
Unity소개
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
 
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템
 
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
NDC2011 - 카메라 시스템을 통해 살펴보는 인터랙티브 시스템 개발의 문제점
 
18.10.05 Fusion 360 Meetup in Busan
18.10.05 Fusion 360 Meetup in Busan18.10.05 Fusion 360 Meetup in Busan
18.10.05 Fusion 360 Meetup in Busan
 
[NDC17] Protocol:hyperspace Diver 개발 포스트모템
[NDC17] Protocol:hyperspace Diver 개발 포스트모템[NDC17] Protocol:hyperspace Diver 개발 포스트모템
[NDC17] Protocol:hyperspace Diver 개발 포스트모템
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
 
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
[IGC2017] Protocol:hyperspace Diver 개발 포스트모템
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 
Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지Android와 Flutter 앱 개발의 큰 차이점 5가지
Android와 Flutter 앱 개발의 큰 차이점 5가지
 
develop android app using intellij
develop android app using intellijdevelop android app using intellij
develop android app using intellij
 
Mobile/Embedded for Silverlight
Mobile/Embedded for SilverlightMobile/Embedded for Silverlight
Mobile/Embedded for Silverlight
 
고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화고성능 애니메이션 개발 기법 및 성능 최적화
고성능 애니메이션 개발 기법 및 성능 최적화
 
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
 
Metaverse 세상 속 컨텐츠는 어떻게 만들어 질까?
Metaverse 세상 속 컨텐츠는 어떻게 만들어 질까?Metaverse 세상 속 컨텐츠는 어떻게 만들어 질까?
Metaverse 세상 속 컨텐츠는 어떻게 만들어 질까?
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 
다문화 IT방문지도사 2015 skillup ppt 스마트폰, 무비메이커, 크롬브라우저
다문화 IT방문지도사 2015 skillup ppt 스마트폰, 무비메이커, 크롬브라우저다문화 IT방문지도사 2015 skillup ppt 스마트폰, 무비메이커, 크롬브라우저
다문화 IT방문지도사 2015 skillup ppt 스마트폰, 무비메이커, 크롬브라우저
 
Unity시작하기
Unity시작하기Unity시작하기
Unity시작하기
 
Creating text to talk active image(nanheekim)
Creating text to talk active image(nanheekim)Creating text to talk active image(nanheekim)
Creating text to talk active image(nanheekim)
 

More from EungShik (Henry) Kim

More from EungShik (Henry) Kim (12)

[Apple] 애플 wwdc 2015 중요사항 공유 세미나
[Apple] 애플 wwdc 2015 중요사항 공유 세미나[Apple] 애플 wwdc 2015 중요사항 공유 세미나
[Apple] 애플 wwdc 2015 중요사항 공유 세미나
 
What is mdm
What is mdmWhat is mdm
What is mdm
 
[Osx dev] server essential lesson 11. managing with profile manager
[Osx dev] server essential   lesson 11. managing with profile manager[Osx dev] server essential   lesson 11. managing with profile manager
[Osx dev] server essential lesson 11. managing with profile manager
 
[Osx dev] server essential lesson 10. configuring os x server to provide de...
[Osx dev] server essential   lesson 10. configuring os x server to provide de...[Osx dev] server essential   lesson 10. configuring os x server to provide de...
[Osx dev] server essential lesson 10. configuring os x server to provide de...
 
How to Develop iDrummer for the 1st time
How to Develop iDrummer for the 1st timeHow to Develop iDrummer for the 1st time
How to Develop iDrummer for the 1st time
 
How To Distribute iPhone Apps to App Store
How To Distribute iPhone Apps to App StoreHow To Distribute iPhone Apps to App Store
How To Distribute iPhone Apps to App Store
 
OpenGL ES on iOS
OpenGL ES on iOSOpenGL ES on iOS
OpenGL ES on iOS
 
iOS 5 & Xcode 4: ARC, Stroryboards
iOS 5 & Xcode 4: ARC, StroryboardsiOS 5 & Xcode 4: ARC, Stroryboards
iOS 5 & Xcode 4: ARC, Stroryboards
 
Osx cocoa study-ch36_nstask
Osx cocoa study-ch36_nstaskOsx cocoa study-ch36_nstask
Osx cocoa study-ch36_nstask
 
2D games with iOS or Corona
2D games with iOS or Corona2D games with iOS or Corona
2D games with iOS or Corona
 
What is corona sdk (Korean)
What is corona sdk (Korean)What is corona sdk (Korean)
What is corona sdk (Korean)
 
Smart phone&tv 20101015
Smart phone&tv 20101015Smart phone&tv 20101015
Smart phone&tv 20101015
 

Fuse소개

  • 2. Fuse 알게된 계기 • 실리콘벨리를 꿈꾸는 판교사람들 - https://www.facebook.com/groups/pantechtalk/ • 지난 5월 13일 수요일 저녁 7시에 판교공공지원센터에서 Fuse 세미나 개최 - https:// www.facebook.com/ photo.php?fbid=10153215972257088&set=gm.679147015563971&type=1&th eater
  • 3. Fuse 란? • 퍼포먼스와 애니메이션에 중점을 둔 크로스 플랫폼 앱 개발 도구임 • 소개 동영상 - Fuse 소개 영상(유투브)
  • 4. Fuse의 탄생 배경 • Designer의 레이아웃이나 애니메이션 등의 각가의 디자인 작업들이 개발자에게 전달되는 과정이 매끄럽지 못하다고 생각함 • 하이브리드 앱의 경우의 디자이너가 애니메이션에 대해서 고려하지 않거나 설명할 수 없 는 경우가 많음. 설명해도 기획자나 개발자가 못 알아들을 수도... • 하이브리드 앱의 경우 화면 레이아웃은 퍼블리셔Publisher가 담당하는데 역시 애니메이션 과 같은 사용성을 고려하기 쉽지 않은 것이 현실 • 최종 Native에 반영하는데 있어 Android와 iOS의 플랫폼이 상이하여 디자인 가이드라인 이 반영되기 어려운 것이 현실
  • 5. Fuse의 문제 해결 과정 • 1단계: 개발언어 통합 - Android, iOS 각각 Java와 Objective- C(또는 Swift)로 나누어진 언어 대신하여 C#에서 .Net을 제거한 Uno라는 언어를 사용하여 C++/.Net/Javascript로 크로스 컴파일 을 할 수 있도록 새로운 마크업 언어를 만듬 • 2단계: 화면 레이아웃, 타이포그라피, 애니메이션, 이벤트 트리 거, ...등을 포함하는 새로운 Fuse 라이브러리 생성 • 3단계: HTML과 거의 흡사한 새로운 마크업 언어(xml)를 생성
  • 6. Fuse 특징 (1/2) •OpenGL ES 렌더링을 사용하여 네이티브의 퍼포먼스를 실현 •1080p 영상을 재생하면서 실시간 Blur를 구현할 수 있을 정도의 성능 •OpenGL을 사용하는 게임 들에서 발견되는 발열과 배터리 소모 이슈는 iOS 의 Quartz Composer와 같이 GUI Rendering 방식과 동일하게 Idle상태에서 는 자원 사용을 전혀하지 않음 •OpenGL ES 표준을 철저히 따르고 있기 때문에 호환성 문제는 아직 발견되 지 않음. (단, 자체 제작한 Shader를 사용하는 경우 호환성에 문제가 있을 수 있음)
  • 7. Fuse 특징 (2/2) •레이아웃 구성에 있어 자체적으로 제공하는 콤포넌트를 사용하는 경우 Uno code(C++)에 대한 이해없이 화면을 구성 가능 •크로스 플랫폼 지원 Target: .Net EXE, Android, iOS, MSVC12, CMake(OS X), 그리고 WebGL
  • 8. Fuse UX 레이아웃 특징 •Fuse UX XML 마크업은 각 콤포넌트를 직관적으로 이해할 수 있도록 제작되 어 Android XML 코드 보다 훨씬 가독성이 높다는 평가를 받고 있음 •각 콤포넌트의 레이아웃 내에서 제스처, 애니메이션, 색상, 크기 등 다양한 변 화를 중첩하여 사용할 수 있음 •애니메이션은 Easing Curves를 기본적으로 지원하여 다양한 애니메이션 효 과를 간단하게 구현 가능 •마크업 내에 필요한 경우 Javascript도 사용 가능 참고) Easing Curves - http://easings.net/
  • 9. Fuse 데모 •Fuse beta SDK 설치 과정: Mono Framework, Fuse SDK •Fuse 예제 •Fuse 라이브 코딩
  • 10. Fuse의 목표 그리고 ... •아직 Closed-beta 단계, 베타테스터에게는 Daily Build를 제공 •궁극의 목표는 디자인너 또는 퍼블리셔가 손쉽게 레이아웃을 만들 수 있도록 하 는 것이 목표 •1.0 릴리즈는 2015년 하반기 예정, 무료 버전, ... •코드 에디터는 Sublime Text 3를 사용하고 있으며 당분간 자체적인 IDE 제작 계획은 없음 (Fuse 인원이 약 20명 수준인 점을 감안) •Sublime Text 3에 자동완성 가능한 Extension을 Fuse SDK 설치시 자동 설치 하도록 되어 있음 •현재 약 1만명 정도 베타 테스트 신청 중이나 약 300명 정도에게만 공개되있음 (2015년 5월 현재)
  • 11. Fuse 회사 소개 • 퓨즈는 노르웨이 오슬로에 기반을 둔 스타트업이다. 2015년 1월 280만달러(약 30억원)를 투자받는 데 성공하고 최근 미국도 진출함 • ▶임수미 Fuse 미국지사장(왼쪽)과 안더슨 라센 Fuse 최고경영자(오른쪽) 관련 뉴스 techcrunch.com/2015/01/27/fuse-raises-2-8-million-for-a-cross-platform-app-development- platform-where-designers-play-a-bigger-role/
  • 12. Q & A