요즘 모바일 웹 쪽에 관심이 생겨 여러가지 테스트를 진행중에 있습니다.
아무래도 일반 웹 브라우저와 많은 부분이 다르기때문에 테스트를 감행해서 조건들을 정리 할 생각이었죠.
얼마전 하코사 묻고 답하기 게시판을 통해 좌표를 중심으로 회전하는 레이어를 만들었습니다.
총 12개의 레이어가 원을 그리며 회전을 합니다.
물론 웹상으로 문제 없지만 모바일에서의 구현이 궁금했습니다.
이미 국 내외로 아이폰 유저가 많기때문에 플래시를 이용한 UI구현은 지양하도록 했습니다.(지양이라기 보다는 아예배제 하구요..) 사실 플래시는 CPU 점유율이 높아 대부분의 모바일 폰 CPU로는 아직까지 무리가 있지 않을까 싶은 생각도 있구요. 물론 모바일 플래쉬 플러그인을 배포한다고 하지만 그것역시도 약간의 문제가 있을듯 합니다. 아마도 스티브 잡스가 플래시를 배제한 이유중 하나가 아닐까 해요.
자바스크립트 역시 마찬가지 입니다.
특히 용량이 큰 이미지, 레이어 등을 좌표를 추적해 돌리게 되면 cpu 혹은 gpu 점유율이 늘고 메모리 또한 많이 먹어서 스마트 폰 의 다운, 혹은 버벅임 등이 나타날꺼라는 예상을 한 가운데 테스트를 진행했습니다.
결과로는 예상대로 제 핸드폰(뉴쵸콜릿)에서는 모바일 웹브라우저(모바일 익스플로러 6 기반)로 테스트 결과 엄청난 버벅임 현상이 나타났습니다. 움직이긴 하더라고요..-_-; 이것은 돌아가는 레이어가 1개이든 10개이든 마찬가지 였습니다.
아마도 수학 함수를 개산하여 0.01초 단위로 계산하여 브라우저로 뿌려주는 계산식 자체가 제 휴대폰으로는 무리였지 않을까 싶습니다.
두번째로 아이폰(3GS / 모바일 사파리브라우저)으로 테스트 했습니다. 결과는 저의 예상을 깨고 너무도 잘 보였습니다.-_-!!!
물론 PC로 볼때보다 약간의 속도차이는 있었으나 무리없이 처리해 내는 것 을 확인할 수 있었습니다.
모바일 브라우저중 속도가 늦는 쪽에 속하는 사파리 인데도 무난한 처리능력을 보여주네요. 추후에 옴니아1,2 ,블렉베리 등의 스마트 폰으로 추가 테스트를 거쳐봐야 할듯 하지만 곧 요정도의 스크립트도 모바일 브라우저용 페이지로 제작할 수 있지 않을까 라는 생각을 해봤습니다.(물론 당장을 힘들지요. 레이어 안에 이미지, 텍스트 등이 추가된다면 아이폰에서도 분명 속도 저하 현상이 발생할 것 입니다.추측..)
일단 브라우저에서 자바스크립트를 구현할때 어느정도 처리속도를 보이는가 에 대해서는 만족스러운 결과 였습니다.
결론은 아직은 무리 일 수도 있다..라는 것이지만요-_-;
또다른 테스트는 http://www.superweb.kr/ddd.html (소스 블루비 펌( http://www.blueb.co.kr/ ))
를 모바일브라우저로 확인하여 드레그 엔 드롭이 가능한가 였습니다.
결과는 위 테스트 헨드폰 두기종 모두 불가능 이었습니다.
또한 예상대로 이미지(jpg) 용량때문인지 아이폰에서도 움직임이 부자연 스러웠습니다.
일반적으로 사용하는 onmousedown, onmouseup 이벤트 헨들러는 터치폰, 비 터치폰 모두에서 사용이 불가한듯한 예상입니다.
그러나 아예 불가능 한 것 이 아니라는 것 을 보여주는 사이트가 있었는데요.
위 사이트는 모바일 브라우저에서만 동작됩니다.(아이폰만 확인,css3 지원가능 모바일 브라우저용인듯 합니다)
아이콘을 드래그해서 원안에 넣으면 이벤트가 동작하네요.
소스는 좀더 확인해 봐야 할듯 합니다.
스마트폰의 등장, 스마트폰 하드웨어의 고사양화 등(요즘은 피쳐폰도 고사양으로 나오는듯...)으로 모바일 웹이 한층더 발전할 듯 보여집니다.
스마트폰 이용자중 대다수가 집에서도 스마트폰으로 인터넷을 한다고 하니까요.
오늘은 자바스크립트에 관련된 내용들이 주였지만 앞으로 html, css , width, height 등의 테스트를 좀더 많은 모바일기기로 테스트해서 올리도록 하지요.
추가적인 의견, 오류, 조언등을 달아주세요. 많은 분들께(물론 저 포함)도움이 됩니다.
감사합니다~^^
모토로이 (모토로라/안드로이드) 에서 테스트 결과 보고해 드립니다.
1. http://www.superweb.kr
정상작동합니다. PC에서 보는 것에 비해 속도가 다소 느리긴 했습니다만, 이것은 cpu 처리속도가 부족해서라기보단 렌더링 방식의 차이가 아닐까 추측하고 있습니다. (프레임은 전혀 떨어지지 않았기 때문입니다) 좌측 상단 좌/정지/우 내비게이션도 정상적으로 작동합니다.
2.http://www.superweb.kr/ddd.html
사진을 직접 클릭하는 이벤트는 발생합니다만 아이폰과 비슷한 정도로 움직임이 부자연스럽습니다. (=프레임이 떨어집니다) 하단 내비게이션 drag n drop 은 아예 되지 않습니다.
3. http://m.sevnthsin.com/iphone
drag n drop 작동됩니다. 프레임이 매끄럽지는 않은 수준이라 아쉽습니다.
댓글 없음:
댓글 쓰기