▶ICT노트 :: 반응형웹을 만드는 기술은?
이번 포스팅에서는 반응형웹[Responsible Web]을 살펴보고자합니다^^
반응형웹은 PC, TV뿐만아니라 노트북, 태블릿PC, 스마트폰에 이르기까지
다양한 디스플레이크기를 가진 디바이스들이 등장하게되면서
사용자에게 '최적의 사용환경'을 제공해주고자하는 것이 목적입니다.
가장 좋은 방법은 아무래도
각 디바이스의 화면 크기에 최적화된 디스플레이를제공해주는 것일 텐데요~
스마트폰만 놓고 생각해보더라도 디스플레이 크기가 굉장히 다양하다는 것을
어렵지 않게 알 수 있습니다.
미디어쿼리[Media Queries]
미디어쿼리는 웹브라우저가 해석할 CSS코드를 해상도/비율로 분기처리 하는 규칙.
디바이스정보를 서버나 클라이언트에서 확인할 필요없이 CSS만으로도 쉽게 구현할 수 있다.1
[ 사진 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]
그밖에 반응형 웹 제작에 사용되는 기술들은?
- 유동적 레이아웃
레이아웃 크기를 상대단위(%, em/rem)으로 지정하여
브라우저 크기에 맞게 레이아웃이 유동적으로 변화
- HTML5 & CSS 3.0
JavaScript, 미디어 객체들을 대체
- Adaptive Web Design(적응형 웹)
서버, 클라이언트 언어로 디바이스의 정보를 체크한 후
최적화된 마크업을 호출하는 기술
[ 출처 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]
반응형 웹의 주요 포인트라면?
-오래된 브라우저 적당히 챙기기
윈도우 익스플로러, 크롬, 파이어폭스 등등등등 인터넷 접속방법은
정말정말 다양합니다.
본래 반응형웹의 목적이 사용자들의 접속하는 환경에 맞게 정보를 제공는 것이지만,
너~무 오래 된 브라우저 사용자들까지 퍼펙트하게 맞춰주기는 무리가 있습니다.
따라서 하위버전의 브라우저는 최소한의 UI를 제공해주면서
상위버전 브라우저를 중심으로 성능향상에 노력하는것이 좋습니다^^
반응형 레이아웃 패턴 3가지
- 플루이드 그리드
- 컬럼 드랍
- 레이아웃 쉬프터
[ 사진 : media02.hongkiat.com ]
반응형 레이아웃 패턴 : 플루이드 그리드[Fluid grids]
컬럼 너비 값을 상대단위로 설정함으로써 비율을 유지하는 기법이며,
별도의 레이아웃을 조절하지 않아도 콘텐츠를 표현할 수 있다는 것이 장점입니다.
[사진 :cfile229.uf.daum.net/]
반응형 레이아웃 패턴 : 컬럼 드랍[Column drop]
화면의 폭이 좁아져 콘텐츠를 표현하기 어려울 때, 컬럼을 밑으로
떨어뜨려 콘텐츠 폭을 맞추는 기법입니다.
[사진 :cfile229.uf.daum.net/]
반응형 레이아웃 패턴 : 레이아웃 쉬프터[Layout Shifter]
컬럼드랍이 단순히 같은 모양을 아래로 떨어뜨림으로써 콘텐츠 구성 폭을 맞췄다면,
레이아웃 쉬프터는 각각의 해상도마다 다른 레이아웃을 적용하는 기법이라고 할 수 있습니다.
잠깐만, 반응형 웹? 적응형 웹?
반응형웹과 적응형웹의 차이점
반응형 웹의 특징
장점 :한 개의 파일에서 분기처리가 가능함!
단점: 레이아웃이 복잡해져갈 수록 유지 보수가 어려워 질 뿐만 아니라 성능이 저하될 수 있음!
적응형 웹의 특징
장점: 해상도 별 최적의 성능을 낼 수 있음!
단점: 시작이어렵다.(유지보수가 어려울 뿐만 아니라 개발비용이 많이 들어감)
[ 자료 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]
제공하는 서비스의 특징에 맞추어 선택하는 것이 좋다!(민경환 대리, NHN Technology Services)
[ 자료 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]
- 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 [본문으로]
