ionic 에서 crosswalk 를 사용해야 하는 이유

Posted by Everyharu
2016.08.29 22:46 IT/ionic

 



ionic 은 Android의 경우 4.1 부터 지원한다. 하지만 4.1에서 하이브리드 앱에는 커다란 문제가 있다. 바로 브라우징 속도이다.

Android 의 경우 2.x~4.3 까지는 Webkit 기반의 Webview를 사용해왔다. 이 때문에 속도에 문제가 많이 발생한다.

하이브리드 앱이 여전히 속도가 별로라는 느낌이 없지않은데 Webkit 까지 더해지면 느리다는 느낌이 든다.


이걸 해결해주는게 바로 crosswalk 이다.

좀 더 자세한 내용을 알고 싶다면 다음 링크를 참고하자.

http://blog.ionic.io/crosswalk-comes-to-ionic/

https://crosswalk-project.org/documentation/cordova.html


설치법은 별거 없다. 그냥 프로젝트가 있는 디렉토에서

ionic browser add crosswalk

를 입력해주면 설치가 된다.


이 crosswalk 를 추가하고 빌드하는 순간 완성되는 앱의 사이즈가 갑자기 apk 파일 사이즈가 30MB까지 커져버린다.
문서를 보면 10~15mb 정도가 커진다고 되어있다.

속도를 위해 추가적인 라이브러리가 추가된 것이다.


이유인즉 4.1~4.3 의 안드로이드에서도 크롬웹뷰를 사용하게 해주는것이다. 크롬웹뷰를 내장하기 위한 희생이라고 보면된다.

하이브리드앱의 관심사는 속도이므로 이까짓 용량은 조금 추가해주고 속도를 얻도록 하자.

이 댓글을 비밀 댓글로
    • neoamuro
    • 2017.02.16 12:53 신고
    크로스워크 찾다가 이 글 발견했는데 정말 감사드립니다.
    지금은 ionic browser add crosswalk 이 명령어가 폐기됐다고 하네요.

    다음과 같이 설치해야 한다고 합니다.
    cordova plugin add cordova-plugin-crosswalk-webview

    저는 속도 때문이 아니라 특정 안드로이드에서 css가 깨져서 설치했습니다.
    설치한 후에 css 깨지는 안드로이드폰에서 실행해보니까 잘 되더군요.
    아마도 그 안드로이드폰 기본브라우저가 크롬설정이 안되어 있었나 봅니다.
    아이오닉에서는 기본 브라우저를 기본으로 웹뷰를 띄우나 봐요;;

    요즘 아이오닉 개발하고 있는데.. 개발자님 블로그에 유용한 정보가 정말 많이 있네요.
    글도 잘 쓰시고 설명도 잘 해주시는거 같고 댓글도 잘 달아주시는거 같네요 ㅎ
    댓글 알람을 위해서 티스토리에 로그인해야 하는데... 오래전에 써서 아이디가 사라진듯 합니다 ㅠㅠ;;
    초대장도 없구요...ㅠㅠ
    혹시 여유가 되신다면 neoamuro@naver.com 으로 초대장 좀 보내주시면 안될까요 ㅎ;;
    아이오닉 전문가이신 개발자님께 여러가지 도움을 좀 얻고 싶습니다~
    • ㅎㅎ 좋게 봐주셔서 감사합니다. 티스토리는 요즘 앱설치하면 아이디 그냥 만들어져요 ㅎㅎ 글고보니 브라우저별로 css호환이 달라서 생기는 문제해결에 도움이 된다는 내용도 안적었었네요 ㅎㅎ
    • neoamuro
    • 2017.02.16 13:07 신고
    아.. 넵 ~ 앱 설치하고 친추하겠습니다~
    빠른 답변 감사합니다~~
    • 알고싶어요
    • 2017.02.22 13:36 신고
    저렇게 깔고 크로스워크를 어떻게 사용해야되나요 ipappbrowser처럼 js파일에 코딩하나요 아니면
    iframe 이나 링크로 이동시키면 crosswalk가 자동적용되는건가요??
    • 안드로이드 컴파일하면서 기본웹뷰를 크로스워크로 사용하도록 자동 적용하는겁니다. 당연히 따로 코딩할 필요는 없습니다
    • 알고싶어요
    • 2017.02.22 13:47 신고
    아그러면 js파일에 따로 쓸필요없이 html에 link나 iframe으로 하면 된다는말씀이시죠??
    • 아이오닉과 같은 웹앱은 기본적으로 웹을 기반으로 하기 때문에 웹앱이라고 부르는 거랍니다.
      이 웹앱이란건 안드로이드 앱내부에서 웹뷰라고 하는 웹브라우저를 통해서 html 환경을 구현해 주는것이구요. 앱 자체가 웹브라우징되는걸 보여주는 앱이라는 거죠.
      그런데 안드로이드 자체에서 제공하는 웹뷰는 버전마다 호환성에 차이가 있고 다르게 표현되곤 합니다.
      이를 하나의 호환성으로 통일해 주는것이 이 크로스워크라는 녀석입니다.
      애초에 link던 iframe 과 같은 녀석들이랑 별로 관련없는 거에요.

      혹시라도 그래도 이해가 안가신다면 웹앱의 구동방식에 대해서 좀 더 찾아보시고 이해하실 필요가 있겠네요^^
    • 알고싶어요
    • 2017.02.22 14:00 신고
    아 제가 지금 ionic을 껍데기로만 사용해서 이해가 안됬었어요. html css angularjs 파일로 꾸민 후 ionic에서 제가 만든 저 url로 웹뷰만 띄우는중이라 그 실행시킨다는 말이있어야되거든요 그래서 link나 iframe으로 불러도 적용이 되나 궁금했습니다.
      • 알고싶어요
      • 2017.02.22 14:04 신고
      저렇게 2가지방법으로 띄우는 거나 inappbrowser로 띄워도 적용이 되나궁금합니다.
    • 껍데기로만 사용할 경우에는 ionic 이나 기타 다른 웹앱 프레임워크를 사용하는건 추천드리기 힘듭니다.
      네이티브로 해당 페이지를 호출해도 빠르다고 하기는 힘든데 ionic이나 cordova 와 같은 것들이 들어가기 시작하면 앱 자체가 무거워질 뿐만 아니라 crosswalk 같은게 들어가면 용량까지 커져버립니다.
      게다가 어차피 주소가 있는 웹페이지를 로딩하시는거라면 css호환성은 당연히 신경써서 만들어야 하니 crosswalk 를 쓸 이유도 없구요.
      차라리 네이티브 앱으로 웹뷰를 만드시기를 추천드립니다.
      • 알고싶어요
      • 2017.02.22 14:11 신고
      아 그렇군요 네이티브에서 안하는이유가 그냥 가벼운 어플 보여줄거고 하이브리드로 ios나 안드로이드에서 보여주는 방식때문에 ionic을 껍데기로 사용하는거거든요 push기능이나 cordova 플러그인사용할 것도 대비해서요 ㅎㅎ 그럼 그냥 인앱브라우저로 띄우는걸로 택해야겠네요
      • 알고싶어요
      • 2017.02.22 14:11 신고
      아 그렇군요 네이티브에서 안하는이유가 그냥 가벼운 어플 보여줄거고 하이브리드로 ios나 안드로이드에서 보여주는 방식때문에 ionic을 껍데기로 사용하는거거든요 push기능이나 cordova 플러그인사용할 것도 대비해서요 ㅎㅎ 그럼 그냥 인앱브라우저로 띄우는걸로 택해야겠네요
    • 외부 웹페이지를 띄우는거라면 웹앱 프레임워크를 쓰는 의미가 없습니다.
      cordova push기능같은걸 쓰려해도 애초에 링크된 웹페이지에서 구동하는 방식이 아닙니다. 내부파일로 구성된 html 파일에서 호출하는거죠.
      https://github.com/slymax/webview
      같은 네이티브를 사용하시거나 외부 링크가 아닌 아이오닉 프레임워크용으로 만드셔야 합니다.
      • 알고싶어요
      • 2017.02.22 14:19 신고
      아하 감사합니다. 회사에서 ionic으로 cordova 플러그인사용할거니 꼭 껍데기로사용하고 만든것들 링크로 불러오는식으로 하라고해서 질문드린거예요 불러오는거 검색해보면서 crosswalk라는걸 보게되서질문드렸는데 이제야 이해가되네요 ㅎㅎ
    • 음...왜 굳이 ionic 으로 쓰려는 이유를 저로서는 알기 힘드네요...

      ionic 은 angular 를 기본으로 가져가는 프레임워크인데...
      어차피 링크식이면 angular 로 인한 모듈이 가볍지는 않기에 차라리 cordova 를 쓰시는게 나을거라고 보구요...

      만약 꼭 ionic으로 껍데기로 만들라고 한다면 저라면 첫페이지정도는 ionic으로 개발하고 링크된 부분만 inappbrowser를 사용하는 식이겠네요...
      ionic push 등을 활용하려면 웹페이지에서 앱 내부에 위치한 필수 js 라이브러리를 호출할 수 있어야하는데 뭐...잘 찾아서 수정하고 하면 될수야 있겠지만...외부로 노출된 부분이 아니라면 찾아서 쓰는것도 쉬운 작업이 아닐거라고 봅니다..

      안드로이드와 아이폰용 개발을 아예 하실 수 없는 상황이라면 뭐 어쩔수 없을수는 있지만...별로 추천드리고 싶진않네요...

      아무튼 어차피 웹페이지를 랩핑하시려는 거라서 crosswalk 는 굳이 안사용하시는게 좋을거라고 생각됩니다.
      앱의 사이즈가 커지니까요..
      • 알고싶어요
      • 2017.02.22 15:14 신고
      뭐,..회사에서 원하는방향으로 해야되는거니 어쩔수없죠.. ㅎㅎ 정말감사합니다. 도움이 많이됐어요