반응형 웹

반응형 웹

: 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미

- 즉 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 

- 모바일 퍼스트(mobile first)란 개념이 도입되었으며 사용자 경험을 디자인 할 때 모바일을 경우를 먼저 고려하여 디자인하는 것 

- 하나의 URL을 기반으로 화면이 바뀜(모바일에 최적화된 별도의 URL이 없음)

 

반응형 웹의 특징

1. 장점, 효율적인 유지 보수

- 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 크기에 맞춰 컨텐츠가 최적화 됨 

- 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용 절감 효과

- 사용자 입장에서도 기기에 구애 받지 않고 항상 최적의 화면 경험 

 

2. 장점, 검색 엔진(SEO) 최적화 유리

- 검색 엔진 최적화에 유리해 검색 결과가 상위권에 나타낼 수 있게 됨 

- 하나의 URL을 기반으로 사용자 접속을 효율적으로 관리할 수 있음

 

3. 단점, 사이트 속도 저하

- 반응형 웹 디자인은 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하게 함

- 로딩 속도나 이미지 리사이징 문제로 성능이 떨어질 수 있으며 실제로 사용하지 않은 자원을 전송 받거나 실제 사용되는 이미지보다 큰 이미지를 사용할 수 있음

 

4. 단점, 웹 브라우저 호환성 문제

- 현재 존재하는 웹 브라우저의 스펙 및 사양이 다양하므로 하나에서 잘 작동하던 것이 다른 브라우저에서는 작동하지 않을 수 있음

- 이런 문제 때문에 디자인 자유도가 떨어지며 맞춤 디자인이 어렵다는 점이 발생