여러분은 컴퓨터를 허면서 웹페이지 창의 크기를 줄였다가 늘렸다가 하신 적이 있으신가요? 그럴 때마다 웹페이지 내 콘텐츠가 작아지거나 커지는 화면 크기에 맞춰지는 걸 본 적이 있으실 겁니다. 바로 반응형웹이기 때문인데요.

반응형웹은 단말의 종류와 화면 크기에 실시간으로 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹이라고 정의되어 있는데요. PC, 아이패드나 갤럭시 탭, 스마트폰 등등 웹 사이트를 볼 수 있는 다양한 기기 화면에 맞추어 웹페이지의 화면을 보여주는 것을 의미합니다! 쉽게 말해 기기 종류에 따라 웹페이지의 크기가 자동으로 조정이 되는 것이라고 이해하시면 편한데요.

하나의 화면(1)이 거의 모든 비율의 기기 화면을 커버하는 거예요. 사용 단말 환경에 반응해서 유동적으로 변화하는 것이죠. 어떤 환경에서도 적절한 UI를 보여줄 수 있는 장점이 있어 다양한 단말기가 나오는 현재 상황에 적합한 방식이라 계속해서 증가 추세를 이루고 있답니다. 예시를 확인하면 더욱 빠르게 파악이 되실 거 같아 소이정에서 제작한 사이트를 예시로 보여드릴게요!

소이정 홈페이지에 접속해서 브라우저의 가로 사이즈를 계속해서 줄여보세요. 전체 화면에서 조금씩 가로 사이즈를 줄이게 되면 사진의 크기, 로고, 폰트 사이즈, 배열 등이 점점 변하고 결국엔 맨 오른쪽 그림처럼 변하게 됩니다~

마찬가지로 홈페이지에 접속해서 브라우저의 가로 사이즈를 계속해서 줄여보세요. 사진/영상의 크기, 로고의 위치, 배열 등이 오른쪽처럼 점점 변하게 됩니다.

그런데,, 웹페이지를 여기저기 둘러보다 보면 반응형 웹으로 보이는 웹페이지도 있지만 그렇지 않은 경우도 있는데요. 바로바로 우리가 많이 사용하는 네이버! 저는 네이버가 기본 인터넷 화면일 정도로 자주 사용하는데요. 반응형이 아니었다니 ..!! 네이버의 메인 화면이 PC, 태블릿, 핸드폰일 때 어떻게 보이는지 한 번 보여드릴게요! PC 화면과 태블릿 화면은 비슷한데, 모바일 화면은 조금 다르게 보이죠?

네이버는 모바일의 경우 모바일에서 최적화된 웹페이지를 보여주기 위해 모바일에서 실행될 때는 저절로 모바일 페이지인 m.naver.com으로 접속하도록 설정을 해두었기 때문인데요. 많은 정보를 전달하고 기능을 실행해야 하는 홈페이지 특성상 아무래도 화면이 작은 모바일 화면에서는 모든 걸 확인하고 실행하기 어려우니 모바일 버전의 웹페이지를 따로 만들어둔 것이겠죠!
이런 사이트는 적응형 웹이라고 하는데요.

이해하기 쉽게 또 다른 그림을 보면서 설명을 드려볼게요. 기기의 화면의 해상도가 PC 모니터 정도라면 1, 노트북 화면 정도라면 2로, 아이패드 탭 정도라면 3로, 핸드폰 화면 정도라면 4라는 화면으로 보이도록 개발된 것이 바로 적응형 웹이라고 보시면 됩니다. 각각 레이 아웃별로 제작하여 사용하는 기기에 맞게 웹페이지를 보여주는 거죠!

기기 화면에 맞게 저절로 변화하는 반응형 웹과 접근한 기기에 맞추어 템플릿을 제공하는 적응형웹! 제일 큰 차이점은 레이아웃이 다르다는 점이겠죠? 그리고 두 가지 모두 장단점을 가지고 있는데요. 사이트별로 특성이 다르기 때문에 어떤 종류의 웹 스타일이 적합한지는 상황에 맞추어 선택해 주시면 됩니다!