단일 페이지 애플리케이션과 프로그레시브 웹 애플리케이션의 이점: CX 개선

단일 페이지 애플리케이션의 이점은 고객 경험에서 전자 상거래 공급자가 빠르고 안정적인 상호 작용을 제공해야 하기 때문에 점점 더 명확해졌습니다.

지난 20년 동안 대부분의 웹 사이트는 HTML, CSS 및 JavaScript를 사용하여 동일한 방식으로 구축되었습니다. 이러한 기술은 시간이 지남에 따라 더욱 발전했지만 원칙은 대체로 동일하게 유지됩니다. 사용자가 웹 페이지와 상호 작용하고 사용자의 브라우저가 웹 서버를 호출하면 차례로 HTML, CSS 및 그런 다음 브라우저에 로드되고 표시되는 JavaScript.

(휴. 많네요.)

AJAX와 같은 일부 기술을 사용하면 개발자가 전체 페이지를 새로 고치지 않고도 일부 콘텐츠를 변경할 수 있지만 이 프로세스는 가장 일반적으로 페이지 새로 고침과 관련됩니다. 이 때문에 대부분의 웹 사이트는 응용 프로그램이 아니라 웹 사이트처럼 뚜렷하게 작동하고 동작합니다.

또한 대부분의 웹사이트에는 백 엔드와 프레젠테이션 레이어가 밀접하게 결합되어 있습니다. 즉, 웹 사이트의 프런트 엔드와 백 엔드가 모두 단일 모놀리식 애플리케이션의 일부이기 때문에 실제로 분리되지 않습니다.

단일 페이지 애플리케이션과 프로그레시브 웹 앱이 고객 경험을 개선하는 방법

지난 10년 동안 기본 iOS 및 Android 앱은 거의 모든 사람들에게 일반적인 장소가 되었습니다. 이러한 응용 프로그램은 실제 웹 사이트와 다르게 작동하여 사용자에게 매우 다양하고 종종 더 만족스러운 경험을 제공합니다.

링크나 버튼을 눌러도 페이지가 새로 고쳐지지 않고 변경 사항이 훨씬 빠르게 로드되며 동일한 모바일 웹사이트보다 훨씬 나은 경험을 하는 경우가 많습니다. 기본 전자 상거래 앱의 경우 사용자가 링크를 클릭하면 애플리케이션이 백엔드 서버를 호출하지만 해당 서버가 HTML, CSS 및 JavaScript 프리젠테이션 레이어를 반환하는 대신 단순히 필요한 원시 데이터를 보내고 응용 프로그램은 사용자에게 표시되는 방법을 관리합니다.

예를 들어, 사용자가 세부 정보를 보기 위해 제품을 클릭하면 애플리케이션은 해당 제품의 세부 정보를 요청하는 백엔드 서버를 호출하고 서버는 제품 이름, 해당 제품과 같은 항목이 포함된 데이터 문자열로 응답합니다. 가격 및 이미지에 대한 링크가 포함되지만 표시 방법을 정의하기 위해 HTML, CSS 또는 JavaScript도 보낼 필요는 없습니다.

응용 프로그램 자체는 프레젠테이션 계층이므로 백엔드 서버에서 이를 필요로 하지 않습니다. 이것은 훨씬 더 빠르며 애플리케이션이 페이지를 새로 고치지 않고도 고객에게 제품 세부 정보를 표시할 수 있도록 합니다. 이 기술을 통해 개발자는 기존 모델의 제약 없이 원활하고 유연한 고객 경험을 구축할 수 있습니다.

웹 브라우저를 통해 앱과 같은 경험을 제공하여 네이티브 앱과 웹사이트의 구분이 모호해지면 좋지 않을까요?

여기에서 SPA(단일 페이지 애플리케이션) 및 PWA(프로그레시브 웹 앱)가 등장합니다.

단일 페이지 애플리케이션이란 무엇입니까?

SPA는 웹 브라우저에서 실행되는 JavaScript로 작성된 응용 프로그램이며 일반적으로 새 정보를 표시하기 위해 페이지를 새로 고칠 필요가 없습니다.

사용자가 웹사이트를 처음 방문하면 프레젠테이션 리소스(HTML, CSS 및 일부 스크립트)와 함께 응용 프로그램이 브라우저에 로드됩니다. 이 시점부터 사용자는 단일 웹 페이지에 있고 애플리케이션은 관련 콘텐츠를 로드하고 필요할 때 디스플레이를 변경합니다.

기본 앱과 마찬가지로 사용자가 링크를 클릭하면 애플리케이션이 백엔드 서버를 호출하고, 백엔드 서버는 필요한 데이터를 문자열로 보냅니다. 이 서버에는 일반적으로 프레젠테이션 리소스가 포함되어 있지 않습니다. 사용자가 웹사이트를 처음 방문할 때 로드됩니다.

사용자는 본질적으로 단일 웹 페이지에만 있기 때문에 페이지를 새로 고친다는 개념은 없습니다. 대신, 애플리케이션은 필요할 때 다른 정보를 표시하도록 페이지를 변경합니다.

SPA는 일반적으로 API 세트를 통해 백엔드 애플리케이션과 인터페이스에서 완전히 분리됩니다. 종종 자체 서버에 배치되며 별도로 배포할 수 있습니다. 어떤 면에서는 백엔드 애플리케이션에 대해 매우 불가지론적인데, 이는 단순히 데이터를 주고받고 제3자 시스템처럼 취급하기 때문입니다.

우리 모두는 아마 깨닫지도 못한 채 한동안 SPA를 사용해 왔습니다. 페이스북, 지메일, 트위터, 링크드인, 인스타그램(많은 다른 것들 중에서)은 모두 웹사이트 대신에 SPA를 사용합니다.

지금 해당 웹 사이트를 방문하면 기존 웹 사이트보다 훨씬 더 기본 앱처럼 작동한다는 것을 알 수 있습니다. 페이지는 상호 작용할 때 거의 새로 고쳐지지 않으며 매우 빠릅니다. 링크와 버튼을 클릭하면 보고 있는 콘텐츠가 변경되지만 머리글 및 바닥글과 같은 항목은 처음 로드되면 거의 새로 고쳐지지 않습니다.

단일 페이지 애플리케이션의 이점

SPA의 가장 크고 가장 분명한 이점은 디자이너와 개발자가 페이지를 다시 로드하는 기존 접근 방식에 제약을 받지 않고 앱과 같은 경험을 제공할 수 있도록 하여 고객 경험을 개선하는 데 사용할 수 있다는 것입니다.

일반적인 규칙이 더 이상 적용되지 않기 때문에 새로운 방식의 설계와 사고가 필요하지만 사용자 경험에 대한 이점은 엄청날 수 있습니다.

많은 프레젠테이션 리소스(HTML,CSS)가 한 번만 로드되기 때문에 SPA는 일반적으로 표준 웹사이트보다 훨씬 빠르게 콘텐츠를 로드합니다. 응용 프로그램과의 상호 작용에는 완전한 형식의 HTML/CSS 페이지가 아니라 소량의 데이터를 검색하기 위해 백엔드 서버에 대한 호출만 필요합니다. 그러면 애플리케이션은 페이지를 다시 로드하지 않고도 변경된 데이터를 빠르게 표시할 수 있습니다.

SPA는 백엔드 애플리케이션과 완전히 분리되어 있으므로 별도로 배포할 수 있어 매우 큰 이점을 얻을 수 있습니다. 작은 프론트 엔드 변경으로 인해 전체 애플리케이션을 배포할 필요가 없으며 이는 상당히 큰 작업이 될 수 있으며 때로는 가동 중지 시간이 필요합니다.

SPA의 단점

SPA 사용의 가장 큰 문제 중 하나는 SEO에 미치는 영향입니다. 페이지마다 고유한 URL이 있는 고유한 페이지의 전통적인 구조가 항상 있는 것은 아니므로 검색 엔진이 콘텐츠를 인덱싱하는 데 문제가 발생할 수 있습니다. 그러나 이것은 서버 측 렌더링과 같은 기술을 사용하고 클릭이 고유한 URL을 생성하도록 함으로써 대응할 수 있습니다.

검색 엔진 봇이 SPA에 대처하도록 변경됨에 따라 시간이 지남에 따라 문제가 줄어들고 있습니다. 결국 Google은 이를 옹호하는 회사 중 하나입니다.

일부 SPA는 응용 프로그램 및 프레젠테이션 리소스가 첫 번째 페이지 보기에서 로드되기 때문에 첫 번째 방문에서 로드하는 데 약간의 시간이 걸립니다.

이것은 웹사이트를 처음 방문할 때 큰 로딩 이미지가 있는 Gmail과 같은 SPA에서 매우 두드러집니다. 이 문제는 서버 측 렌더링과 효율적인 프로그래밍을 사용하여 애플리케이션과 리소스의 초기 로드가 너무 크지 않도록 함으로써 대처할 수 있습니다.

프로그레시브 웹 앱이란 무엇입니까?

PWA는 특정 기술이 아니라 웹사이트나 애플리케이션을 PWA로 만드는 개발 방법론이나 원칙 집합에 가깝기 때문에 정의하기가 조금 어렵습니다.

PWA라는 용어는 원래 PWA를 만드는 요소를 정의하기 위한 체크리스트를 만든 Google에서 만들어졌습니다. 무엇보다도 Google은 PWA가 다음과 같아야 한다고 정의했습니다.

• 안전 – https에서 제공
• 반응형 – 모든 폼 팩터에 적합
• 오프라인 작업 가능 - 서비스 워커를 사용하여 페이지 캐시
• 빠름 – 3G 연결에서 빠르게 로드 가능
• 앱 유사 – 앱 셸 모드 및 디자인을 사용하여 앱처럼 느껴지도록 디자인
• 설치 가능 – 매니페스트 파일을 사용하여 앱을 홈 화면에 추가할 수 있습니다.
• 참여 – 푸시 알림과 같은 도구 사용
• 프로그레시브 – 모든 브라우저에서 작동하지만 최신 브라우저에서 점진적으로 개선됩니다.

보시다시피 체크리스트 항목 중 일부는 다소 모호하거나 주관적입니다. 당신은 또한 그들 중 일부가 SPA와 비슷하게 들리는 것을 볼 수 있습니다. 전통적인 HTML/CSS 웹사이트는 SPA처럼 PWA로 만들 수 있습니다. SPA는 자동으로 PWA가 아니지만 그 방향으로 밀어붙이는 몇 가지 기능이 있습니다.

아직 혼란스러우신가요?

PWA의 장점

SPA와 마찬가지로 PWA의 가장 큰 장점 중 하나는 고객 경험이 개선되어 앱과 같은 느낌을 주고 기존 모바일 웹사이트와 기본 iOS 또는 Android 앱 간의 격차를 해소한다는 것입니다.

홈 화면에 저장하는 기능 또는 서비스 워커를 통해 페이지를 캐시할 수 있는 기능과 같은 기능은 웹사이트를 기본 앱처럼 보이게 만들고 느낄 수 있습니다.

PWA는 체크리스트의 핵심 원칙 중 하나이기 때문에 매우 빠른 경향이 있습니다.

Android 운영 체제는 브라우저가 모바일 장치의 하드웨어에 액세스할 수 있도록 합니다. 푸시 알림 및 NFC 스캐닝 사용과 같은 것을 허용하여 CX를 실제로 향상시킬 수 있습니다.

PWA의 단점

PWA의 가장 큰 단점은 Apple의 지원이 없다는 것입니다. PWA를 최대한 활용하려면 Android 기기에서 실행해야 합니다. Android 운영 체제는 브라우저가 기기의 상당량의 기능에 액세스할 수 있도록 하는 반면 Apple은 이를 엄격하게 제한하기 때문입니다. 이것은 천천히 개선되고 있지만 아직 갈 길이 멉니다.

또 다른 단점은 해석의 여지가 있는 명확한 정의가 없다는 것입니다.

SPA와 PWA는 웹사이트 개발의 미래입니다.

이 기술이 여전히 대부분의 전자 상거래 웹사이트에서 완전히 주류는 아니지만 의심할 여지 없이 웹사이트 개발의 미래입니다.

SPA는 전자 상거래 애플리케이션을 구축하는 데 사용할 수 있는 특정 기술이지만 PWA는 일반적으로 Google에서 제시한 방법론에 따라 구축된 웹사이트로, 최고의 고객 경험을 제공한다고 생각합니다.

SPA를 개발하는 사람은 가능한 최고의 CX를 제공하기 위해 가능한 한 PWA 체크리스트를 충족하는 것을 목표로 해야 합니다. 이러한 기술을 통해 디자이너와 개발자는 사용자 경험과 여정에서 더 많은 자유를 얻을 수 있으므로 기존의 페이지별 모델에서 벗어날 수 있습니다.

SAP 및 IBM과 같은 많은 소프트웨어 제공업체는 전자 상거래 플랫폼을 위한 SPA 프런트 엔드를 만드는 데 막대한 투자를 하고 있으며 몇 년 안에 대부분의 전자 상거래 웹 사이트가 Angular, Vue 또는 React.

전통적인 HTML/CSS 모델을 사용하여 구축되는 전자 상거래 사이트는 점점 줄어들고 웹 사이트와 기본 앱 간의 격차는 점점 줄어들어 구별하기 어려울 정도입니다.

불확실한 시대에 훌륭한 CX는 무엇입니까? 전문가가 토론할 때 참여하십시오.