목차
자주 사용하는 사이트를 떠올려보세요. 사이트에 접속할 때 주로 PC를 사용하시나요, 모바일을 사용하시나요? PC로 접속했을 때의 사이트 디자인과 모바일로 접속했을 때의 사이트 디자인이 달랐던 것을 기억하시나요?
요즘에는 인터넷을 사용할 수 있는 기기가 정말 다양해지고 있습니다. 그리고 기기의 종류마다 화면의 크기도 제각각이죠. 웹 개발자들과 디자이너들은 디스플레이 크기를 고려하여 사이트를 만들어야하는 것이 필수가 되었습니다. 이러한 웹 구축의 디자인 유형에 따라 반응형 웹과 적응형 웹이라는 용어가 등장했습니다.
반응형 웹 디자인(Responsive Web Design)
반응형 웹 디자인은 웹 페이지의 요소들을 감지된 디스플레이 크기에 따라 자동으로 배열하는 방식입니다. 지금 브라우저에서 아무 페이지나 열어 천천히 크기를 줄여보세요. 화면 크기에 따라 화면의 다양한 요소들이 이동하고 배치된다면 이것은 반응형 웹입니다.
반응형 웹의 경우 웹 페이지를 하나만 만들어 메뉴, 텍스트 영역, 이미지 등과 같은 콘텐츠의 모습을 크기에 따라 어떻게 바꿀지 CSS와 자바스크립트로 프로그래밍합니다. 하나의 페이지만 만들면 된다는 장점이 있는 반면, 화면 크기에 따라 메뉴는 어떻게 배치할지, 버튼의 크기는 어떻게 조절할지 등 디자인에 고려해야할 요소가 굉장히 많습니다. 코드, 개발 소스의 양도 늘어나 웹 속도에 안좋은 영향을 끼치기도 합니다. 따라서 반응형 웹은 구조가 단순한 사이트에 적용하기 유리합니다.
반응형 웹 방식을 차용할 경우 앞서 말했듯 소스의 용량이 늘어나기 때문에 SEO(검색 엔진 최적화)에서 중요하게 생각하는 ‘속도’ 측면에서 불리한 면이 있을 수 있습니다. 이러한 경우 서버 gzip 압축 등을 고려하여 성능 개선을 도모하는 것이 중요합니다.
적응형 웹 디자인(Adaptive Web Design)
적응형 웹 디자인은 디스플레이 크기에 따라 따로 만들어진 웹을 브라우저가 유저의 기기에 맞춰 불러오는 방식입니다. 모바일로 특정 주소에 접속했을때, 주소 맨 앞에 m이 붙어 m.example.com으로 자동으로 리다이렉트되는 경험을 해보셨을 겁니다. 이렇게 pc로 접속했을 떄는 example.com, 모바일로 접속했을 때는 m.example.com으로 열리는 페이지가 바로 적응형 웹입니다.
적응형 웹은 동일한 사이트라도 pc, 모바일 페이지를 따로 만들어야 하는 단점이 있습니다. 하지만 복잡한 구조의 사이트의 경우 반응형보다 개발 공수가 더 적게 들기도 합니다. 각 환경에 맞게 최적화된 UX를 구성할 수 있고, 코드도 더 단순하기 때문입니다. 클라이언트의 입장에서도 사용자 기기에 맞는 소스만 다운로드하므로 데이터 낭비가 적고 속도도 더 빠릅니다.
하지만 기기마다 같은 페이지의 콘텐츠 일관성이 떨어진다면 SEO에 부정적인 영향을 미치기도 한다고 하니, 참고하는 것이 좋겠습니다.
둘 중 무엇을 선택해야할까?
두 가지 방식 모두 장단점이 명확하기 때문에 만들고자 하는 사이트의 특성과 구조에 따라, 투입할 수 있는 개발 공수에 따라 반응형으로 만들지, 적응형으로 만들지 결정을 하는 것은 아주 중요합니다. 최상의 효과를 위해 여러가지를 고려하여 웹 사이트를 디자인해보세요. 🙂
