brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Dec 03. 2018

웨일 브라우저 / 웹앱과 Web View 프레임워크

UI 디자이너가 알아야할 브라우저, 웹뷰, 브라우저 엔진


네이버 데뷰 2018 영상 중 발췌
모바일 기본 웹앱 브라우저환경인 WebView. 구글에게 휘둘리다가 - 자체 웹 프레임워크를 만들게된 계기. Xwhale (엑스 웨일) 웹엔진. 그리고 웨일 브라우저가 등장하기까지의 과정. 


https://tv.naver.com/v/4578725



이 이야기는 왜 개별  IT 서비스 회사인 네이버가 옛 브라우저 엔진인 webkit 엔진에게 휘둘렸는지를 알아야 이해가 가능한 내용이다. 
네이버 앱은 기본적으로 native 앱이 아니라, 웹앱 형태를 띠고있다. 당시에 웹앱을 개발하기 위해서는 iOS와 안드로이드 OS의 웹앱 기반 webkit 엔진을 통해 개발을 해야했고. 그 결과물을 webview 프레임워크에 넣어야했다. 말 그대로 남의 등에 얻어타고있는 형태로 만들어진 웹앱이라는 얘기다. 





웹 브라우저별 엔진에 대한 간단한 정리본
웹 브라우저 엔진에 대해 잘 모르는 사람이라면. 이 내용을 이해하고 글을 읽는 편이 전반적인 내용 이해에 도움이 된다.


http://clay1987.blog.me/221373408455





Web View 프레임워크에 대한 이야기
https://medium.com/@pks2974/fads-9eea83f47607

웹앱의 장점은 개발기간이 빠르고. 상대적으로 유지보수가 용이하다는 점이다. 하나하나 앱스토어나 플레이스토어측에 알리고, 인증을 받을 필요 없이. 중요한 핵심내용은 서버쪽에서 네트워크를 기반으로  사용자와 통신하는 방식이다.  









기존의 네이버앱은 본래  Webkit 엔진 베이스였다. 그렇다보니 엔진을 만든 회사인 iOS나, 안드로이드 단에서 문제가 생겨버리면 손을 쓸 수 없는 상황이 된다. 그리고 실제로 과거 안드로이드 OS는 워낙 문제가 많았기 때문에 웹앱을 만든 네이버 측에서는 계속 이 문제를 견뎌내야만했다. 






이른바 킷캣 대란이라고 불리는 안드로이드 4.4버전에서. 네이버앱에 대한 사용자들의 불만이 폭주했다. 그러나 이 문제는 구글의 Webview 프레임워크의 문제였고. 이걸 해결하기위해서 온갖 애를 먹었다고한다.








현재는 베타 버전 배포시 미리 QA를 수행해서 버그에 대처하지만. 당시에는 버그 발생시에 직접 대응을 할 방법이 없었다. 왜냐하면 webkit 엔진 자체를 뜯어서 수정할 수 있는 권한이 없기 때문이다. 그래서 억지로 돌아돌아 앱쪽에서 엔진쪽 문제를 해결하려고 - 기괴한 코드를 추가할 수 밖에 없었다고한다. 





그래서 대두된것이 자체엔진을 만들어버리자! 라는 의견이었고. 네이버측은 실제로 그 작업을 진행하게된다.








그래서 직접 만들어봤습니다의 결과. 힉스 웹엔진. 








Kitkat의 webview프레임워크에 문제가 워낙 많았다보니. 해당 내용을 대체하기위한 킷캣용 브라우저엔진을 따로 얹었다. 여기에 바로 힉스 엔진이 들어갔다고한다.









가장 큰 장점은 - 멀티프로세스 기반으로, 웹엔진의 렌더러 기능이 죽어도. 브라우저가 살아있어서 앱 자체가 정지되지않도록 안정성을 추구한것. 이 방식으로 킷캣의 악몽같은 엔진문제를 벗어나게된다.






네이버는 웹 엔진은 바꿨지만, 여전히 webview프레임워크 안에 들어가기위한 구조였다. 그래서 이제는 프레임워크도 다른 규격을 찾아보자! 해서 선택한 것이 Crosswalk 프레임워크. 다만 이 선택으로 인해서 기존의 힉스 엔진을 조금 더 수정해야하는 상황이 된다. 







그래서 crosswalk 프레임워크로 갈아타게된다.








이걸 기반으로 2016년 네이버앱에 적용도 했다...!! 근데.... 







망했어요.... 인텔이 Crosswalk 프레임워크 개발을 포기하면서, 말그대로 나가리됨 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ





그래서 만든것이 웨일 브라우저의 핵심이되는 xwhale 웹엔진이다. 크로미움 엔진을 기반으로 새로 만들었고. 현재는 크로미움 69 버전으로 이사하는중. 크로미움기반이기 때문에 당연히 Offscreen Canvas 기능도 지원이 된다...! 





개발자님 발표하시는데 진짜 힘들어보임 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 웹앱때문에 6주마다 불안에 떠셨다고함. 실제로 5년간 엔진을 두번이나 크게 갈아치우면서 개고생하셨음... 보다보니 이젠 짠하다. 짠해... 그러고도 여전히 안정성에 대한 이슈가 있을 수 밖에 없는게. 웹앱이라 어쩔수가 없다고함.


-


크로미움이 생각보다 개발이 굉장히 빠르기 때문에. 계속 새로운 버전으로이사를 가줘야하고. 그걸 리베이스라고 부르는데. 이 작업이 웹앱들의 입장에서는 상당히 빡센모양이다. 브라우저 엔진이라는게 무에서 유를 창조하는 개념이 아니라서. 이 부분은 어쩔 수 없는 부분이기도 하다. 


웹앱이 만들어지는 기반에대해서 좀 더 심도있게 이해할수있는 영상이었다. 웨일 브라우저의 등장이 난데없이 왜 만들었나 싶었는데. 다 이런 이유가 있었다는것도 알게되니 더 좋았다.







이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.

저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!





단톡방 이용안내

https://brunch.co.kr/@clay1987/113


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari