반응형 웹 뜻과 개념에 대해서 이야기해봅시다.
반응형 웹 뜻과 개념 이해
반응형 웹 뜻(Responsive Web)은 웹사이트의 해상도, 레이아웃이 디바이스의 스크린 환경에 따라 반응하여 유동적으로 적용되는 웹페이지 구성 방식을 의미합니다.
반응형 웹은 반응형 디자인이라고도 부릅니다.
반응형 웹은 화면의 크기에 따라 자동으로 레이아웃이 바뀌는 기술입니다. 컴퓨터 PC와 스마트폰, 태블릿 PC와 같은 모바일은 다양한 형태의 스크린이 존재하고 있으며 사용자들이 어떠한 형태의 스크린을 사용하더라도 사용자가 보기 쉽도록 자동으로 화면 레이아웃이 바뀌는 구조를 가진 디자인입니다.
PC 버전으로 만들어진 웹페이지를 그대로 스마트폰으로 보게 되면 문자가 너무 작아서 읽기가 어렵고 보기가 불편하지만 반응형 웹 기술을 사용하면 보기 쉽게 자동으로 레이아웃이 전환되어 작은 화면을 가진 모바일로도 보기 쉽게 구성됩니다.
반응형 웹과 대비되는 개념은 적응형 웹입니다.
반응형 웹 뜻과 개념 설명
반응형 웹 뜻(Responsive Web)은 사용자의 디바이스 해상도에 따라서 웹사이트의 크기가 변경되는 기술을 의미합니다. 하나의 웹 페이지 주소로 스마트폰과 태블릿 PC 등 모든 모바일 기기에 최적화된 웹페이지를 제공할 수 있는 형태입니다.
반응형 웹에서 사용하는 기술 요소는 캐스케이딩 스타일 시트 3(CSS3, Cascading Style Sheets 3) 미디어 쿼리와 유동형 그리드(Fluid Grid), 유동형 이미지(Flexible Images) 기술들이 사용됩니다.
반응형 웹과 대비되는 개념은 적응형 웹입니다.
적응형 웹은 기존의 웹 구현 방식입니다.
적응형 웹(Adaptive Web)에서는 디바이스의 디스플레이 종류에 따라서 크기가 조정되지 않은 웹페이지였기 때문에 사용자가 원하는 해상도와 크기의 웹페이지를 개발하기 위해서는 해당 기기에 적합한 코드를 만들어야 합니다.
적응형 웹에서는 해당 기기에 적합한 코드들을 최대한 모든 경우의 수에 맞게 작성한다면 반응형 웹 보다 더 퀄리티가 높은 웹 화면을 제공할 수 있게 됩니다. 여러 벌의 산출물을 만들어야 하는 단점이 있지만 여러 벌의 산출물을 만들 수 있는 상황이라면 사용자의 디바이스에 최적화된 화면과 서비스, 기능을 맞춤형으로 제공할 수 있는 장점이 있습니다.
하지만 IT 기술의 발달로 점점 다양한 형태의 디스플레이를 가진 스마트 기기들이 계속해서 출시되고 있는 상황이다 보니 모든 스마트 기기에 적합한 웹페이지를 개발하는 것은 시간과 비용 관점에서 비효율적인 상황이 되었습니다.
이러한 문제를 해결하기 위해서 반응형 웹 기술이 현재 주목 받고 있는 것입니다.
[반응형 웹 뜻과 적응형 웹 개념]
| 구분 | 내용 |
| 반응형(Responsive Web) | 하나의 HTML문서만 작성하면 기기의 해상도에 자동으로 반응하는 방식 |
| 적응형(Adaptive Web) | 여러 벌의 산출물을 만들어 각 기기에 적합한 코드를 작성해야 하는 방식 |
반응형 웹이 적용된 웹사이트에서는 웹사이트 운영자 입장에서는 하나의 HTML 문서만 만들면 사용자의 기기 환경에 따라서 자동으로 레이아웃이 변경되기 때문에 보다 효과적으로 웹사이트를 운영할 수 있게 됩니다. 따라서 웹사이트를 구성할 때 반응형 웹을 적용하는 경우가 많습니다.
하지만 웹사이트를 구성할 때 반드시 반응형 웹을 적용하는 것이 최선이 아닙니다. 웹사이트의 특성에 따라 달라 질 수 있습니다. 일반적으로 반응형 웹이 적용되기 좋은 웹사이트는 기업의 홈페이지와 같이 브랜딩 위주의 디자인이 중심이 되는 웹사이트가 적합합니다. 반면 적응형 웹이 적용되기 좋은 웹사이트는 금융 분야의 웹사이트로 정확해야 하고 단계별 프로세스가 구성되어 있는 웹사이트에 적합합니다.
따라서 반응형 웹이 더 좋다거나 적응형 웹이 더 안 좋다고 말할 수 없습니다. 웹을 구축하는데 있어서 2개의 방식 중 선택에 대한 정답은 없습니다. 다만 웹사이트에서 제공하는 서비스의 종류와 기업의 상황에 따라서 선택해야 하는 것입니다. 적응형 웹이 상황에 따라서 UX/UI가 더 우수할 수 있는 것입니다.