--- name: bam-bam-2/book-pdf source: https://app.decimal.ai/s/bam-bam-2-book-pdf@2/SKILL.md source_sha256: 3c3a76d3d982 --- # 마크다운 → 진짜 책 PDF/EPUB 일반 `page.pdf()` + 마크다운→HTML 변환만으로는 "리포트를 인쇄한 것"처럼 보인다. 실제 책이려면 최소 이 6가지가 있어야 한다: **표지(풀블리드) · 타이틀 페이지 · 판권 페이지 · 실제 쪽번호가 달린 목차 · 장 시작마다 새 페이지 · 쪽마다 러닝헤더/쪽번호**. 이 스킬은 [Paged.js](https://pagedjs.org)(MIT, `https://unpkg.com/pagedjs/dist/paged.polyfill.js`)를 브라우저에 스크립트 태그로 로드해 CSS Paged Media 기능(러닝헤더, 목차 쪽번호 자동생성)을 구현한다. Chromium이 네이티브로 지원 안 하는 기능이라 이 폴리필이 필요하다. ## 이 환경(Aside REPL)의 알려진 함정 1. **`page.pdf({width, height})` 파라미터가 무시된다.** 항상 US Letter로 나온다. 반드시 `preferCSSPageSize: true`를 주고 CSS `@page { size: 148mm 210mm; }`로 크기를 지정할 것. `format: 'A5'` 같은 심볼릭 사이즈도 마찬가지로 무시되니 쓰지 말 것. 2. **`page.setViewportSize()`가 없다.** 뷰포트 크기를 못 바꾸므로 표지 등 개별 이미지를 만들 때 `page.screenshot({fullPage:true})`로 큰 캔버스를 찍으면 타일링 버그가 난다. 대신 `page.pdf()` + `pdftoppm`으로 원하는 크기를 렌더링할 것. 3. **`page.addScriptTag()`가 없다.** 외부 스크립트(Paged.js 등)는 `document.write()`로 쓰는 HTML 문자열 안에 ` ${frontMatter}${bodyContent}`; await page.evaluate((h) => { document.open(); document.write(h); document.close(); }, html); // 안정화 폴링 let last = -1, stable = 0; for (let i = 0; i < 60; i++) { await sleep(1000); const n = await page.evaluate(() => document.querySelectorAll('.pagedjs_page').length); if (n === last) { if (++stable >= 3) break; } else stable = 0; last = n; } const pdf = await page.pdf({ printBackground: true, preferCSSPageSize: true }); ``` 7. **검수는 `aside.pdf.renderPages()`로 표지/타이틀/판권/목차/본문 몇 쪽을 실제로 렌더링해서 눈으로 확인**한다. `pdfinfo`로 최종 `Page size`가 의도한 트림 사이즈(A5 등)인지 꼭 재확인한다 (함정 1번 재발 여부 체크). 8. **EPUB은 별도로 pandoc이 이미 잘 만든다**: `pandoc manuscript.md -t epub3 --css=epub.css --epub-cover-image=cover.jpg --toc --toc-depth=2 -o book.epub`. EPUB은 리플로우 포맷이라 쪽번호/러닝헤더 개념이 없고 nav.xhtml 목차만 있으면 충분하다. ## 어색한 쪽 분리(내용이 잘려서 다음 페이지로 넘어가는 현상) 방지 표/인용문/코드블록이 문장 중간에서 맥려서 다음 페이지로 이어지는 건 CSS에 깨짐 방지 규칙이 없어서다. 다음을 기본값으로 넣을 것: ```css p { orphans: 3; widows: 3; } table, blockquote, pre, img, figure { break-inside: avoid; page-break-inside: avoid; } h2, h3 { break-after: avoid; page-break-after: avoid; } /* 소제목이 페이지 맨아래 혼자 남지 않게 */ ``` 이렇게 하면 문단/표/인용문이 한 페이지에 다 안 들어갈 때 그 블록 전체가 다음 페이지로 밀린다(사용자가 "앞 단락을 뒤로 밀어버려라"라고 표현하는 바로 그 동작). 부작용으로 강제 페이지보맜(장 시작 직전) 앞에 짧은 내용만 단독으로 낙은 거의-빈 페이지가 가끔 생기는데, 이건 실제 책에서도 흔한 자연스러운 현상이라 문제가 아니다. 적용 후반드시 **처음부터 끝까지 순차적으로 모든 페이지를 렌더링해서 육안으로 확인**할 것 — 하나만 집어서 보고 넘어가면 높은 확률로 놓친다. ## flexbox를 부/장 오프너에 쓰지 말 것 제목+삽화를 한 덩어리로 묶어서 같은 페이지에 있게 하려고 `display:flex`를 쓨다면, Paged.js가 flex 컨테이너 내부 높이 계산을 제대로 못 해서 **예상과 달리 자식 요소가 다음 페이지로 통째로 밀려나간다** (제목만 남고 삽화는 혼자 다음 장으로 가는 식). 한 페이지에 여러 요소를 묶을 때는 **평범한 블록 흐름(margin/padding)만으로** 레이아웃하고 flexbox/grid는 피할 것. 또한 제목과 그 바로 뒤에 오는 이미지 문단을 따로 처리하지 말고, 한 번의 정규식으로 단락(제목 헤딩 + 바로 뒤 이미지 단락)을 함께 매칭해서 **하나의 div로 합쳐넣으면** 둘이 한 덩어리로 취급되어 분리될 확률이 줄어든다. ## 스타일 참고 색은 절제된 포인트 컬러 1개(골드/앰버 등)만 쓰고, 여백을 넉넉히 준다. 장 오프너는 "CH.01" 같은 뱃지 + 큰 제목, 인용구는 왼쪽 세로선 + 이탤릭으로 처리하면 무난하게 "책스럽다". --- # 표지 · 판매 플랫폼 이미지 밤밤 이름으로 나가는 책·강의 상품이면 표지와 스토어 이미지를 **겟백 브랜드 시스템**으로 만든다. 임의로 예쁜 스타일을 지어내지 말 것. ## 브랜드 규격 (정본: `~/Projects/getback/마케팅/insane-design/get100/design.md`) 작업 전에 위 문서를 먼저 읽고, 실제 홈페이지(get100.co.kr)도 한 번 열어본다. - 배경은 **순백이 아니라 오프화이트 `#f5f5f0`** - 색은 검정 `#0d0d0d`, 라임 `#D4F000`, 퍼플 `#7B2FFF` 세 개만. **퍼플이 주인공, 라임이 강조** - 네오브루탈리즘: 테두리 검정 4~6px, **하드 오프셋 그림자 `Npx Npx 0 0 #0d0d0d`(블러 0)**, 모서리 둥글림 0 - 폰트 Pretendard, 헤딩 weight 800, `letter-spacing:-.03em~-.04em` - 제목 강조는 ``에 `background:#D4F000; box-shadow:0 0 0 5px #D4F000`(형광펜 효과) ## 밤밤이 싫어한 것 (실측) - **텍스트만 얹은 표지**: "텍스트만 얹은 것 같다"고 반려됨. 그래픽 장치가 최소 하나는 있어야 한다 - **썸네일 가운데 스펙 카드**: 작은 목록에서 지저분해 보임. "그냥 밑에 띠지만 있는게 딱 낫다" - **상세페이지 본문에 블록 이미지 나열**(와디즈식): "너무 구려". 본문은 글로 두고 시각 정보는 커버/썸네일에 넣는다 확정된 형태: **썸네일 = 책 표지 그대로 + 하단 색 띠 하나**, **커버 = 왼쪽 제목 + 오른쪽 구성 카드**. ## 만년필(10000yearspen.com) 실측 규격 저장 규격과 실제 노출 규격이 다르다. **반드시 실제 크롭·표시 크기로 검증**하고 올릴 것. | 자리 | 업로드 규격 | 실제 노출 | 안전영역 | |---|---|---|---| | 커버 | 2100x900 (21:9) | **세로 중앙 382px만** 보임 (5.49:1) | y 259~641 안에 모든 요소 | | 썸네일 | 1200x1600 (3:4) | 목록에서 **102x138px** | 글자 최소 42px 이상(1200 기준) | 검증 명령: ```bash magick cover.jpg -gravity center -crop 2100x382+0+0 +repage -resize 760x check_cover.jpg magick thumb.jpg -resize 102x138! -resize 380% check_thumb.png ``` 둘 다 눈으로 읽히는지 확인한 뒤 업로드한다. ## 렌더링 절차 (함정 9~12 반영) ```js // 1) 변형마다 완성된 HTML을 파일로 저장 const css = ``; await fs.writeFile(tmp+'t_book.html', head+css+body+''); // 2) file://로 열고 PDF로 뽑는다 (screenshot 아님) await page.goto('file://'+tmp+'t_book.html', {waitUntil:'load'}); await sleep(2400); await fs.writeFile(tmp+'t_book.pdf', await page.pdf({printBackground:true, preferCSSPageSize:true, pageRanges:'1'})); ``` ```bash # 3) PNG/JPG로 변환 pdftoppm -r 96 -png -singlefile t_book.pdf r_book magick r_book.png -resize 1200x1600! -quality 93 thumb_book.jpg ``` **서로 다른 변형인데 결과 MD5가 같으면** 함정 11이 재발한 것이다. `md5 -q`로 매번 확인할 것. ## 만년필 업로드 자동화 상품 수정 화면의 `input[type=file]` 순서가 고정이다. | nth | 용도 | accept | |---|---|---| | 0 | 본문 삽입 이미지 | `image/*` | | 1 | 커버(21:9) | `image/*` | | 2 | 썸네일(3:4) | `image/*` | | 3 | 첨부 파일 | `.pdf,.zip,.epub` | ```js // 내 크리에이터 프로필 → 프리미엄 탭 → 수정하기(목록은 최신순) await page.locator('input[type=file]').nth(1).setInputFiles(tmp+'cover.jpg'); await sleep(4500); await page.locator('input[type=file]').nth(2).setInputFiles(tmp+'thumb.jpg'); await sleep(4500); // 저장 버튼 클릭 ``` 주의할 점 - **발행 후 가격은 못 바꾼다.** 이미지·본문은 계속 수정 가능 - **파일 첨부는 `input[type=file]`을 다시 쓰면 교체가 아니라 추가된다.** 그래서 같은 PDF가 여러 장 쌓이기 쉽다. **다만 본문의 "첨부 삭제" 버튼은 정상 동작한다** — 카드를 지우고 「저장」하면 반영된다 (2026-09-12 실측: 중복 3장 → 1장 정리 성공). - **⚠️ 정정 (2026-09-12).** 이 문서에 2026-09-08자로 "첨부 삭제가 안 되고 서버가 원래 개수로 되살린다"고 적혀 있었는데 **틀렸다. 캐시된 옛 화면을 보고 내린 오진이었다.** 만년필은 SPA라 저장 직후 같은 URL을 열면 **저장 전 상태를 그대로 돌려준다.** 반드시 쿼리스트링(`?t=`)을 붙이거나 `page.reload()`로 강제 새로고침한 뒤에 판단할 것. 본문 `innerText` 기반 개수 세기도 하이드레이션 중에는 중복해서 나오니 충분히 기다렸다 재셑할 것. - **⚠️ 저장 직후 편집기에 다시 들어가면 저장 전 본문이 뜬다.** 그 상태에서 편집해 저장하면 **방금 넣은 내용이 통째로 날아간다.** 편집기 재진입 시에는 `page.reload()` → 의도한 변경이 화면에 보이는지 확인 → 그다음에 손댈 것. - **영상 임베드가 저장 과정에서 날아갈 수 있다.** 2026-09-08 발행한 합본 상품은 유튜브 iframe이 사라지고 그 자리에 PDF 카드가 들어가 있었다(2026-09-12 만년필 개발자 제보로 발견). **발행 후에는 반드시 공개 페이지를 캐시 우회로 열어 `iframe[src*="youtube"]` 개수와 첨부 카드 개수를 세어볼 것.** - 본문 편집기(tiptap)에서 이미지를 지울 때는 한 번에 여러 개가 안 지워진다. `img`를 가진 자식 노드를 찾아 `setStartBefore`/`setEndAfter`로 하나씩 선택 후 `Delete`를 **반복**할 것 - 유료 경계(`.node-paywallBlock`)를 기준으로 무료 공개 비율이 자동 계산된다. 편집 후 `여기부터 유료 / 공개 N%` 문구로 확인 - 영상은 유튜브 링크를 본문에 붙이면 임베드된다. 별도 이동 없이 결제 후 바로 재생됨