▶ICT노트 :: 반응형웹을 만드는 기술은?

▶ICT노트 :: 반응형웹을 만드는 기술은?

이번 포스팅에서는 반응형웹[Responsible Web]을 살펴보고자합니다^^

반응형웹은 PC, TV뿐만아니라 노트북, 태블릿PC, 스마트폰에 이르기까지

다양한 디스플레이크기를 가진 디바이스들이 등장하게되면서

사용자에게 '최적의 사용환경'을 제공해주고자하는 것이 목적입니다.

가장 좋은 방법은 아무래도

각 디바이스의 화면 크기에 최적화된 디스플레이를제공해주는 것일 텐데요~

ⓒmrJasonWeave

스마트폰만 놓고 생각해보더라도 디스플레이 크기가 굉장히 다양하다는 것을

어렵지 않게 알 수 있습니다.

미디어쿼리[Media Queries]

미디어쿼리는 웹브라우저가 해석할 CSS코드를 해상도/비율로 분기처리 하는 규칙.

디바이스정보를 서버나 클라이언트에서 확인할 필요없이 CSS만으로도 쉽게 구현할 수 있다.^[각주:1]

[ 사진 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]

그밖에 반응형 웹 제작에 사용되는 기술들은?

- 유동적 레이아웃

레이아웃 크기를 상대단위(%, em/rem)으로 지정하여

브라우저 크기에 맞게 레이아웃이 유동적으로 변화

- HTML5 & CSS 3.0

JavaScript, 미디어 객체들을 대체

- Adaptive Web Design(적응형 웹)

서버, 클라이언트 언어로 디바이스의 정보를 체크한 후

최적화된 마크업을  호출하는 기술

[ 출처 : 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 ]

반응형 웹의 주요 포인트라면?

-오래된 브라우저 적당히 챙기기

윈도우 익스플로러, 크롬, 파이어폭스 등등등등 인터넷 접속방법은

정말정말 다양합니다.

본래 반응형웹의 목적이 사용자들의 접속하는 환경에 맞게 정보를 제공는 것이지만,

너~무 오래 된 브라우저 사용자들까지 퍼펙트하게 맞춰주기는 무리가 있습니다.

따라서 하위버전의 브라우저는 최소한의 UI를 제공해주면서

상위버전 브라우저를 중심으로 성능향상에 노력하는것이 좋습니다^^ 

ⓒChasing Dasiy 

반응형 레이아웃 패턴 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 ]

1. 민경환, '반응형 웹 개발전략 및 사례-네이버 서비스 적용사례로 알아보는 반응형 웹', NHN오픈세미나, 2014 [본문으로]