모바일웹뷰 삽질경험. 정보
모바일웹뷰 삽질경험.
본문
사파리웹뷰에서는 웬만해선 표준코딩만해도 동일하게 작동합니다.
예를들어 아이폰기본웹뷰에서 아작스모바일멀티업로드를 만들었는데. 문제없이작동을합니다.
라이브러리나 카메라모드로 선택적으로 업로드가가능합니다.
하지만 안드로이드웹뷰. 기본적으로 설치되어있는 크롬웹뷰나. 삼성은 하위버젼은 크롬웹뷰를 사용하지않습니다.
그런 기본웹뷰에서는 멀티업로드나 기타여러가지 제이쿼리의 무리없이 작동을하는데,
문제는 사용자들이 기본웹뷰보다는 네이버웹뷰를 많이 사용합니다.
이것이 웹으로 개발할때 큰문제가 되는경우가있습니다. 네이버웹뷰도 결국은 안드로이드 sdk 웹뷰로 제작되었기때문에
기본 크롬웹뷰하고는 성능적인 차이가 많이나고 지원되지않는 제이쿼리들도 많이있습니다.
간단히 말해서 퍼포먼스가 많이 딸립니다.
이번에 네이티브와웹뷰로 앱을만들면서 정말 많은 변수들 문제점들이 있었습니다.
이것이 안드로드파편화의 가장큰문제점이라는걸 몸소느끼며, 이 sdk 기본 웹뷰에대해 몇가지말씀을 드리자면,
다이나믹스크롤로딩.
이것을 개발할때 pc에서 크롬브라우져기준으로 개발을하고 테스트를합니다.
스크롤이 브라우져 하단에위치할때 디비의 다음쿼리문을 요청하고 불러들이는방식인데.
완성된소스를 실기계에서 테스트하던중. 최신안드로이드 기기에서 잘작동하는것들이 갤럭시2나 기타 다른 기계에서는
똑같이 작동을 안하더라구요. 버젼별 웹킷엔진의 미묘한 차이가 있는거같았습니다.
브라우져의 하단에서 제이쿼리가 제때 작동을 안하더라구요.
정말 미쳐버리는 경우입니다.
제이쿼리를 일일이 수정할수도없고 하위버젼에맞추면 또 다른기기에선 작동을안하고..
거의 동적인 요소에서 많은 차이가있었습니다.
모바일사이트를 만들때 피씨에서사용하는 방법은 불편하기때문에 다이나믹스크롤페이징같은 페이징기법을많이사용합니다.
근데 이 다이나믹스크롤로딩의 최대단점은 100개의 게시물에서 상세페이지이동후 다시 리스트로가면 첫페이지로 이동한다는
것입니다.
이문제를 해결한곳은 구글 지메일 모바일사이트뿐이고 , 거의 대분이 이문제를 해결못하는거같았습니다.
고도몰이나 카페24모바일 페이지도 마찬가지구요.
결국 사용자들은 몇번사용해보고 이부분에서 가장 짜증나는경우일것입니다.
네이버 카페 모바일웹같은경우도 신나게 보다 리스트로가면 첫페이지로 이동해버려서 다시 해당게시물로 스크롤해야하는
짜증나는경우가 태반입니다.
웹에서 이문제를해결한곳은 제가본것중에는 구글지메일모바일웹 뿐이었습니다.
저도 장터를만들면서 이문제가 가장심각한문제였습니다.
결국은 자바스크립트 브릿지로 웹과 네이트브간의 별수전달과 통신으로 해당문제를 해결했습니다.
결국 별도페이지를 네이트브로띄우고 해당웹뷰에 해당리스크글의 id값을 보내는방식으로 해결한거죠.
잠시 이야기가 딴 방향으로 흘렀지만 다시 웹뷰이야기를해보자면 문제는또있습니다.
커뮤니티나 기타모바일페이지에서 가장많이사용하는 첨부파일 등록입니다.
저는 모바일에서 멀티업로드를구현했지만, 사진업로드는 네이티브로작업을했습니다.
웹으로가기위한 가장큰문제점은 업로드속도와 업로드전 이미지리사이징이 불가능하기때문입니다.
그리고 일반웹뷰에서 파일업로드시 아작스멀티업로드가 필요한이유를 설명을드리자면
만약중고장터를 웹으로만든다고 가정할때 상품이름과 가격등 작성폼이있습니다.
스마트폰사진한잔의 기본용량은 1mb 넘습니다. 5장만올려도 5 mb 가되고 멀티업로드로 다섯장을 선택하고
사진을업로드시 5mb정도의 파일을 한번에올려야합니다.
3g상태에서 4초-5초정도의 시간이걸리고 lte같은경우도 2초이상걸리는거같습니다.
그래서 아작스모바일업로더를구현할때 이미지파일부분은 맨아래 위치하는게아닌 처음에 이미지업로드를 선택하게합니다.
아작스일경우 이미지를선택하고 업로드를누르면 .3g의 경우 3-5초동안 미리올리고있습니다.
이미지를올리는동안 사람들은 기다리는게아닌 아래상품이나 게시물의 제목과 기타 내용들을 작성합니다.
그작성기간은 10초가넘어가기때문에 이미지는이미 서버에올라가있는 상태입니다.
글작성후 전송버튼을누르면1초 이내에 게시물이 올라갑니다.
저는 이방법이 아작스가아닐경우에도 파일업로드속도는똑같지만 사용자가 느끼는 체감속도는 극과 극이라생각합니다.
아작스업로더가아닌경우 이미지올리는시간을 벌수없기때문에 잠깐 사이트가 다운된건지 사용자들은 착각할정도입니다.
그리고 또하나 서버에올리전에는 이미지용량을 줄일수없다는이유입니다. 네이티브같은경우 디비전송할때
디바이스자체네에서 사진용량은 원본이미지의수십배작은 용량으로 줄일수있습니다.
원본사진한개의용량으로 네이티브에서는 5장이상을올릴수있는 이점이있고 업로드속도도빠릅니다.
이미지크롭도 가능하구요.
모바일웹으로 서비스를할때 파일첨부는 아작스가 필수가생각되고 하이브리드로제작을할때도
기본안드로이드웹뷰에서는 파일첨부가안먹히거나 카메라접근은 불가능합니다.
안드로이드 웹뷰에서 첨부파일을 인식할수있는 코드는존재하나 카메라에 접근이 안되기때문에
완벽한 방법이될수 없더라구요.
그래서 내린결론은 이미지업로더관련은 웬만하면 네이티브로가고.
네이트브를대체할수있는 부분도 해당기기의 웹뷰에 먹히는 제이쿼리를 테스트해보고 사용해보라입니다.
또한 안드로이드브릿지 클래스로 정말 많은부분을 대체할수있다는겁니다.
네이티브 로그인로그아웃구현도 자바스크립트 브릿지로 구현할수있으며, 서버통신도 xml로 통신하는부분을
자바스크립트브릿지로 어느정도는대체할수있습니다. 정말 유용한 방법이더라구요.
암튼 하이브리드 개발하시는 개발자님들참고 하시고 삽질 덜하시라고 두서없이 글남깁니다.~
맞춤법 자신없고 신경원래 안씁니다.~ 미안합니다~~~
추천
0
0
댓글 6개
좋은 정보 정말 감사합니다.^^
ㅎㅎ 별말씀을요~
웹뷰로 개발하는 걸 쉽게 생각했는데 좋은 정보 감사합니다~ ^^
저도 쉽게생각했다가 엄청난삽질을 했습니다 ㅋㅋ 즐거운개발하세요~
네, 불사파가 달리 불사인가요! 열공에 머리를 계속 불살라주세요!
ㅎㅎㅎ 모시모시~