앱 접근 방식 결정

앱 실행 시 사용자에게 필요한 앱 환경은 어떻게 됩니까? 몇 개의 검색 페이지 레벨을 제공합니까? 앱이 가로 방향입니까, 세로 방향입니까, 또는 휴대폰과 태블릿에 따라 방향이 다릅니까? 검색 페이지가 어떻게 표시되어야 합니까?

다양한 유형의 앱 환경을 제작할 수 있습니다. 또한 기존의 앱을 통해 아이디어를 얻을 수 있습니다. 사용 사례와 예제에 대한 목록은 AEM Mobile용 영감을 주는 리소스를 참조하십시오.

 

플로차트

앱 디자인 비디오

Andrei Ganci와 Martin Hecko가 Adobe MAX 2015 컨퍼런스에서 아래 세션을 시연했습니다.

킬러 모바일 앱 경험 디자인(1:15:32)

태블릿과 휴대폰에 대해 별도 디자인 사용

프로젝트 제작 시 휴대폰과 태블릿에 대해 동일한 최상위 수준의 컬렉션을 사용할지 또는 다른 최상위 수준의 컬렉션을 사용할지를 결정하십시오. 태블릿과 휴대폰에 대해 별도의 최상위 수준 컬렉션을 사용하는 주된 이유는 태블릿 및 휴대폰에 서로 다른 콘텐츠를 추가하기 위함입니다. 예를 들어 태블릿 앱에는 가로 아티클을 포함시키고, 휴대폰에는 세로 아티클을 포함시킬 수 있습니다. AEM Mobile용 프로젝트 제작을 참조하십시오.

태블릿과 휴대폰에 동일한 콘텐츠를 사용하지만 검색 페이지 레이아웃을 다르게 지정하려면 휴대폰 및 태블릿에 대해 각각 다른 변환으로 레이아웃 템플릿을 제작하면 됩니다. 카드 및 레이아웃 제작: 레이아웃 변환을 참조하십시오.

휴대폰 및 태블릿에 대해 서로 다른 디자인을 사용할지 또는 서로 다른 콘텐츠를 사용할지 결정
휴대폰 및 태블릿에 대해 서로 다른 콘텐츠를 사용할지 여부를 결정하십시오.

앱용 콘텐츠 제작

온디맨드 포털의 콘텐츠 및 레이아웃 섹션을 사용하여 앱에서 사용할 아티클, 배너 및 컬렉션을 추가합니다. 프로젝트에 콘텐츠와 컬렉션이 있으면 다양한 검색 페이지 디자인으로 작업을 시도할 수 있습니다.

아티클 파일에 사용할 형식을 결정하십시오. 예를 들어 원본 InDesign 문서를 기반으로 하는 자동 공간 조정 HTML 아티클을 제작하거나 고정 레이아웃 아티클을 제작할 수 있습니다. AEM Mobile 콘텐츠 제작 방법을 참조하십시오.

컬렉션 제작 시 설정을 선택하여 컬렉션을 검색 페이지(레이아웃 및 카드)로 열지 아니면 콘텐츠 보기(컬렉션의 첫 번째 아티클 표시)로 열지를 결정합니다.

프로젝트에 아티클 추가
프로젝트에 아티클 추가

“홈” 컬렉션 제작

사용자가 앱을 실행할 때 초기 환경은 어떻게 됩니까? “홈” 컬렉션이 될 컬렉션을 구분하십시오. 이 컬렉션에는 특별한 사항이 없습니다. 단지 최상위 수준의 컬렉션에서 첫 번째 항목일 뿐입니다.

홈 컬렉션에 항목을 추가합니다. 배너, 아티클 및 기타 컬렉션이 모두 포함될 수 있습니다. 카드 및 레이아웃 제작 시 이 항목의 모양을 정하십시오.

사용자가 좌우로 스와이프하여 최상위 수준에 있는 다른 항목 사이에서 스와이프하기를 원하십니까? 이러한 경우에는 가로로 스와이프하여 콘텐츠 탐색 활성화 옵션을 선택하십시오. 이 옵션을 선택 해제하는 경우 사용자가 다른 콘텐츠로 이동하려면 카드를 탭하거나 앱 메뉴를 사용해야 합니다.

최상위 수준 콘텐츠 결정

프로젝트 제작 시 휴대폰 및 태블릿에 대해 동일한 최상위 수준의 컬렉션을 사용할지 또는 개별 최상위 수준의 컬렉션을 사용할지를 지정하십시오. 휴대폰과 태블릿 모두에 대해 동일한 최상위 수준의 컬렉션이 사용될 경우 “기본“이라고 하는 컬렉션이 포털의 컬렉션 섹션에 표시됩니다. 휴대폰과 태블릿에 대해 다른 최상위 수준의 컬렉션이 사용될 경우 “기본 휴대폰“과 “기본 태블릿“이라고 하는 컬렉션이 컬렉션 섹션에 표시됩니다.

이 컬렉션을 사용하여 최상위 수준의 콘텐츠를 결정하십시오. 이 최상위 수준의 컬렉션에 있는 첫 번째 항목이 홈 컬렉션이 되어야 합니다. 기타 항목이 앱 메뉴에 표시됩니다. 또한 홈 컬렉션에서 가로로 스와이프하여 콘텐츠 탐색 활성화 옵션이 선택된 경우 홈 컬렉션에서 좌우로 스와이프하면 다른 최상위 수준의 콘텐츠를 검색할 수 있습니다.

자세한 내용은 AEM Mobile의 컬렉션 관리를 참조하십시오.

참고:

최상위 수준의 컬렉션이 검색 페이지로 앱에 표시되지 않는 경우에도 제품 ID 및 컬렉션 이미지를 계속 제공해야 합니다.

컬렉션 관리
이 예에서 최상위 수준 컬렉션의 첫 번째 항목(“기본 태블릿”)은 “홈” 컬렉션입니다.

앱 메뉴 표시
앱 메뉴는 프로젝트 설정에서 브랜드 이미지(프로젝트 설정에서 지정), 최상위 수준의 컬렉션에 추가된 항목 및 계정 옵션을 표시합니다.

콘텐츠 맵을 통해 항목을 드래그 앤 드롭하여 앱 구조를 변경할 수 있습니다.

카드 및 레이아웃 제작

각 컬렉션에 레이아웃을 적용하여 컬렉션 검색 페이지의 형태를 결정할 수 있습니다. 각 레이아웃은 배너, 아티클 또는 기타 컬렉션 등의 콘텐츠를 표시하는 카드로 구성됩니다. 여러 유형의 컬렉션에 대해 다양한 레이아웃을 만들 수 있습니다.

카드 제작에 대한 자세한 내용은 카드 및 레이아웃 제작을 참조하십시오.

5열 레이아웃의 검색 페이지 샘플
5열 레이아웃의 검색 페이지 샘플

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

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