Adobe Experience Manager (AEM) 웹 애플리케이션에 최신 웹 환경을 제공하는 데 관심이 있는 기술 리드 또는 디지털 마케팅 분석가로서 이 작업에 대한 옵션을 찾아보셨다면, 이 도움말을 읽어 보셨을 것입니다. 프로그레시브 웹 앱 (PWA)이 무엇인지, 코딩 없이 WorkBox 라이브러리를 활용하여 AEM에서 PWA를 만드는 데 필요한 사항을 다룹니다.
PWA를 사용해야 하는 이유
프로그레시브 웹 앱은 최신 웹의 기능을 활용합니다. 기기에 설치할 수 있고, 빠르게 로드되며, 후속 방문 시 즉시 로드됩니다. 입력 내용에 빠르게 반응합니다. 연결이 불안정하거나 오프라인일 때도 잘 작동합니다. PWA는 최신 API를 사용하여 선택사항인 전체 화면 UI, 백그라운드 업데이트, 오프라인 데이터 액세스를 포함하는 매력적인 앱 같은 환경을 제공합니다.
웹 앱을 프로그레시브 웹 앱으로 개선하려면 다음 두 가지 아티팩트를 추가해야 합니다.
- 웹 앱 매니페스트: 앱의 진입점 URL, PWA를 나타내는 데 사용되는 아이콘 및 애플리케이션의 모양과 동작을 설명하는 기타 구성을 정의하는 JSON 구성 파일입니다.
- 서비스 워커: PWA에서 사용하는 리소스와 이러한 리소스에 액세스하기 위한 전략을 정의하여 PWA를 보강하는 백그라운드 서비스를 제공하는 스크립트입니다.
서비스 워커란 무엇인가요?
기본적으로 서비스 워커는 웹 애플리케이션과 상호작용할 때 브라우저가 독립적으로 실행하는 스크립트일 뿐입니다. 활성 서비스 워커는 Cache API를 사용하여 스마트 캐싱과 같은 서비스를 제공하고, Background Sync API를 사용하여 데이터를 최신 상태로 유지하며, 푸시 알림과 통합합니다. 올바른 캐싱 전략을 사용하는 서비스 워커는 다양한 시나리오에 안정적이고 신뢰할 수 있는 사용자 환경을 제공하고, 사전 캐시된 리소스를 즉시 반환하고, 데이터를 캐시에 저장하고, 웹에 연결될 때 리소스를 업데이트합니다.
서비스 워커는 처음부터 작성하기 어려울 수 있습니다. Workbox는 이를 더 쉽게 만들기 위해 만들어졌습니다. Workbox는 Cache Storage API를 사용하여 서비스 워커와 캐싱을 작성하고 관리하는 데 도움이 되는 라이브러리 모음입니다. 서비스 워커와 Cache Storage API를 함께 사용하면 네트워크 또는 캐시에서 자산 (HTML, CSS, JS, 이미지 등)이 요청되는 방식을 제어하고, 오프라인일 때도 캐시된 콘텐츠를 반환할 수 있습니다. Workbox를 사용하면 프로덕션에 즉시 사용 가능한 코드로 둘 다 빠르게 설정하고 관리할 수 있습니다.
AEM 사이트를 PWA로 업그레이드
Adobe Experience Manager (AEM)는 웹사이트, 모바일 앱, 양식, 디지털 사이니지 빌드를 위한 포괄적인 콘텐츠 관리 솔루션입니다. 이를 통해 마케팅 콘텐츠와 애셋을 쉽게 관리할 수 있습니다.
AEM이 웹 애플리케이션 빌드를 위한 풍부한 라이브러리를 제공하지만 지금까지는 서비스 워커와 매니페스트를 추가하여 PWA를 빌드하기가 어려웠습니다.
Adobe Experience Manager Sites는 Adobe Experience Manager의 일부인 UI 제작 도구입니다. Adobe Experience Manager와 함께 클라우드 서비스로 사용하는 경우, AEM 사이트를 사용하면 기존의 AEM 웹사이트 또는 단일 페이지 애플리케이션을 구성 및 코딩 없이 설치 가능한 오프라인 지원 프로그레시브 웹 앱으로 쉽게 변환할 수 있습니다. Workbox를 사용하여 프로그레시브 웹 앱용 모범 사례를 제공하고 상용구 매니페스트 및 서비스 워커를 작성하는 복잡성을 추상화합니다.
AEM은 콘텐츠 현지화를 지원하므로 지역별로 각기 다른 브랜딩과 오프라인 콘텐츠를 사용할 수 있습니다. 이렇게 하려면 언어 마스터마다 다른 PWA 구성을 빌드합니다.
AEM에서 PWA 구성 시작하기
Adobe Experience Manager를 클라우드 서비스로 로그인하고 Adobe Experience Manager 사이트 페이지 또는 언어 마스터를 선택하고 속성을 클릭합니다. 프로그레시브 웹 앱이라는 탭이 표시됩니다. (참고: 이 탭이 표시되지 않으면 Adobe에 문의하여 기능을 사용 설정하세요.) 몇 번의 클릭만으로 프로그레시브 웹 앱의 설치 및 디자인과 분위기를 구성할 수 있습니다.
AEM Sites 튜토리얼을 완료했다면 전에 WKND 사이트를 보셨을 것입니다. 이 도움말에서는 WKND 데모를 시작점으로 사용합니다. 완료되면 WorkBox를 사용하여 웹 앱에서 WKND를 PWA로 업데이트합니다.
매니페스트 구성
웹 앱 매니페스트는 PWA의 디자인과 동작을 설명하는 속성이 포함된 JSON 파일입니다. Adobe Experience Manager Sites는 속성을 구성할 수 있는 친숙한 사용자 인터페이스를 제공합니다.
시작 URL은 PWA의 진입점입니다. 사용자가 휴대전화에서 PWA 아이콘을 탭하면 시작 URL에 액세스하게 됩니다. 디스플레이 모드는 앱이 창 모드인지 전체 화면 환경인지를 구성합니다. 애플리케이션의 화면 방향을 지정할 수도 있습니다. 테마 색은 창과 툴바의 색상이고 배경색은 애플리케이션이 시작될 때 스플래시 화면의 색상입니다. 아이콘은 애플리케이션이 기기에 설치될 때 기기 홈 화면이나 애플리케이션 검색 창에 표시되는 이미지입니다. 이미지에 표시된 구성은 아래와 같은 매니페스트 JSON을 생성합니다.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
시작 URL은 도메인의 기본 방문 페이지와 다를 수 있습니다. start_url 매개변수를 변경하면 사용자를 인증되지 않았거나 신규 사용자가 표시되는 기본 페이지가 아닌 애플리케이션 환경으로 직접 보낼 수 있습니다. 이를 통해 PWA 사용자에게 더 원활하고 앱 같은 환경을 제공할 수 있습니다.
AEM은 언어마다 디자인과 분위기가 다를 수 있음을 이해합니다. 로케일 또는 언어에 따라 다른 속성, 색상, 아이콘을 구성한 다음 연결된 페이지와 구성을 동기화할 수 있습니다.
브라우저에서 PWA에 액세스한 후 마우스 오른쪽 버튼을 클릭하여 검사하면 DevTools를 불러와 Applications 패널 아래에서 매니페스트를 볼 수 있습니다.
서비스 워커 구성
캐시할 콘텐츠와 사용할 캐싱 전략을 구성할 수 있습니다.
서비스 워커를 사용해 왔다면 캐싱 전략에 익숙할 것입니다. 캐싱 전략은 캐시할 리소스를 지정하고 이러한 리소스를 캐시에서 먼저 찾을지, 네트워크에서 먼저 찾아볼지, 네트워크 대체가 있는 캐시에서 찾을지 여부를 지정합니다. 그러면 서비스 워커가 설치될 때 사전 캐시할 리소스를 선택할 수 있습니다. AEM 애플리케이션 서비스 워커는 웜 캐시 전략을 구현합니다. 즉, 누락되거나 손상된 경로를 지정하더라도 사용자 경험이 중단되지 않습니다.
AEM에서 'clientlibs'라는 용어는 는 클라이언트 측 라이브러리를 말합니다. 프로젝트에 추가되어 클라이언트 웹 브라우저에서 제공 및 활용되는 관련 JavaScript, CSS 및 정적 리소스의 조합입니다. 사용자 인터페이스에서 이러한 라이브러리를 지정하여 오프라인에서 사용할 클라이언트 측 라이브러리를 쉽게 설정할 수 있습니다.
글꼴과 같은 타사 리소스도 포함할 수 있습니다. 이 오프라인 캐시 구성은 내부적으로 Workbox를 사용하는 애플리케이션에 대해 생성되는 구성 정보를 서비스 워커에 제공합니다. 이것만으로도 애플리케이션을 설치 가능하게 만들 수 있습니다. 설치가 완료되면 애플리케이션 아이콘이 플랫폼 앱과 마찬가지로 휴대기기 홈 화면에 표시됩니다. 아이콘을 클릭하면 이벤트 사이트로 이동합니다.
콘텐츠 또는 이러한 설정은 언제든지 변경할 수 있습니다. 변경사항을 게시하면 브라우저에서 서비스 워커가 클라이언트에서 업데이트되고 사용자에게 최신 버전의 PWA를 사용할 수 있다는 메시지가 표시됩니다. 사용자는 메시지를 클릭하여 애플리케이션을 새로고침하고 최신 업데이트를 확인할 수 있습니다. 브라우저 개발자 도구 및 애플리케이션 패널을 열어 서비스 워커 세부정보를 볼 수 있습니다.
캐시 저장소를 확장하여 로컬로 캐시된 콘텐츠를 볼 수 있습니다.
결과
노력의 결과를 살펴볼 시간입니다. 코딩 없이 구성만 하면 AEM 사이트를 프로그레시브 웹 앱이 될 수 있습니다.
Chrome 개발자 도구는 웹 애플리케이션 및 구성이 프로그레시브 웹 앱 표준을 얼마나 준수하는지 확인할 수 있는 Lighthouse 감사를 제공합니다.
결론
프로그레시브 웹 앱은 크로스 플랫폼 및 개방형 웹 특성을 활용하여 낮은 개발 및 유지관리 비용으로 배포의 제어 기능을 제공하는 동시에 앱에 앱과 같은 환경을 제공합니다. 이렇게 하면 참여도와 유지율이 향상되며 무엇보다도 전환율을 높일 수 있습니다. AEM을 Workbox와 함께 사용하면 코딩 없이 간단하게 기존 사이트를 PWA로 개선할 수 있습니다.