반응형, 적응형, 웹앱, 웹뷰

웹 개발을 할때 스마트폰이 나오기 전엔 PC화면, 큰 화면만 생각하면 됐다.

그러다 스마트폰이 강세가 되자 모바일화면, 작은 화면도 고려하기 시작했다.

 

기존 PC화면으로 서비스하던 웹사이트가 있는데 모바일화면을 대응하는 방법은 두가지가 있다.

1. 미디어 쿼리를 사용해 디바이스 폭에 따라 크기를 조정하는 반응형 디자인.

2. 기존 PC화면은 냅두고 모바일화면을 대응하는 새로운 웹사이트를 제공해 투 트랙으로 운영하는 적응형 디자인.

 

구분방법 - 브라우저 창을 조절했을 때, 터지거나 일그러지는 부분 없이 잘 보이면 반응형, 도메인 주소가 www. ,m. 이런 식으로 달라져 투 트랙으로 운영하면 적응형.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

반응형 디자인 (Responsive Design) 적응형 디자인 (Adaptive Design)

레이아웃 방식	한 가지 레이아웃이 다양한 화면 크기에 맞게 조정됨	여러 개의 고정된 레이아웃을 필요에 따라 선택
디자인 유연성	화면 크기에 따라 유동적으로 변함	특정 화면 크기에 맞는 디자인 고정
개발 난이도	상대적으로 낮음	다양한 레이아웃을 개발해야 하므로 난이도가 높음
장점	다양한 기기에서 일관된 사용자 경험 제공	각 기기에 맞춘 최적의 사용자 경험 제공
단점	모든 기기에서 완벽한 최적화를 기대하기 어려움	새로운 화면 크기가 추가되면 추가 개발 필요

 

반응형은 웹페이지 하나로 모든 기기를 대응한다면, 적응형은 큰 화면에서 보여주는 웹페이지 1개, 모바일과 같은 작은 화면에서 보여주는 웹페이지 1개 📍 각 기기마다 대응하는 페이지가 따로 존재한다는 점 입니다.

두 방식의 공통점이라면, 디바이스에 따라 화면을 대응한다 로 생각하시면 좋을 듯 합니다.

적응형의 장점은 반응형 처럼 모든 디바이스를 대응하기 위한 코드를 다 받을 필요가 없기 때문에 초기 로딩 속도가 빠릅니다. 또한 데이터가 많은 웹페이지를 구축할 때는 반응형 보다는 적응형이 적합합니다. (많은 데이터를 한 페이지에서 모든 기기를 대응하게 되면, 디자인 과 개발의 공수가 더 많이 들겠죠?)

단점으로는, 각 대응하는 기기마다 웹페이지가 다르다보니, 페이지 별로 템플릿을 따로 작성해야 하는 번거로움이 있으며, 기기마다 일관되지 않은 데이터로 인하여 검색엔진최적화가 반응형에 비해 다소 떨어지게 됩니다. 또한 수정사항이 요구될 경우, 각 기기마다의 페이지를 따로 따로 수정해줘야 하는 작업이 요구 됩니다.

 

웹앱 (Web App) 웹뷰 (Web View)

정의	브라우저에서 구동되는 애플리케이션	네이티브 앱 내에서 웹 페이지를 띄우는 기술
성능	네이티브 앱보다는 느릴 수 있음	네이티브 앱 성능을 사용할 수 있음
설치 필요성	별도의 설치가 필요 없음	네이티브 앱에 포함되어 설치 필요
개발 언어	HTML, CSS, JavaScript 등 웹 기술 사용	네이티브 앱 개발 언어와 웹 기술을 혼합 사용
사용 환경	모든 기기에서 동일한 URL로 접근 가능	특정 네이티브 앱 내에서만 접근 가능
업데이트	서버에서 자동으로 업데이트 가능	앱스토어를 통해 앱 업데이트 필요