반응형 웹이란?

반응형 웹이란?

웹 디자인 기법으로, 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게  UI 요소들이 유기적으로 배치되도록 설계된 웹

 

- 넓은 의미

다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공

 

- 좁은 의미

CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 사용하여 구현한 웹사이트

 

 

 

 

반응형 웹의 특징 + 장점

 

1. 하나의 코드

하나의 콘텐츠에 오직 하나의 HTML 소스만 존재해야 한다

 

 

2. 하나의 URL

특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면

반응형이라고 부르지 않는다. (예: m.naver.com는 독립적인 템플릿이 존재하는 ‘적응형 웹’)

 

3. 유지보수성

하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠 최적화

> 유지보수 효율적, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험

 

4. SEO에 유리

반응형 웹으로 사이트 구축 시, 구글 SEO 랭킹 가점 부여

 

 

* **적응형 웹이란?

서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념.

데이터 낭비가 적고 로딩 속도가 빠르지만, 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.

 

 

 

반응형 웹의 단점

 

1. 무겁다

모바일로 접속해도 모든 리소스(pc+모바일)를 다운받아야 한다.

이는 사이트 로딩속도, 좋지 않은 사용자 경험과 직결된다.

(http 서버 압축 기술, 접속 기기에 따라 디자인을 적용하는 RESS 기법 등으로 보완 가능

 

2. 구형 브라우저 미지원

Media query는 익스플로러 8 이하에서는 작동하지 않음

 

 

 

반응형으로 <레이아웃>을 재조정 하는 예시

 

 

반응형으로 <콘텐츠 내용>을 재조정하는 예시

 

반응형으로 제작하기에 알맞은 웹사이트는?

정적인 회사 소개 페이지나, 많은 기능이 없는 블로그 커뮤니티에 적합

- 많은 콘텐츠를 보여주기엔 한계 (PC버전의 내용을 모두 불러온 뒤 요약하는 방식이기 때문)

- 레이아웃 변경이 어려움 (해상도 별 분기점을 기준으로 콘텐츠 위치를 잡아두기 때문에 새로운 추가 작업 공수가 큼)