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

Responsive Web

“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

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

Responsive Web Project

영업

● 반응형 웹에 대한 이해(고객/영업인)

● 프로젝트 적정 단가는?

● 프로젝트의 구현 범위는?

● 방법론?

Responsive Web Project

Waterfall model

● 반응형 웹 구현은 모든 개발 단계가 유기적으로 결합

● 단계별 단절이 일어나는 모델에서는 개발 한계

한국형

Responsive Web Project

기획

● 기술이슈?

● 개발 그룹이 알아서 처리?

● 단순 화면 기획서 작성?

Responsive Web Project

목업

● 모바일 이슈?

● 시안을 몇개나?

● 컨텐츠 중요도?

● 호환성 이슈?

Responsive Web Project

개발

● 개발 주체는 누구?

● 협업과 커뮤니케이션의 중요성

● 대부분의 이슈 해결은 종합적 문제

● 기획도 예외일 수 없다

Responsive Web Project

테스트

● 수시로 변경되는 spec.

● 세상은 넓고 디바이스는 많다

● 세상은 넓고 브라우저도 많다

● 모바일 브라우저의 파편화

Conclusion

Conclusion

장점과 고려사항

장점

● 멋지다

● 코드 재활용이 좋다

● 경량화로 가볍다

● 디바이스 호환성

● 다양한 framework

고려사항

● 초기 설계가 힘듬

● 길고 긴 CSS

● 그래픽 디자인 업무 증가

● 안드로이드 파편화

● framework 커스터마이징