6. 반응(反應)
1. 자극에 대응하여 어떤 현상이 일어남. 또는 그 현상.
2. 이편을 배반하고 다른 편에 응함.
3. <심리> 자극에 대하여 유기체가 하는 행동. [비슷한 말] 응답.
4. <화학> 물질 사이에 일어나는 화학적 변화. 물질의 성질이나 구조가
변한다.
반응형 웹은 다양한 디바이스 환경에 맞추어
웹 페이지가 변하는 형태의 웹이다
6
12. 그 밖에 사용되는 기술들
미디어쿼리 외에 아래와 같은 기술들도 사용된다.
• 유동적 레이아웃
레이아웃 크기를 상대단위 (%, em/rem)으로 지정하여
브라우저 크기에 맞게 레이아웃이 유동적으로 변화한다
• HTML5 & CSS 3.0
JavaScript, 미디어 객체들을 대체
• Adaptive Web Design (적응형 웹)
서버나 클라이언트 언어로 디바이스 정보를 체크 후 최적화된 마크업을
호출하는 기술이다
12
14. 어디까지 대응해야 할까요?
14
다양한 환경을 고려해야 함으로 기술제약이 심하다
모든 디바이스를 분기처리 한다면 한도 끝도 없다
프로젝트 준비단계에 대응할 디바이스 & 브라우저의 범위를 협의할 것
15. 오래된 브라우저 대응방안
15
하위 호환성을 너무 고려하면 성능이슈도 커지고 코드양도 많아진다
상위 버전의 브라우저 성능 향상에 더 힘쓰고
하위 버전의 브라우저는 최소한의 UI를 보장하는 범위까지 제한한다
• 고정 레이아웃
• 브라우저 업데이트 안내 메세지
• 되도록이면 브라우저별 분기처리는 지양할 것
16. 작은 화면 먼저? 큰 화면 먼저?
큰 화면이 작은 화면보다 콘텐츠의 양이 많다
큰 화면부터 시작해서 콘텐츠를 추려 나가는 것이 좋다
하지만 모바일 중요도가 더 높다면 작은 화면을 먼저 고려하는 것이 좋다
16
http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
44. em / rem
44
해상도별 폰트 크기 재선언은 번거롭다
절대 단위 폰트 크기 지정시 해상도별 분기 처리가 많아진다
상대단위인 em이나 rem을 사용하면 코드양도 줄고 유지보수도 편하다
폰트 크기 증가/감소 비율에 대한 사전 테스트가 필요하다
45. 네트워크 성능
45
과다한 이미지 호출은 네트워크 성능을 저하시킨다
공통 이미지와 해상도별로 나뉘어야 할 이미지를 구분하여 사용하고
CSS만으로 표현가능한 디자인을 권장한다
46. CSS 3.0
미디어 객체 표현 가능하다
간단한 CSS 코드작성으로 JavaScript 대체 가능하다
데이터 트래픽 감소
• border-radius
• animation
• transform3d
• flexbox
• nth-child(n), Attribute Selector
46
http://codepen.io/thebabydino/pen/kpCyx
47. CSS 전처리기
47
복잡한 미디어쿼리를 어떻게 관리할 것인가?
다양한 클래스 규칙이나 미디어쿼리는 유지보수가 어렵다
Sass, Less등의 CSS 전처리기 도입으로 CSS를 로지컬하게 관리한다
48. 미디어 객체의 비율유지
해상도가 변할 때 본문 영역을 꽉 채우는 미디어 객체의 리사이징을 고려해야한다
뉴스, 블로그 사이트에서 주로 많이 사용된다
이미지는 가로값만 지정하면 세로는 자동으로 비율에 맞게 늘어난다.
48
49. 미디어 객체의 비율유지
49
비디오 객체는 가로값에 따라 세로값이 자동으로 늘어나지 않는다
비디오 객체 비율을 맞춰줄 수 있는 컨테이너 태그를 이용
aspect
ratio
433 ÷ 770 = 0.5625
http://thisismadebyhand.com/
1 2
3
50. 반응형 웹 vs 적응형 웹
50
서비스 성향을 고려해서 선택
• 반응형 웹
한 개의 파일에서 분기 처리가 가능하지만 레이아웃이 너무 복잡해지면
유지보수가 어렵고 성능이 저하될 수 있다
• 적응형 웹
유지보수가 어렵고 개발비용이 많이 든다.
하지만 해상도별 최적의 성능을 낼 수 있다
http://visual.ly/adaptive-web-design-vs-responsive-web-design
