'하이브리드앱' 카테고리의 글 목록

Flutter란

하이브리드앱 2019. 12. 27. 07:27

728x90

구글 검색으로 Flutter 에 대해 찾아서 요약 정리를 해 본 것이다.

인프런 사이트에서 25% 할인을 미끼로 하길래 Flutter 강좌들은 수강생 평이 좋아서 결제를 했는데 무작정 결제를 한 것이 후회된다. 좀 더 정보 수집을 하고 나서 할 껄~~~

수많은 하이브리드앱이 출시되고 시장에 자리잡기 위한 노력을 하지만, Flutter가 개발자의 헛된 투자가 되지 말아야 할텐데 하는 마음이 든다.

아직 초보인지라 개발 익히려고 투자한 노력 대비 효과가 부족할 거 같아 먼저 iOS Swift 배우고 나서 시작해 볼 생각이다. Android도 코틀린 배워야 해서 항상 배워야 하는 것이 힘들다.

안드로이드 C/C++ 프로그래밍 책을 교보문고에 가서 사오기는 했는데, 언어가 코틀린으로 되어 있다.

다른 NDK 책들은 오래전에 출시되어 Eclipse 기반으로 설명이 되어 있는거 같더라.

플랫폼 시장에서는 어떤 기업이, 혹은 어떤 프레임워크가 최종 승자가 될지 아무도 알 수 없다.
크로스 플랫폼 기술은 하나의 코드를 여러 플랫폼에서 사용할 수 있게 해주는 기술을 말한다.
유명한 크로스 플랫폼으로 Xamarin, React Native, Flutter를 꼽을 수 있다.
Xamarin은 UI 개발 편의성이 좋지 않다는 점이 약점이다.
Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크이다.
Flutter는 기존에 존재하는 Android와 iOS의 위젯을 사용하지 않고, 자체 Skia 엔진을 이용해 UI를 ‘그리는’ 방식을 사용한다.
Google이 제공하는 위젯을 통해, iOS에서 Cupertino 디자인을, Android에서 Material 디자인을 쉽게 구현할 수 있다.
Android Studio 에서 개발이 가능하고, 개발한 코드를 수정과 동시에 적용하여 살펴볼 수 있는 Hot Reload 시스템도 적용되어 있다.
그외 IntelliJ, VS Code를 사용하여 빌드가 가능하다.
기존 React Native 혹은 Hybrid App의 경우 브릿지를 통한 통신이 불가피했다. 하지만 Flutter는 직접 컴파일되서 Render를 직접 하기때문에 성능이 빠르다.
안드로이드(Java, Kotlin)와 iOS(Object-C, Swift)에서 동작하는 앱을 하나의 코드 베이스로 구현할 수 있는 것은 대단히 큰 장점이다.
아직 플러그인들은 부족한 편이고, 구글에서 만든 언어인 Dart를 사용하는 것은 Flutter의 가장 큰 단점이다.

Flutter가 아무리 자기 스스로를 크로스 플랫폼 앱 개발 툴킷이라고 부르지만, 결국 개발이 조금만 진전되면 그때부터는 안드로이드와 iOS 부분에 자잘하게 손이 많이 간다.
뭐 자세히 알지는 못하더라도 일단 어떤 패키지를 사용할때 어떤 플랫폼에는 어떤 문제 문제가 있다던지, 문제가 생겼을 때 해결책이 다르다던지 하는 것들이 상상 이상으로 많다.
구글팀의 대응이 상당히 느리다는게 큰 문제이다. 비록 깃헙을 통해 오픈소스로 이루어져 있고, 외부 개발자들의 피드백을 열심히 대응하고 있는것은 확실하다.

Android Jetpack
Jetpack은 개발자가 고품질 앱을 손쉽게 개발할 수 있게 돕는 라이브러리, 도구, 가이드 모음이다.
Jetpack은 플랫폼 API와는 별도로 제공되는 androidx.* 패키지 라이브러리로 구성된다.
Android Jetpack 구성요소는 개별적으로 채택할 수 있고 생산성을 향상하는 Kotlin 언어 기능을 활용하면서 함께 작동하도록 빌드된 라이브러리 컬렉션이다.

저작자표시 비영리

'하이브리드앱' 카테고리의 다른 글

[jQuery mobile] UI Layout 구성 (0)	2018.11.23
PhoneGap 안드로이드 APK 정렬하기 (0)	2018.11.23
PhoneGap CLI 설치 과정 (0)	2018.11.22

Link2Me

,

[jQuery mobile] UI Layout 구성

하이브리드앱 2018. 11. 23. 23:26

728x90

jQuery mobile 을 이용하여 화면 프레임을 구성하면 비교적 깔끔하게 보이는 걸 알 수 있다.

먼저 구글에서 jQeury mobile 을 검색하여 https://jquerymobile.com/ 로 접속한다.

데모를 눌러서 가장 최신버전의 안정적 버전 데모를 눌러 jQuery mobile의 기본적인 기능을 익힌다.

index.html 파일을 아래와 같이 변경해보자.

header, content, footer 영역으로 나누어 구성한다.

header 와 footer 영역을 고정하는 것은 data-position="fixed" 를 추가하면 된다.

sub.html 파일에서 헤더 영역을 <div data-role="header" data-theme="f" data-position="fixed" data-add-back-btn="true">와 같이 수정해보면 백버튼이 생기고 누르면 뒤로 가기가 되는 걸 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
   <div data-role="header" data-theme="b" data-position="fixed">
       <a href="#" data-icon="back">이전</a>
       <h1>Header</h1>
       <a href="#" data-icon="home" data-iconpos="notext" data-theme="b">홈</a>
   </div>
   <div data-role="content">
       <ul data-role="listview" >
           <li data-role="list-divider"> 내부 도메인</li>
           <li><a href="sub.html" data-transition="slide">내부 페이지</a></li>
           <li><a href="sub.html" data-rel="dialog" data-icon="grid">다이어로그 페이지</a></li>
           <li data-role="list-divider"> 외부 도메인</li>
           <li><a href="sub.html" rel="external" data-transition="slide">외부링크 사용 내부페이지 열기</a></li>
       </ul>
   </div>
   <div data-role="footer" data-theme="b" data-position="fixed">
       <h2>Footer</h2>
   </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<div data-role="page" id="page">
   <div data-role="header" data-theme="f" data-position="fixed">
       <h1>Sub 페이지</h1>
   </div>
   <div data-role="content">
       <h1>페이지 링크 연습</h1>
       <p>다양한 종류의 링크 연습</p>
       <a href="#" data-role="button" data-rel="back" data-icon="back" data-theme="a" >돌아가기</a>
   </div>
   <div data-role="footer" data-theme="d" data-position="fixed">
       <h2>Footer</h2>
   </div>
</div>
</body>
</html>