데스크탑 웹 뷰어는 전체 뷰어로 컴퓨터에 콘텐츠를 표시하는 최신의 브라우징 환경입니다. 사용자 환경을 정의하는 일부 설정에 대한 제어 권한을 가집니다.

웹 뷰어는 검색 페이지 내비게이션, 권한 부여 로그인 기능, 고정 레이아웃 또는 HTML 기반 아티클을 포함하여 데스크탑 웹 브라우저에서 전체 앱을 실행합니다.

 

웹 뷰어는 데스크탑 컴퓨터에서 표시됩니다. 사용자는 페이지를 스크롤하거나 확대/축소할 수 있으며 아티클과 검색 페이지 사이를 쉽게 탐색할 수 있습니다.

웹 뷰어 구성

  1. 온디맨드 포털(https://aemmobile.adobe.com)의 왼쪽 레일에서 Apps를 선택합니다. 그런 다음 만들기 > 데스크탑 웹 뷰어를 선택합니다.

     

  2. 데스크탑 웹 뷰어 설정을 지정하고 프로세스를 완료합니다.

    사용자 정의 도메인 URL – 웹 뷰어 URL을 호스팅하도록 설정한 웹 사이트의 URL(https://로 시작)을 지정합니다. 이 문서의 후반부에 있는 사용자 정의 도메인 URL 설정 관련 섹션을 참조하십시오.

    개인정보 보호정책 URL – 개인정보 보호정책 URL을 지정하면 웹 뷰어 메뉴에 “개인정보 보호정책”이 표시됩니다. 사용자가 개인정보 보호정책을 클릭하면 지정된 웹 페이지가 표시됩니다.

    사용 약관 URL – 앱의 사용 약관을 설명하는 웹 페이지의 URL을 지정합니다. 사용자가 사용 약관을 클릭하면 지정된 웹 페이지가 표시됩니다.

    저작권 – 웹 뷰어에 표시되는 저작권 공지를 지정합니다.

    분석 옵트인 대화 상자 표시 – 이 옵션을 선택하면 콘텐츠를 보기 전에 옵트인 대화 상자를 표시해 고객이 데이터 추적을 거부할 수 있습니다. 이 옵션의 선택 여부와 상관없이 사용자가 웹 뷰어 설정을 사용해 언제든지 옵트인 또는 아웃을 선택할 수 있습니다. 이 옵션은 사용자의 데이터 추적 거부를 허용해야 하는 지역에서 특히 유용합니다.

  3. 웹 뷰어에 맞춤형 글꼴을 사용하려면 포털의 글꼴 섹션에서 글꼴을 수정하고 “공개 데스크탑 웹 뷰어용 웹 글꼴 활성화” 옵션을 선택합니다.

    글꼴 업로드에 대한 자세한 내용은 카드 및 레이아웃 제작: 맞춤형 글꼴 사용을 참조하십시오.

  4. 웹 뷰어에서 사용할 수 있도록 콘텐츠를 게시합니다.

  5. 데스크탑 웹 뷰어를 고객이 사용할 수 있도록 합니다.

    포털의 Apps 섹션에서 사용 가능한 “URL” 링크를 복사할 수 있으며(아래 이미지 참조) 웹 사이트 또는 그 밖의 방법을 통해 고객이 사용하도록 할 수 있습니다.

    프로젝트에 소셜 공유 및 데스크탑 웹 뷰어가 모두 활성화된 경우 데스크탑 또는 노트북 컴퓨터에서 공유 링크를 클릭하면 아티클의 웹 뷰어 버전이 열립니다. AEM Mobile 앱에서의 소셜 공유를 참조하십시오.

웹 뷰어 테스트

포털에서 데스크탑 웹 뷰어 앱을 빌드한 후 컴퓨터에서 링크를 클릭해 브라우저에서 데스크탑 웹 뷰어를 확인합니다.

웹 뷰어 추가 정보

일반적인 웹 뷰어 정보

  • 프로젝트에 태블릿 및 휴대폰 최상위 수준 컬렉션이 포함된 경우 웹 뷰어에서는 태블릿에 대한 최상위 컬렉션을 사용합니다.
  • 웹 뷰어는 Preflight 옵션과 함께 작동하지 않습니다. 컬렉션과 아티클을 게시해 웹 뷰어에서 사용할 수 있게 합니다.
  • 웹 뷰어는 오프라인에서 작동하지 않습니다.
  • 검색 페이지 또는 아티클을 탐색할 때 가장 최신의 버전이 표시됩니다. 해당 검색 페이지 또는 아티클이 표시되어 있는 동안에는 웹 뷰어가 새로운 업데이트를 감지하지 못합니다.
  • 웹 뷰어 검색 페이지는 960픽셀의 고정된 폭으로 렌더링됩니다. InDesign 기반 아티클은 대상 레이아웃 크기의 폭으로 렌더링됩니다.

 

 

시스템 요구 사항

  • 최신 버전의 Safari, Chrome, Firefox 중 두 개의 브라우저가 설치된 Mac OSX 10.10 이상
  • 최신 버전의 Chrome, Firefox, Internet Explorer 11 중 두 개의 브라우저가 설치된 Windows 7 또는 8.x 이상
  • Web Viewer는 태블릿이나 휴대폰에서 지원되지 않음

웹 뷰어는 컴퓨터 브라우저에서만 작동하며 모바일 디바이스에서는 작동하지 않습니다. 웹 뷰어 링크를 휴대폰 또는 태블릿에서 열면 리디렉션이 아티클 설정 시 지정된 소셜 공유 랜딩 페이지로 이동합니다. 랜딩 페이지에는 앱 스토어 링크가 포함될 수 있습니다. 컬렉션에 대한 랜딩 페이지가 없는 경우 컬렉션 URL로 해당 디바이스의 앱 스토어 링크와 유사한 페이지가 표시됩니다. 프로젝트 설정의 스토어 탭을 사용해 앱 스토어 링크를 지정하십시오.

호스팅 위치

기본적으로 웹 뷰어는 https://viewer.aemmobile.adobe.com의 Adobe 서버에 호스팅됩니다.

이 문서의 후반부에 있는 설명에 따라 자신의 도메인에서 웹 뷰어 URL을 호스팅할 수 있습니다.

내비게이션

  • 독자는 화면 하단에 마우스를 가져다 대면 나타나는 내비게이션 바를 사용해 앞/뒤로 탐색할 수 있습니다.
마우스 포인터를 화면 하단에 갖다 대면 내비게이션 바가 표시됩니다.

  • navto://relative/parent 형식은 지원되지 않으나 곧 구현될 예정입니다.

인터랙티브 오버레이 지원 및 지침

  • 모든 InDesign 기반 오버레이를 지원합니다.

 

  • 슬라이드쇼 스와이프는 지원되지 않습니다. 눌러서 재생할 수 있게 하거나 이전/다음 버튼을 제공하는 것이 좋습니다.
  • 오디오 오버레이의 경우 MP3 파일만 완벽하게 지원됩니다. WAV, MP4 및 OGG 등의 오디오 형식은 모든 브라우저에서 완벽하게 지원되지 않습니다.
  • 백그라운드 오디오 파일 재생은 지원되지 않습니다. 오디오는 지정된 아티클에 제한됩니다.
  • 컨테이너 오버레이의 오디오 또는 비디오 오버레이를 자동 시작으로 설정한 경우 오버레이가 표시될 때 시작하지 않습니다.
  • 비디오 오버레이의 경우 MP4 및 M4V 형식만 지원됩니다. Firefox에서 완벽하게 지원되려면 MIME 유형이 중요합니다. 외부에서 호스팅된 비디오는 비디오/mp4 MIME 유형으로 서비스되어야 합니다. 또한 비디오는 .m4v 보다 .mp4 확장자를 사용하는 것이 더 좋습니다. 비디오 파일의 확장자 이름은 쉽게 바꿀 수 있습니다.
  • 비디오 오버레이가 콘테이너 오버레이 내에서 재생되고 독자가 페이지에서 콘테이너 스크롤을 끈 경우 비디오 재생이 멈추지 않습니다.
  • 웹 오버레이가 콘테이너의 상태 안에 있고 독자가 상태를 변경한 경우 웹 오버레이는 활성화를 유지합니다.

InDesign 기반 아티클 표시

  • InDesign 기반 아티클에서 가로로만 스와이프 옵션이 지원되지 않습니다. 이 “분리된” 아티클은 세로로 표시됩니다.
  • InDesign에서 부드러운 스크롤 아티클을 제작하려면 아티클 파일을 내보낼 때 페이지 치수(1024x3000 등) 대신 대상 치수(1024x768 등)를 지정해야 합니다.
  • 페이지별 InDesign 아티클은 페이지 사이에 구분자와 함께 웹 뷰어에 표시됩니다.
기본적으로 페이지별 InDesign 기반 아티클 사이에 간격이 있습니다.

분석

  • 인앱 메시지는 웹 뷰어에서 아직 지원되지 않습니다. 인앱 메시지는 Mobile SDK가 필요하며 데스크탑 컴퓨터에서는 사용할 수 없습니다.
  • 웹 뷰어에 캡처된 분석에 대한 자세한 정보는 AEM Mobile용 분석을 참조하십시오.

웹 뷰어 비활성화

프로젝트에서 데스크탑 웹 뷰어를 비활성화하려면 포털의 Apps 섹션에서 데스크탑 웹 뷰어를 선택하고 휴지통 아이콘을 클릭해 삭제합니다.

사용자 정의 도메인 URL 설정

사용자 정의 도메인 URL을 설정할 때 모든 애플리케이션 코드와 콘텐츠는 여전히 Adobe 서버에서 호스팅되지만 최종 사용자에게는 내 도메인에서 표시됩니다.

기본 웹 뷰어 URL의 예

https://viewer.aemmobile.adobe.com/index.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

사용자 정의 웹 뷰어 URL의 예

https://www.mydomain.com/custompage.html#project/abcdefgh-a123-4567-890a-ab1234567890/view/myView/article/myArticle

  1. 자신의 사이트에 간단한 HTML 페이지를 호스팅하십시오. 이 웹 페이지의 이름은 원하는 대로 정해도 됩니다.

    페이지는 유효한 도메인에서 호스팅되어야 하며 http가 아닌 https를 통해 게재되어야 합니다. 호스팅하는 도메인은 이와 연계된 유효한 SSL 인증서가 있어야 합니다.

  2. 지정한 웹 페이지에 다음의 HTML 코드를 포함시키십시오.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="x-ua-compatible" content="IE=edge">
    	<script src="https://viewer.aemmobile.adobe.com/loader.js"></script>
    </head>
    <body></body>
    </html>

    http-equiv=“x-ua-compatible”를 포함하는 메타 태그는 Microsoft Internet Explorer에서 이 페이지를 렌더링할 때 사용되는 문서 모드를 결정하는 데 사용됩니다. 이 메타 태그를 사용하면 IE에서 호환 모드를 활성화한 사용자에게 발생할 수 있는 문제를 방지할 수 있습니다. 동적으로 추가되는 다른 메타 태그와는 달리, 이 태그는 정확하게 해석되도록 IE용 페이지에 포함시켜야 합니다.

    스크립트 태그는 앱을 표시하고 렌더링하는 데 필요한 HTML 요소를 동적으로 생성하는 JavaScript 로더 스크립트를 가리킵니다.  

  3. 포털에서 데스크탑 웹 뷰어 앱을 제작할 때 “사용자 정의 도메인 URL” 필드에 내 URL을 지정하십시오. 프로토콜과 페이지 이름을 포함하여 사용자 정의 호스팅 페이지에 대한 전체 URL을 지정해야 합니다(예: https://www.mydomain.com/custompage.html).

     

  4. 데스크탑 웹 뷰어 앱을 빌드한 후 “URL”을 클릭하여 현재 브라우저에 콘텐츠를 표시합니다. 이 URL에서 사용자 정의 도메인이 사용되어야 합니다.

사용자 정의 도메인 호스팅에 대해서는 추가적인 스크립트, 라이브러리 또는 기타 콘텐츠의 사용이 공식적으로 지원되지 않습니다. 특히 페이지의 DOM을 수정하거나 페이지에 시각적 요소를 추가하는 모든 종류의 코드(예: 광고 라이브러리)는 지원되지 않으며 이를 사용하는 경우 예기치 않은 문제가 발생할 수 있습니다. 또한 페이지에 기타 CSS 스타일을 추가하는 경우 예기치 않은 비헤이비어나 시각적인 결함이 발생할 수 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책