iBooks Author용 HTML5 위젯 생성하기
iBooks Author에서 생성하는 책에 사용할 수 있는 HTML5 위젯을 만드는 방법에 대해 알아봅니다.
iBooks Author는 파일 이름 확장자가 .wdgt인 HTML5 위젯을 지원합니다. HTML5 위젯을 생성하려면 텍스트 편집기 또는 콘텐츠 생성 앱을 사용하여 다음과 같은 세 개의 파일을 생성합니다.
기본 HTML 파일: 이 파일은 위젯의 주요 부분입니다. 원하는 이름을 지정할 수 있지만 확장자가 .html이어야 합니다. 기본 HTML 파일 내에 CSS 및 JavaScript를 넣을 수 있습니다. 또는 위젯 번들에 .css 및 .js 파일을 추가하고 기본 HTML 파일에서 이를 로드할 수 있습니다. 웹 페이지를 디자인하는 데 사용하려는 기술을 모두 사용할 수 있습니다. HTML을 사용하여 위젯의 구조를 정의하고, CSS를 사용하여 시각적 스타일을 제공하며, JavaScript를 사용하여 웹 페이지를 인터랙티브하게 만듭니다.
Default.png 파일: Default.png를 생성하는 가장 쉬운 방법은 웹 콘텐츠 생성 앱 또는 웹 브라우저에서 실행 중인 기본 HTML 파일의 스크린샷을 찍는 것입니다. 이 이미지는 페이지에 표시되며, 독자는 이 이미지를 탭하여 위젯을 열 수 있습니다. 웹 브라우저 또는 웹 콘텐츠 생성 앱에서 기본 HTML 파일의 스크린샷을 찍습니다. 이름을 'Default.png'로 지정하고 반드시 대문자 'D'를 사용합니다. 위젯이 활성 상태일 때 이것은 Default.png 파일의 크기입니다. Info.plist 파일의 크기를 변경할 수 있습니다.
Info.plist 파일: 위젯을 실행하는 데 필요한 정보를 iBooks Author 및 Apple Books에 제공합니다. 파일 이름은 'Info.plist'여야 합니다.
이러한 필수 파일을 생성한 후, CSS 또는 JavaScript 파일과 같이 원하는 옵션 파일을 생성합니다. 그런 다음 이들 모두를 다음과 같이 위젯 번들에 추가합니다.
Finder에서 폴더를 생성합니다.
새로운 폴더에 파일을 추가합니다.
폴더의 이름을 변경하고 폴더 이름에 .wdgt 확장자를 추가하여 위젯 번들을 생성합니다. 폴더 아이콘이 위젯 아이콘으로 변경됩니다.
위젯을 iBooks Author에 추가합니다.
위젯 생성 정보
위젯 번들을 생성하기 전에, 번들에 제어 문자가 있는 파일 이름을 가진 파일이 없도록 합니다. 그러한 파일이 있으면 Apple Books의 iBooks Store에 책을 발행할 수 없습니다.
위젯이 자동 재생되도록 설정하는 경우, 위젯이 인터넷에 액세스할 수 없습니다.
사용자 설정 폴더 아이콘을 사용하면 안 되며, 위젯에 다음 이름으로 된 폴더가 있으면 안 됩니다.
리소스/
Support Files/Resources/
Contents/Resources/
위젯을 Retina 디스플레이에 최적화하려면 다음을 수행하십시오.
HTML, CSS 및 JavaScript 파일에서 Retina(2x) 그래픽을 사용하는 웹 사이트용 표준 프로토콜을 사용합니다.
위젯에 Default@2x.png 파일을 포함합니다. 이 파일의 해상도를 Default.png 파일 해상도의 두 배로 만듭니다. iBooks Author에서는 이 파일을 볼 수 없지만, Apple Books에서 Retina 디스플레이로 볼 수 있습니다.
iBooks Author로 생성한 책을 최적화하는 방법에 대해 자세히 알아보십시오.
Info.plist
기본 위젯의 Info.plist 파일에는 필수 키 일부와 옵션 키 일부가 있습니다. 아래 표에 이러한 키와 그 정의 및 'Hello World'라는 이름의 위젯에 대한 예제 값 몇 가지가 나열되어 있습니다.
키 | 예제 값 | 필수 | 정의 |
CFBundleDevelopmentRegion | 영어 | 선택 사항 | 번들의 기본 지역을 지정하는 문자열입니다. 일반적으로 번들을 생성한 사람의 기본 언어에 해당합니다. |
CFBundleDisplayName | Hello World | 필수 | 위젯의 실제 이름이 들어가는 문자열로, iBooks Author 및 Apple Books에 표시됩니다. |
CFBundleIdentifier | com.apple.widget.HelloWorld | 필수 | 역 도메인 형식으로 위젯을 고유하게 식별하는 문자열입니다. |
CFBundleName | Hello World | 선택 사항 | 위젯의 이름이 들어가는 문자열입니다. Finder의 위젯 번들 이름과 일치해야 하며 .wdgt 파일 확장자는 제외합니다. |
CFBundleShortVersionString | 1.0 | 선택 사항 | 위젯의 단축된 버전 번호를 제공하는 문자열입니다. 종종 CFBundleVersion과 동일합니다. |
CFBundleVersion | 1.0 | 선택 사항 | 위젯의 버전 번호를 제공하는 문자열입니다. |
키 | 768 | 선택 사항 | 위젯의 높이를 픽셀로 제공하는 숫자입니다. 지정하지 않으면 Default.png의 높이가 사용됩니다. |
MainHTML | HelloWorld.html | 필수 | 위젯을 실행하는 HTML 파일의 이름을 제공하는 문자열입니다.Width1024Optional |
Width | 1024 | 선택 사항 | 위젯의 너비를 픽셀로 제공하는 숫자입니다. 지정하지 않으면 Default.png의 너비가 사용됩니다. |
IBNotifiesOnReady | 선택 사항 | true로 설정하면 언제 Default.png 표시에서 실행 중인 HTML 위젯 표시로 전환해야 하는지를 위젯이 Apple Books에 알려 줍니다. |
위젯의 전체 Info.plist는 다음과 같습니다.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>CFBundleDevelopmentRegion</key> <string>English</string> <key>CFBundleDisplayName</key> <string>Hello World</string> <key>CFBundleIdentifier</key> <string>com.apple.widget.HelloWorld</string> <key>CFBundleName</key> <string>Hello World</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Height</key> <integer>768</integer> <key>MainHTML</key> <string>HelloWorld.html</string> <key>Width</key> <integer>1024</integer> <key>IBNotifiesOnReady</key> <true/> </dict> </plist>
키 제한 사항
다음과 같은 키를 사용하지 마십시오. 기능이 호환되지 않습니다.
키 | 설명 |
AllowFileAccessOutsideOfWidget | iBooks Author로 생성된 책의 위젯은 일반 파일 시스템에 있는 파일에 접근할 수 없습니다. |
AllowFullAccess | 기타 접근 키 목록의 약어입니다. 일부 키는 호환되지 않습니다. |
AllowInternetPlugins | Flash와 같은 인터넷 플러그인은 iBooks Author로 생성된 책에서 사용할 수 없습니다. HTML5 및 요소를 사용하여 영화와 오디오를 포함할 HTML 위젯 내에 있는 동영상 및 오디오는 DRM으로 보호되지 않습니다. |
AllowJava | iBooks Author로 생성된 책의 위젯에는 Java 콘텐츠가 들어갈 수 없습니다. |
AllowSystem | iBooks Author로 생성된 책의 위젯은 시스템 명령에 접근할 수 없습니다. |
Plugin | iBooks Author로 생성된 책의 위젯에는 Cocoa 플러그인 구성요소가 들어갈 수 없습니다. |
iBooks Author는 다음과 같은 키를 무시합니다.
키 | 설명 |
CloseBoxInsetX | iBooks Author 및 Apple Books의 위젯은 닫는 장식을 표시하지 않습니다. |
CloseBoxInsetY | |
서체 | iBooks Author 위젯은 번들 서체를 사용할 수 없습니다. |
오디오 및 비디오 요구 사항
파일 확장자가 .m4v 또는 .m4p인 미디어는 사용할 수 없습니다. 파일 확장자가 .mp4인 다음 형식 중 하나를 사용하십시오.
H.264 비디오: 최대 720p, 초당 60프레임. High Profile level 4.2(최대 160Kbps의 AAC-LC 오디오), 48kHz, 스테레오 오디오. iMovie 10에서 HD 720p 옵션을 통해 여는 비디오는 이러한 설정을 사용합니다.
MPEG-4 비디오: 최대 2.5Mbps, 640 x 480 픽셀, 초당 30프레임, Simple Profile(채널당 최대 160Kbps의 AAC-LC 오디오), 48kHz, 스테레오 오디오.
오디오의 경우 파일 확장자가 .m4a인 AAC(8~320 Kbps, 48kHz 스테레오)를 사용하십시오.
HTML 위젯 번들의 비디오 및 오디오 미디어는 DRM으로 보호되지 않습니다.
동영상 또는 오디오 파일이 iBooks Author의 위젯에서 재생되지 않는 경우 iPhone, iPad 또는 Mac에서 미리 볼 수 있습니다. 이렇게 하면 완성된 책에서 파일이 어떻게 재생되는지 볼 수 있습니다.
현지화
현지화된 문자열 및 자산은 iBooks Author에서 지원되지 않습니다. 독자가 인라인을 볼 수 있도록 대상 언어로 된 텍스트 문자열을 포함하십시오.
잘리는 요소 해결하기
다음과 같은 요소는
#video { width: 960; height: 540; }
iOS 및 macOS용 개발
iOS 및 macOS에서는 다른 입력 유형을 사용합니다. iBooks Author용 HTML 위젯을 생성하는 경우 터치 및 마우스 입력 모두 가능하도록 할 수 있습니다.
독자가 HTML 위젯을 열 때 깜박이지 않게 하기
HTML 위젯이 너무 복잡하면 독자가 Apple Books에서 위젯을 열 때 깜박임이 발생할 수 있습니다. 다음과 같이 위젯을 업데이트하여 언제 Default.png 파일을 HTML 위젯으로 전환하는지를 Apple Books에게 알려 주면 깜박임 문제를 방지할 수 있습니다.
1. 'true'로 설정된 'IBNotifiesOnReady' 항목을 위젯의 info.plist 파일에 추가합니다. 이를 통해 Apple Books가 HTML 위젯으로 언제 전환해야 하는지를 이 위젯에서 알려준다는 것을 알 수 있습니다.
<key>IBNotifiesOnReady</key>
2. 위젯을 설정하여 HTML 파일의 일부에 Apple JavaScript
iOS 및 macOS에는 이미 AppleWidget.js가 있으므로 위젯 번들에 포함할 필요가 없습니다.
3. 위젯이 언제 HTML이 초기화되는지를 Apple Books에게 알려 주도록 설정합니다. HTML 파일의 일부에 있는
widget.notifyContentIsReady()
외부 웹 서비스에 게시하기
올바른 CORS(출처 간 리소스 공유) 헤더를 사용하는 경우에만 HTML 위젯을 외부 웹 서비스에 게시할 수 있습니다.
