응답하라 반응형웹 - 1. 반응형 웹이란

3,449 views

Published on

응답하라 반응형 웹 발표 첫번째 시간 '반응형 웹이란?'

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,449
On SlideShare
0
From Embeds
0
Number of Embeds
197
Actions
Shares
0
Downloads
65
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

응답하라 반응형웹 - 1. 반응형 웹이란

  1. 1. Front-end Engineer 이철호 (http://www.facebook.com/zziroho) Server-side Engineer 김태원 (http://www.facebook.com/mniktw) Who are Speakers?
  2. 2. 1. Responsive Web? 2. Chronicle of Web 3. Responsive Web Project 4. Conclusion INDEX
  3. 3. Responsive Web
  4. 4. “There is nothing new under the sun.” Responsive Web 과거에도 웹서비스는 기본적으로 사용자의 입력에 반응을 보이 도록 되어 있었다. ● 화면 UI 변경 ● URL 이동 ● 제출한 form에 따른 값 전달 ● 화면 사이즈에 유기적으로 반응하는 레이아웃 http://codepen.io/gluegen/pen/FLwob
  5. 5. Responsive Web 사용자 입력과 웹 서비스 반응의 변화 과거 ● Keyboard ● Mouse ● Form submit ● Page reloading 현재 ● 전통적 입력도구 ● gesture ● gyro ● Voice ● GPS ● Device 정보 ● async, one page
  6. 6. Responsive Web Responsive Web ● 화면 UI 변경 ● URL 이동 ● 제출한 form에 따른 값 전달 ● GPS 위치값에 따른 정보 ● gesture를 이용한 UI/UX ● Device별 UI ● video, voice 정보 (http://codepen.io/gluegen/pen/tzHIy) ● and... 본연의 의미로 보자면...
  7. 7. Responsive Web Responsive Web Design 시장에서 쓰이는 의미로 보자면... “Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).” from wikipedia(http://en.wikipedia.org/wiki/Responsive_Web_Design) 데스크탑 모니터부터 모바일 폰까지 많은 종류의 기기에서 최적 의 사용환경을 제공하는 웹서비스를 제작하는것
  8. 8. Chronicle of Web
  9. 9. Chronicle of Web Dark Ages by IE ● IE vs Netscape war에서 IE 승리 ● OS 종속적인 Browser ● IE6 후 장기간의 업데이트 공백 ● 비표준의 난립 ● 기술의 정체
  10. 10. Chronicle of Web Browser War ● 닷컴 기업의 몰락과 함께 시작된 Web2.0 ● 웹의 플렛폼화 ● 롱테일 이론 ● 개방형 웹 ● Firefox, Webkit, Chrome
  11. 11. Chronicle of Web After War ● HTML5 spec. ● 브라우저 벤더들이 표준에 참여(WHATWG) ● iphone/android의 성공(win mobile의 실패) ● 비표준 브라우저의 몰락
  12. 12. Chronicle of Web and now... ● N-Screen ● Mobile first 현재 반응형 웹의 주요 이슈
  13. 13. Chronicle of Web N-Screen ● 유비쿼터스 환경 ● 웹을 통한 유비쿼터스 대응 ● video (http://codepen.io/gluegen/pen/kABmE) ● audio (http://codepen.io/gluegen/pen/chHvy) ● media query ● SVG
  14. 14. Chronicle of Web Mobile first ● 모바일을 우선시 ● mobile first framework ○ bootstrap (http://getbootstrap.com/) ○ jquery mobile (http://www.jqmgallery.com) ○ sencha touch (http://docs.sencha.com/touch/2.3.1/#!/example/kitchen-sink) ○ kendo ui (http://demos.telerik.com/kendo-ui/mobile/overview/index.html) http://en.wikipedia.org/wiki/Responsive_web_design
  15. 15. Responsive Web Project
  16. 16. Responsive Web Project 영업 ● 반응형 웹에 대한 이해(고객/영업인) ● 프로젝트 적정 단가는? ● 프로젝트의 구현 범위는? ● 방법론?
  17. 17. Responsive Web Project Waterfall model ● 반응형 웹 구현은 모든 개발 단계가 유기적으로 결합 ● 단계별 단절이 일어나는 모델에서는 개발 한계 한국형
  18. 18. Responsive Web Project 기획 ● 기술이슈? ● 개발 그룹이 알아서 처리? ● 단순 화면 기획서 작성?
  19. 19. Responsive Web Project 목업 ● 모바일 이슈? ● 시안을 몇개나? ● 컨텐츠 중요도? ● 호환성 이슈?
  20. 20. Responsive Web Project 개발 ● 개발 주체는 누구? ● 협업과 커뮤니케이션의 중요성 ● 대부분의 이슈 해결은 종합적 문제 ● 기획도 예외일 수 없다
  21. 21. Responsive Web Project 테스트 ● 수시로 변경되는 spec. ● 세상은 넓고 디바이스는 많다 ● 세상은 넓고 브라우저도 많다 ● 모바일 브라우저의 파편화
  22. 22. Conclusion
  23. 23. Conclusion 장점과 고려사항 장점 ● 멋지다 ● 코드 재활용이 좋다 ● 경량화로 가볍다 ● 디바이스 호환성 ● 다양한 framework 고려사항 ● 초기 설계가 힘듬 ● 길고 긴 CSS ● 그래픽 디자인 업무 증가 ● 안드로이드 파편화 ● framework 커스터마이징

×