![반응(反應)
1. 자극에 대응하여 어떤 현상이 일어남. 또는 그 현상.
2. 이편을 배반하고 다른 편에 응함.
3. <심리> 자극에 대하여 유기체가 하는 행동. [비슷한 말] 응답.
4. <화학> 물질 사이에 일어나는 화학적 변화. 물질의 성질이나 구조가
변한다.
반응형 웹은 다양한 디바이스 환경에 맞추어
웹 페이지가 변하는 형태의 웹이다
6](https://image.slidesharecdn.com/1-140627050334-phpapp01/85/1-openseminar-6-320.jpg)
1.openseminar
- 1. 반응형 웹 개발전략 및 사례 네이버 서비스 적용사례로 알아보는 반응형 웹 Resposive Web Design on June 27, 2014 KyoungHwan Min NHN Technology Services kyounghwan.min@nhn.com 1
- 2. 2 #speaker { Name : 민경환 대리 Company : NHN Technology Services Team : UIT 개발실 E-mail : kyounghwan.min@nhn.com Project : 스마트에디터 네이버 포스트 ‘Webkit 사전’서적 집필중 } #speaker:description { content : ‘코딩공장장, 맥주, 여행’ }
- 3. 반응형 웹의 이해 반응형 웹 전략수립 반응형 웹 적용사례 분석 기술의 한계를 극복하는 법 3 다양한 디바이스에 모두 최적화될 수 있는 웹 개발자의 수고를 덜어줄 수 있는 웹
- 4. 반응형 웹의 사전적 의미 반응형 웹을 왜 써야할까? 반응형 웹에 쓰이는 기술 반응형 웹의 이해 4
- 5. 반응형 웹 모바일웹 애플리케이션 하이브리드앱 미디어쿼리 HTML5 CSS 3.0 Grunt Sass / Less jQuery Mobile 워드프레스 5
- 6. 반응(反應) 1. 자극에 대응하여 어떤 현상이 일어남. 또는 그 현상. 2. 이편을 배반하고 다른 편에 응함. 3. <심리> 자극에 대하여 유기체가 하는 행동. [비슷한 말] 응답. 4. <화학> 물질 사이에 일어나는 화학적 변화. 물질의 성질이나 구조가 변한다. 반응형 웹은 다양한 디바이스 환경에 맞추어 웹 페이지가 변하는 형태의 웹이다 6
- 7. 세상은 넓고 디바이스는 많다 다양한 해상도와 운영체제 7
- 8. 8 모바일 → 태블릿 → 데스크탑 PC 다양한 환경으로 이어지는 서비스 집 침대 전철 회사 회의실 쇼파 화장실
- 9. 9 우리는 모든 환경을 위한 전용서비스를 각각 만들어야 하나요? 서비스 개수도 늘어나고 개발 비용도 늘어나고...
- 10. 10 반응형웹은 모든 환경에 최적화된 콘텐츠를 제공합니다.
- 11. 미디어쿼리(Media Queries) 웹브라우저가 해석할 CSS코드를 해상도/비율로 분기처리 하는 규칙이다 디바이스정보를 서버나 클라이언트에서 확인할 필요없이 CSS만으로도 쉽게 구현할 수 있다 11
- 12. 그 밖에 사용되는 기술들 미디어쿼리 외에 아래와 같은 기술들도 사용된다. • 유동적 레이아웃 레이아웃 크기를 상대단위 (%, em/rem)으로 지정하여 브라우저 크기에 맞게 레이아웃이 유동적으로 변화한다 • HTML5 & CSS 3.0 JavaScript, 미디어 객체들을 대체 • Adaptive Web Design (적응형 웹) 서버나 클라이언트 언어로 디바이스 정보를 체크 후 최적화된 마크업을 호출하는 기술이다 12
- 13. 반응형 웹 전략수립 어떤 커뮤니케이션을 해야할지? 반응형 웹 레이아웃 패턴 반응형 웹 구축 프로세스 13
- 14. 어디까지 대응해야 할까요? 14 다양한 환경을 고려해야 함으로 기술제약이 심하다 모든 디바이스를 분기처리 한다면 한도 끝도 없다 프로젝트 준비단계에 대응할 디바이스 & 브라우저의 범위를 협의할 것
- 15. 오래된 브라우저 대응방안 15 하위 호환성을 너무 고려하면 성능이슈도 커지고 코드양도 많아진다 상위 버전의 브라우저 성능 향상에 더 힘쓰고 하위 버전의 브라우저는 최소한의 UI를 보장하는 범위까지 제한한다 • 고정 레이아웃 • 브라우저 업데이트 안내 메세지 • 되도록이면 브라우저별 분기처리는 지양할 것
- 16. 작은 화면 먼저? 큰 화면 먼저? 큰 화면이 작은 화면보다 콘텐츠의 양이 많다 큰 화면부터 시작해서 콘텐츠를 추려 나가는 것이 좋다 하지만 모바일 중요도가 더 높다면 작은 화면을 먼저 고려하는 것이 좋다 16 http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/
- 17. 반응형 레이아웃 패턴 레이아웃은 종류 3가지 • 플루이드 그리드 (Fluid Grids) • 컬럼 드랍 (Column Drop) • 레이아웃 쉬프터 (Layout Shifter) 17
- 18. 플루이드 그리드 http://fluidgrids.com/ 18 컬럼 너비값을 상대단위(%, em)로 설정하여 비율을 유지하며 폭을 맞추는 기법이다 별도의 레이아웃 조절없이 콘텐츠를 표현할 수 있다
- 19. 컬럼 드랍 http://bradfrost.github.io/this-is-responsive/patterns.html 19 화면의 폭이 좁아져 콘텐츠 표현이 효과적이지 않을 때 컬럼을 밑으로 떨어뜨려 컨텐츠를 표현하는 기법
- 20. 레이아웃 쉬프터 http://bradfrost.github.io/this-is-responsive/patterns.html 20 컬럼을 단순히 밑으로 떨어뜨리는 개념이 아닌 해상도마다 새로운 레이아웃을 구성하는 기법
- 21. 반응형 웹 구축 순서 21 1 2 3 4 Width (폭) Hierarchy (계층) Interaction (상호작용) Density (밀도)
- 22. 1 2 3 4 Width Hierarchy Interaction Density 940px 220px 742px 174px 좌측메뉴 너비 : 220 x 100 / 940 = 23% 본문 너비 : 720 x 100 / 940 = 77% http://tattly.com/ 22
- 23. 1 2 3 4 http://tattly.com/ 23 Width Hierarchy Interaction Density
- 24. 1 2 3 4 http://codepen.io/bradfrost/full/qwJvF 24 Width Hierarchy Interaction Density
- 25. 1 2 3 4 http://www.bostonglobe.com/ 25 Width Hierarchy Interaction Density
- 28. 28
- 29. 반응형 웹 적용사례분석 네이버 서비스의 적용사례 서비스에 맞는 레이아웃 가독성을 높이는 방안 29
- 30. 레이아웃 최대 너비값 제한 플루이드 그리드 레이아웃에서 효율적인 방법이다 콘텐츠가 많지 않은 단순한 레이아웃이지만 가로 100%로 늘어나는 페이지는 빈 공간을 채우려 고민하기 보다 최대 너비 값을 제한하는 것을 권장한다 30
- 31. 31
- 32. 컬럼 드랍 (Column Drop) 콘텐츠의 양이 많고 영역 구분이 명확한 경우 컬럼을 나누어 표현하면 콘텐츠 가독성을 높일 수 있다 32
- 33. 33
- 34. 썸네일 리스트 해상도마다 한줄에 들어가는 썸네일 리스트 개수를 조정하지 않으면 빈공간이 많이 생길 수 있다 34
- 35. 35
- 36. 폰트 & 이미지 사이즈 조정 해상도마다 가독성을 고려하여 스타일을 조정한다 이미지 리사이징시 이미지 품질 저하 여부 확인한다 하지만 과다한 조정은 코드양이 많아지고 성능저하의 원인이 될 수 있다 36
- 37. 37
- 38. 플리킹 (Flicking) 해상도 변경시마다 플리킹 레이어의 리사이징을 고려한다 플리킹은 터치 기반 인터페이스이므로 PC화면에선 좌/우 버튼 노출한다 38
- 39. 39
- 40. 적응형 웹 (Adaptive Web Design) 40 서비스가 복잡하여 미디어쿼리 사용이 어려울 경우 해상도별 마크업을 파일을 따로 관리하는게 좋을 수 있다
- 41. 기술의한계를 극복하는법 반응형 웹에 유용한 기술들 실제 개발 하면서 발생 하는 문제점 성능 최적화 신기술의 활용 41
- 42. 스타일 중복선언 미디어 쿼리 사용시 자주 발생한다 reflow/repaint를 일으켜 브라우저 성능을 저하시킨다 공통 스타일과 해상도별로 나뉘어야할 스타일을 잘 구분해야한다 42
- 43. window.matchMedia() JavaScript에서도 미디어쿼리 문법 사용이 가능하다 CSS 미디어쿼리에 선언한 해상도에 JavaScript 이벤트가 동작해야할 때 JavaScript와 CSS 동작 타이밍을 정확히 맞출 수 있다 43 css javascript
- 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
- 51. 반응형 웹 테스트도구의 활용 다양한 디바이스 환경을 한눈에 크롬 에뮬레이터 51
- 55. 55 최대한 게을러져라
- 56. 56 버릴껀 버리고 취할껀 취하자
- 57. 57 소통하라
- 58. 58 테스트, 또 테스트...
- 59. 59