내맘대로의 EPUB 제작 가이드

기초부터 전자책 제작 실습까지

Picture "img" elements must reference core media type resources, but found resource "%1$" of type "%2$s".

이 오류는 <img> 태그를 사용해 이미지를 표시하려고 했지만, 그 이미지 파일의 형식이 EPUB 표준에서 공식적으로 지원하지 않는 형식일 때 발생합니다.

EPUB은 모든 전자책 단말기에서 책이 동일하게 보이도록 하기 위해, 모든 뷰어가 반드시 지원해야 하는 '코어 미디어 타입(Core Media Type)' 즉, '공식 이미지 형식'을 지정해 두었습니다. 🖼️

## EPUB 공식 지원 이미지 형식

EPUB 3 표준에서 공식적으로 지원하는 이미지 형식은 다음과 같습니다. 이 네 가지 형식 중 하나를 사용해야 합니다.

JPEG (.jpg, .jpeg) - 사진에 적합
PNG (.png) - 투명 배경이나 선명한 그래픽에 적합
GIF (.gif) - 간단한 애니메이션이나 색상이 적은 이미지에 적합
SVG (.svg) - 확대/축소해도 깨지지 않는 벡터 그래픽에 적합

오류 메시지에 나온 %1$s는 위 목록에 없는 형식(예: image/bmp, image/tiff, image/webp)일 가능성이 높습니다.

## 해결 방법

해결책은 지원되지 않는 형식의 이미지 파일을 지원되는 공식 형식(주로 JPEG 또는 PNG)으로 변환하는 것입니다.

이미지 변환: 포토샵, GIMP, 미리보기(macOS), 그림판(Windows) 등 이미지 편집 프로그램을 사용하여 오류가 발생한 이미지 파일(%2$s)을 엽니다.
다른 이름으로 저장/내보내기: '다른 이름으로 저장' 또는 '내보내기(Export)' 기능을 사용하여 파일 형식을 PNG나 JPEG로 선택하여 새로 저장합니다.
EPUB 파일 교체: EPUB 프로젝트 폴더에 있는 기존의 비표준 이미지 파일을 새로 변환한 파일로 교체합니다.
코드 수정 (필요시): 만약 파일의 확장자가 변경되었다면(예: .bmp → .png), 이미지를 사용한 HTML 파일의 <img> 태그와 .opf 파일의 <manifest> 목록에 있는 파일 이름과 media-type도 그에 맞게 수정해야 합니다.

수정 예시:
- chart.bmp 파일을 chart.png로 변환했다면,
- HTML 코드의 <img src="../images/chart.bmp" ... />를 <img src="../images/chart.png" ... />로 수정해야 합니다.

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

이미지 파일 헤더가 손상되었을 수 있습니다. (0)	2025.10.02
"%1$s"은(는) 유효한 사용자 정의 데이터 속성이 아닙니다 (하이픈(-) 뒤에 하나 이상의 문자가 있어야 하고, XML과 호환되어야 하며, ASCII 대문자를 포함하지 않아야 합니다). (0)	2025.10.02
EPUB 읽기 시스템은 리플로우어블 문서의 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다. (0)	2025.10.02
EPUB 읽기 시스템은 고정 레이아웃 문서의 보조 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다. (0)	2025.10.02
뷰포트 "%1$s" 속성은 한 번 넘게 정의해서는 안 되지만, [%2$s] 값이 발견되었습니다. (0)	2025.10.02

"%1$s"은(는) 유효한 사용자 정의 데이터 속성이 아닙니다 (하이픈(-) 뒤에 하나 이상의 문자가 있어야 하고, XML과 호환되어야 하며, ASCII 대문자를 포함하지 않아야 합니다).

EPUB 제작의 기초/EPUBCheck 오류

posted by 내.맘.대.로 2025. 10. 2. 09:51

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

"%1$s" is not a valid custom data attribute (it must have at least one character after the hyphen, be XML-compatible, and not contain ASCII uppercase letters).

이 오류는 HTML 태그에 추가한 사용자 정의 data-* 속성의 이름이 정해진 규칙을 따르지 않았을 때 발생합니다.

data-* 속성은 스크립트나 CSS에서 사용하기 위해 요소에 추가적인 정보를 저장하는 유용한 기능이지만, 이름에는 몇 가지 엄격한 규칙이 적용됩니다.

친절하게도 오류 메시지 자체에 그 규칙들이 요약되어 있습니다.

## data-* 속성의 이름 규칙

data- 뒤에 글자가 있어야 합니다. 속성 이름은 반드시 data-로 시작해야 하며, 하이픈(-) 뒤에 최소 한 글자 이상이 와야 합니다. data-만 단독으로 사용할 수는 없습니다.
ASCII 대문자를 사용할 수 없습니다. 속성 이름에는 A부터 Z까지의 대문자를 포함할 수 없습니다. 모든 글자는 소문자여야 합니다.
XML과 호환되어야 합니다. 이름에는 공백이나 대부분의 특수문자(:, @ 등)를 사용할 수 없습니다. **알파벳 소문자, 숫자, 하이픈(-)**만 사용한다고 생각하는 것이 가장 안전합니다.

## 해결 방법

오류 메시지에 나온 잘못된 data-* 속성(%1$s)을 찾아 위의 규칙에 맞게 수정하면 됩니다.

### 수정 예시

잘못된 이름 (오류 발생)	위반한 규칙	올바른 이름 (수정 후)
data-BookID	대문자("B", "ID") 사용	data-book-id
data-	하이픈 뒤 내용 없음	data-info
data-user id	공백 포함	data-user-id
data-section:1	콜론(:) 포함	data-section-1

Sheets로 내보내기

코드 수정 예시:▼
HTML
```
<div data-chapter-number="3">...</div>
```
HTML
```
<div data-ChapterNumber="3">...</div>
```

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

이미지 파일 헤더가 손상되었을 수 있습니다. (0)	2025.10.02
"img" 요소는 코어 미디어 타입 리소스를 참조해야 하지만, 타입 "%1$s"의 리소스 "%2$s"이(가) 발견되었습니다. (0)	2025.10.02
EPUB 읽기 시스템은 리플로우어블 문서의 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다. (0)	2025.10.02
EPUB 읽기 시스템은 고정 레이아웃 문서의 보조 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다. (0)	2025.10.02
뷰포트 "%1$s" 속성은 한 번 넘게 정의해서는 안 되지만, [%2$s] 값이 발견되었습니다. (0)	2025.10.02

EPUB 읽기 시스템은 리플로우어블 문서의 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다.

EPUB 제작의 기초/EPUBCheck 오류

posted by 내.맘.대.로 2025. 10. 2. 09:50

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

EPUB reading systems must ignore viewport meta elements in reflowable documents; viewport declaration "%1$s" will be ignored.

이 메시지는 일반적인 텍스트 위주의 '리플로우어블(reflowable, 텍스트 흐름)' 전자책 문서에, '고정 레이아웃(fixed-layout)' 전용인 <meta name="viewport"> 태그가 잘못 포함되었다는 경고입니다.

## 메시지의 의미

리플로우어블 문서는 독자가 글자 크기나 화면 크기를 바꿔도 텍스트가 액체처럼 그에 맞게 자동으로 재배치되는 책을 말합니다. 이 방식에서는 독자가 레이아웃의 최종적인 크기를 결정합니다.

반면, <meta name="viewport"> 태그는 제작자가 페이지의 크기를 1024x768처럼 특정 값으로 고정하기 위해 사용하는 도구입니다.

이 둘은 서로의 목적이 완전히 반대됩니다. 따라서 EPUB 표준은 "리플로우어블 문서에서는 독자의 설정이 우선이므로, 제작자가 지정한 viewport 태그는 완전히 무시한다"고 규정하고 있습니다.

이 경고는 "불필요하고 아무 기능도 하지 않는 코드가 있으니 정리하는 것이 좋습니다"라는 의미의 친절한 안내입니다.

## 해결 방법

해결 방법은 간단합니다. 리플로우어블 문서에 포함된 불필요한 <meta name="viewport"> 태그를 완전히 삭제하면 됩니다.

### 수정 예시

수정 전 (경고 발생 예시):

HTML

<head>
  <meta charset="UTF-8" />
  <title>제1장</title>
  <link rel="stylesheet" href="../css/style.css" />

  <meta name="viewport" content="width=1024, height=768" />
</head>

수정 후 (올바른 코드): ✅

HTML

<head>
  <meta charset="UTF-8" />
  <title>제1장</title>
  <link rel="stylesheet" href="../css/style.css" />
</head>

'EPUB 제작의 기초 > EPUBCheck 오류' 카테고리의 다른 글

"img" 요소는 코어 미디어 타입 리소스를 참조해야 하지만, 타입 "%1$s"의 리소스 "%2$s"이(가) 발견되었습니다. (0)	2025.10.02
"%1$s"은(는) 유효한 사용자 정의 데이터 속성이 아닙니다 (하이픈(-) 뒤에 하나 이상의 문자가 있어야 하고, XML과 호환되어야 하며, ASCII 대문자를 포함하지 않아야 합니다). (0)	2025.10.02
EPUB 읽기 시스템은 고정 레이아웃 문서의 보조 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다. (0)	2025.10.02
뷰포트 "%1$s" 속성은 한 번 넘게 정의해서는 안 되지만, [%2$s] 값이 발견되었습니다. (0)	2025.10.02
HTML 문서는 UTF-8로 인코딩되어야 하지만, UTF-16으로 인코딩 되었습니다. (0)	2025.10.02

EPUB 읽기 시스템은 고정 레이아웃 문서의 보조 뷰포트 메타 요소를 무시해야 합니다; 뷰포트 선언 "%1$s"은(는) 무시됩니다.

EPUB 제작의 기초/EPUBCheck 오류

posted by 내.맘.대.로 2025. 10. 2. 09:48

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

EPUB reading systems must ignore secondary viewport meta elements in fixed-layout documents; viewport declaration "%1$s" will be ignored.

이 메시지는 고정 레이아웃(Fixed Layout) 문서의 HTML 파일 하나에 <meta name="viewport"> 태그가 두 개 이상 포함되어 있다는 경고입니다.

하나의 그림 액자 뒷면에 크기를 적은 라벨이 두 개 붙어있는 것과 같습니다. 🖼️ 하나는 '크기: 1024x768'이라고 되어 있고, 다른 하나는 '크기: 800x600'이라고 되어 있다면 혼란이 생깁니다.

이런 혼란을 방지하기 위해 EPUB 표준에는 명확한 규칙이 있습니다. 전자책 뷰어는 반드시 문서에서 가장 먼저 발견되는 viewport 메타 태그 하나만을 사용하고, 그 뒤에 나오는 모든 보조(두 번째, 세 번째...) viewport 태그는 무시해야 합니다.

이 메시지는 오류는 아니지만, "두 번째 viewport 태그(%1$s)를 발견했지만, 규칙에 따라 무시했습니다. 의도한 것이 맞나요?" 라고 알려주는 중요한 경고입니다. 불필요하고 혼란을 유발하는 코드가 있다는 뜻입니다.

## 해결 방법

해결책은 간단합니다. 각 HTML 파일에 단 하나의 올바른 viewport 메타 태그만 남기고 나머지는 모두 삭제하는 것입니다.

경고가 발생한 HTML 파일을 텍스트 편집기에서 엽니다.
<head> ... </head> 섹션 안에서 <meta name="viewport" ... > 태그를 모두 찾습니다.
페이지에 맞는 올바른 크기를 가진 태그 하나만 남겨두고, 나머지 중복되거나 잘못된 viewport 태그는 모두 삭제합니다.

### 수정 예시

수정 전 (경고 발생 예시):

HTML

<head>
  <title>My Page</title>
  <meta name="viewport" content="width=1024, height=768" />
  <link rel="stylesheet" href="../css/style.css" />
  <meta name="viewport" content="width=800, height=600" />
</head>

수정 후 (올바른 코드): ✅

HTML

<head>
  <title>My Page</title>
  <meta name="viewport" content="width=1024, height=768" />
  <link rel="stylesheet" href="../css/style.css" />
</head>