[WEB] 적응형/반응형, 모바일웹/웹앱

 - 적응형

PC용과 모바일용 따로 구분지어 웹사이트를 만듦.

 

❌❌❌

EX) 네이버 www.naver.com, m.naver.com 

m.이 있다고 무조건 모바일 웹ㅇ

 

 - 반응형

동일한 소스코드를 사용하여 웹사이트를 만듦.

 

 

😎😎😎

반응형에 적합한지도 고려해봐야 함!!!

 

반응형 웹도 단점이 존재한다.

1. 하나의 화면에 많은 정보를 담아야 할 때 적합하지 않음.

2. 작은 규모의 사이트를 만들 때 더 효율적임.

3. 반응형으로 다루기 쉬운 레이아웃이어야 함.

 

https://yozm.wishket.com/magazine/detail/8/

모바일 웹과 반응형 웹 비교 | 요즘IT

 

 

✅ 목표: 모바일 기기에 최적화된 레이아웃과 기능 제공!

 - 모바일 웹

적응형이 거의 필수적임.

풀 브라우저 방식

 

 

 

 - 웹 앱

: 브라우저 내에서 실행되지만, 애플리케이션(동적인 기능, 사용자와 상호작용)처럼 동작하는 웹사이트

 

적응형이 일반적임. But, 데스크탑 전용 웹 앱인 경우 적응형 필요 없음.

SPA 방식

일부 네이티브 기능은 활용할 수 없다는 단점이 있다.

 

 

 

 - PWA

: 웹 기술을 통해 개발된 애플리케이션으로, 웹 브라우저에서 실행되지만 네이티브 앱처럼 작동하여 푸시 알림, 홈 화면에 설치 등과 같은 기능 제공한다.

 

네이티브와 모바일 애플리케이션과 유사한 사용자 경험을 제공한다.

 

 

💯💯💯

모바일 우선 설계

 

 

Q. 만약 데스크탑용 웹사이트를 가지고 있는데, 모바일용 웹사이트를 개발하고 싶을 때..

 

기존 데스크탑용 웹사이트를 반응형으로 만드는 것보다, 새로 모바일 웹을 만드는 것이 유리하다.

https://yozm.wishket.com/magazine/detail/8/

모바일 웹과 반응형 웹 비교 | 요즘IT

 

 

 

✅ 쿠팡, Google Docs 비교

 - 쿠팡

www, m. 둘 다 있음.

적응형으로 구현됨.

반응형도 일부 있음..

 

 - Google Docs

웹앱 + 반응형

=> 보통 일반적인 세트.

 

✅ 일반 웹 사이트 vs 웹앱

 

 - 일반 웹사이트

단순 정보 제공, 콘텐츠 전달.

Ex) 블로그,     

번외. amazon, 쿠팡

 

 - 웹 앱

사용자와 상호작용하는 서비스.

Ex) Google Docs,