AEM Mobile 앱의 글꼴 및 색상 설정을 변경할 수 있습니다.

참고:

  Typekit은 이제 Adobe Fonts로 이름이 변경되었으며 Creative Cloud 및 기타 구독에 포함됩니다. 자세히 알아보기

검색 페이지 카드, 앱 뷰 및 HTML 아티클에서 사용할 글꼴을 업로드하여 앱을 맞춤 설정할 수 있습니다. 앱 메뉴, 내비게이션 바 및 로그인 프롬프트와 같은 다양한 앱 뷰에서 사용되는 색상을 변경할 수도 있습니다.

 

맞춤형 글꼴 사용

포털의 글꼴 및 앱 맞춤화 섹션을 사용하여 레이아웃 카드, HTML 아티클 및 앱 메뉴와 같은 앱 뷰에서 사용할 맞춤형 글꼴을 업로드할 수 있습니다.

HTML 아티클의 글꼴을 참조하려면 AEM Mobile용 HTML 아티클 제작: 공유 글꼴 사용을 참조하십시오.

  1. 포털에서 콘텐츠 및 레이아웃을 클릭한 다음 글꼴 및 앱 맞춤화를 클릭합니다. 글꼴 탭을 선택합니다.

    customize_fonts_main
  2. 글꼴을 개별적으로 추가하려면 추가 > 글꼴 추가를 클릭합니다.

  3. 글꼴 파일을 글꼴 추가 섹션으로 드래그하거나 검색 버튼을 클릭하고 글꼴 파일을 지정합니다.

    글꼴 파일을 드래그 앤 드롭하면 글꼴 이름이 자동으로 추가됩니다.

    성능을 향상시키고 앱 크기를 줄이려면 업로드하는 글꼴에는 앱에서 실제로 사용하는 글꼴만 포함시키는 것이 좋습니다.

    글꼴 추가
  4. 글꼴 업로드를 완료하고 나면 카드 및 레이아웃을 편집하거나 HTML 아티클을 제작하거나 앱 뷰를 맞춤화할 때 해당 글꼴을 지정할 수 있습니다.

    드롭다운 목록에서 글꼴 선택
    레이아웃 카드를 편집할 때 업로드된 글꼴을 선택합니다.

  5. 글꼴을 미리 보려면 맞춤형 앱을 빌드하거나 다시 빌드합니다.

    AEM Preflight 앱에서는 맞춤형 글꼴이 표시되지 않습니다. 글꼴을 추가하거나 편집할 때마다 앱을 빌드하거나 다시 빌드해야 변경 내용을 확인할 수 있습니다.

    AEM Mobile용 프로젝트 콘텐츠 미리보기를 참조하십시오.

참고:

앱에서 글꼴을 사용하려면 적절한 라이선스를 보유해야 합니다.

글꼴 일괄 추가

한 번에 하나씩 글꼴을 추가하는 대신 여러 글꼴을 하나의 창으로 드래그 앤 드롭할 수 있습니다.

  1. 포털의 글꼴 및 앱 맞춤화 섹션에서 추가 > 글꼴 일괄 추가를 클릭합니다.
  2. Finder 또는 탐색기 창에서 업로드하고자 하는 글꼴 파일을 선택한 다음 선택한 글꼴 파일을 아이콘으로 드래그 앤 드롭합니다.
  3. 업로드되는 글꼴 목록을 확인합니다. 업로드를 원치 않는 글꼴을 선택하고 마이너스( – ) 아이콘이 나타나면 이를 클릭합니다. 글꼴을 업로드하려면 업로드를 클릭합니다.

디바이스 글꼴 및 웹 글꼴

휴대폰 및 태블릿에서 글꼴을 표시하는 데에는 디바이스 글꼴만 필요합니다. 그러나 사용하는 각각의 글꼴에 대해 디바이스 글꼴(OpenType 또는 TrueType)과 웹 글꼴(.woff)을 모두 업로드하는 것이 좋습니다. 디바이스 글꼴은 휴대폰과 태블릿의 검색 페이지에서 사용됩니다. 웹 글꼴은 .otf 또는 .ttf를 설치할 수 없는 경우 Windows 앱의 데스크탑 웹 뷰어에서 사용되며 카드의 글꼴을 미리보기 위한 목적으로 사용됩니다.

적합한 글꼴 라이선스를 사용하여 .woff 버전의 글꼴을 이용해야 합니다. 이는 일반적으로 글꼴에 라이선스를 부여할 때 패키지에 포함되어 있습니다. 자세한 내용은 글꼴 라이선스 제공자에게 문의하십시오.

Adobe Typekit을 통해 이용하는 글꼴은 업로드할 수 없습니다.

 

참고:

지금은 글꼴을 새로 추가할 때마다 앱을 다시 빌드해야 새 글꼴을 사용할 수 있습니다.

Windows 앱 글꼴 사용

Windows에서는 제조업체에서 글꼴에 포함시킨 글꼴 사용 규칙을 따라야 합니다. 제조업체에서 글꼴을 “설치 가능”으로 표시하지 않은 경우 Windows OS는 이를 로드하지 않습니다. 글꼴을 마우스 오른쪽 버튼으로 클릭하고 속성을 조회하여 “설치 가능”으로 표시되었는지 여부를 확인할 수 있습니다. 최선의 결과를 얻으려면 Windows 앱에 대해 웹 버전의 글꼴(.woff)을 포함시키십시오.

앱 뷰 맞춤화

앱 내비게이션 바, 앱 메뉴, 로그인 및 페이월 화면을 포함하여 앱에 표시되는 다양한 뷰에 대한 색상과 글꼴을 다양하게 지정할 수 있습니다. 앱 메뉴에서 앱 메뉴 또는 계정 옵션을 표시하거나 숨길 수 있으며, 내비게이션 바를 항상 표시하거나 숨길 수도 있습니다.

다음 사항을 참고하십시오.

  • 앱 맞춤화 미리보기 이미지는 정밀하게 표현되지 않을 수 있습니다. 맞춤형 앱을 빌드하여 앱 맞춤화 색상 및 글꼴을 테스트해야 합니다.
  • 색상 테마 설정(밝은 테마, 어두운 테마 또는 맞춤형 테마)은 각 플랫폼의 모든 뷰에 적용되는 전역 설정입니다. 밝은 테마와 어두운 테마는 편집할 수 없는 사전 설정입니다. 색상이나 글꼴 설정을 변경하면 테마는 맞춤형으로 전환됩니다.
  • 다른 위치로 이동하기 전에 저장을 클릭하여 작업을 저장하도록 하십시오. 저장은 현재 플랫폼에만 적용됩니다.

앱 맞춤화 비디오

앱 맞춤화 비디오
이 비디오에서는 2016.14 및 2017.1에서 출시된 새로운 앱 맞춤화 기능에 대해 시연합니다.

  1. 포털에서 콘텐츠 및 레이아웃을 클릭한 다음 글꼴 및 앱 맞춤화를 클릭합니다. 앱 맞춤화 탭을 클릭합니다.

    customize_allscreens
  2. 플랫폼(iOS 또는 Android)을 지정합니다.

    지정한 설정은 선택한 플랫폼에만 적용됩니다. 지금은 맞춤화 설정 저장 기능을 사용할 수 없으므로 iOS 및 Android에 대해 앱 맞춤화 설정을 별도로 지정해야 합니다.

  3. 모든 화면 보기를 선택합니다. 사전 설정을 사용하려면 밝은 테마 또는 어두운 테마를 선택합니다. 색상이나 글꼴 설정을 변경하면 맞춤형 테마가 자동으로 선택됩니다. 맞춤형 설정의 경우 모든 화면 보기에서 시작하여 사용하고자 하는 색상 및 글꼴 설정을 선택합니다.

    모든 화면을 선택한 경우 변경 내용은 모든 뷰에 적용됩니다. 이후 각각의 개별 뷰에 대해 사용자 정의 색상 및 글꼴 설정을 재정의할 수 있습니다.

    참고:

    글꼴 및 색상 설정은 각각의 밝은 테마, 어두운 테마 및 맞춤형 테마와 연계됩니다. 다른 테마를 선택하면 글꼴 및 색상 설정이 리셋됩니다.

  4. 모든 화면 보기에서 앱에 대한 제스처 설정을 지정합니다.

    핀치 투 줌 – 각 유형의 아티클에 대한 핀치 투 줌 제스처를 활성화할지 또는 비활성화할지 지정합니다. 이 옵션을 비활성화하면 사용자가 아티클 보기를 핀치 투 줌 제스처로 확대하거나 축소할 수 없습니다.

    • 래스터 아티클 옵션은 “화면에 전체 페이지가 표시되도록 맞춤” 옵션이 선택된 InDesign 기반의 아티클과 PDF 기반의 아티클을 포함합니다.
    • PDF 아티클 옵션은 “화면에 전체 페이지가 표시되도록 맞춤” 옵션이 선택되지 않은 PDF 기반의 아티클을 포함합니다.
    • HTML 아티클 옵션은 HTML 기반의 아티클을 포함합니다.

    핀치로 닫기 (iOS만 해당) – iPad에서 핀치로 검색 페이지를 빠져나와 이전 보기로 돌아갈 수 있습니다. 이 제스처를 활성화할지 또는 비활성화할지 지정합니다.

    베젤 스와이프 (iOS만 해당) – iOS 앱에서 왼쪽에서부터 스와이프하여 이전 보기로 돌아가거나 최상위 수준 보기의 앱 메뉴를 표시할 수 있습니다. 이 제스처를 활성화할지 또는 비활성화할지 지정합니다.

    customize_gestures
  5. 메뉴에서 옵션을 선택하거나 내비게이션 화살표를 클릭하여 개별 앱 뷰를 선택한 다음 해당 개별 뷰에 대한 사용자 정의 색상 설정 및 글꼴 설정을 지정할 수 있습니다.

    customize_app_appmenu2
  6. 앱 메뉴 또는 계정 옵션을 숨기려면 앱 메뉴 보기로 이동합니다. 앱 메뉴 아이콘을 클릭하여 켜기 또는 끄기로 전환합니다. 또는 로그인 옵션을 클릭하여 계정 옵션을 켜거나 끕니다.

    앱 메뉴가 꺼져 있으면 앱에 앱 메뉴가 표시되지 않습니다.

    로그인 옵션을 끄면 앱 메뉴의 아래쪽에 “계정” 옵션이 표시되지 않습니다.

    메뉴 표시줄이 숨겨져 있으면 navto 및 goto 포맷을 사용하여 내비게이션 링크를 입력하고 검색 등의 기능을 트리거할 수 있습니다. AEM Mobile의 하이퍼링크를 참조하십시오.

    로그인 옵션(UI의 계정 옵션) 또는 메뉴 표시줄을 숨긴 경우, HTML 및 Cordova JavaScript API를 사용하여 사용자들이 로그인하거나 로그아웃하도록 할 수 있습니다. 동적 배너를 사용하여 사용자가 로그인 및 로그아웃하도록 허용하는 코드의 예는 배너 및 동적 배너 제작: 동적 배너를 참조하십시오.

  7. 내비게이션 바 비헤이비어를 변경하려면 앱 내비게이션 바 보기로 이동합니다. 태블릿 및 휴대폰 모두에 대해 다음 옵션 중에서 선택합니다.

    기본값 – 사용자가 아티클의 비-인터랙티브 영역을 탭할 때만 내비게이션 바가 표시됩니다. 내비게이션 바가 표시되는 동안 아티클 콘텐츠가 가려집니다.

    항상 표시 – 이 옵션을 선택하면 내비게이션 바가 내비게이션 화면과 아티클의 맨 위에 표시되며 숨길 수 없습니다. 내비게이션 바가 항상 표시로 설정되면 아티클 상단의 콘텐츠가 숨겨지지 않습니다. HTML 아티클은 내비게이션 바 아래의 화면 상단에서 시작합니다. 고정 레이아웃 아티클은 축소되며 레터박스로 표시됩니다.

    app_customization_example
    내비게이션 바가 항상 표시로 설정되면 고정 레이아웃 콘텐츠는 축소되며 레터박스로 표시됩니다.

    항상 숨김 – 이 옵션을 선택하면 내비게이션 바와 상태 표시줄이 비활성화되며 숨겨집니다. 내비게이션 바가 숨겨져 있으면 아티클에서 navto 및 goto 포맷을 사용하여 내비게이션 링크를 입력하고 뒤로가기 버튼이나 소셜 공유 옵션 등의 기능을 트리거할 수 있습니다. AEM Mobile의 하이퍼링크를 참조하십시오.

    상태 표시줄 표시 및 내비게이션 바 숨김 – 이 옵션을 선택하면 내비게이션 바가 비활성화되고 숨겨지며 상태 표시줄이 항상 표시됩니다. 아티클 콘텐츠는 상태 표시줄 아래에 표시되며 필요한 경우 크기가 조절되고 레터박스로 표시됩니다.

    app_customization_navbars
  8. 저장을 클릭하여 현재 플랫폼에 대한 설정을 저장합니다.

    저장을 클릭하면 현재 플랫폼에 대한 설정이 저장됩니다. iOS 및 Android 플랫폼 모두에서 동시에 작업 중인 경우에는 각각의 플랫폼에 대해 [저장]을 클릭해야 합니다.

  9. 맞춤형 앱 설정을 확인하려면 맞춤형 앱을 빌드하거나 다시 빌드해야 합니다.

    업로드한 글꼴 및 맞춤형 앱 설정은 앱에 내장됩니다. 새 글꼴을 업로드하거나 앱 맞춤화 설정을 변경할 때마다 앱을 다시 빌드해야 변경 내용을 확인할 수 있습니다.

    AEM Preflight 앱에서는 앱 맞춤화 설정이 표시되지 않습니다.

    AEM Mobile용 프로젝트 콘텐츠 미리보기를 참조하십시오.

기타 앱 맞춤화 방법

포털의 글꼴 및 앱 맞춤화 섹션을 사용하는 방식 외에도 기타 맞춤화 변경 내용을 적용할 수 있습니다.

  • 프로젝트 설정에서 앱 메뉴에 표시되는 브랜드 이미지를 지정할 수 있습니다.
  • 앱을 빌드할 때 휴대폰을 이중 방향(iOS), 세로 전용 또는 가로 전용으로 지정할 수 있습니다. iOS 및 Android 앱에 대해 앱이 휴대폰에서만 작동하도록 설정할지, 태블릿에서만 작동하도록 설정할지, 또는 휴대폰과 태블릿 모두에서 작동하도록 설정할지를 지정할 수도 있습니다.
  • 컬렉션 설정에서 가로 스와이프로 다른 아티클로 이동할 수 있도록 허용할지 여부를 지정할 수 있습니다. 컬렉션이 검색 페이지로 표시될지 또는 컬렉션의 첫 번째 항목에서 열리도록 할지 지정할 수도 있습니다. 사용자가 오프라인 보기용으로 컬렉션을 저장하도록 허용할 수도 있습니다.
  • 레이아웃 템플릿을 사용하여 컬렉션 검색 페이지의 모양을 결정할 수 있습니다.
  • 소셜 공유, 권한 부여검색과 같은 기능을 활성화할 수 있습니다.

 

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

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