아티클용 소스 HTML을 제작하기 위해 Adobe Experience Manager와 같은 CMS 시스템을 사용하거나 Dreamweaver, CMS, HTML 편집기 등 모든 종류의 도구를 사용할 수 있습니다. CSS(Cascading Style Sheets)를 사용하여 다양한 크기의 태블릿 및 휴대폰에 사용되는 자동 공간 조정 콘텐츠를 제작하는 것이 좋습니다.

참고:

일부의 경우 Adobe Muse를 사용하여 초기 HTML 아티클을 만들 수 있습니다. 그러나 대부분의 경우 AEM Mobile에서 사용하기 위한 HTML 아티클을 수정하는 데에는 고급 HTML 지식이 필요합니다.

HTML 아티클 제작 비디오

HTML 아티클 제작 비디오
이 비디오는 원래 Adobe Digital Publishing Solution용으로 녹화되었습니다. AEM Mobile에도 해당 프로세스를 적용할 수 있습니다.
Adobe

자세한 내용은 Adobe MAX 2015 세션의 비디오 기록을 참조하십시오.

HTML을 스마트하게 활용하는 방법

반응형 HTML 콘텐츠 최적화

업로드용 HTML 파일 준비

HTML Article Packager를 사용하여 HTML 콘텐츠용 아티클 파일을 만듭니다. HTML 파일이 포함된 폴더를 Article Packager 아이콘으로 드래그하면 유틸리티는 필요한 manifest.xml 파일을 만들고 해당 파일을 아티클 파일에 압축하여 업로드할 수 있습니다.

HTML Article Packager를 다운로드하려면 AEM Mobile용 설치 및 설정을 참조하십시오.

  1. HTML Article Packager를 다운로드하고 설치합니다.

    Mac OS의 경우 .dmg 파일을 더블 클릭한 다음 HTML Article Packager 파일을 Applications 폴더로 드래그합니다.

  2. 폴더에 메인 HTML 파일 및 필요한 해당 에셋을 추가합니다. 메인 HTML 파일 이름을 index.html로 지정합니다. 파인더 또는 탐색기에서 해당 폴더를 엽니다.

    HTML 코드에서 참조된 파일만 포함합니다. PSD 이미지와 같은 미참조 파일이 포함되는 경우 파일 크기가 불필요하게 커집니다.

  3. 별도의 파인더 또는 탐색기 창에서 HTML Article Packager 유틸리티가 포함된 폴더(예: Mac OS의 경우 Applications 폴더)를 엽니다.

  4. HTML Article Packager 아이콘에 HTML 폴더를 드래그하여 놓습니다.

    HTML Article Packager

    참고:

    Windows에서 아티클을 포함하는 폴더는 HTML Article Packager가 설치된 위치와 동일한 드라이브 경로에 있어야 합니다.

    아티클 파일은 HTML 폴더와 동일한 레벨에서 제작됩니다.

  5. 온디맨드 포털(https://aemmobile.adobe.com)에서 아티클을 편집하고 아티클 파일을 업로드합니다.

    자세한 내용은 AEM Mobile의 아티클 관리를 참조하십시오.

CMS 시스템용 플러그인

Adobe Experience Manager (AEM) 제작

AEM을 구성하여 AEM Mobile로 작업

서드 파티 CMS 시스템

웹 기반 제작

 

모바일 디바이스용 HTML 콘텐츠 최적화

데스크탑 브라우저에서 제대로 실행되는 HTML 콘텐츠가 모바일 디바이스에서는 실행되지 않을 수도 있습니다. HTML 아티클을 제작할 때 다음 작업을 수행하십시오.

  • 모바일 디바이스용으로 이미지를 최적화합니다. 300dpi의 12000x8000픽셀 이미지는 72dpi의 800x600 이미지보다 처리 시간이 더 오래 소요됩니다. 공간을 절약하고 성능을 개선하기 위해 불필요한 대형 이미지의 사용을 피하십시오.
  • 비디오 및 오디오 파일을 최적화하여 크기를 줄이고 성능을 개선하십시오.
  • 모바일 브라우저용 코드를 간소화하고 테스트하십시오.

자세한 내용은 AEM Mobile 앱용 콘텐츠 최적화를 참조하십시오.

HTML 아티클용 공유 글꼴 사용

HTML 아티클에서 앱에 업로드된 글꼴을 참조할 수 있습니다. 앱에 업로드된 글꼴을 참조함으로써 아티클 다운로드의 속도와 성능이 개선됩니다.

 

 

참고:

HTML 아티클에서 사용하는 공유 글꼴은 모바일 앱에서만 지원되며 데스크탑 웹 뷰어에서는 지원되지 않습니다. 데스크탑 웹 뷰어에서 글꼴을 사용할 수 있도록 하려면 HTML 아티클에 해당 글꼴을 포함시키거나 API를 사용하여 공유 콘텐츠를 통해 글꼴을 사용할 수 있도록 하십시오.

  1. 온디맨드 포털에서 글꼴을 업로드합니다(콘텐츠 및 레이아웃 > 글꼴 및 앱 맞춤화). AEM Mobile 앱 맞춤화: 맞춤형 글꼴 사용을 참조하십시오.

  2. 포털의 글꼴 및 앱 맞춤화 섹션에서 참조하려는 글꼴을 제작하거나 편집할 수 있습니다. 글꼴 파일 이름 필드는 반드시 기재해야 합니다. 필요한 경우 글꼴 파일을 다시 업로드하십시오.

     

    글꼴을 추가하거나 편집한 경우 해당 글꼴을 사용하려면 앱을 다시 제출해야 합니다.

  3. 포털의 글꼴 및 앱 맞춤화 섹션에서 글꼴 파일을 표시하는 아이콘을 클릭한 다음 복사를 클릭합니다.

  4. 소스 HTML 파일에서 업로드된 글꼴에 대한 참조를 추가합니다.

    앱 글꼴을 참조하는 샘플 HTML 아티클

  5. HTML 아티클을 만들고 프로젝트에 추가합니다.

  6. 참조하고 있는 글꼴을 포함하는 맞춤형 앱을 빌드합니다. 글꼴이 제대로 표시되는지 아티클을 테스트하여 확인합니다.

뷰어에서 제스처가 처리되는 방식에 대한 이해

기본적으로 뷰어에서 상호 작용이 이루어지지 않는 영역을 탭하면 내비게이션 바가 표시되며, 스와이핑을 통해 다음이나 이전 아티클 또는 페이지로 이동합니다. HTML 아티클에서 뷰어는 <a/>, <video/>, <audio/>, <textarea/>, <input/>, <button/> 등의 일반적인 인터랙티브 HTML 요소에 대해 내비게이션 바를 표시하지 않습니다. 그 외의 기타 요소를 탭하면 내비게이션 바가 표시됩니다.

게임이나 슬라이드쇼와 같은 고급 인터랙티브 콘텐츠에서 제스처를 처리하기 위한 추가 제어 기능이 필요한 경우에는 사용자 정의 HTML Gesture API를 사용하십시오.

HTML Gesture API 사용

HTML Gesture API를 사용하여 보다 다양한 인터랙티브 HTML 요소에 대한 사용자 환경을 개선할 수 있습니다. 예를 들어 전체 화면 슬라이드쇼에 대한 환경을 맞춤화하여 사용자가 마지막 슬라이드에서 다음 아티클로 스와이프하도록 허용할 수 있습니다. HTML 퍼즐이 있는 경우를 가정했을 때, 퍼즐 조각을 탭하면 내비게이션 바가 표시되지 않지만 캔버스를 탭하면 내비게이션 바가 표시되도록 설정할 수 있습니다.

Windows 앱에서는 relinquishCurrentGesture()가 지원되지 않는다는 점을 참고하십시오. 그 외의 다른 제스처는 모든 플랫폼에서 지원됩니다.

세부 사항은 예제 파일을 참조하십시오(영어로만 제공).

Adobe Muse를 사용하여 HTML 아티클을 제작하는 경우 Muse 프로젝트에 Gestures API를 추가하는 것이 좋습니다. Bates Creative에서는 이를 목적으로 mucow를 제작했습니다. 해당 코드 및 자세한 내용은 다음 자료를 참조하십시오.

Adobe Muse용 AEM Mobile Gestures API

 

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

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