자유게시판

크로스플랫폼 어플리케이션... 뭐가좋을까?

Hanam092020.01.25 11:31조회 수 105댓글 8

    • 글자 크기

//아직 비공개인데 일단 게시판에다 임시저장..


안드로이드앱과 iOS앱을 만들려면 각각의 플랫폼에 맞는 언어로 앱을 만들어야합니다.


안드로이드는 Java 또는 Kotlin

iOS 는 Objective-C 또는 Swift 로요


이렇게 Native로 만들어진 앱은 각각의 플랫폼에 맞는 최대한의 성능을 끌어올릴수 있다는 장점이 있죠.

하지만 저 둘을 다른언어로 만든다는건 그만큼의 시간과 비용이 더 들어간다는 것이 되겠죠,,


저는 앱이 어떤 언어로 만들어지든 사용자경험에 악영향을 미치지 않는다면 괜찮다고 생각하는 사람입니다.

그래서 굳이 저 어려운 Java나 배울생각없는 Swift를 사용할 필요가 없다고 생각합니다.


더 이상 저 언어 없이 여러분이 쉽게 할 수 있는 JavaScript로 모든것을 이제 할 수 있게되었습니다.


1. 모바일 앱을 만들어보자.


일단 성능상으로는 각각의 플래폼에 맞는 앱이 가장 빠릅니다. 이 성능은 사실상 완전히 따라잡기는 힘듭니다.


- 웹 기술로 앱을 만들기


  1. HTML, CSS, JavaScript로 앱을 만들 수 있습니다.
  2. Cordova나 Ionic 같은 도구를 사용하면 Html, CSS, JavaScript 를 WebView로 보여주기 때문에 이걸로 앱을 만들 수 가 있어요.
  3. 제가 직접 만들어 봤는데 성능이 낮거나 한건 못느꼈습니다. 순도 100%웹페이지이기 때문에 ReactJS, VueJS 같은것도 당연히 올려서 쓸 수 있고요.
  4. CSS만 잘 올려주면 이게 웹으로 만들어진건지.. 아님 네이티브 안드로인드인지 모릅니다. Angular의 Onsen UI나 Vue의 Vuetify또는 React의 material-ui이것도 아니라면 material.io 로 만들면 완벽한 앱의 UI 뚝딱 완성됩니다.
  5. 근데 저도 처음에 material.io 쓰다가 너무 무거운거 같아서 material.io디자인을 모방한 디자인을 만들었는데 Ripple을 도저히 네이티브앱처럼 구현을 못하겠어서 React의 material-ui로 넘어갔습니다. Onsen-UI는 Ripple의 반응성이 너무 늦고, Vuetify는 스크롤시 Ripple이 무조건적으로 표시되서 맘에 안들고 React material-ui가 가장 맘에 들더라구요. 
  6. 아 그리고 이렇게 만들면 저장소나 카메라나 배터리 정보 같은걸 읽지 못하느냐 하실 수도 있는데 Cordova의 Plugin 을 이용하면 가능합니다.
  7. JavaScript다 네이티브 자원에 접근할수 있도록 브릿지를 제공해줘요.
  8. 하지만 저는 성능을 위해 이런 브릿지사용을 최소화합니다. 
  9. 시대가 지나면서 웹브라우저도 많이 발전했습니다. 안드로이드의 WebView는 대부분 크로미움기반인데 요즘 크로미움 기반 브라우저들은 navigator 객체에 기기의 상당히 많은 정보들을 제공하더군요. 
  10. 만약 배터리 정보를 얻고싶다 하면 navigator.getBattery()를 사용하면 정보를 돌려주겠다고 약속합니다. then에다가 배터리 정보가 담긴 BatteryManager객체를 인자로 넣어줍니다.
  11. 위치정보를 얻고싶다면? GeoLocation API를 사용하면 됩니다.
  12. 저장공간이 필요하다면? IndexDB나 FileSystem, WebSQL, 간단한 텍스트 정보라면 localStorage를 사용하면 되겠군요.
  13. 블루투스연결? navigator.bluetooth.requestDevice를 사용하면 됩니다.
  14. 이제는 웹이 많은것을 할 수 있게되었습니다..


- JavaScript 를 네이티브로! NativeScript 를 사용.


이건 웹기술이 아니라 자체 언어를 사용하는겁니다.

저는 잘 모르겠지만, 웹의 DOM 을 변경하는건 매우 비싸다고 하더군요 그래서 나온게 필요한 최소한의 돔을 업데이트시키는 ReactJS인데 여기에다가 조금 더해서 이걸 네이티브로 만들어서 극적인 성능을 꾀하자 라는게 React Native입니다. ReactJS 와 React Native의 철학은 같지만 이 둘은 엄연히 다릅니다. 

이 React Native 는 Java로된 React Native 코어 소스가 index.android.bundle안의 번들링된 JS를 읽어들이고 안드로이드의 위젯을 가져와서 렌더링합니다.


위의 하이브리드앱과 다른점은... 이건 진짜 안드로이드 네이티브위젯을 가져다 쓴다는겁니다. 

근데 이게 어떻게 JS가 네이티브 위젯을 쓰냐면 JS파일을 읽어들이는 React Native 코어 소스가 JS파일을 읽어들이고 해석해서 알맞게 코어가 실행합니다.


그래서 React Native가 성능저하가 없느냐? 

그건 아닙니다. 위에서 말했듯이 JS가 직접 네이티브에서 실행되는건 아니기 때문에 코어소스를 거쳐야 하기 때문에 성능저하가 발생합니다.

그래서 RN은 네이티브 위젯을 사용하기 때문에 뷰 스택이 쌓이면 쌓일수록 성능이 감소해요. 

한번 스와이프할때도 위젯의 상태를 업데이트하기 위해서 초당 수십수백번의 네이티브 브릿지를 거쳐간 통신이 이루어집니다.


당연히 이건 React Native 뿐만이 아닌 비슷한 방식을 가진 Vue Native, Angular Native 같은 NativeScript도 동일한 문제입니다.


그리고 이건 JS가 아니긴 하지만 Flutter와 Xamarin이라는 프레임워크도 있습니다.

Flutter는 Dart 기반이고 Xamarin은 C# 기반입니다. 

Dart는 JS하고 좀 비슷해요.  배워볼만합니다.


Flutter도 크로스플랫폼 네이티브개발가능 언어인데 구글이 만들었죠 React Native에서 영감을 얻었다고 하네요,

React Native와는 달리 크로미움이 사용하는 렌더링엔진인 Skia를 뷰스크린에 전체적으로 올려놓고 UI는 자체 내장된 UI를 사용합니다. 

WebView하고 비슷하다고 할순.... 있을까 싶겠지만 Webview하고는 다르다네여.. UI부분에서는 네이티브 위젯을 사용하지 않고 자체적으로 Dart 코드에 따라 렌더링하기 때문에 여기에서는 그냥 네이티브라고 봐도 무방하답니다. 그냥 기능부분만 브릿지를 통하기 때문에 성능저하가 거의 없다고 봐도 됩니다.


Xamarin도 .NET Framework에다가 각각의 플렛폼에 맞는 모든 API를 우겨넣었기 때문에 네이티브 앱 개발이 가능합니다. 이게 가장 성능상으로는 빠르다는 이야기가 있어요.. 다만 그만큼 용량은 Hello, World 앱 하나에 60MB나 됩니다. 알아서 생각해보시기를요.

 

안녕!

 

    • 글자 크기
설연휴 즐겁게 보내세요 :) (by 네모) 오늘이 호스팅 만료일.. 드디어 빈털털이 방빼야 하는 날..ㅠㅠ (by 다운이즈나우)
  • 2020.1.25 12:02

    플루터도 뜨고 있다고 들었는데 한번 배워보고 싶더라고요.

  • 2020.1.26 05:04

    그래도 조금만 애플리케이션이 복잡해져도 에러가 해결할 수 없는 수준으로 치닫는 경우를 많이 보아서 어떤 회사에 가도 맥이 한 대는 있다고 하더라고요... ㅜㅜ

     

    크로스플랫폼의 컨셉 자체는 좋은데 너무 무겁기도 하고 지나치게 Wrapping하는게 조금 그렇네요.

  • @Seia
    2020.1.26 10:00

    그렇군요 ㅎㄷㄷ 실무적으로는 조금만 복잡해지면 결국 네이티브앱을 만들 줄 알아야 되나보네요.

    자마린이나 플러터는 윈도우나 리눅스 PC만 있으면 안드로이드 앱만 빌드할 수 있고, iOS 앱은 아예 못 하지 않던가요? ㅠㅠ

    플러터가 그나마 아직까지는 구글의 지원이 잘 되어서 업데이트가 잘 되고, 솔리드한 느낌인 것 같아요.

    웹뷰 위주로 사용해보려는데 자마린, 플러터, RN 모두 조금씩 문제가 있긴 하네요~ ㅜㅜ

  • @이니스프리
    Hanam09글쓴이
    2020.1.26 12:47

    그냥 Cordova가 가장 편하더군요. 웹기술이 발달했기 때문에 웹브라우저가 제공하는 Api만 잘 사용하면 네이티브 플러그인이 필요없을 정도입니다.

  • @Hanam09
    2020.1.26 14:32

    말씀을 듣고보니 또 귀가 솔깃하네요~! ^^

    플러터의 안드로이드 웹뷰에서 키보드와 관련된 이슈가 완벽히 해결되지는 않은 것 같아서요.

    플러터를 조금 더 공부해보다가 잘 안 되면 결국 Cordova로 가야겠네요 :)

    조언해주셔서 감사합니다!!

  • @이니스프리
    2020.1.26 18:57

    저는 결국에는 네이티브 앱을 개발하는 것이 맞다고 생각을 합니다. 성능 면에서도 훨씬 뛰어나기 때문이죠. 물론 잘 사용하면 괜찮겠지만 그와 동시에 PWA가 비슷한 포지션까지는 아니지만 빨리 발전해야 한다고 생각합니다. 웹 브라우저 자체에서 제공되는 웹 앱이기에 웹 렌더러가 추가로 존재해야 할 필요도 없습니다. 데스크톱에서는 Chrome으로 이미 편리하게 사용 중입니당.

  • @Seia
    2020.1.26 19:57

    플러터의 경우에는 네이티브 앱에 근접한 퍼포먼스를 보여준다고는 하던데 그래도 역시 네이티브 앱을 따라잡을 수는 없군요!

    제가 프로페셔널한 개발자는 아니지만, 기회가 된다면 앞으로 네이티브 앱까지 공부를 해보겠습니다 ^^

    번번이 조언해주셔서 감사드립니다.

    그럼 Seia 님께서도 즐거운 연휴 되세요~!

  • 2020.1.27 03:15

    재밌게 잘 읽었습니다.

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 [중요] sfuh.tk 기본 제공 도메인 사용하는 분들 확인해주시기 바랍니다.5 마스터 2019.12.29 465
공지 회원 전용 페이지가 생겼습니다.16 마스터 2018.03.20 12010
공지 슬기로운 포인트 벌이를 하는 법50 네모 2018.06.17 3265
5082 오늘 가입했어요12 title: 팬더kgoon 2020.01.30 82
5081 위키 아이디 분실7 논문쓰는중3 2020.01.29 86
5080 제주도에서 찍은 사진 풀어봅니다.12 협스 2020.01.29 84
5079 커뮤니티 사이트의 포인트 소모를 위한 아이디어(!?)34 이니스프리 2020.01.28 245
5078 늦었지만 설 인사 드립니다. ^^12 루디프리아 2020.01.28 83
5077 미루던 것들을 해보고있숩니다.4 로우지 2020.01.27 133
5076 새해복 많이 받으세요!1 YGL 2020.01.26 42
5075 근황 겸 지름 예정입니다!3 협스 2020.01.26 76
5074 지구인들아 너희들의 펜을 나에게 모아줘!2 title: 수수께끼 조형물왕뚠뚠돈까스라이츄 2020.01.26 63
5073 설연휴 즐겁게 보내세요 :)2 네모 2020.01.25 68
크로스플랫폼 어플리케이션... 뭐가좋을까?8 Hanam09 2020.01.25 105
5071 오늘이 호스팅 만료일.. 드디어 빈털털이 방빼야 하는 날..ㅠㅠ3 다운이즈나우 2020.01.25 72
5070 여기는 아카사카입니다4 title: 수수께끼 조형물왕뚠뚠돈까스라이츄 2020.01.25 60
5069 근 1개월간 제작한 XE 자료들11 네모 2020.01.24 132
5068 일단 부딪혀봐야7 협스 2020.01.24 79
5067 2년 연속 출석체크!13 kt0609 2020.01.23 126
5066 이휴 이놈의 스팸 사용자들 ㅠㅠ4 슬기 2020.01.22 85
5065 이제 시작입니다.15 title: 프리미어 프로제르엘 2020.01.21 139
5064 사업자 등록 성공, 이제부터 저도 사업자입니다.19 협스 2020.01.20 147
5063 영상 촬영, 사진 촬영이 필요하다면 모션포토를!16 협스 2020.01.20 140
이전 1 2 3 4 5 6 7 8 9 10... 257다음
첨부 (0)
서버에 요청 중입니다. 잠시만 기다려 주십시오...