![모바일웹UI개발
아직도맨땅에
삽질부터하십니까?
[부제:컴포넌트중심의모바일웹UI개발]
NHN.AjaxUI2팀.박종운](https://image.slidesharecdn.com/c5ui-111017073626-phpapp02/85/C5-ui-1-320.jpg)
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
- 1. 모바일웹UI개발 아직도맨땅에 삽질부터하십니까? [부제:컴포넌트중심의모바일웹UI개발] NHN.AjaxUI2팀.박종운
- 2. 3
- 3. 아닙니다 월척을드리죠!
- 4. Demo ⟩ Code
- 6. AjaxUIinNHN Jindo Javascript Framework Jindo UI Component SmartEditor SmartFinder 네이버메일3.0 캘린더 N드라이브 네이버지도 네이버me
- 7. 나눌이야기 뜨거운감자모바일 아직은어려운모바일웹UI 쉬운방법은? JMC소개와데모 이후계획과맺음
- 9. mobile
- 10. ATTmobiledataTraffic 40000 모바일데이타사용량 30000 3년사이 30배 20000 10000 0 2007 2010
- 11. 해외직업검색사이트“mobileUI”검색트래픽 10000 8888.889 7777.778 모바일UI에대한 9배 6666.667 5555.556 관심도 4444.444 3333.333 2222.222 1111.111 0 2006 2011
- 12. 그럼,국내는 40000 네이버모바일서비스PV 30000 2년사이 20000 4배 10000 0 2009 2011
- 13. 모바일 모바일 모바일 모바일 관심
- 14. 눈높이가너무높아졌어요~ 빠른개발! UI개발자 앱스러운! 성능우수!
- 16. 모바일웹UI개발만만하지않다! 크로스플랫폼처리 앱스러운동작기능 진저브레이드 iOS3,4,5 중복개발 프로요 어려운디버깅
- 17. 모바일웹UI개발만만하지않다! 크로스플랫폼처리 터치했을때동작! 앱스러운동작기능 땡기면가져와주세요 튀어나오게안될까요? 중복개발 고정메뉴달아주세요 어려운디버깅 스스륵해주세요!
- 18. 모바일웹UI개발만만하지않다! 크로스플랫폼처리 앱스러운동작기능 동일한기능 중복개발 어려운디버깅 다른코드 중복개발
- 19. 모바일웹UI개발만만하지않다! 크로스플랫폼처리 앱스러운동작기능 중복개발 alert() 어려운디버깅 console.log()
- 20. 모바일웹UI개발만만하지않다! 크로스플랫폼처리 축적된 앱스러운동작기능 레퍼런스 중복개발 노하우 어려운디버깅 없음 경험부족
- 21. NO삽질
- 22. J MC JindoMobileUIComponent
- 23. JMC란? 모바일컴퍼넌트의집합체 Scroll 자바스크립트프레임웍 플러그인구조 Jindo프레임웍기반 Layer Effect
- 24. JMC를쓰면뭐가좋은데? 크로스플랫폼을지원 21종의모듈과약120개의샘플제공 ? 지속적인추가개발과기술지원 플러그인구조로확장이용이함 적용이쉬움 오픈소스
- 26. 멋진레이어 LayerEffect 효과를주고싶다 Fade Flip Popin/out Floating Move Fade Pop Flip Move Floating
- 27. 모바일에서 Touch 터치이벤트처리 Scroll LongTap DoubleTap Tap Tap DoubleTap LongTap(Press) tap - X : 302 Y : 157 doubleTap - X : 201 Y : 400 Scroll(수직,수평,대각선) longTap - X : 402 Y : 217 vScroll - .., .. MultiTouch(진행중) hScroll - .., .. dScroll - .., ..
- 28. 플리킹 Flicking :무한반복 CircularFlicking기능 Tap 최소패널로다수정보제공 영역1 영역2 영역3 div div div
- 29. 다양한 RadioButtonCheckBox 입력폼기능 세로형/가로형제공 자유로운UI변경
- 30. 다양한 TextInput 입력폼기능 x Input박스유효성검증 :기본Text와Number 삭제버튼 :Date,Email,URL,TEL 입력값삭제기능
- 31. 다양한 TextArea 입력폼기능 자동높이조정(글증가시) 최대높이지정가능
- 32. Calendar!! Datepicker 달력템플릿기능 YYYY-MM-DD 기본달력UI출력 복수달력생성가능
- 33. 고정메뉴와 Scroll 스크롤! 고정영역 CSSPositionFixed미지원 스크롤영역 고정영역처리가능 ↑ 1 임의영역만스크롤 2 3 LongTab지원 4 5 :ContextMenu노출가능 6 7 고정영역 8 9 10 11 12 13 14
- 34. 앱스러운 Scrollpullup/down ‘더보기’효과! 상/하더보기효과 동기/비동기식처리 더보기 25/70
- 37. JMC 레퍼런스
- 39. 일메인 정보 모바 상세
- 40. 보 기 목록 과 소스 샘 플 동작
- 41. 탑 화면 데 스크
- 42. JMC:구체적이고친절한모듈설명 Description
- 43. JMC:쉽고간단한생성코드 Initialization
- 44. JMC:다양한옵션과메소드 MethodOption
- 45. JMC:확장이벤트들,필요기능추가확장가능 CustomEvent
- 46. JMC:그리고우리의삽질과노력!
- 47. JMC품질
- 49. 기능테스트결과 99%
- 50. 파일사이즈최적화 Core Component UIComponent Jindo.m Component LayerPosition LayerEffect FloatingLayer Scroll Touch Slider ~~~
- 51. 파일사이즈최적화 Core Component UIComponent Jindo.m Component LayerPosition 원하는컴포넌트선택시 LayerEffect FloatingLayer 관련모듈의존성자동체크및압축 Scroll Touch Slider ~~~ 파일사이즈최적화
- 52. 이후 계획
- 53. 더좋은모습기대하세요! 2011ʼ Q4 2012ʼ Q1 2012ʼ Q2 사이트개선 UX,UI등사용/접근이용이하도록지속적인개선 신규모듈개발 정식버전오픈및Chart/Graph등Canvas기능추가 기술지원 모바일웹디버거개발,오프라인교육및커뮤니티활성화
- 54. 그래도아직은 JMC잘모르시겠죠?!
- 55. Server개발자들 UI개발자-alone
- 56. JMC기술지원 http://dev.naver.com/projects/jindo