24
JMC를 이용한 모바일 웹 페이지 만들기

모바일웹Ui개발 저자세미나 2부

Embed Size (px)

DESCRIPTION

모바일웹Ui개발 저자세미나 2부 TECH@NAVER

Citation preview

Page 1: 모바일웹Ui개발 저자세미나 2부

JMC를����������� ������������������  이용한����������� ������������������  ����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

Page 2: 모바일웹Ui개발 저자세미나 2부

목차����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

3.����������� ������������������  SlideReveal����������� ������������������  

4.����������� ������������������  Scroll����������� ������������������  

Page 3: 모바일웹Ui개발 저자세미나 2부

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  ����������� ������������������  

Page 4: 모바일웹Ui개발 저자세미나 2부

4����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

Page 5: 모바일웹Ui개발 저자세미나 2부

5����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

Page 6: 모바일웹Ui개발 저자세미나 2부

6����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

Page 7: 모바일웹Ui개발 저자세미나 2부

7����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

Page 8: 모바일웹Ui개발 저자세미나 2부

8����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  

Page 9: 모바일웹Ui개발 저자세미나 2부

9����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

1.����������� ������������������  요구����������� ������������������  사항����������� ������������������  -����������� ������������������  필요한����������� ������������������  컴포넌트����������� ������������������  확인����������� ������������������  

jindo.m.Scroll����������� ������������������  

jindo.m.SlideFlicking����������� ������������������  

jindo.m.SlideReveal����������� ������������������  

Page 10: 모바일웹Ui개발 저자세미나 2부

2.����������� ������������������  SlideFlicking����������� ������������������  

Page 11: 모바일웹Ui개발 저자세미나 2부

11����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

1. 플리킹����������� ������������������  영역에서는����������� ������������������  총����������� ������������������  6개의����������� ������������������  영역이����������� ������������������  순환으로����������� ������������������  플리킹된다.����������� ������������������  2. 사용자가����������� ������������������  좌,����������� ������������������  우로����������� ������������������  스크롤하면����������� ������������������  손가락이����������� ������������������  움직인����������� ������������������  만큼����������� ������������������  좌우로����������� ������������������  스크롤된다.����������� ������������������  

3. 플리킹����������� ������������������  이후에����������� ������������������  위쪽����������� ������������������  탭����������� ������������������  영역을����������� ������������������  활성화된����������� ������������������  형태로����������� ������������������  업데이트한다.����������� ������������������  

기능����������� ������������������  정의����������� ������������������  

Page 12: 모바일웹Ui개발 저자세미나 2부

12����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

마크업����������� ������������������  -����������� ������������������  내비게이션����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

Page 13: 모바일웹Ui개발 저자세미나 2부

13����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

마크업����������� ������������������  -����������� ������������������  콘텐츠����������� ������������������  

Page 14: 모바일웹Ui개발 저자세미나 2부

14����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

초기화����������� ������������������  스크립트����������� ������������������  

Page 15: 모바일웹Ui개발 저자세미나 2부

15����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

플리킹����������� ������������������  이후����������� ������������������  내비게이션����������� ������������������  업데이트����������� ������������������  스크립트����������� ������������������  

Page 16: 모바일웹Ui개발 저자세미나 2부

16����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

2.����������� ������������������  SlideFlicking����������� ������������������  

기능����������� ������������������  정의����������� ������������������  

•  탭을����������� ������������������  누르면����������� ������������������  탭����������� ������������������  이동과����������� ������������������  함께����������� ������������������  콘텐츠도����������� ������������������  함께����������� ������������������  이동된다.����������� ������������������  •  활성화된����������� ������������������  탭을����������� ������������������  눌렀을����������� ������������������  때는����������� ������������������  아무런����������� ������������������  변화가����������� ������������������  없다.����������� ������������������  

Page 17: 모바일웹Ui개발 저자세미나 2부

3.����������� ������������������  SlideReveal����������� ������������������  

Page 18: 모바일웹Ui개발 저자세미나 2부

18����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

3.����������� ������������������  SlideReveal����������� ������������������  

1. 검색창����������� ������������������  옆����������� ������������������  버튼을����������� ������������������  누르면����������� ������������������  오른쪽에서����������� ������������������  왼쪽으로����������� ������������������  슬라이드되는����������� ������������������  메뉴가����������� ������������������  나타난다.����������� ������������������  2. 검색창����������� ������������������  옆����������� ������������������  버튼을����������� ������������������  누르면����������� ������������������  펼쳐졌던����������� ������������������  메뉴가����������� ������������������  왼쪽에서����������� ������������������  오른쪽으로����������� ������������������  슬라이드되며����������� ������������������  사라진다.����������� ������������������  

기능����������� ������������������  정의����������� ������������������  

Page 19: 모바일웹Ui개발 저자세미나 2부

19����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

3.����������� ������������������  SlideReveal����������� ������������������  

마크업����������� ������������������  

Page 20: 모바일웹Ui개발 저자세미나 2부

20����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

3.����������� ������������������  SlideReveal����������� ������������������  

초기화����������� ������������������  스크립트����������� ������������������  

Page 21: 모바일웹Ui개발 저자세미나 2부

4.����������� ������������������  Scroll����������� ������������������  

Page 22: 모바일웹Ui개발 저자세미나 2부

22����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

4.����������� ������������������  Scroll����������� ������������������  

1. SlideReveal����������� ������������������  영역이����������� ������������������  노출되면����������� ������������������  메뉴가����������� ������������������  Scroll����������� ������������������  ����������� ������������������  방식으로����������� ������������������  작동된다.����������� ������������������  2. 스크롤����������� ������������������  객체가����������� ������������������  생성되었다면����������� ������������������  매번����������� ������������������  생성되지����������� ������������������  않아야����������� ������������������  한다.����������� ������������������  

3. 스크롤을����������� ������������������  아래로����������� ������������������  이동한����������� ������������������  상태에서����������� ������������������  메뉴를����������� ������������������  닫을����������� ������������������  때����������� ������������������  스크롤의����������� ������������������  위치가����������� ������������������  위로����������� ������������������  이동되어야����������� ������������������  한다.����������� ������������������  

4. 스크롤의����������� ������������������  높이는����������� ������������������  브라우저의����������� ������������������  높이에����������� ������������������  맞게����������� ������������������  조절된다.����������� ������������������  

기능����������� ������������������  정의����������� ������������������  

Page 23: 모바일웹Ui개발 저자세미나 2부

23����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

4.����������� ������������������  Scroll����������� ������������������  

마크업����������� ������������������  

Page 24: 모바일웹Ui개발 저자세미나 2부

24����������� ������������������  /����������� ������������������  JMC를����������� ������������������  이용한����������� ������������������  모바일����������� ������������������  웹����������� ������������������  페이지����������� ������������������  만들기����������� ������������������  

대외비����������� ������������������  

4.����������� ������������������  Scroll����������� ������������������  

초기화����������� ������������������  스크립트����������� ������������������