Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Tweet

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

by deview on Oct 17, 2011

1,872 views

Accessibility

View text version

Tags

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

File a copyright complaint

3 Embeds 119

http://www.uxclub.co.kr	100
http://uxclub.co.kr	18
http://cafe.naver.com	1

Statistics

Favorites: 1
Downloads: 139
Comments: 0
Embed Views: 119
Views on SlideShare: 1,753
Total Views: 1,872

1 Favorite

Younghwan Kim Tags www 모바일 6 months ago

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

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