모바일 앱에서 아티클 파일과 이미지의 크기는 성능에 영향을 미칠 수 있습니다. 가능하다면 대형 아티클의 사용을 피하고 이미지 크기와 디스플레이 품질 사이에서 적절한 균형점을 찾는 것이 좋습니다.

이미지 최적화 비디오

이미지 최적화 비디오
이 비디오에서는 AEM Mobile 앱 성능을 개선하기 위한 네 가지 방법에 대해 설명합니다. (2017년 1월 녹화)

컬렉션 배경 이미지 최적화

세로 iPad 앱용 1536x2048 JPG 이미지처럼 기본 대상 디바이스의 크기를 사용해 배경 이미지를 만들고 JPG 이미지의 품질 수준을 중간으로 설정하는 것이 좋습니다.

배경 이미지는 화면을 채우도록 크기가 조절되고 가운데에 표시되기 때문에 이미지 크기가 디바이스 크기와 일치하지 않으면 가장자리가 잘립니다.

배경 이미지에 JPG 또는 PNG 형식을 사용할 수 있습니다. 대부분의 경우 JPG는 높은 품질의 보다 작은 이미지 파일이 됩니다.  

단, 다음의 경우 JPG 대신 PNG 사용을 고려해 보는 것이 좋습니다.

  • 이미지에 투명한 부분이 있는 경우(예: 배경색이 이 부분을 통해 보여지기 원하는 경우)
  • 이미지에 보다 작은 색상 팔레트가 있는 경우 PNG 이미지는 보통 JPG 이미지 보다 압축이 잘됩니다.
  • 이미지에 텍스트 또는 벡터 오브젝트가 있는 경우 PNG 이미지가 보통 JPG 이미지보다 더 선명합니다.

 

크기와 품질의 적절한 조화를 찾습니다. 예를 들어 표준 배경 이미지는 5MB가 아닌 약 200KB가 되어야 합니다.

배경 이미지가 있는 검색 페이지

카드 이미지 및 배너 최적화

카드 이미지 디스플레이 영역의 최대 크기를 기준으로 카드와 배너 이미지를 만들고 품질 수준을 중간으로 설정하는 것이 좋습니다. 크기와 품질의 적절한 조화를 찾습니다.

테스트를 통해 크기가 크면서 품질이 낮은 설정의 JPG 이미지를 사용하면 모바일 앱에서 품질 균형에 가장 효과가 좋은 크기가 됩니다. 이미지에 투명도 또는 테스트가 있는 경우 PNG 이미지를 사용합니다.

카드에 사용될 때 카드 이미지는 크기가 조절되며 가운데에 표시되고 크기에 맞게 잘립니다. 이 때문에 이미지가 디자인 의도와 달라질 수 있습니다. 이미지 가운데 근처에 두드러진 기능이 포함된 아트워크를 디자인합니다. 카드 크기, 카드 이미지 종횡비 변경은 모두 이미지가 카드에 표시되는 방식에 영향을 미칩니다.

전체 폭 카드가 있는 검색 페이지

아티클 및 동적 배너에서의 HTML 콘텐츠 사용 가이드라인

HTML 아티클에 포함된 이미지 파일의 크기에 주의를 기울입니다. 큰 이미지는 웹 브라우저에서는 정확하게 표시되지만 모바일 앱에서 큰 이미지가 아티클 다운로드 속도에 영향을 미칠 수 있습니다. 이미지를 압축합니다. 대상 디바이스에서 선명한 이미지를 나타낼 수 있는 적절한 압축 설정을 찾습니다.

AEM Mobile Article Packager를 사용하여 HTML 아티클 또는 동적 배너를 만드는 경우 HTML 파일 폴더를 Packager로 드래그 앤 드롭할 때 결과로 표시되는 아티클 파일에 에셋이 사용되지 않았더라도 폴더의 모든 파일이 포함됩니다. 아티클 파일을 생성하기 전에 HTML 파일을 간소화해야 합니다. 예를 들어 PSD, JPG 및 PNG 이미지 등 동일한 이미지에 대해 여러 인스턴스가 포함된 경우 HTML에서 사용되지 않는 이미지를 삭제해야 합니다.

콘텐츠 관리 시스템(CMS)을 사용하여 아티클 파일을 만드는 경우 아티클 파일에 너무 큰 이미지나 사용하지 않는 에셋이 포함되지 않도록 해야 합니다.

자세한 내용은 AEM Mobile용 HTML 아티클 제작을 참조하십시오.

InDesign 기반 아티클에 사용되는 이미지

임베디드 비디오 파일의 크기를 조정 또는 최적화하거나, 비디오를 임베드하는 대신 스트리밍하는 방안을 고려해 보십시오.

InDesign을 사용하여 고정 레이아웃 아티클을 만들면 아티클을 내보낼 때 모든 비-인터랙티브 에셋은 자동으로 리샘플링되므로 InDesign 레이아웃에서 대형 이미지를 사용하는 것에 대해 걱정하지 않아도 됩니다.

인터랙티브 오버레이 경우 통과리샘플링 오버레이 사이의 차이점을 이해해야 합니다.

  • 슬라이드쇼, 버튼, 스크롤 가능 프레임 등 리샘플링된 오버레이는 비대화명 콘텐츠와 동일한 방식으로 압축됩니다.
  • 통과 오버레이는 아티클을 내보내기할 때 압축되지 않습니다. 만들 때 사용된 크기로 통과됩니다. 통과 오버레이로는 비디오 및 오디오 파일, 이미지 시퀀스, 이동 및 확대/축소와 오디오 컨트롤러 파일이 있습니다. 통과 오버레이의 경우 파일의 크기와 품질에 주의를 기울여야 합니다.

자세한 내용은 인터랙티브 오버레이 개요를 참조하십시오.

HTML 아티클의 글꼴 공유

모든 HTML 아티클에 대해 동일한 글꼴 세트를 불러오는 대신 온디맨드 서비스 포털을 사용하여 앱에 포함시킬 글꼴을 지정할 수 있습니다. 그런 다음 옵션을 클릭하여 사용된 글꼴의 목록을 복사하고 이 목록을 CSS 또는 HTML 파일에 포함시킬 수 있습니다. 공유된 글꼴을 참조함으로써 앱에서의 HTML 아티클에 대한 다운로드 시간을 줄일 수 있습니다. 다음 문서를 참조하십시오.

AEM Mobile 앱 맞춤화: 맞춤형 글꼴 사용

AEM Mobile용 HTML 아티클 제작: 공유 글꼴 사용

HTML 아티클의 에셋 공유

콘텐츠 관리 시스템(CMS)을 사용하여 AEM Mobile용 아티클을 제작하는 경우, 공유 콘텐츠 API를 사용하여 이러한 아티클 사이에서 공유된 콘텐츠를 번들로 제작할 수 있습니다. 앱의 성능을 개선하고 일관성을 보장하는 데 있어 이미지, JavaScript 및 CSS 파일을 공유하는 것은 매우 좋은 방법입니다. On-Demand Services API를 사용하여 공유 콘텐츠로 작업을 참조하십시오.

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

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