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

57
모바일 웹 UI 개발 아직도 맨땅에 삽질부터 하십니까? [부제 : 컴포넌트 중심의 모바일 웹 UI 개발] NHN . Ajax UI2팀 . 박종운 2011년 10월 17일 월요일

Upload: naver-d2

Post on 25-May-2015

6.695 views

Category:

Documents


5 download

TRANSCRIPT

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  아직도����������� ������������������  맨땅에����������� ������������������  삽질부터����������� ������������������  하십니까?[부제����������� ������������������  :����������� ������������������  컴포넌트����������� ������������������  중심의����������� ������������������  모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발]

NHN����������� ������������������  .����������� ������������������  Ajax����������� ������������������  UI2팀����������� ������������������  .����������� ������������������  박종운

2011년 10월 17일 월요일

32011년 10월 17일 월요일

낚인겨?아닙니다

월척을����������� ������������������  드리죠!

2011년 10월 17일 월요일

CodeDemo ⟩

2011년 10월 17일 월요일

당신

뭐 하시는 분이세요?

2011년 10월 17일 월요일

Ajax����������� ������������������  UI����������� ������������������  in����������� ������������������  NHN

Jindo Javascript Framework

Jindo UI Component

SmartEditor

SmartFinder네이버메일����������� ������������������  3.0

캘린더

N드라이브네이버지도

네이버me

2011년 10월 17일 월요일

나눌����������� ������������������  이야기

뜨거운����������� ������������������  감자����������� ������������������  모바일

아직은����������� ������������������  어려운����������� ������������������  모바일����������� ������������������  웹����������� ������������������  ����������� ������������������  UI����������� ������������������  

쉬운����������� ������������������  방법은?

JMC����������� ������������������  소개와����������� ������������������  데모

이후����������� ������������������  계획과����������� ������������������  맺음

2011년 10월 17일 월요일

모바일 웹 개발

2011년 10월 17일 월요일

mobile

대세는 모바일

2011년 10월 17일 월요일

AT&T����������� ������������������  mobile����������� ������������������  data����������� ������������������  Traffic

0

10000

20000

30000

40000

2007 2010

모바일����������� ������������������  데이타����������� ������������������  사용량

3년����������� ������������������  사이����������� ������������������  30배����������� ������������������  

2011년 10월 17일 월요일

해외����������� ������������������  직업����������� ������������������  검색����������� ������������������  사이트����������� ������������������  “mobile����������� ������������������  UI”����������� ������������������  검색����������� ������������������  트래픽

0

1111.111

2222.222

3333.333

4444.444

5555.556

6666.667

7777.778

8888.889

10000

2006 2011

모바일����������� ������������������  UI에����������� ������������������  대한����������� ������������������  

관심도����������� ������������������  9배����������� ������������������  

2011년 10월 17일 월요일

그럼,����������� ������������������  국내는

0

10000

20000

30000

40000

2009 2011

네이버����������� ������������������  모바일����������� ������������������  서비스����������� ������������������  PV

2년����������� ������������������  사이����������� ������������������  4배����������� ������������������  

2011년 10월 17일 월요일

모바일모바일모바일모바일 관심

2011년 10월 17일 월요일

눈높이가����������� ������������������  너무����������� ������������������  높아졌어요~

성능우수!

빠른개발!

앱스러운!

UI개발자

2011년 10월 17일 월요일

그러나,

개발 현실은..

2011년 10월 17일 월요일

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  만만하지����������� ������������������  않다!

크로스����������� ������������������  플랫폼����������� ������������������  처리

앱스러운����������� ������������������  동작����������� ������������������  기능

중복����������� ������������������  개발

어려운����������� ������������������  디버깅

iOS����������� ������������������  3,����������� ������������������  4,����������� ������������������  5진저브레이드프로요

2011년 10월 17일 월요일

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  만만하지����������� ������������������  않다!

크로스����������� ������������������  플랫폼����������� ������������������  처리

앱스러운����������� ������������������  동작����������� ������������������  기능

중복����������� ������������������  개발

어려운����������� ������������������  디버깅

터치����������� ������������������  했을����������� ������������������  때����������� ������������������  동작!

땡기면����������� ������������������  가져와����������� ������������������  주세요

튀어����������� ������������������  나오게����������� ������������������  안될까요?

고정����������� ������������������  메뉴����������� ������������������  달아주세요

스스륵����������� ������������������  해주세요!

2011년 10월 17일 월요일

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  만만하지����������� ������������������  않다!

크로스����������� ������������������  플랫폼����������� ������������������  처리

앱스러운����������� ������������������  동작����������� ������������������  기능

중복����������� ������������������  개발

어려운����������� ������������������  디버깅

동일한����������� ������������������  기능

다른����������� ������������������  코드

중복����������� ������������������  개발2011년 10월 17일 월요일

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  만만하지����������� ������������������  않다!

크로스����������� ������������������  플랫폼����������� ������������������  처리

앱스러운����������� ������������������  동작����������� ������������������  기능

중복����������� ������������������  개발

어려운����������� ������������������  디버깅alert()

console.log()

2011년 10월 17일 월요일

모바일����������� ������������������  웹����������� ������������������  UI����������� ������������������  개발����������� ������������������  만만하지����������� ������������������  않다!

크로스����������� ������������������  플랫폼����������� ������������������  처리

앱스러운����������� ������������������  동작����������� ������������������  기능

중복����������� ������������������  개발

어려운����������� ������������������  디버깅

축적����������� ������������������  된레퍼런스노하우없음

경험����������� ������������������  부족

2011년 10월 17일 월요일

NO����������� ������������������  삽질전철을 밟지 않도록

도와 드리겠습니다.

2011년 10월 17일 월요일

Jindo����������� ������������������  ����������� ������������������  Mobile����������� ������������������  UI����������� ������������������  ComponentJ M C2011년 10월 17일 월요일

자바스크립트����������� ������������������  프레임웍Scroll

Layer Effect

모바일����������� ������������������  컴퍼넌트의����������� ������������������  집합체

플러그인����������� ������������������  구조

Jindo����������� ������������������  프레임웍����������� ������������������  기반

JMC����������� ������������������  란?

2011년 10월 17일 월요일

JMC����������� ������������������  를����������� ������������������  쓰면����������� ������������������  뭐가����������� ������������������  좋은데?

21종의����������� ������������������  모듈과����������� ������������������  약����������� ������������������  120개의����������� ������������������  샘플����������� ������������������  제공

크로스����������� ������������������  플랫폼을����������� ������������������  지원

플러그인����������� ������������������  구조로����������� ������������������  확장이����������� ������������������  용이함

적용이����������� ������������������  쉬움

지속적인����������� ������������������  추가����������� ������������������  개발과����������� ������������������  기술����������� ������������������  지원

?

오픈소스

2011년 10월 17일 월요일

DEMO

2011년 10월 17일 월요일

FadeFlipFloatingMovePop

공지사항Fade

Flip

Pop����������� ������������������  in����������� ������������������  /����������� ������������������  out

Move

Floating

LayerEffect멋진����������� ������������������  레이어����������� ������������������  

효과를����������� ������������������  주고����������� ������������������  싶다

2011년 10월 17일 월요일

공지사항

TapDoubleTapLongTapScroll

tap - X : 302 Y : 157

doubleTap - X : 201 Y : 400

longTap - X : 402 Y : 217

vScroll - 시작점.., 끝점..hScroll - 시작점.., 끝점..dScroll - 시작점.., 끝점..

Tap����������� ������������������  

DoubleTap

LongTap����������� ������������������  (Press)

Scroll����������� ������������������  (수직,����������� ������������������  수평,����������� ������������������  대각선)

MultiTouch����������� ������������������  (진행중)

Touch모바일에서

터치����������� ������������������  이벤트����������� ������������������  처리

2011년 10월 17일 월요일

Tap����������� ������������������  

영역2영역1 영역3 영역1

CircularFlicking����������� ������������������  기능

최소����������� ������������������  패널로����������� ������������������  다수����������� ������������������  정보����������� ������������������  제공����������� ������������������  

Flicking플리킹����������� ������������������  

:����������� ������������������  무한반복

<div> 좌측

<div>중앙

<div>우측

2011년 10월 17일 월요일

세로형/가로형����������� ������������������  제공

자유로운����������� ������������������  UI����������� ������������������  변경����������� ������������������  

RadioButton����������� ������������������  &����������� ������������������  CheckBox다양한����������� ������������������  

입력����������� ������������������  폼����������� ������������������  기능

2011년 10월 17일 월요일

x

삭제버튼

Input����������� ������������������  박스����������� ������������������  유효성����������� ������������������  검증����������� ������������������  ����������� ������������������  ����������� ������������������  :����������� ������������������  기본����������� ������������������  Text����������� ������������������  와����������� ������������������  Number

����������� ������������������  ����������� ������������������  ����������� ������������������  :����������� ������������������  Date,����������� ������������������  Email,����������� ������������������  URL,����������� ������������������  TEL

입력값����������� ������������������  삭제����������� ������������������  기능����������� ������������������  

TextInput다양한����������� ������������������  

입력����������� ������������������  폼����������� ������������������  기능

2011년 10월 17일 월요일

자동����������� ������������������  높이����������� ������������������  조정����������� ������������������  (글����������� ������������������  증가시)

최대����������� ������������������  높이����������� ������������������  지정����������� ������������������  가능����������� ������������������  

TextArea다양한����������� ������������������  

입력����������� ������������������  폼����������� ������������������  기능

가나다라마바사

12345678901

ABCDEFGHIJK

2011년 10월 17일 월요일

기본����������� ������������������  달력����������� ������������������  UI����������� ������������������  출력

복수����������� ������������������  달력����������� ������������������  생성����������� ������������������  가능����������� ������������������  

Datepicker

YYYY-MM-DD����������� ������������������  

Calendar����������� ������������������  !!

달력����������� ������������������  템플릿����������� ������������������  기능

2011년 10월 17일 월요일

고정����������� ������������������  메뉴와

스크롤!

스크롤����������� ������������������  영역

↑123456789101112131415

고정영역

고정영역 CSS����������� ������������������  Position����������� ������������������  Fixed����������� ������������������  미지원

고정����������� ������������������  영역����������� ������������������  처리����������� ������������������  가능

임의����������� ������������������  영역만����������� ������������������  스크롤

LongTab����������� ������������������  지원����������� ������������������  ����������� ������������������  :����������� ������������������  ContextMenu����������� ������������������  노출����������� ������������������  가능

Scroll

2011년 10월 17일 월요일

공지사항

더보기 25/70

상/하����������� ������������������  더보기����������� ������������������  효과

동기/비동기식����������� ������������������  처리

Scroll����������� ������������������  ����������� ������������������  pull����������� ������������������  up����������� ������������������  /����������� ������������������  down앱스러운����������� ������������������  

‘더보기’����������� ������������������  효과!

2011년 10월 17일 월요일

2011년 10월 17일 월요일

2011년 10월 17일 월요일

JMC레퍼런스

2011년 10월 17일 월요일

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

2011년 10월 17일 월요일

모바일����������� ������������������  메

상세����������� ������������������  정보

2011년 10월 17일 월요일

샘플����������� ������������������  목록

동작과����������� ������������������  소

스����������� ������������������  보기

2011년 10월 17일 월요일

데스크탑����������� ������������������  화면

2011년 10월 17일 월요일

JMC����������� ������������������  :����������� ������������������  구체적이고����������� ������������������  친절한����������� ������������������  모듈����������� ������������������  설명����������� ������������������  

Description

2011년 10월 17일 월요일

JMC����������� ������������������  :����������� ������������������  쉽고����������� ������������������  간단한����������� ������������������  생성����������� ������������������  코드

Initialization

2011년 10월 17일 월요일

JMC����������� ������������������  :����������� ������������������  다양한����������� ������������������  옵션과����������� ������������������  메소드

Method����������� ������������������  &����������� ������������������  Option

2011년 10월 17일 월요일

JMC����������� ������������������  :����������� ������������������  확장����������� ������������������  이벤트들,����������� ������������������  필요����������� ������������������  기능����������� ������������������  추가����������� ������������������  확장����������� ������������������  가능

Custom����������� ������������������  Event

2011년 10월 17일 월요일

JMC����������� ������������������  :����������� ������������������  그리고����������� ������������������  우리의����������� ������������������  삽질과����������� ������������������  노력!

2011년 10월 17일 월요일

JMC����������� ������������������  품질2011년 10월 17일 월요일

2011년 10월 17일 월요일

기능����������� ������������������  테스트����������� ������������������  결과

99%����������� ������������������  2011년 10월 17일 월요일

파일����������� ������������������  사이즈����������� ������������������  최적화

Coreㄴ Componentㄴ UIComponentㄴ Jindo.m

Componentㄴ LayerPositionㄴ LayerEffectㄴ FloatingLayerㄴ Scrollㄴ Touchㄴ Sliderㄴ ~~~

2011년 10월 17일 월요일

파일����������� ������������������  사이즈����������� ������������������  최적화

CoreㄴComponentㄴUIComponentㄴ Jindo.m

Componentㄴ LayerPositionㄴ LayerEffectㄴ FloatingLayerㄴ Scrollㄴ Touchㄴ Sliderㄴ ~~~

원하는����������� ������������������  컴포넌트����������� ������������������  선택시

관련����������� ������������������  모듈����������� ������������������  의존성����������� ������������������  자동����������� ������������������  체크����������� ������������������  및����������� ������������������  압축

파일����������� ������������������  사이즈����������� ������������������  최적화2011년 10월 17일 월요일

이후����������� ������������������  

계획

2011년 10월 17일 월요일

더����������� ������������������  좋은����������� ������������������  모습����������� ������������������  기대하세요!

2011ʼ Q4 2012ʼ Q1 2012ʼ Q2

정식����������� ������������������  버전����������� ������������������  오픈����������� ������������������  및����������� ������������������  Chart/Graph����������� ������������������  등����������� ������������������  Canvas����������� ������������������  기능����������� ������������������  추가

UX,����������� ������������������  UI����������� ������������������  등����������� ������������������  사용/접근이����������� ������������������  용이하도록����������� ������������������  지속적인����������� ������������������  개선����������� ������������������  

신규����������� ������������������  모듈����������� ������������������  개발

기술����������� ������������������  지원

사이트����������� ������������������  개선

모바일웹����������� ������������������  디버거����������� ������������������  개발,����������� ������������������  오프라인����������� ������������������  교육����������� ������������������  및����������� ������������������  커뮤니티����������� ������������������  활성화

2011년 10월 17일 월요일

그래도����������� ������������������  아직은JMC����������� ������������������  잘����������� ������������������  모르시겠죠?!

2011년 10월 17일 월요일

Server����������� ������������������  개발자들

UI����������� ������������������  개발자����������� ������������������  -����������� ������������������  alone

2011년 10월 17일 월요일

JMC����������� ������������������  기술����������� ������������������  지원

http://dev.naver.com/projects/jindo2011년 10월 17일 월요일

끝까지 들어주셔서

고맙습니다.

2011년 10월 17일 월요일