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

26. http://bradfrost.github.io/this-is-responsive/patterns.html
26
http://mediaqueri.es/

27. 27
스타벅스
스타일 가이드
http://www.starbucks.com/static/reference/styleguide/

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

52. 52
http://designmodo.com/responsive-test/

53. 53
http://mattkersley.com/responsive/

54. 54
Chrome Emulation

55. 55
최대한
게을러져라

56. 56
버릴껀 버리고 취할껀 취하자

57. 57
소통하라

58. 58
테스트, 또 테스트...

59. 59