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

Front-end Engineer
이철호 (http://www.facebook.com/zziroho)
Server-side Engineer
김태원 (http://www.facebook.com/mniktw)
Who are Speakers?

1. Responsive Web?
2. Chronicle of Web
3. Responsive Web Project
4. Conclusion
INDEX

“There is nothing new under the sun.”
Responsive Web
과거에도 웹서비스는 기본적으로 사용자의 입력에 반응을 보이
도록 되어 있었다.
● 화면 UI 변경
● URL 이동
● 제출한 form에 따른 값 전달
● 화면 사이즈에 유기적으로 반응하는 레이아웃
http://codepen.io/gluegen/pen/FLwob

Responsive Web
사용자 입력과 웹 서비스 반응의 변화
과거
● Keyboard
● Mouse
● Form submit
● Page reloading
현재
● 전통적 입력도구
● gesture
● gyro
● Voice
● GPS
● Device 정보
● async, one page

Responsive Web
Responsive Web
● 화면 UI 변경
● URL 이동
● 제출한 form에 따른 값 전달
● GPS 위치값에 따른 정보
● gesture를 이용한 UI/UX
● Device별 UI
● video, voice 정보 (http://codepen.io/gluegen/pen/tzHIy)
● and...
본연의 의미로 보자면...

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)
데스크탑 모니터부터 모바일 폰까지 많은 종류의 기기에서 최적
의 사용환경을 제공하는 웹서비스를 제작하는것

Chronicle of Web
Dark Ages by IE
● IE vs Netscape war에서 IE 승리
● OS 종속적인 Browser
● IE6 후 장기간의 업데이트 공백
● 비표준의 난립
● 기술의 정체

Chronicle of Web
Browser War
● 닷컴 기업의 몰락과 함께 시작된 Web2.0
● 웹의 플렛폼화
● 롱테일 이론
● 개방형 웹
● Firefox, Webkit, Chrome

Chronicle of Web
After War
● HTML5 spec.
● 브라우저 벤더들이 표준에 참여(WHATWG)
● iphone/android의 성공(win mobile의 실패)
● 비표준 브라우저의 몰락

Chronicle of Web
and now...
● N-Screen
● Mobile first
현재 반응형 웹의 주요 이슈

Chronicle of Web
N-Screen
● 유비쿼터스 환경
● 웹을 통한 유비쿼터스 대응
● video
(http://codepen.io/gluegen/pen/kABmE)
● audio
(http://codepen.io/gluegen/pen/chHvy)
● media query
● SVG

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

Responsive Web Project
영업
● 반응형 웹에 대한 이해(고객/영업인)
● 프로젝트 적정 단가는?
● 프로젝트의 구현 범위는?
● 방법론?

Waterfall model
● 반응형 웹 구현은 모든 개발 단계가 유기적으로 결합
● 단계별 단절이 일어나는 모델에서는 개발 한계
한국형

기획
● 기술이슈?
● 개발 그룹이 알아서 처리?
● 단순 화면 기획서 작성?

목업
● 모바일 이슈?
● 시안을 몇개나?
● 컨텐츠 중요도?
● 호환성 이슈?

개발
● 개발 주체는 누구?
● 협업과 커뮤니케이션의 중요성
● 대부분의 이슈 해결은 종합적 문제
● 기획도 예외일 수 없다

테스트
● 수시로 변경되는 spec.
● 세상은 넓고 디바이스는 많다
● 세상은 넓고 브라우저도 많다
● 모바일 브라우저의 파편화

Conclusion
장점과 고려사항
장점
● 멋지다
● 코드 재활용이 좋다
● 경량화로 가볍다
● 디바이스 호환성
● 다양한 framework
고려사항
● 초기 설계가 힘듬
● 길고 긴 CSS
● 그래픽 디자인 업무 증가
● 안드로이드 파편화
● framework 커스터마이징

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie 응답하라 반응형웹 - 1. 반응형 웹이란 (20)

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