본문 바로가기

Development

반응형 웹과 적응형 웹

단순 인지하고 지나치기엔 중요하게 고민해봐야하는 문제 인듯 싶어서,

오랜만에 포스팅을 한다.


반응형 웹과 적응형 웹.

"적응형 웹" 이란 용어는 어제 알았으나 이미 개발경험으로 인지하고 있었다. 그리고 이미 많은 IT엔지니어들이

급변하는 스마트 환경에 따른 대응책으로 이미 일선에서는 사용되고 있었던 방법으로 생각된다.

일전에 겪었던 데스크탑 브라우저 기준으로 개발하였으나, 모바일에서 표시할때는 반응하여 인터페이스를 변경하게 하는.

하지만 이미 데스크탑 기준과 동일한 데이터처리와 로딩을 끝낸 상태에서 변경하므로,

속도가 늦어짐에 매우 난감했었던 기억이 떠올랐다.


하지만 어느 순간부터 부트스트랩에 편리함에 익숙해지다 보니, 

모바일 퍼스트와 원소스 멀티가 유용하다는 생각으로만 "반응형 웹" 을 추구해야한다고만

생각했던 스스로에게 의문을 던지며 적재적소가 필요하단 생각을 하게 되었다.


먼저 목표는 동일하다.

웹서비스가 다양한 디바이스 해상도에서 원활한 경험을 제공하기 위함이다.

그러나 인터페이스 설계와 기획에서 많은 차이가 있을 수 있다. 또한 개념적으로 다르다.


다음은 내가 이해하고 있는 반응형과 적응형에 대한 개념이다.


반응형 웹 Responsive Web

미디어 쿼리를 이용하여 디바이스 화면의 크기를 확인하고 그리드를 기반으로 화면 크기의 변화에 따라 반응하게 된다.

단일 마크업이지만 복수의 스타일로

특정한 패턴을 가진 그리드로 반응하여 컨텐츠를

제공한다.

적응형 웹 Adaptive Web

서버나 클라이언트에서 서비스에 접근한 디바이스를

식별하여 해당 디바이스에 최적화된 마크업과 컨텐츠 정보를 제공한다.

또한 이에 걸맞는 동작이 적용되어진다.

이러한 특성으로 사용자는 보다 빠른 속도로 서비스를 이용할 수 있게 된다.



이제 다시 원점으로 위 와 같은 특징으로 개발중인 프로젝트에서 적용여부에 대한 문제로 다시 돌아 오자면,

프로젝트가 의미하고 가지는 성격이 제일 중요한 것 같다는 생각이 든다.


결국엔 "적재적소" 판단이 중요하다는 건데

가령 다음이나 네이버처럼 포털사이트에서는 "적응형" 이 걸맞다는 생각이 든다.

그 포털사이트 메인처럼 많은 양의 컨텐츠를 포함하고 있는데, 이 만큼을 동일한 양과 리소스를 로드하여 로딩이 끝난 후,

디바이스 반응하여 다르게 표시한다는게 단순하게만 생각해봐도 사용자 입장에서는 개거품물기 십상이란 생각이다.

이에 반해 많은 양의 컨텐츠를 포함하지 않고, 적당한 컨텐츠와 심플한 인터페이스라면 오히려 반응형이 더 어울릴것 같다.

해서 단순 테스트로 페이스북과 네이버, 다음등을 브라우저 창의 크기를 줄여 테스트하면 크기에 반응하지 않는 다는 것을

확인할 수 있다. 

아래는 창을 줄인 서비스의 캡쳐다.




다음은 반응형과 적응형에 대한 이해를 돕는 포스팅 들입니다.