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
레퍼런스

38. h ttp://jindo.dev.naver.com/mobile

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