반응형 웹 디자인과 프로그레시브 웹 앱(PWA): 차이점

이 두 가지는 모양과 성능이 매우 유사하므로 웹 개발에 대한 두 가지 인기 있는 접근 방식인 반응형 웹 디자인과 프로그레시브 웹 앱 간에 더 자세한 비교가 없는 이유가 궁금할 것입니다. 자, 이것 입니다 . 이 기사에서 우리는 반응형 웹 디자인과 프로그레시브 웹 앱을 비교하고 그것들이 실제로 어디에서 다른지 알아낼 것입니다.

반응형 웹 디자인

그것은 무엇입니까

반응형 웹 디자인(RWD)은 프로그레시브 웹 앱의 개념보다 5년 앞선 2010년 Ethan Marcotte가 처음 설명한 웹 개발 접근 방식입니다.

작동 방식

기본적으로 반응형 웹 디자인의 철학은 사용자의 장치에 반응하는 것을 목표로 디자인과 개발이 이루어져야 한다는 것입니다. 이것은 유동 격자, 유연한 이미지 및 CSS 미디어 쿼리를 사용하여 달성됩니다.

유동 격자, 유연한 이미지 및 미디어 쿼리는 반응형 웹 디자인을 위한 세 가지 기술 요소입니다.

Ethan Marcotte, 반응형 웹 디자인

유체 그리드

유동 격자로 설계된 반응형 웹 사이트는 픽셀 기반 치수를 정의하는 대신 유동 격자가 새로운 백분율 기반 계산을 채택하기 때문에 시장의 다양한 화면 크기를 더 잘 처리할 수 있습니다.

유연한 이미지

웹의 이미지는 자연스럽게 유동적이지 않지만 일부 구성( width 속성이 100% 로 설정되고 height 속성이 auto 로 설정됨)을 사용하면 모든 이미지가 모든 장치에서 반응하도록 만들 수 있습니다.

CSS 미디어 쿼리

유연한 이미지와 유동적인 그리드가 있는 반응형 웹 페이지는 기술적으로 반응형이지만 가능한 한 좋아 보이지 않습니다. 여기에서 CSS 미디어 쿼리가 사용되어 다양한 장치에 맞게 조정된 더 나은 경험을 만들 수 있습니다. 이러한 맞춤형 경험은 특정 화면 크기에서 적용되는 중단점을 추가하여 도입되는 경우가 많습니다.

전반적으로 반응형 웹 디자인은 오늘날의 웹을 훨씬 더 쉽게 접근할 수 있게 해주었습니다. 그 접근 방식은 이전에 시장에서 다양한 화면 크기를 수용하기 위해 필요했던 더 많은 개발 단계의 필요성을 제거했기 때문입니다. 또는 작성자의 말에 따르면 웹 개발에 대한 이러한 접근 방식은 마침내 " 물건의 밀물과 썰물을 위한 디자인 "을 가능하게 합니다.

예

반응형 웹사이트는 오늘날 흔하며, 당신이 접하는 거의 모든 웹사이트는 그 특성상 어느 정도 반응형입니다.

프로그레시브 웹 앱

그것은 무엇입니까

2015년 Alex Russel 이 처음 만든 프로그레시브 웹 앱은 일반적인 반응형 웹 사이트에 비해 많은 이점이 있기 때문에 웹이 자연스럽게 진화한 것입니다. Google Developer Advocate인 Pete LePage에 따르면 " 프로그레시브 " 부분은 " 사용자가 시간이 지남에 따라 앱과의 관계를 점진적으로 구축함에 따라 점점 더 강력해집니다 "라고 설명할 수 있습니다.

평신도의 용어로 말하자면 PWA는 푸시 알림, 오프라인 기능 등을 포함하여 기본 모바일 애플리케이션에서 기대할 수 있는 (거의) 모든 기능을 갖춘 앱과 유사한 웹사이트입니다. 그리고 이 때문에 PWA는 웹 기반 플랫폼과 함께 제공되는 모든 예상 이점을 유지할 수 있기 때문에 전체 경험이 반응형 웹 사이트 대응물보다 한 단계 향상되었습니다.

 관련 기사: 프로그레시브 웹 애플리케이션이란 무엇입니까?

작동 방식

실제로 PWA의 핵심 구성 요소를 요약하는 것은 매우 쉽습니다. 기본적으로 앞서 언급한 모든 점진적 기능을 가능하게 하기 위한 요구 사항은 다음과 같습니다.

웹 앱 매니페스트

웹 앱 매니페스트는 PWA 설치 프로세스에 필요한 메타데이터를 제공하고 PWA가 사용자의 홈 화면에 표시되는 방식을 결정하는 JSON 파일입니다.

서비스 워커

PWA의 모든 점진적 기능을 가능하게 하는 기본 구성 요소로 보편적으로 간주되는 서비스 작업자는 브라우저와 독립적으로 실행되며 기본 JavaScript와 다른 스레드에서 실행됩니다.

보안 컨텍스트

웹의 새로운 표준으로서 보안 프로토콜인 HTTPS를 통해 PWA를 분리해야 합니다. 이는 사용자와 서버 간의 보안 통신을 보장하고 그에 대한 대가로 위험 없는 경험을 보장합니다.

예

PWA는 기본 모바일 응용 프로그램과 다르게 작동하지 않으므로 이전에 알지 못한 채 PWA 사이트를 방문했을 수 있습니다. Instagram 및 Pinterest와 같은 앱과 유사한 대형 사이트를 생각해 보십시오. 모두 PWA로 구동됩니다.

 추천 자료: 2020년 프로그레시브 웹 앱의 12가지 모범 사례

겹치는 곳

최신 기능과 유사한 경험

지금까지 모든 것이 이해가 되었다면 사용자 경험과 관련하여 반응형 웹 디자인(RWD)과 PWA가 많이 겹친다는 것을 알아야 합니다. 기술적으로 PWA 는 반응형입니다. 접근 방식은 모든 장치에서 보기에 적합하도록 만들어졌으며 약간의 현대적인 터치로 더 많은 앱과 같은 기능을 사용할 수 있습니다.

그리고 둘 다 웹 개발에 대한 접근 방식이므로 다음을 포함하여 웹에서 거의 동일한 이점을 공유합니다.

• 모든 플랫폼을 위한 하나의 URL, 하나의 코드베이스
• HTTPS로 보안 강화
• 더 나은 검색 가능성과 항상 최신 상태

그들이 다른 곳

웹 개발에 대한 이 두 가지 접근 방식(외양은 대부분 비슷하지만 실제 세계에 미치는 영향은 많이 다르기 때문에)이 흥미로워집니다.

기능면에서

PWA는 정의에 따라 일반적인 반응형 웹사이트보다 더 많은 기능을 제공합니다. 서비스 작업자 및 웹 앱 매니페스트와 같은 웹 기술의 최근 발전을 활용하여 PWA는 이전에 다음과 같은 기본 모바일 앱에 독점적이었던 기능을 제공할 수 있습니다.

홈 화면에 추가

등록된 서비스 워커와 웹 앱 매니페스트를 사용하면 지원하는 브라우저가 있는 모든 장치에 PWA를 설치할 수 있습니다.

>> 자세히 알아보기: 첫 번째 PWA 만들기

푸시 알림

서비스 워커를 통해 알림을 보내고 네이티브 애플리케이션과 마찬가지로 사용자 장치에 표시되도록 할 수 있습니다. 이것은 푸시 API, 알림 API 및 웹 푸시 프로토콜을 활용하는 비교적 최근의 웹 기능입니다. 그리고 가까운 장래에 이 기능은 Notifications Triggers 및 Badging API의 출현 덕분에 더욱 향상될 것입니다.

오프라인 기능

브라우저 내 프로그래밍 가능한 네트워크 프록시, 즉 서비스 작업자 덕분에 PWA는 HTTP 캐시와 같은 오래된 캐싱 메커니즘에 의존하지 않고도 오프라인 콘텐츠를 사전에 캐시하고 제공할 수 있습니다.

참고 : 반응형 웹 사이트는 웹의 기존 API를 모두 활용하여 최적의 사용자 경험을 제공할 수 있습니다. 서비스 작업자에 의존하는 모든 기능을 얻지 못할 뿐입니다.

 추천 자료: PWA(프로그레시브 웹 앱) 및 하드웨어 액세스

성능면에서

반응형 웹 사이트는 여전히 현재 HTTP 캐싱 메커니즘과 관련된 모든 단점으로 인해 보류된 일반적인 웹 사이트이므로 PWA가 서비스 워커라고 하는 보다 새롭고 성능 지향적인 캐싱 메커니즘을 사용하므로 PWA에서 더 나은 성능을 기대하는 것이 합리적입니다.

더 빠른 캐싱 메커니즘

서비스 워커를 등록하면 캐시되는 항목을 정확히 제어 할 수 있으며 결과적으로 재방문자에게 더 나은 경험을 제공할 수 있습니다.

서비스 작업자의 실제 성능 영향도 주의 깊게 관찰되지 않은 것이 아닙니다. 웹사이트에 대한 사용자의 첫 경험을 측정하는 척도로 처음 페인트하는 시간을 사용하여 Google은 통제된 그룹(서비스 작업자가 웹 앱을 제어하는 ​​곳)과 Google I/O 웹 앱의 성능을 관찰하는 연구를 자체적으로 수행했습니다. 지원되는 그룹(서비스가 작동하는 곳은 사용 중인 브라우저에서 지원되지만 아직 웹 앱을 제어하지 않음).

결과는 데스크톱에서 특히 인상적이었습니다. 여기에서 서비스 워커가 원래의 firstpaint 시간(912ms)을 583ms 로 줄이기 위해 한 몫을 했음을 알 수 있습니다. 이것은 얻을 수 있는 즉각적인 경험에 가깝습니다.

그러나 모바일 장치에서는 약간 덜 인상적입니다.

여기에서 제어 그룹의 꼬리 끝이 여전히 지원 그룹과 약간 유사하게 보이는 것을 볼 수 있습니다. 이는 주로 모바일에서 서비스 작업자 스레드가 데스크톱에 비해 최적화되지 않고 시작하는 데 더 많은 시간이 필요하기 때문입니다.

전반적으로 서비스 작업자, 즉 PWA를 통해 달성한 성능 향상은 경이적입니다. 물론 모바일 서비스 근로자 측에서 해야 할 일이 아직 남아 있습니다. 그러나 우리는 전반적으로 웹이 예전에 했던 것보다 여전히 미미한 단계이며 올바른 방향으로 나아가는 단계라고 생각합니다.

보안 면에서

HTTPS - 구분선

일반적인 반응형 웹사이트는 PWA만큼 안전할 수 있지만 반응형 웹사이트에서 보안 통신 프로토콜을 사용할 필요는 없습니다 . PWA의 설립자인 Google은 PWA의 서버와 클라이언트 간의 모든 통신이 HTTPS를 사용하여 암호화되어야 하므로 PWA 기반 웹사이트의 경우는 이와 반대입니다.

위치 정보 및 서비스 워커와 같은 PWA와 관련된 대부분의 기능은 앱이 HTTPS를 사용하여 로드된 후에만 사용할 수 있습니다.

MDN 웹 문서, 프로그레시브 웹 앱(PWA)

 관련 문서: HTTPS가 필요합니까?

결론

푸시 알림, 홈 화면에 추가(가까운 장래에 지오펜싱 및 주기적 동기화)와 같은 추가 앱과 같은 기능과 결합하여 서비스 작업자를 통해 달성한 위에서 언급한 성능 향상은 모두 PWA를 다음으로 적합한 후보로 만듭니다. 웹의 진화. 현재 PWA 운동은 Windows 10에서 PWA 채택을 추진하는 Microsoft를 포함하여 거의 모든 대기업에서 이미 널리 권장되고 있습니다. 스티브 잡스가 상상한 것:

전체 Safari 엔진은 iPhone 내부에 있습니다. 따라서 iPhone의 앱과 똑같이 보이고 동작하는 놀라운 Web 2.0 및 Ajax 앱을 작성할 수 있습니다. 그리고 이러한 앱은 iPhone 서비스와 완벽하게 통합될 수 있습니다. 전화를 걸고 이메일을 보내고 Google 지도에서 위치를 찾을 수 있습니다.

스티브 잡스, 2007