Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까

8.772 visualizaciones

Publicado el

  • Sé el primero en comentar

C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까

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

×