Study/📦 IT 지식

#2. 적응형 웹, 반응형 웹?

juwon.ryu 2023. 8. 15. 23:59

기획자의 첫 업무였던 신규 홈페이지 기획을 받으면서 대표님께 전달받았던 요구사항 중 하나가 있었습니다.

 

"적응형 말고 반응형 웹으로 기획하세요"

 

요구사항에 따른 기획을 하기 앞서

적응형과 반응형 웹의 차이는 무엇인지, 왜 적응형이 아닌 반응형으로 기획해야 하는지에 대한 이해가 필요했습니다.

 


 

적응형 웹(Adaptive Web) 이란?

PC, 모바일, 태블릿 등 디바이스 별로 웹 페이지를 별도로 구축하는 경우 입니다.

디바이스의 사이즈를 감지하여 정해진 레이아웃의 페이지를 노출할 수 있어

 

1) 사용자가 사용중인 디바이스에 적합한 콘텐츠 및 기능을 노출할 수 있으며,

2) 감지한 디바이스에 맞춘 콘텐츠를 로딩하므로 비교적 로딩 속도가 빠른 것이 장점이라고 합니다.

 

물론 그만큼 기획, 디자인, 퍼블리싱 진행 시 리소스가 많이 들어갑니다.

디바이스 별로 콘텐츠, 노출되는 기능들이 상이할 수 있기 때문입니다.

 

대표적인 웹 사이트로는 네이버가 있습니다. 

동일한 해상도이나, 모바일인지, PC 주소인지에 따라 보여지는 웹 사이트의 콘텐츠, 레이아웃이 다릅니다.

 

 

 

반응형 웹(Responsive Web) 이란?

사용자가 이용하고 있는 디바이스의 해상도에 따라 웹 사이트의 크기가 변경됩니다.

적응형 웹과 달리 보여지는 콘텐츠는 동일하게 유지되더라도 사이즈를 키우고 줄이는 것에 따라 오른쪽에 있던 내용이 아래로 내려가거나

비교적 자유롭게 내용이 보여지는 웹 형태입니다.

 

1) 디바이스 별로 콘텐츠나 기능이 상이하지 않기 때문에 사용자에게 일관적인 경험을 제공할 수 있으며

2) 업데이트 및 유지 보수가 용이하며,

3) 새롭거나 특이한 해상도에서도 비교적 자연스러운 서비스 및 콘텐츠를 제공할 수 있는 것이 장점입니다.

 

물론, 특정 해상도에 따라 어떤 레이아웃으로 노출할 것인지에 대한 기준이 필요하기는 합니다.

또한 적응형 웹과 달리 디바이스 별로 화면이 렌더링되는 것이 아니라 한 번에 불러오기 때문에 로딩 시간이 좀 더 걸릴 수 있다고 합니다.

 

최근 다수의 기업 홈페이지가 반응형 웹으로 제작되어 예시는 쉽게 찾아볼 수 있는데, 그 중 익숙한 서비스인 토스의 홈페이지를 보겠습니다.

해상도에 따라 자연스럽게 콘텐츠의 레이아웃이 바뀌는 것을 볼 수 있습니다.

 

 


 

이처럼 적응형 웹과 반응형 웹은 각각의 특징이 있고, 또한 장단점도 명확하게 있는데요.

웹 사이트를 어떤 형태로 제작해야 하는지에 대한 정답은 없다고 합니다.

목적과 필요성에 따라 적응형 웹, 반응형 웹을 선택하여 제작을 하면 됩니다.

 

즉, 홈페이지도 무조건 반응형 웹으로 해야하는 필요성이 있는 것이 아니었지만,

웹 유형의 특징을 고려하였을 때 홈페이지를 '반응형 웹'으로 기획하라고 하셨던 이유에 대해서 이렇게 정리를 해보았습니다.

 

1. 기업 홈페이지는 기능이 아닌 정보 제공 목적을 띄는 웹 페이지므로 다양한 디바이스에서 동일(또는 유사한) 콘텐츠를 제공
2. 그렇기 때문에 리소스가 많이 들어가는 적응형 웹보다는 반응형 웹으로 제작하는 것이 보다 효율적이고 유지 보수에도 용이

 


웹 사이트라고 하면 PC만 떠올리는 시대는 아주 많이 지난 것 같습니다.

모바일로 웹 사이트를 접속하는 사용자가 증가하고 있고, 태블릿 사용자도 고려해야 하기 때문에 앞으로 더욱 반응형 웹과 적응형 웹을 알고  기획하는 것이 필요하지 않을까 싶습니다.

헷갈렸던 반응형, 적응형 웹에 대해 정리를 하고나니 앞으로도 잘 활용해볼 수 있을 거 같네요. 😄

 

 

'Study > 📦 IT 지식' 카테고리의 다른 글

#4. 세션, 쿠키, 캐시는 왜 매번 헷갈리는지  (0) 2023.08.16
#3. 크로스 브라우징이란?  (0) 2023.08.16
#1. 메타 태그란?  (0) 2023.08.14