AI와 함께 만든 3단 브로셔 — HTML로 디자인하고 Chrome으로 인쇄까지

2026-06-23 ·고잉 브로셔 브로셔인쇄HTMLAstroGhostscriptAI협업고잉

회사 브로셔를 새로 만들어야 했습니다. 디자이너에게 의뢰할 일정도 예산도 빠듯한 상황. 보통이라면 Illustrator를 켰겠지만, 이번엔 HTML/CSS로 짜고 Chrome으로 PDF 뽑아서 인쇄소로 보내는 방식을 시도했습니다. 결과적으로 A4 3단접지 + bleed + 폰트 윤곽선까지 인쇄소 요구사항을 모두 맞춘 PDF가 나왔고, 그 과정을 AI(Claude Code)와 채팅으로 한 줄씩 다듬어 갔습니다.

이 글은 그 반복(iteration) 과정의 기록입니다. 코드보다 “문제 발견 → 한 줄 지시 → 결과 확인 → 또 다음 문제” 의 흐름에 집중합니다.

결과물

먼저 최종 결과 두 페이지(외면 / 내면)입니다.

최종 브로셔 외면 — 표지 + 회사정보 + 솔루션 요약

최종 브로셔 내면 — Integrated Solution + SENVAS HMI + SENVAS Touch

펼친 크기: A4 가로 297 × 210mm, 3단접지(각 패널 99mm)
인쇄 작업 크기: 301 × 214mm (bleed 2mm 포함)
폰트 전체 윤곽선 처리, Pretendard + SuiGeneris 임베드 → 벡터 path 변환

도구 스택

단계	도구	역할
디자인	HTML + CSS (`@page`, `position: absolute`)	3단 패널 정밀 배치
PDF 변환	Chrome Headless (`--print-to-pdf`)	HTML → PDF
윤곽선 처리	Ghostscript 10.03.1 (`-dNoOutputFonts`)	폰트 → 벡터 path
미리보기	Ghostscript (`png16m`)	페이지별 PNG 렌더
대화 인터페이스	Claude Code (Anthropic)	한국어 요구사항 → 코드 패치

@page { size: 297mm 210mm; margin: 0 } 하나로 인쇄 크기가 결정되고, 그 안에서 position: absolute로 3개 패널을 좌(0mm) / 중(99mm) / 우(198mm)에 칼처럼 배치합니다. 디자인 툴 없이도 mm 단위 레이아웃이 가능합니다.

반복 #1 — 런타임 이미지가 캡션 박스에 잘림

브로셔의 SENVAS Touch 섹션 안에 > ON-DEVICE RUNTIME 박스가 있습니다. 그 안에 들어가는 화면 캡처가 위아래로 살짝 잘려서 표시되는 게 발견됐습니다.

원인은 단순했습니다:

이미지 비율: 1024 × 614 ≈ 1.67:1
박스 스크린 영역: 81mm × 36mm ≈ 2.25:1
object-fit: cover라 가로를 채우면서 위·아래가 잘려 나간 것

해결:

박스 높이 48mm → 62mm로 키움
object-fit: cover → object-fit: contain으로 변경
캡션이 두 줄로 줄바꿈되면서 이번엔 양 옆이 비는 문제 발생 →
캡션을 font-size: 6pt, white-space: nowrap으로 한 줄에 맞춰 스크린 영역을 추가 확보

“이미지가 잘리지 않게” + “옆이 비지 않게”라는 두 요구가 동시에 맞춰질 때까지 캡션·박스 치수를 같이 조정해야 했습니다. AI한테 한 줄씩 던지고(“위쪽 텍스트 침범했잖아”, “옆부분이 조금 비는걸 채워줘”) 결과 확인하면서 5번쯤 반복.

반복 #2 — 다른 런타임 이미지로 A/B 테스트

ON-DEVICE RUNTIME 자리에 어떤 화면을 보여주는 게 좋을지 확신이 안 섰습니다. 게이지가 즐비한 온도 모니터링 화면 vs. 라인 차트 + 컨트롤이 정돈된 TEMP CONTROL SYSTEM 화면.

런타임 후보 A — 게이지 모니터링

런타임 후보 B — Temp Control System 대시보드

tone_c.html을 통째로 두지 않고 변형본을 만들어 두 PDF를 동시에 띄워 비교했습니다. AI에게 “이미지만 바꿔서 따로 하나 만들어줘” 한 줄이면 끝.

HTML 베이스라서 “이미지 src만 갈아끼우고 PDF만 새로 뽑는다” 가 거의 공짜. Illustrator였다면 파일 두 개 들고 다니며 export 두 번씩 해야 했을 작업.

반복 #3 — 인쇄소 규격에 맞추기

A/B 비교가 끝나고 인쇄소에 넘기려고 보니, 받은 안내가 만만치 않았습니다.

재단 사이즈 210 × 297mm, 작업 사이즈 214 × 301mm → bleed 2mm 추가
3단접지의 접히는면은 표지보다 2mm 짧게 (안 그러면 안쪽 접힘이 외측 접힘에 끼임)
폰트는 반드시 윤곽선 처리 후 PDF 저장 (그렇지 않은 PDF는 클레임 사유 아님)
파일명 특수문자 금지, 비-Adobe 작업은 메모란 기재

bleed 2mm 적용

@page {
  size: 301mm 214mm;  /* 297×210 + 2mm bleed */
  margin: 0;
}
.sheet {
  width: 297mm; height: 210mm;
  margin: 2mm;        /* 외곽 2mm는 #0a0c0f 배경이 채움 */
  background: #0a0c0f;
}

3단접지 2mm 룰

C-fold(letter fold) 구조상:

외면(Sheet 1) 좌측 패널 = 접히는면
내면(Sheet 2) 우측 패널 = 안쪽면(역시 접히는면)

이 두 패널의 콘텐츠를 외측으로 2mm 들여 fold 모서리에서 떨어뜨립니다:

.sheet:nth-of-type(1) > .panel.l { padding-left: 11mm; }   /* 9 + 2 */
.sheet:nth-of-type(2) > .panel.r { padding-right: 11mm; }  /* 9 + 2 */

폰트 윤곽선 처리

Chrome --print-to-pdf는 폰트를 subset embed 해주지만, 인쇄소가 요구하는 “윤곽선 만들기”는 텍스트를 벡터 path로 변환하는 것. Adobe 툴이 없어도 Ghostscript로 됩니다:

& gswin64c.exe -o output.pdf -sDEVICE=pdfwrite `
    -dNoOutputFonts -dPDFSETTINGS=/prepress input.pdf

확인은 PDF 안의 /FontName 엔트리가 0개로 줄었는지 grep:

grep -a "FontName\|BaseFont\|FontFile" output.pdf
# (empty)

반복 #4 — 인쇄소 첫 피드백

업체에서 첫 검수 후 한 줄짜리 질문이 왔습니다:

“1페이지에서 해당 점선이 의도된 것인지 물어봄”

작업할 때 패널 경계를 눈으로 확인하려고 넣어둔 가이드 라인이었습니다:

.fold {
  position: absolute; top: 3mm; bottom: 3mm;
  border-left: 0.25pt dashed rgba(255,255,255,0.1);
}
.fold.f1 { left: 99mm; }
.fold.f2 { left: 198mm; }

PDF로 빼면서 같이 인쇄될 줄 미처 못 봤습니다. 인쇄소 답변:

“의도된 것이 아닙니다. 작업 중 접지선 위치 확인용으로 넣어둔 레이아웃 가이드(dashed line)가 제거되지 않은 채 남아 있었습니다. 점선을 삭제한 수정본을 다시 업로드하였으니 새 파일로 작업 부탁드립니다.”

한 줄 패치:

.fold { display: none; }

다시 Chrome → Ghostscript 파이프라인 돌리고, 새 PDF를 같은 슬롯에 올려주는 데 5분도 안 걸렸습니다.

한 줄 빌드 파이프라인

최종적으로는 이 두 명령만 반복하면 됩니다:

# 1) HTML → PDF
chrome --headless --disable-gpu --no-margins \
       --print-to-pdf-no-header \
       --print-to-pdf=raw.pdf \
       file:///path/to/tone_c_print.html

# 2) PDF → 윤곽선 처리 PDF
gswin64c -o final.pdf -sDEVICE=pdfwrite \
         -dNoOutputFonts -dPDFSETTINGS=/prepress raw.pdf

CSS 한 줄 고치고 → Enter → 30초 후 인쇄용 PDF 갱신 완료.

회고

디자인 툴 없이도 인쇄용 결과물이 나온다

mm 단위 정밀 배치, 폰트 임베드, 벡터 그래픽, bleed — 인쇄용에 필요한 거의 모든 요소를 표준 웹 기술 + 오픈소스로 처리할 수 있었습니다. 라이선스도 필요 없고, git으로 디자인 변경 이력을 그대로 추적할 수 있다는 게 의외의 장점.

AI 협업의 진짜 가치는 “재시도가 싸지는 것”

요구사항이 명확하지 않을 때, AI한테 던지면 일단 뭔가 나옵니다. 그게 틀려도 “위로 침범했잖아” 한 줄이면 다음 시도가 옵니다. 디자인이라는 본질적으로 반복 작업인 일에 AI가 잘 맞는 이유 — 매 시도의 비용이 거의 0에 수렴하기 때문입니다.

이번 작업 중 AI에게 한 지시 중 가장 짧았던 게 “돌려…” 였습니다. 잘못된 방향으로 갔을 때 그냥 원복을 요청한 거였고, 다음 메시지에서 더 나은 접근을 같이 찾아갔습니다. 디자인 회의에서 “음… 이건 좀 아니에요” 하는 그 한 마디가 코드에서도 그대로 통합니다.

다음 시도

같은 파이프라인으로 명함 / 리플릿 / 카탈로그 시리즈화
Astro 정적 사이트에 “인쇄용 PDF 자동 빌드” 액션 붙이기 (push하면 PDF 갱신)
컬러 프로파일(CMYK 변환) — 현재는 RGB로만 작업하고 인쇄소 RIP에 위임

📎 PDF 산출물과 HTML 소스는 git으로 버전 관리됩니다. 최종 인쇄 파일은 폰트 윤곽선 처리까지 완료된 1.37 MB짜리 A4 3단접지 PDF입니다.