재단선 밖으로 이미지를 여유 있게 더 그려두는 인쇄 여백. 칼선이 살짝 밀려도 흰 여백이 생기지 않습니다.
디자인 아틀라스<div class="board">
<div class="sheet">
<div class="art" id="art"></div>
<div class="trim"></div>
<span class="lbl lt">trim</span>
<span class="lbl lb">bleed</span>
</div>
<div class="tag" id="tag"></div>
</div>.board{position:relative;width:100%;height:100%;display:grid;place-items:center}
.sheet{position:relative;height:72%;aspect-ratio:3/4;outline:2px dashed var(--accent-2);outline-offset:14px}
.trim{position:absolute;inset:0;border:1.5px solid var(--fg);pointer-events:none}
.art{position:absolute;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-3));transition:inset .9s cubic-bezier(.4,0,.2,1)}
.art.short{inset:16%}
.art.full{inset:-14px}
.lbl{position:absolute;font:700 8px/1 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.lt{top:-13px;left:0}
.lb{top:-13px;right:0}
.tag{position:absolute;bottom:7%;font:600 11px/1.3 system-ui,sans-serif;color:var(--muted);text-align:center;padding:0 6%}const art = document.getElementById('art');
const tag = document.getElementById('tag');
let short = true;
function apply(){
art.className = 'art ' + (short ? 'short' : 'full');
tag.textContent = short ? '재단선 안쪽에서 끝남 — 밀리면 흰 여백' : '도련선까지 확장 — 밀려도 안전';
}
apply();
setInterval(() => { short = !short; apply(); }, 1900);종이는 인쇄 후 재단기로 잘라내는데, 칼날이 매번 오차 없이 정확히 맞지는 않습니다. 배경이나 이미지가 재단선(트림)에 딱 맞춰 끝나 있으면 칼이 아주 살짝만 밀려도 흰 종이 여백이 그대로 드러납니다.
그래서 배경·이미지를 재단선 바깥으로 보통 3mm(문서에 따라 2~5mm)까지 더 확장해서 인쇄합니다. 이 여유분이 도련이고, 도련의 바깥쪽 경계가 도련선입니다. 재단선은 실제로 잘릴 위치, 도련선은 "여기까지는 그림을 채워 달라"는 안전선입니다.
데모는 두 상태를 번갈아 보여줍니다 — 그림이 재단선 안쪽에서 끝나면(위험) 살짝만 밀려도 흰 테두리가 남고, 도련선까지 확장하면(안전) 칼이 어느 쪽으로 밀리든 색이 가득 찹니다.
배경색·사진이 페이지 가장자리에 닿는 모든 인쇄물(명함, 포스터, 브로슈어)에서 필수입니다. 반대로 텍스트나 로고는 재단선에서 최소 3~5mm 안쪽으로 여유(세이프존)를 둡니다.