안녕하세요 Kipfa입니다^^
오늘은 반응형 웹에 대해 알아보는 시간을 가져보겠습니다~
반응형 웹이란
웹의 해상도, 레이아웃 등이 기기의 스크린 환경에 따라 반응하여 유동적으로 변환되는 웹페이지를 의미합니다.
이것은 하나의 웹페이지 주소로 모든 스마트 기기에 최적화된 웹페이지를 제공한다는 것을 의미하며,
2010년 에단 마코트가 작성한 유동적인 웹페이지를 개발하는 방법을 설명하는 글에서 처음 소개되었습니다.
여기에 쓰이는 기술 요소는 캐스케이딩 스타일 시트3(Cascading Style Sheets3; CCS3), 미디어 쿼리,
유동형 그리드(Fluid Grid), 유동형 이미지(Flexible Images) 등이 있습니다.
과거에는 대부분 컴퓨터를 활용하여 인터넷 웹사이트에 접속했습니다.
하지만 요즘은 다양한 스마트 기기들이 등장하면서 웹 페이지를 연결해 주는 장치도 다양해졌습니다.
하지만 이런 과정에서 한 가지 문제가 생겼습니다.
컴퓨터 모니터는 스마트폰에 비하여 굉장히 크기가 큰데,
여기에 담긴 내용을 스마트폰에 넣으려고 하니 화면의 크기와 구성에서 문제가 생긴 것입니다.
따라서 같은 페이지라고 할지라도 어떤 장치로 접속하느냐에 따라
다른 종류의 화면을 보여줘야 할 필요성이 생기기 시작했습니다.
하지만 모바일용 페이지, PC 접속용 페이지를 따로 만들기에는 불편함이 컸고
이렇게 만들어진 것이 반응형 웹입니다.
반응형 웹을 이용하면, 페이지 소스는 하나이지만 접속한 기기에 맞게
페이지의 해상도와 레이아웃이 유동적으로 변합니다.
수많은 종류의 스마트폰이 각각 다른 크기의 화면을 가지고 있지만 이럼에도 모든 기기에서 무리 없이
웹 페이지에 접속하여 볼 수 있는 것은 반응형 웹의 역할 때문입니다.
어떤 기기로 접속하더라도 최적의 웹 페이지를 볼 수 있도록 환경을 제공해 주기 때문에
지금 같은 모바일 시대에는 없어서는 안 될 중요한 도구입니다.
반응형 웹과는 다른, 적응형 웹에 대해서도 알아볼까요?
적응형 웹은
서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여
그 디바이스에 최적화된 마크업을 호출합니다.
여기에서 최적화된 마크업은, 꼭 필요한 정보만을 노출시키며 디바이스에 최적화된 이미지를 사용하고
플래시를 사용하지 않고 자바스크립트를 이용하여 장치를 분석하고 그에 맞는 동작을 적용합니다.
이렇게 하여 보다 빠른 속도로 모바일에서 웹사이트를 이용할 수 있습니다.
적응형 웹은 크기가 고정되어 있어서 사용하기 간단한 반면에,
PC와 모바일 버전을 따로 제작해야 하는 단점이 있고
반응형 웹은 각종 모바일 기기의 모니터 사이즈에 사용하기 적합하지만,
고정되지 않고 백분율 값을 사용해야 해서 코드가 복잡하다는 단점이 있습니다.
이렇게 각각 장단점을 가지고 있기 때문에
무엇이 더 좋다고 하기보다는 상황에 맞는 웹을 고르는 게 중요한데요!
주로 기업 소개 혹은 컨텐츠 등이 중요하다면 반응형 홈페이지 개발을,
다량의 제품의 업데이트가 잦은 쇼핑몰이라면 적응형 웹을 추천합니다^^
(사)한국인터넷전문가협회
협회소개 사단법인 한국인터넷전문가협회(KIPFA)는 인터넷 관련 전문가들로 구성된 비영리단체로서 인터넷전문가의 복리 증진 및 정보 및 지식의 교류를 통한 상호협력을 활성화하고, 인터넷
www.kipfa.or.kr