이 자습서에서는 TutorialAssets 폴더의 CityGuide_Folio 폴더를 사용합니다. 대화형 개체를 InDesign에서 직접 만듭니다. 이 단원을 마치고 나면 기본 아티클의 첫 번째 페이지가 iPad에서 다음과 같이 표시됩니다.

iPad에서 표시되는 완성된 Folio

A. 가로(수평) 보기 B. 세로(수직) 보기 C. 하이퍼링크 D. 비디오 오버레이 

아직 다운로드하지 않은 경우 자습서 에셋을 다운로드합니다. 자습서 설정을 참조하십시오.

아티클 가져오기

이전 단원에서는 소스 문서를 열고 [아티클 추가]를 선택하여 아티클을 만들었습니다. 아티클을 가져오는 방법도 있습니다. 올바른 폴더 구조와 파일 이름 지정 규칙을 사용할 경우 단일 아티클이나 여러 아티클을 가져올 수 있습니다.

하나의 아티클을 가져올 경우 아티클 폴더를 가리킵니다. 여러 아티클을 가져올 경우 Folio 폴더를 가리킵니다.

  1. 아티클을 가져오기 전에 TutorialAssets > CityGuide_Folio 폴더에서 소스 InDesign 문서를 열어 모든 링크가 업데이트되었고 파일이 저장되었는지 확인합니다.

  2. 아티클 보기로 이동하고 Folio Builder 패널 메뉴에서 [아티클 가져오기]를 선택합니다.

  3. [여러 아티클 가져오기]를 선택합니다.

  4. 위치 폴더 아이콘을 클릭하고 TutorialAssets > CityGuide_Folio로 이동합니다. [열기]를 클릭합니다.

    하위 폴더가 아니라 CityGuide_Folio 폴더를 선택합니다.

  5. [확인]을 클릭하여 CityGuide_Folio 폴더에 아티클을 가져오고 서버에 업로드합니다.

  6. WiFi Ad 아티클을 목록 끝으로 드래그 앤 드롭합니다.

    아티클을 가져온 후의 Folio Builder 패널

Folio 속성 변경

  1. Folio Builder 패널에서 화살표 아이콘을 클릭하여 Folio 보기로 돌아갑니다. City Guide Folio를 선택하고 Folio Builder 패널에서 [Folio 속성]을 선택합니다.

  2. [발행물 이름]에 City Guide Monthly를 입력합니다.

    [발행물 이름]은 Folio 이름과 다릅니다. [발행물 이름]은 뷰어에 표시됩니다. [Folio 이름]은 연결 및 변환 설정과 같은 내부용으로 사용됩니다.

  3. 아직 하지 않은 경우 [세로]에 Cover_v.jpg, [가로]에 Cover_h.jpg를 지정하고 [확인]을 클릭합니다. 이러한 표지 이미지가 CityGuide_Folio 폴더에 표시됩니다.

    미리 보기 덮기가 뷰어 라이브러리에 표시됩니다. 응용 프로그램을 게시하려면 미리 보기 덮기가 필요합니다.

    [Folio 속성] 대화 상자

대화형 하이퍼링크 추가

이제 대화형 개체를 포함하도록 Enjoy 문서를 편집합니다.

InDesign에는 많은 대화형 기능이 포함되어 있습니다. 그러나 이러한 기능 중 일부만 Digital Publishing 도구에서 작동합니다. 지원되는 기본 기능 외에 Overlay Creator 패널에는 Digital Publishing 도구에서만 작동하는 대화형 오버레이가 포함되어 있습니다.

먼저 "D. I. Y. Meet" 로고에 대한 하이퍼링크 개체를 만듭니다.

  1. Folio Builder 패널에서 Enjoy_Article의 레이아웃 보기로 이동한 다음 [세로 레이아웃]을 두 번 클릭하여 Enjoy_v.indd를 엽니다.

  2. 도구 모음에서 사각형 도구를 선택한 다음 사각형을 첫 번째 페이지의 "D.I.Y. Meet" 로고 위로 드래그합니다. 사각형에 획 또는 채우기가 없는지 확인합니다.

  3. [윈도우] > [대화형] > [하이퍼링크]를 선택하여 [하이퍼링크] 패널을 연 다음 패널 메뉴에서 [새 하이퍼링크]를 선택합니다.

  4. [연결 대상] 메뉴에서 URL을 선택하고 URL 필드에 URL 주소를 입력합니다(여기서는 http://www.bikeworks.org/가 사용됨). [공유 하이퍼링크 대상]을 선택 해제합니다. [모양] 아래에서 [보이지 않는 사각형] 및 [없음]을 선택된 상태로 둡니다. [확인]을 클릭합니다.

    사각형 프레임에 하이퍼링크 적용
  5. Folio Builder 패널에서 [가로 레이아웃]을 두 번 클릭하여 Enjoy_h.indd 문서를 엽니다. Enjoy_v.indd 파일의 하이퍼링크 개체를 복사하여 Enjoy_h.indd 파일에 붙여 넣습니다. 개체를 "D.I.Y. Meet" 로고 위로 이동합니다.

  6. 문서를 신속하게 미리 보려면 문서를 저장하고 [파일] > [Folio 미리 보기]를 선택합니다. 하이퍼링크를 클릭합니다. 그런 다음 Adobe Content Viewer를 종료합니다.

기본적으로 하이퍼링크는 모바일 브라우저가 아니라 응용 프로그램 내 뷰어에서 열립니다. 모바일 Safari에서 웹 사이트가 열리도록 Overlay Creator 패널을 사용하여 설정을 변경할 수 있습니다. Overlay Creator 패널에 대한 자세한 내용은 다음에 배웁니다.

동영상 오버레이 만들기

InDesign 문서에 추가한 동영상은 파일을 번들 처리할 때 대화형이 됩니다. 여기서는 비디오를 추가한 다음 Overlay Creator 패널을 사용하여 설정을 변경합니다. 자전거 타기 동영상이 추가됩니다.

  1. Enjoy_h.indd 파일에서 [파일] > [가져오기]를 선택하고 CityGuide_Folio > Enjoy_Article > Links 폴더로 이동한 다음 cycling_432x234.mpg를 두 번 클릭합니다. 동영상 파일을 오른쪽 위 모퉁이에 배치합니다.

    디자이너는 개체가 대화형이라는 것을 나타내기 위해 동영상 아이콘이 있는 비디오 이미지를 만들었습니다. 해당 이미지를 포스터로 사용합니다.

  2. [미디어] 패널([윈도우] > [대화형] > [미디어])의 [포스터] 팝업 메뉴에서 [이미지 선택]을 선택합니다. CityGuide_Folio > Enjoy_Article > Links 폴더에서 cyclist.jpg를 두 번 클릭합니다.

    새 포스터 이미지가 표시됩니다. 이제 Overlay Creator 패널을 사용하여 동영상이 재생되는 방법을 결정합니다.

  3. [윈도우] > [확장] > [Overlay Creator]를 선택하여 Overlay Creator 패널을 엽니다.

  4. 동영상 개체가 계속 선택된 상태로 Overlay Creator 패널에서 [눌러서 컨트롤러 보기]를 선택합니다.

    Overlay Creator를 사용하여 동영상 설정 편집
  5. [선택] 도구를 사용하여 이미지를 복사하고 Enjoy_v.indd로 전환하여 붙여 넣습니다. 첫 번째 페이지의 빈 영역으로 이동한 다음 주변 개체에 맞게 정렬합니다.

  6. 동영상을 미리 보려면 문서를 저장하고 [파일] > [Folio 미리 보기]를 선택합니다. 동영상을 클릭하여 재생합니다. 그런 다음 Adobe Content Viewer를 종료합니다.

슬라이드쇼 오버레이 만들기

이제 [개체 상태] 패널을 사용하여 대화형 슬라이드쇼를 만듭니다. 세로 "Enjoy" 파일의 두 번째 페이지에는 이미지가 이미 추가되어 있습니다. 이미지를 쌓아서 정렬하고 다중 상태 개체로 변환한 다음 슬라이드를 탐색하는 단추를 만듭니다.

  1. InDesign에서 Enjoy_v.indd를 열고 2페이지로 이동합니다.

  2. 빨간색 화살표 사이에 있는 7개의 이미지를 선택한 다음 제어판에서 [수평 가운데 정렬] 및 [수직 가운데 정렬]을 클릭합니다. 화살표 사이의 이미지를 가운데로 정렬합니다.

  3. 이미지가 계속 선택된 상태에서 [윈도우] > [대화형] > [개체 상태]를 선택하여 [개체 상태] 패널을 표시합니다. [선택 항목을 다중 상태 개체로 변환] 단추를 클릭합니다.

    다중 상태 개체로 결합된 이미지

    각 이미지는 [개체 상태] 패널에서 별개의 상태로 표시됩니다.

  4. [개체 상태] 패널에서 [개체 이름]을 Sea Slugs로 변경합니다.

    가로 및 세로 문서의 다중 상태 개체가 이름이 같은 경우 iPad를 회전할 때 상태가 기억됩니다. 이제 다중 상태 개체를 만들었으므로 사용자가 스크롤할 수 있게 해야 합니다.

  5. [윈도우] > [대화형] > [단추]를 선택하여 [단추] 패널을 표시한 다음 왼쪽의 빨간색 화살표를 선택합니다.

  6. [개체를 단추로 변환]을 클릭한 다음 [동작] 옆의 더하기 아이콘에서 [이전 상태로 이동]을 선택합니다.

    내비게이션 단추 만들기

    이제 사용자가 단추를 누를 경우 모양이 약간 변경되도록 만듭니다.

  7. [단추] 패널에서 [클릭]을 클릭한 다음 제어판에서 [그림자] 아이콘을 클릭합니다.

  8. 오른쪽의 빨간색 화살표를 선택하고 단추로 변환한 후 [다음 상태로 이동] 동작을 적용합니다. [클릭] 모양을 그림자로 만듭니다.

    사용자는 단추를 눌러 이미지 간에 이동할 수 있습니다. 이제 손가락을 대어 슬라이드를 전환할 수 있게 만듭니다.

  9. 다중 상태 개체를 선택합니다. Overlay Creator 패널에서 [손가락을 대어 이미지 변경]을 선택합니다.

    손가락을 대어 슬라이드쇼를 전환하는 기능 설정
  10. Enjoy_v.indd 파일의 화살표 및 다중 상태 개체를 복사하여 Enjoy_h.indd 파일의 2페이지에 붙여 넣습니다. 올바르게 놓이도록 다중 상태 개체 아래의 화살표를 이동합니다.

  11. 슬라이드쇼를 미리 보려면 문서를 저장하고 [파일] > [Folio 미리 보기]를 선택합니다. 내비게이션 단추를 클릭하여 슬라이드 사이를 이동합니다. 그런 다음 Adobe Content Viewer를 종료합니다.

파노라마 오버레이 만들기

파노라마는 각각 정육면체 내의 한 면을 나타내는 6개의 이미지가 필요합니다.

  1. Enjoy_v.indd를 열고 3페이지로 이동합니다.

  2. 도구 상자에서 사각형 프레임 도구를 선택하고 드래그하여 원하는 크기의 사각형을 만듭니다.

  3. Overlay Creator 패널에서 [파노라마]를 선택합니다.

  4. [소스] 폴더를 클릭하고 CityGuide_Folio > Enjoy_Article > Links 폴더에서 CourtyardPano 폴더를 선택합니다. [열기]를 클릭합니다.

    자리표시자 사각형에 파노라마 이미지의 모양이 지정되어 있지만 여기서는 클릭 영역을 더 작게 만듭니다.

  5. Ctrl+Shift(Windows) 또는 Command+Shift(Mac OS)를 누른 상태에서 선택 핸들을 드래그하여 약 400 x 400픽셀이 되도록 파노라마 개체의 크기를 조정합니다.

    파노라마 오버레이 만들기

    이제 파노라마에 대한 기본 설정을 사용하여 전체 이동 범위를 제공합니다.

  6. Enjoy_v.indd 파일의 파노라마 개체를 복사하여 Enjoy_h.indd 파일의 3페이지에 붙여 넣습니다.

  7. InDesign 파일을 저장하고 닫습니다.

iPad에서 Folio 미리 보기(Mac OS에만 해당)

다음으로 [장치에서 미리 보기] 기능을 사용하여 Folio를 미리 봅니다. Windows 컴퓨터를 실행 중인 경우 다음 섹션으로 건너뛰어 파일을 업로드 및 다운로드하여 미리 보는 방법에 대해 알아보십시오.

  1. 아직 설치하지 않은 경우 iPad에서 App Store의 Adobe Content Viewer를 설치합니다. App Store에서 “Content Viewer”를 검색합니다.

  2. iPad를 Mac OS 컴퓨터에 연결하고 Adobe Content Viewer 응용 프로그램을 시작합니다.

  3. Folio Builder 패널에서 방금 만든 City Guide Folio를 찾습니다.

  4. 패널 아래쪽에서 [미리 보기] > [[iPad 장치 이름]에서 미리 보기]를 선택합니다.

  5. City Guide Magazine Folio를 봅니다.

    • 파일의 가로 및 세로 버전을 모두 볼 수 있도록 iPad를 회전합니다.

    • 왼쪽 및 오른쪽으로 손가락을 대어 다른 아티클을 표시합니다. 손가락을 위아래로 대어 아티클을 읽습니다.

    • Enjoy 아티클을 찾습니다. 대화형 오버레이가 작동하는지 확인합니다.

    • 대화형이 아닌 영역을 눌러 탐색 모음을 표시하고 [홈] 단추를 눌러 Folio의 시작 부분으로 이동합니다. 왼쪽 위 모퉁이에 있는 [목차] 단추를 눌러 목차와 축소판을 표시합니다. Scrubber를 드래그하여 아티클 미리 보기를 검색합니다.

    Adobe Content Viewer에서 눌러서 내비게이션 막대 표시

파일 업로드 및 미리 보기

iPad에서 Folio Builder 패널에 로그인하고 Folio를 업로드한 다음 다운로드하여 Folio를 미리 볼 수도 있습니다.

  1. Folio Builder 패널의 패널 메뉴에서 [로그인]을 선택합니다. 그런 다음 DPS에서 작동하는 것으로 확인된 Adobe ID를 사용하여 로그인합니다.

    Creative Cloud 멤버십이 있는 경우 Creative Cloud 자격 증명을 사용하십시오. Creative Cloud 멤버십이 없는 경우 http://digitalpublishing.acrobat.com에 로그인하고 프롬프트에 따라 계정을 확인하십시오.

  2. 로그인한 후 패널에서 City Guide Folio를 선택한 다음 패널 메뉴에서 [Folio Producer에 업로드]를 선택합니다.

    Folio 에셋이 acrobat.com 서버로 업로드됩니다.

  3. 아직 설치하지 않은 경우 iPad에서 App Store의 Adobe Content Viewer를 설치합니다.

    참고:

    Android 태블릿 또는 Kindle Fire와 같은 다른 모바일 장치를 사용하는 경우 Google Play 또는 Amazon Appstore에서 Adobe Content Viewer를 다운로드할 수 있습니다.

  4. iPad에서 Adobe Content Viewer를 시작합니다.

  5. 아직 로그인하지 않은 경우 [로그인] 단추를 누릅니다. Folio Builder 패널에 로그인할 때 사용한 Adobe ID를 사용하여 로그인합니다.

    로그인하려면 iPad가 인터넷에 연결되어 있어야 합니다.

  6. 메시지가 표시되면 City Guide Magazine Folio를 다운로드하고 표시합니다.

    InDesign 소스 문서를 편집한 경우 아티클을 선택하고 패널 메뉴에서 [업데이트]를 선택하여 아티클을 업데이트합니다. iPad의 Adobe Content Viewer에서 업데이트된 Folio를 다운로드하라는 메시지가 표시됩니다.

더 알아볼 내용

아티클 및 Folio를 만들고 대화형 오버레이를 추가하는 방법에 대한 기본 사항을 알아보았습니다. 오버레이 및 다른 DPS 기능에 대해 알아보려면 다음 중 하나를 수행하십시오.

  • Overlay_Examples_Folio의 소스 문서를 열고 다른 오버레이 에셋을 시험해 봅니다. 문서의 기존 오버레이를 편집하거나 오버레이를 직접 작성할 수 있습니다.

  • 무료 DPS Tips 응용 프로그램을 다운로드합니다. iPad 또는 iPhone의 App Store에서 “DPS Tips”를 검색하거나 Android 장치용 Google Play Store 또는 Kindle Fire용 Amazon Appstore에서 검색합니다.

  • Apple App Store에 응용 프로그램을 게시하고 싶으십니까? Adobe Creative Cloud 구독자인 경우 iPad용 단일 Folio 응용 프로그램을 제한 없이 만들고 제출할 수 있습니다. 또는 Single Edition 라이선스를 구입하여 단일 Folio 응용 프로그램을 만들 수 있습니다. 응용 프로그램을 만들 준비가 되면 Folio Builder 패널에서 Folio를 선택한 다음 패널 메뉴에서 [응용 프로그램 생성]을 선택합니다. 단계별 게시 안내서를 다운로드할지 묻는 메시지가 표시됩니다. 해당 안내서의 지침에 따라 첫 번째 응용 프로그램을 만듭니다.

  • 다중 Folio 응용 프로그램을 만들려면 Digital Publishing Suite에 대한 Professional 또는 Enterprise 구독을 구입할 수 있습니다.

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

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