내맘대로의 EPUB 제작 가이드

The package document declares media overlays styling class names but no CSS was found in the content document.

EPUB의 종합 설명서인 .opf 파일에는 특정 CSS 파일을 '미디어 오버레이(소리 내어 읽기)' 전용이라고 지정(properties="media-overlay-style")했는데, 정작 그 CSS 파일을 열어보니 오디오 재생 중에 텍스트를 강조하는 데 필요한 핵심 CSS 클래스(예: .epub-media-overlay-active)가 없다는 의미입니다.

무대 감독(.opf 파일)에게 '조명 지시서'라고 알려준 종이를 확인해 보니, 정작 중요한 특수 조명에 대한 내용이 빠져있는 것과 같습니다. 📝

## 해결 방법

이 문제는 두 가지 경우 중 하나에 해당하며, 원인에 따라 해결 방법이 다릅니다.

### 경우 1: .opf 파일의 선언이 잘못된 경우

실수나 혼동으로 미디어 오버레이와 관련 없는 일반 스타일시트에 properties="media-overlay-style" 속성을 잘못 추가했을 수 있습니다.

• 해결책: .opf 파일을 열어 <manifest> 안을 확인하고, 잘못 지정된 <item> 태그에서 properties="media-overlay-style" 속성을 삭제합니다.
• 수정 예시 (.opf 파일):▼
• XML

   

  <item id="main-css" href="css/main-style.css" media-type="text/css" />
  

• XML

   

  <item id="main-css" href="css/main-style.css" media-type="text/css" properties="media-overlay-style" />
  

### 경우 2: CSS 파일에 스타일이 누락된 경우

.opf 파일의 선언은 올바르지만, 해당 CSS 파일에 미디어 오버레이용 클래스 스타일을 추가하는 것을 잊었을 수 있습니다.

• 해결책: .opf 파일에 지정된 CSS 파일을 열고, 미디어 오버레이 활성 클래스에 대한 스타일 규칙을 추가합니다. (기본 클래스 이름: epub-media-overlay-active)
• 수정 예시 (CSS 파일):▼
• CSS

   

  /* 하이라이트 스타일을 추가하여 수정 */
  .epub-media-overlay-active {
    background-color: yellow;
  }
  

• CSS

   

  /* 파일이 비어있거나 관련 스타일이 없는 경우 */
  

자신의 EPUB 파일이 위 두 경우 중 어디에 해당하는지 확인하고, 그에 맞는 방법으로 수정하면 오류를 해결할 수 있습니다.

Found CSS class name "%1$s" but no "%2$s" property was declared in the package document.

이 오류는 미디어 오버레이(Media Overlays), 즉 '소리 내어 읽기' 기능과 관련된 문제입니다.

오류의 의미는, 오디오 재생에 맞춰 텍스트를 강조하는 등 특별한 스타일을 담은 CSS 파일이 있지만, 이 CSS 파일이 미디어 오버레이 전용이라는 사실을 EPUB의 종합 설명서인 .opf 파일에 등록하지 않았다는 것입니다.

## 해결 방법

이 문제는 CSS 파일이 아닌 .opf 파일을 수정해야 해결됩니다.

1. EPUB 프로젝트의 .opf 파일을 엽니다. (보통 content.opf 또는 package.opf 라는 이름입니다.)
2. 파일 안에서 <manifest> 부분을 찾습니다.
3. <manifest> 안에서 미디어 오버레이용 스타일이 포함된 CSS 파일에 해당하는 <item> 태그를 찾습니다.
4. 해당 <item> 태그에 properties="media-overlay-style" 속성을 추가합니다.

### 수정 예시

• 수정 전 .opf 파일:
• XML

   

  <manifest>
    ...
    <item id="mo-styles" href="css/readaloud.css" media-type="text/css" />
    ...
  </manifest>
  

• 수정 후 .opf 파일: ✅
• XML

   

  <manifest>
    ...
    <item id="mo-styles" href="css/readaloud.css" media-type="text/css" properties="media-overlay-style" />
    ...
  </manifest>
  

이렇게 properties 속성을 추가하면, 전자책 시스템은 해당 CSS 파일을 미디어 오버레이 기능의 일부로 올바르게 인식하게 됩니다.

Use of Font-face declaration.

이것은 수정이 필요한 오류나 경고가 아니라, 단순히 정보를 알려주는 안내 메시지입니다. 📢

이 메시지는 EPUBCheck가 당신의 CSS 파일에서 @font-face 규칙을 발견했음을 알려주는 것입니다. @font-face는 EPUB에 사용자 정의 글꼴을 포함시키는 올바르고 표준적인 방법이므로, 코드가 정상적으로 인식되었다는 의미입니다.

## 조치 방법

아무것도 할 필요가 없습니다. 다른 글꼴 관련 오류가 없다면 이 안내 메시지는 안심하고 무시하셔도 됩니다.

CSS font-face declaration has no attributes.

이 오류는 CSS 파일에 글꼴(폰트)을 포함시키기 위한 @font-face 규칙이 선언되었지만, 그 내용이 비어있다는 의미입니다.

@font-face는 EPUB에 사용자 정의 글꼴을 포함시킬 때 사용하는 필수적인 코드 블록입니다. 하지만 내용이 비어있으면, 어떤 글꼴을 어떻게 불러와야 할지 알 수 없어 오류가 발생합니다.

이는 내용물이 무엇인지, 이름이 무엇인지 적혀있지 않은 텅 빈 라벨과 같습니다. 🏷️

## @font-face의 필수 속성

유효한 @font-face 규칙이 되려면 최소한 다음 두 가지 정보(속성)가 반드시 포함되어야 합니다.

• font-family: 포함시킬 글꼴에 붙여줄 이름입니다. 나중에 CSS의 다른 부분에서 이 이름을 사용하여 글꼴을 적용합니다.
• src: 불러올 실제 글꼴 파일의 경로와 파일명입니다.

## 해결 방법

두 가지 방법 중 하나를 선택하여 해결할 수 있습니다.

1. 규칙 완성하기 만약 사용자 정의 글꼴을 포함시키려던 것이 맞다면, 비어있는 @font-face 블록 안에 필수 속성인 font-family와 src를 추가하여 규칙을 완성해야 합니다.

• 오류가 발생하는 코드:
• CSS

   

  @font-face {
  }
  

• 올바르게 수정한 코드: ✅
• CSS

   

  @font-face {
    font-family: "NanumMyeongjo";
    src: url("../fonts/NanumMyeongjo.woff2");
  }
  

2. 불필요한 코드 삭제하기 만약 @font-face 규칙이 필요 없다면 (예: 이전에 사용했다가 지운 흔적이거나, 템플릿에 포함된 불필요한 코드), @font-face { } 코드 블록 전체를 삭제하는 것이 가장 좋습니다.