posted by 내.맘.대.로 2025. 9. 25. 08:49

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

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

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

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

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

Font-face reference "%1$s" refers to non-standard font type "%2$s".

 

이 오류는 CSS의 @font-face 규칙을 통해 EPUB에 글꼴(폰트)을 포함시켰지만, 그 글꼴 파일의 형식이 EPUB 표준에서 공식적으로 지원하지 않는 비표준 형식이라는 의미입니다. 🔤


## 왜 글꼴 형식이 중요한가요?

EPUB은 호환성을 매우 중요하게 생각합니다. 어떤 전자책 뷰어에서든 책이 동일하게 보이도록 하기 위해, 모든 뷰어가 반드시 지원해야 하는 '공식 글꼴 형식'을 지정해 두었습니다. 이 목록에 없는 형식을 사용하면 일부 기기에서는 글꼴이 적용되지 않고 기본 글꼴로 보이게 됩니다.

### EPUB 공식 지원 글꼴 형식

EPUB 3 표준에서 안정적으로 지원되는 글꼴 형식은 다음과 같습니다.

  • WOFF2 (.woff2)
  • WOFF (.woff)
  • OpenType (.otf)
  • TrueType (.ttf)

오류 메시지에 나온 %2$s는 위 목록에 없는 형식(예: .svg, .eot)일 가능성이 높습니다.


## 해결 방법

해결책은 비표준 형식의 글꼴 파일을 표준 형식(가급적 WOFF2 또는 WOFF)으로 변환하는 것입니다.

  1. 글꼴 변환하기 Font Squirrel Webfont Generator나 CloudConvert와 같은 무료 온라인 글꼴 변환 서비스를 이용하세요. 가지고 있는 비표준 글꼴 파일(예: myfont.svg)을 업로드하여 표준 형식(예: myfont.woff2)으로 변환합니다.
  2. EPUB 파일 교체하기 기존의 비표준 글꼴 파일을 EPUB에서 삭제하고, 새로 변환한 표준 글꼴 파일을 추가합니다.
  3. CSS 파일 수정하기 @font-face 규칙에서 참조하는 파일 이름을 새 파일 이름으로 변경합니다.
    • 수정 전:
    • CSS
       
      @font-face {
        font-family: 'MyWebFont';
        src: url('../fonts/myfont.svg');
      }
      
    • 수정 후:
    • CSS
       
      @font-face {
        font-family: 'MyWebFont';
        src: url('../fonts/myfont.woff2');
      }
      
  4. OPF 파일 확인하기 (중요) EPUB의 .opf 파일 안에 있는 <manifest> 목록에서 해당 글꼴 항목의 href (파일 경로)와 media-type (파일 종류)이 올바르게 수정되었는지 확인해야 합니다.
    • .woff 파일의 media-type은 font/woff 입니다.
    • .woff2 파일의 media-type은 font/woff2 입니다.
    • .otf 파일의 media-type은 font/otf 입니다.
    • .ttf 파일의 media-type은 font/ttf 입니다.
반응형
posted by 내.맘.대.로 2025. 9. 25. 08:46

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

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

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

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

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

CSS selector specifies fixed position.

 

이 오류는 CSS 코드에 position: fixed; 스타일이 사용되었음을 의미합니다. 이 스타일은 웹사이트에서는 유용할 수 있지만, 리플로우(reflowable) EPUB에서는 심각한 문제를 일으켜 금지됩니다.

position: fixed;는 특정 요소(예: 헤더, 메뉴 등)를 화면의 한 위치에 '고정'시키는 역할을 합니다. 사용자가 페이지를 넘겨도 그 요소는 항상 같은 자리에 머물러 있습니다.


## 왜 EPUB에서 문제가 되나요?

컴퓨터 화면에 포스트잇 메모를 붙여놓는 것을 상상해 보세요. 📌 문서를 스크롤해도 메모는 화면의 같은 자리에 계속 머물며 그 아래에 있는 내용을 가리게 됩니다. position: fixed;가 EPUB에서 하는 역할이 바로 이것입니다.

  • 콘텐츠 겹침: 고정된 요소가 본문 텍스트 위를 덮어버려 독자가 내용을 읽을 수 없게 만듭니다.
  • 페이지 넘김 문제: EPUB은 웹사이트처럼 스크롤하는 방식이 아니라 페이지를 넘기는 방식입니다. 고정된 요소는 모든 페이지의 동일한 위치에 나타나 독서 흐름을 완전히 방해합니다.
  • 사용자 설정과 충돌: 독자가 글자 크기를 키우면 본문은 그에 맞춰 재배열되지만, 고정된 요소는 제자리에 머물러 레이아웃이 완전히 깨지게 됩니다.

## 해결 방법

가장 좋은 해결책은 position: fixed;를 삭제하고, 해당 요소가 책의 자연스러운 흐름에 맞게 표시되도록 디자인을 재고하는 것입니다.

  1. EPUB의 CSS 파일에서 position: fixed; 코드를 검색하여 찾습니다.
  2. 해당 코드 줄 전체를 삭제합니다.

### 수정 예시

  • 오류가 발생하는 코드:
  • CSS
     
    .note-box {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: yellow;
    }
    
  • 올바르게 수정한 코드: ✅위와 같이 수정하면 'note-box'는 더 이상 화면에 고정되지 않고, 본문 내용의 흐름에 따라 자연스럽게 표시됩니다.
  • CSS
     
    .note-box {
      /* position: fixed; <-- 이 줄을 삭제합니다. */
      margin: 20px; /* margin이나 padding 등으로 위치를 조정합니다. */
      background-color: yellow;
      border: 1px solid black; /* 테두리 등으로 시각적 구분을 줍니다. */
    }
    
반응형
posted by 내.맘.대.로 2025. 9. 25. 08:45

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

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

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

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

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

Conflicting alternate style tags found: %1$s.

 

이 오류는 HTML 문서의 <head> 섹션에서 대체 스타일시트를 설정하는 방식에 논리적인 충돌이 있음을 의미합니다.

## 대체 스타일시트란?

대체 스타일시트는 독자에게 여러 가지 디자인 테마(예: '낮 모드', '밤 모드', '세피아 모드')를 선택할 수 있도록 제공하는 고급 기능입니다. 🎨 독자는 뷰어의 설정을 통해 선호하는 스타일을 고를 수 있습니다.

이 오류는 이 '테마 선택지'를 제공하는 규칙에 문제가 생겼다는 뜻입니다.


## 충돌이 발생하는 원인

가장 흔한 원인은 '기본 테마'로 설정된 스타일시트가 두 개 이상이기 때문입니다.

  • rel="stylesheet"와 title="테마이름"을 모두 가진 <link> 태그는 '기본 테마(Preferred Style)'로 간주됩니다.
  • 규칙상 '기본 테마'는 단 하나만 존재해야 합니다.

책의 기본 표지가 두 종류일 수 없는 것처럼, 기본 테마가 여러 개이면 뷰어는 어떤 것을 먼저 보여줘야 할지 혼란에 빠집니다.


## 해결 방법

  1. 오류가 발생한 HTML/XHTML 파일을 엽니다.
  2. <head> 섹션 안에서 CSS 파일을 연결하는 모든 <link> 태그를 찾습니다.
  3. rel="stylesheet"와 title="..." 속성을 동시에 가지고 있는 <link> 태그가 여러 개 있는지 확인합니다.
  4. 그 중 하나만 남기고, 나머지는 rel="stylesheet"를 rel="alternate stylesheet"로 변경하여 '대체 테마'로 지정합니다.

### 수정 예시

  • 오류가 발생하는 코드:➡️ title이 있는 rel="stylesheet"가 두 개이므로 어떤 것이 기본값인지 알 수 없어 충돌이 발생합니다.
  • HTML
     
    <head>
      ...
      <link rel="stylesheet" href="day.css" title="밝은 테마">
      <link rel="stylesheet" href="night.css" title="어두운 테마">
      ...
    </head>
    
  • 올바르게 수정한 코드: ✅➡️ '밝은 테마'를 기본값으로 두고, '어두운 테마'는 선택 가능한 '대체' 스타일로 변경하여 충돌을 해결했습니다.
  • HTML
     
    <head>
      ...
      <link rel="stylesheet" href="day.css" title="밝은 테마">
      <link rel="alternate stylesheet" href="night.css" title="어두운 테마">
      ...
    </head>
    
반응형
posted by 내.맘.대.로 2025. 9. 24. 09:39

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

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

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

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

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

CSS documents must be encoded in UTF-8, detected %1$s;

 

이 오류는 CSS 파일이 EPUB 표준에서 요구하는 UTF-8 방식이 아닌, 다른 방식(%1$s)으로 저장되었음을 의미합니다.

이는 이전의 'UTF-16 인코딩' 오류와 거의 동일하며, %1$s 부분에는 실제로 감지된 인코딩 방식의 이름(예: ANSI, ISO-8859-1 등)이 표시됩니다.


## 왜 UTF-8 인코딩이 중요한가요?

모든 전자책 기기와 소프트웨어에서 글자나 기호가 깨지는 일 없이 스타일시트가 항상 올바르게 적용되도록 하기 위한 글로벌 표준 약속입니다. 🌐 %1$s에 표시된 인코딩 방식은 일부 시스템에서 호환성 문제를 일으켜 스타일이 적용되지 않을 수 있습니다.


## 해결 방법: 파일을 UTF-8로 다시 저장하기

해결 방법은 간단합니다. 텍스트 편집기를 사용하여 파일의 인코딩을 UTF-8로 변경하면 됩니다.

### 전문 텍스트 편집기 (Visual Studio Code, Notepad++ 등)

  1. 문제가 된 CSS 파일을 편집기에서 엽니다.
  2. 창의 오른쪽 하단 상태 표시줄에서 현재 인코딩(%1$s) 이름을 클릭합니다.
  3. 나타나는 메뉴에서 '인코딩하여 저장(Save with Encoding)' 옵션을 선택합니다.
  4. 목록에서 **'UTF-8'**을 선택하고 파일을 저장합니다.

### 윈도우 메모장

  1. CSS 파일을 메모장으로 엽니다.
  2. 상단 메뉴에서 **'파일 > 다른 이름으로 저장'**을 선택합니다.
  3. 저장 창 하단의 '인코딩' 드롭다운 목록에서 **'UTF-8'**을 선택하고 저장하여 기존 파일을 덮어씁니다.
반응형
posted by 내.맘.대.로 2025. 9. 24. 09:39

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

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

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

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

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

CSS document is encoded in UTF-16. It should be encoded in UTF-8 instead.

 

이 오류는 CSS 파일이 컴퓨터가 이해하는 '언어(인코딩)' 중 잘못된 방식으로 저장되었다는 의미입니다. EPUB은 전 세계 모든 기기에서 글자가 깨지지 않도록, 모든 텍스트 기반 파일(HTML, CSS 등)을 UTF-8이라는 통일된 방식으로 저장하도록 약속했습니다. 🌐


## 왜 UTF-8을 사용해야 하나요?

UTF-8은 거의 모든 국가의 언어를 표현할 수 있는 국제 표준 인코딩 방식입니다. EPUB이 이 방식을 표준으로 채택한 이유는, 어떤 국가의 어떤 전자책 뷰어에서 열더라도 스타일 정보나 특수 문자가 깨지는 현상을 막고 완벽한 호환성을 보장하기 위해서입니다.

이 규칙을 지키지 않은 UTF-16 인코딩 파일을 사용하면, 일부 기기에서는 CSS 스타일이 전혀 적용되지 않아 디자인이 없는 평범한 텍스트로만 보일 수 있습니다.


## 해결 방법: 인코딩을 UTF-8로 변경하기

이 문제는 사용하고 있는 텍스트 편집기 프로그램을 사용하여 파일의 인코딩 방식을 변경하고 다시 저장하면 간단히 해결할 수 있습니다.

### Visual Studio Code, Notepad++ 등 전문 편집기 사용 시

  1. 해당 CSS 파일을 편집기에서 엽니다.
  2. 편집기 창의 오른쪽 아래에 있는 상태 표시줄을 보면 현재 인코딩(예: 'UTF-16 LE' 또는 'UTF-16 BE')이 표시됩니다.
  3. 표시된 인코딩 이름을 클릭하면 메뉴가 나타납니다.
  4. 메뉴에서 '인코딩하여 저장(Save with Encoding)' 또는 유사한 옵션을 선택합니다.
  5. 나타나는 목록에서 **'UTF-8'**을 선택하고 파일을 저장합니다.

### 윈도우 메모장 사용 시

  1. 해당 CSS 파일을 메모장으로 엽니다.
  2. 상단 메뉴에서 **'파일 > 다른 이름으로 저장'**을 클릭합니다.
  3. 저장 대화상자 하단에 있는 '인코딩' 드롭다운 메뉴를 클릭합니다.
  4. 목록에서 **'UTF-8'**을 선택하고 '저장' 버튼을 눌러 기존 파일을 덮어씁니다.

 

반응형
posted by 내.맘.대.로 2025. 9. 24. 09:38

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

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

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

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

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

Empty or NULL reference found.

 

이 오류는 CSS 파일에서 다른 파일(예: 이미지, 폰트, 다른 CSS 파일)을 불러오려고 시도했지만, 정작 불러올 파일의 경로가 비어있다는 의미입니다.

목적지가 적히지 않은 텅 빈 이정표가 있는 것과 같습니다. 🗺️ 방향은 가리키지만 어디로 가야 할지 알려주지 않는 상황입니다.


## 주로 확인해야 할 부분

CSS 파일에서 url() 함수가 사용된 곳을 찾아보세요. 특히 다음과 같은 속성들을 중점적으로 확인해야 합니다.

  • background-image: url(); (배경 이미지를 지정했지만 이미지 파일 경로가 없는 경우)
  • @font-face 규칙 안의 src: url(); (폰트를 불러오려 했지만 폰트 파일 경로가 없는 경우)
  • @import url(); (다른 CSS 파일을 가져오려 했지만 파일 경로가 없는 경우)
  • list-style-image: url(); (목록의 글머리기호를 이미지로 지정했지만 파일 경로가 없는 경우)

## 해결 방법

두 가지 방법으로 간단히 해결할 수 있습니다.

1. 올바른 경로 입력하기 만약 파일이 실제로 필요한 것이라면, 비어있는 url() 괄호 안에 정확한 파일 경로를 입력합니다.

  • 수정 전:
  • CSS
     
    div { background-image: url(); }
    
  • 수정 후:
  • CSS
     
    div { background-image: url('../images/background.png'); }
    

2. 불필요한 코드 삭제하기 만약 해당 스타일이 더 이상 필요하지 않다면, 코드 줄 전체를 삭제하는 것이 가장 좋습니다.

  • 수정 전:
  • CSS
     
    li { 
      color: black;
      list-style-image: url(); /* 더 이상 사용하지 않는 스타일 */
    }
    
  • 수정 후:
  • CSS
     
    li { 
      color: black;
    }
반응형