More Related Content
Similar to C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
Similar to C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까 (20)
C5 모바일 웹ui개발 아직도 맨땅에 삽질부터 하십니까
- 1. 모바일웹UI개발
아직도맨땅에
삽질부터하십니까?
[부제:컴포넌트중심의모바일웹UI개발]
NHN.AjaxUI2팀.박종운
- 6. AjaxUIinNHN
Jindo Javascript Framework
Jindo UI Component
SmartEditor
SmartFinder
네이버메일3.0
캘린더
N드라이브
네이버지도
네이버me
- 7. 나눌이야기
뜨거운감자모바일
아직은어려운모바일웹UI
쉬운방법은?
JMC소개와데모
이후계획과맺음
- 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
- 17. 모바일웹UI개발만만하지않다!
크로스플랫폼처리
터치했을때동작!
앱스러운동작기능 땡기면가져와주세요
튀어나오게안될까요?
중복개발
고정메뉴달아주세요
어려운디버깅 스스륵해주세요!
- 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
- 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
~~~
파일사이즈최적화
- 53. 더좋은모습기대하세요!
2011ʼ Q4 2012ʼ Q1 2012ʼ Q2
사이트개선 UX,UI등사용/접근이용이하도록지속적인개선
신규모듈개발 정식버전오픈및Chart/Graph등Canvas기능추가
기술지원 모바일웹디버거개발,오프라인교육및커뮤니티활성화
- 56. JMC기술지원
http://dev.naver.com/projects/jindo