본문으로 건너뛰기
피드

ePub에서 HTML이 달라지는 방식

frontend 약 3분
vote
0
댓글
북마크

ePub은 일반 HTML이 아닌 XHTML을 사용하며, XML 네임스페이스, 제한적 CSS 지원, epub:type 시맨틱 속성 등 웹 개발자가 알아야 할 차이점을 정리한 글

  • 1

    ePub은 XHTML 기반이라 self-closing 태그와 네임스페이스가 필수

  • 2

    e-리더의 CSS 지원은 제한적이며 네임스페이스 인식 셀렉터 필요

  • 3

    epub:type으로 미주 등 시맨틱 표현 가능하나 DPUB WAI-ARIA로 전환 중

  • 4

    Standard Ebooks 툴셋으로 ePub 스캐폴딩과 빌드 가능

ePub에서 HTML이 달라지는 방식

  • ePub은 일반 HTML이 아니라 XHTML을 사용함. XML 기반이라 self-closing 태그 필수, 네임스페이스 선언 필수, 문법 오류 하나면 e-리더가 바로 에러를 뱉음
  • 수십 년 전 HTML을 XML 위에 재구축하려던 XHTML 프로젝트가 웹에서는 실패했지만, ePub 세계에서는 아직도 현역임

CSS는 되긴 되는데...

  • e-리더는 브라우저에 비하면 구석기 시대 수준이라 :not()도 리스크 있고, :is() 같은 건 지원 안 된다고 보는 게 맞음
  • XHTML이니까 CSS에서도 네임스페이스를 인식해야 함. q[lang]이 아니라 @namespace xml 선언 후 q[xml|lang]으로 셀렉터를 써야 동작함

MathML, SVG, 그리고 epub:type

  • HTML5에서는 MathML/SVG 태그를 그냥 쓰지만, XHTML에서는 루트에 네임스페이스를 선언하고 m:math, svg:svg 같은 접두사를 붙여야 함
  • epub:type 속성으로 미주(endnote), 참조(noteref) 같은 시맨틱을 표현할 수 있음. e-리더가 이를 인식하면 모달로 미주를 보여주는 식
  • epub:type은 DPUB WAI-ARIA role 값으로 대체되는 추세이긴 한데, Apple Books에서도 아직 제대로 지원이 안 됨
  • Z39.98-2012 시맨틱 어휘로 로마 숫자 같은 더 세밀한 의미 표현도 가능하긴 한데, 지원하는 리더는 거의 없음

ePub 만드는 법

  • META-INF/container.xml → 패키지 파일(매니페스트 + 스파인) → XHTML 파일들 → zip으로 묶어서 .epub으로 확장자 변경하면 끝
  • 직접 구조 잡기 귀찮으면 Standard Ebooks 툴셋 추천: se create-draft --white-label로 스캐폴딩, se build로 빌드하면 됨

웹 기술을 안다고 ePub을 바로 만들 수 있는 건 아님. XHTML의 XML 유산이 곳곳에 영향을 미침

댓글

댓글

댓글을 불러오는 중...

frontend

타입스크립트 7.0, Go 네이티브 포팅으로 빌드가 8~12배 빨라졌다

마이크로소프트가 타입스크립트 7.0을 출시하면서 기존 자바스크립트 기반 구현을 Go로 네이티브 포팅했다. 전체 빌드는 평균 8~12배 빨라졌고, VS코드 빌드는 125.7초에서 10.6초로 줄었으며, 슬랙은 CI 타입 검사 시간을 7.5분에서 1.25분으로 낮췄다.

frontend

타입스크립트 7 공개, 고 포팅으로 빌드가 최대 10배 이상 빨라짐

마이크로소프트가 고(Go)로 네이티브 포팅한 타입스크립트 7을 공개했다. 전체 빌드는 보통 8~12배 빨라지고, VS 코드 코드베이스에서는 125.7초가 10.6초로 줄었으며, 편집기 첫 오류 표시도 17.5초에서 1.3초 미만으로 내려갔다.

frontend

“98% 지원”이 생각보다 별로 안 넉넉한 이유

브라우저 기능 지원률 98%는 얼핏 높아 보이지만, 실제 서비스에서는 2%의 사용자를 깨진 화면 앞에 세우는 숫자일 수 있다는 글이다. 특히 일반 통계와 내 서비스 방문자 분포는 다를 수 있고, 실제 사례로 어떤 사이트는 최신 중첩 CSS 기능 지원 브라우저가 방문자의 약 70%뿐이었다.

frontend

메타, AI가 읽고 쓰는 디자인 시스템 ‘Astryx’ 오픈소스로 공개

메타가 내부 디자인 시스템 Astryx를 오픈소스로 공개했다. React와 StyleX 기반의 150개 이상 접근성 지원 컴포넌트, 디자인 토큰, 테마, 템플릿, CLI를 제공하며, 특히 AI 에이전트가 컴포넌트 구조를 이해하고 UI를 생성·수정할 수 있도록 MCP 서버까지 포함한 점이 핵심이다.

frontend

shadcn/ui, 기본 컴포넌트 라이브러리를 Radix에서 Base UI로 변경

shadcn/ui가 새 프로젝트의 기본 컴포넌트 라이브러리를 Radix가 아니라 Base UI로 바꿨어. Radix 지원은 계속되지만, Base UI가 안정화됐고 주간 다운로드 600만 이상, shadcn/create 신규 프로젝트 선택 비율 2대1이라는 이유로 기본값을 바꾼 거야. 동시에 채팅 UI용 MessageScroller와 관련 컴포넌트, headless 패키지인 @shadcn/react도 공개됐어.