마춤새 - 인쇄 규격·확장자 변환기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="theme-color" content="#f6f8fd" />  <meta http-equiv="Content-Security-Policy" content=" default-src 'none'; script-src 'self' 'unsafe-inline' blob: data: https://cdn.jsdelivr.net https://fastly.jsdelivr.net https://unpkg.com https://tistory1.daumcdn.net https://t1.daumcdn.net; style-src 'self' 'unsafe-inline' https://tistory1.daumcdn.net https://t1.daumcdn.net; img-src 'self' blob: data:; font-src 'self' data: https://tistory1.daumcdn.net https://t1.daumcdn.net; worker-src blob: https://cdn.jsdelivr.net https://fastly.jsdelivr.net https://unpkg.com; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; "> <meta name="referrer" content="no-referrer"> <meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=(), gyroscope=(), magnetometer=(), usb=(), payment=()" /> <title>마춤새 - 인쇄 규격·확장자 변환기</title> <style> :root{ --bg:#f6f8fd; --panel:#ffffff; --panel2:#f9fbff; --border:#e5e7eb; --text:#0f172a; --muted:#475569; --accent:#db6aa3; --accent2:#7c9cff; --accentGrad:linear-gradient(135deg,#db6aa3 0%,#7c9cff 100%); --chip:#eef2ff; --chipBorder:#dbeafe; --shadow:0 12px 30px rgba(2,6,23,.08); --radius:16px;} *{box-sizing:border-box} html,body{height:100%} body{margin:0;background: radial-gradient(900px 420px at 8% -10%, rgba(219,106,163,.18), transparent 55%), radial-gradient(820px 480px at 110% 10%, rgba(124,156,255,.15), transparent 55%), var(--bg); color:var(--text); font-family: system-ui,-apple-system,Pretendard,Apple SD Gothic Neo,Segoe UI,Roboto,Helvetica,Arial,sans-serif} .wrap{padding:24px 18px} .title{font-weight:900;font-size:26px;margin:0 0 6px;background:var(--accentGrad);-webkit-background-clip:text;background-clip:text;color:transparent} .sub{color:var(--muted);font-size:13px;margin:0 0 18px;line-height:1.7} .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px} @media (max-width:1100px){.grid{grid-template-columns:1fr;gap:12px}} .card{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)} .card h2{margin:0 0 12px;font-size:15px;letter-spacing:.2px} .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media (max-width:760px){.row{grid-template-columns:1fr}} label{display:block;font-size:12px;margin:6px 0 6px;color:#64748b} select,input[type="number"],input[type="text"],input[type="file"],button{ width:100%;padding:12px;border-radius:12px;border:1px solid var(--border); background:#ffffff;color:var(--text);outline:none;transition:box-shadow .15s ease, transform .06s ease} select:focus,input:focus{box-shadow:0 0 0 2px rgba(219,106,163,.28)} button{cursor:pointer;border-color:transparent;font-weight:800;background:var(--accentGrad);color:#ffffff;letter-spacing:.2px} button:hover{transform:translateY(-1px)} button.secondary{background:#ffffff;color:#0f172a;border:1px solid var(--border);font-weight:700} .muted{color:var(--muted)} .mono{font-family:ui-monospace,Menlo,Consolas,monospace} .drop{border:1.5px dashed #cbd5e1;border-radius:14px;padding:14px;text-align:center;margin-top:8px;background:#f8fafc;transition:background .15s ease} .drop.over{background:#eef2ff} .list{max-height:320px;overflow:auto;padding:6px;border:1px dashed var(--border);border-radius:12px;background:#f8fafc} .item{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px dashed #eaeef3} .item:last-child{border-bottom:0} .pill{font-size:11px;background:var(--chip);padding:2px 6px;border-radius:999px;border:1px solid var(--chipBorder);color:#1e293b} .outputs{margin-top:6px} .outputs a{display:inline-block;margin:6px 8px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#eef2ff;color:#0f172a;text-decoration:none;cursor:pointer;user-select:none;transition:transform .06s ease} .outputs a:hover{transform:translateY(-1px)} .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .hint{font-size:11px;color:var(--muted);margin-top:6px} .footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);font-size:11.5px;line-height:1.72;color:var(--muted)} .ok{color:#16a34a}.warn{color:#b45309}.err{color:#b91c1c} pre#log{white-space:pre-wrap;background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:10px;margin-top:10px;max-height:260px;overflow:auto;color:#111827} </style> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/style/revenue.css"/> <link rel="canonical" href="https://uplifestyle.tistory.com/586"/>  <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://uplifestyle.tistory.com/586","name":null},"url":"https://uplifestyle.tistory.com/586","headline":"마춤새 - 인쇄 규격·확장자 변환기","description":"마춤새 — 인쇄 규격·확장자 변환기 이미지·PDF·SVG·TIFF를 A/B시리즈·레터·명함 등 인쇄 규격으로 맞추고 PNG·JPG·WEBP·PDF로 변환합니다. 72/150/300/600 DPI, 도련·여백·크롭마크·안전영역, N-up(라벨/스티커) 지원. 마춤새 ⓒ 2025 Happycode7. All rights reserved. 허가 없이 복제, 수정, 재배포할 수 없습니다. 규격 · 단위 프리셋 방향 세로가로 가로 세로 단위 mminchpx DPI ..","author":{"@type":"Person","name":"Happycode7","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fb7s2UE%2FbtsQaMSHWqA%2FAAAAAAAAAAAAAAAAAAAAANCUdeHSe7kzK4_P5kMxqKPUapIYucgO1kcyu234Hrvf%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DZpWS91sNyyEpw8QHPYjkmJP96yY%253D","width":"800px","height":"800px"},"datePublished":"2025-08-29T13:33:18+09:00","dateModified":"2025-11-12T05:49:44+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script>  <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/script/common.js"></script> </head> <body> <div class="wrap"> <h1 class="title">마춤새 — 인쇄 규격·확장자 변환기</h1> <p class="sub"> 이미지·PDF·SVG·TIFF를 A/B시리즈·레터·명함 등 인쇄 규격으로 맞추고 PNG·JPG·WEBP·PDF로 변환합니다. 72/150/300/600 DPI, 도련·여백·크롭마크·안전영역, N-up(라벨/스티커) 지원. <b>마춤새 ⓒ 2025 Happycode7. All rights reserved. 허가 없이 복제, 수정, 재배포할 수 없습니다.</b> </p> <div class="grid">  <div class="card"> <h2>규격 · 단위</h2> <div class="row"> <div><label>프리셋</label><select id="preset"></select></div> <div><label>방향</label> <select id="orient"><option value="P">세로</option><option value="L">가로</option></select> </div> </div> <div class="row"> <div><label>가로</label><input id="w" type="number" min="1" step="0.01" value="210"></div> <div><label>세로</label><input id="h" type="number" min="1" step="0.01" value="297"></div> </div> <div class="row"> <div><label>단위</label> <select id="unit"><option value="mm">mm</option><option value="in">inch</option><option value="px">px</option></select> </div> <div><label>DPI</label> <select id="dpi"><option>72</option><option>150</option><option selected>300</option><option>600</option></select> </div> </div> <div class="row"> <div><label>도련(bleed, mm)</label><input id="bleed" type="number" min="0" step="0.1" value="0"></div> <div><label>맞춤 방식</label> <select id="fit"><option value="contain">여백 포함(전체 넣기)</option><option value="cover">잘라내고 채우기</option><option value="stretch">비율 무시(늘림)</option></select> </div> </div> <h2 style="margin-top:14px">배치 · 표시</h2> <div class="row"> <div> <label>N-up (가로×세로)</label> <div class="row"><input id="cols" type="number" min="1" step="1" value="1"><input id="rows" type="number" min="1" step="1" value="1"></div> </div> <div> <label>칸 간격(mm)</label> <div class="row"><input id="gapx" type="number" min="0" step="0.1" value="0"><input id="gapy" type="number" min="0" step="0.1" value="0"></div> </div> </div> <div class="row"> <div><label>바깥 여백(mm)</label><input id="margin" type="number" min="0" step="0.1" value="0"></div> <div><label>안전영역(mm)</label><input id="safe" type="number" min="0" step="0.1" value="0"></div> </div> <div class="row"> <div><label>크롭마크</label><select id="crop"><option value="off">표시 안 함</option><option value="on">표시</option></select></div> <div><label>자동 회전</label><select id="autorotate"><option value="on">사용</option><option value="off">미사용</option></select></div> </div> <h2 style="margin-top:14px">출력 · 형식</h2> <div class="row"> <div><label>출력 형식</label> <select id="fmt"><option value="png">PNG</option><option value="jpeg">JPEG</option><option value="webp">WEBP</option><option value="pdf">PDF</option></select> </div> <div><label>품질(JPEG/WEBP)</label><input id="q" type="number" step="0.05" min="0.1" max="1" value="0.85"></div> </div> <div class="row"> <div> <label>PDF 입력 처리</label> <select id="pdfMode"><option value="img">페이지별 이미지</option><option value="pdf">새 규격 PDF 재작성</option></select> <div class="hint">N-up은 이미지/SVG/TIFF에 우선 적용됩니다.</div> </div> <div> <label>ZIP로 묶기</label> <select id="zipAll"><option value="no">아니오</option><option value="yes" selected>예</option></select> </div> </div> <div> <label>파일명 템플릿</label> <input id="nameTpl" type="text" value="{name}_{dpi}dpi_{wpx}x{hpx}.{ext}"> <div class="hint">가능: {name},{ext},{dpi},{wpx},{hpx},{wmm},{hmm},{trim_wmm},{trim_hmm},{page},{index}</div> </div> </div>  <div class="card"> <h2>파일</h2> <label>가져오기</label> <input id="file" type="file" multiple accept="image/*,application/pdf,.svg,.tif,.tiff"> <div id="drop" class="drop">드래그하여 놓으세요 (PNG/JPG/WEBP/SVG/TIFF, PDF)</div> <div id="list" class="list" style="margin:10px 0 6px"></div> <div class="toolbar"> <button id="run">선택 규격으로 변환</button> <button id="saveZip" class="secondary" title="여러 파일을 ZIP으로 저장">ZIP 저장</button> </div> <div id="out" class="outputs"></div> <pre id="log" class="mono"></pre> <div class="hint">저장이 막히면 위 결과 링크를 클릭해 저장하세요. Safari는 환경설정 ▶ 웹사이트 ▶ 다운로드 허용을 확인하세요.</div> </div> </div> <div class="footer"> <div><b>면책조항</b>: 브라우저에서 동작합니다. 색공간/폰트/복잡한 PDF(양식·투명·레이어), 대용량 TIFF/HEIC 등은 결과 차이가 있을 수 있습니다. 상업 인쇄 전 교정 확인을 권장합니다.</div> <div><b>마춤새 ⓒ 2025 Happycode7. All rights reserved. 허가 없이 복제, 수정, 재배포할 수 없습니다.</b></div> </div> </div> <script> (function(){ function $(id){return document.getElementById(id)} /* ===== 보안/안정 상수 ===== */ const MAX_FILES = 60; const MAX_FILE_BYTES = 60 * 1024 * 1024; const MAX_TOTAL_BYTES = 300 * 1024 * 1024; const MAX_CANVAS_PX = 40_000_000; /* 외부 라이브러리 로딩 (버전 고정 + 폴백) */ const jsPDF_CANDIDATES = [ "https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js", "https://fastly.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js", "https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js" ]; const JSZip_CANDIDATES = [ "https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js", "https://fastly.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js", "https://unpkg.com/jszip@3.10.1/dist/jszip.min.js" ]; /* 안정 UMD 빌드 사용: pdf.js 3.11.174 (4.x 사용 안 함) */ const PDFJS_CANDIDATES = [ "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js", "https://fastly.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.min.js", "https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.min.js" ]; /* ===== 안전한 UTIF 로더 (중복/경합 방지) ===== */ (function(){ if (window.ensureUTIF) return; const CANDIDATES = [ "https://cdn.jsdelivr.net/npm/utif@3.1.0/dist/UTIF.min.js", "https://fastly.jsdelivr.net/npm/utif@3.1.0/dist/UTIF.min.js", "https://unpkg.com/utif@3.1.0/dist/UTIF.min.js", "https://unpkg.com/utif@2.0.1/dist/UTIF.min.js", "https://cdn.jsdelivr.net/gh/photopea/UTIF.js/UTIF.min.js" ]; function hasUTIF(){ return !!(window.UTIF && typeof window.UTIF.decode === 'function'); } function loadScript(u){ return new Promise((resolve, reject)=>{ const s=document.createElement('script'); s.src=u; s.async=true; /* CORS 차단/ nosniff 거부 회피: crossOrigin 미지정 */ s.referrerPolicy='no-referrer'; s.onload=()=>resolve(u); s.onerror=()=>reject(new Error('load fail '+u)); (document.head||document.documentElement).appendChild(s); }); } async function tryLoadOnce(){ if (hasUTIF()) return true; let lastErr; for (const u of CANDIDATES){ try{ await loadScript(u); if (hasUTIF()) return true; }catch(e){ lastErr=e; } } throw lastErr || new Error('UTIF load failed'); } let inflight=null; window.ensureUTIF=function(){ if (hasUTIF()) return Promise.resolve(true); if (!inflight) inflight = tryLoadOnce().finally(()=>{ inflight=null; }); return inflight; }; })(); function logln(s){ const el = $("log"); if(!el) return; el.textContent += (s + "\n"); el.scrollTop = el.scrollHeight; } function clearLog(){ $("log").textContent = "" } function loadScript(src, opts){ return new Promise((res, rej)=>{ const s = document.createElement('script'); if (opts && opts.module) s.type = 'module'; s.src = src; s.referrerPolicy = "no-referrer"; /* CORS 이슈 방지: crossOrigin 미설정 */ s.onload = res; s.onerror = ()=>rej(new Error("load fail " + src)); document.head.appendChild(s); }); } async function loadWithFallback(list){ let last; for(const u of list){ try{ await loadScript(u); return; }catch(e){ last = e; } } throw last || new Error("all candidates failed"); } /* ===== 유틸 ===== */ function pad2(n){return (n<10?'0':'')+n} function ts(){const d=new Date();return d.getFullYear()+""+pad2(d.getMonth()+1)+pad2(d.getDate())+"-"+pad2(d.getHours())+pad2(d.getMinutes())} function sanitizeFileName(name){ return (name||"output").replace(/[\\/:*?"<>|\u0000-\u001F]/g,"_").replace(/\s+/g," ").trim().slice(0,120); } function formatName(tpl,ctx){ return tpl.replace(/\{(\w+)\}/g,(_,k)=>(k in ctx)?String(ctx[k]):""); } function mm2px(mm,d){return Math.round(mm*d/25.4)} function px2mm(px,d){return px*25.4/d} function in2px(ins,d){return Math.round(ins*d)} function toPx(w,h,unit,dpi){ if(unit==='mm') return [mm2px(w,dpi),mm2px(h,dpi)]; if(unit==='in') return [in2px(w,dpi),in2px(h,dpi)]; return [Math.round(w), Math.round(h)]; } /* ===== SVG 살균(강화) ===== */ function sanitizeSVGText(text){ // 스크립트/foreignObject/이벤트핸들러 제거 let t = text .replace(/<script[\s\S]*?<\/script>/gi, "") .replace(/<foreignObject[\s\S]*?<\/foreignObject>/gi, "") .replace(/\son\w+="[^"]*"/gi, "") .replace(/\son\w+='[^']*'/gi, ""); // href 계열에서 javascript:, data: 차단 t = t.replace(/\s(xlink:href|href)\s*=\s*"(.*?)"/gi, (m,attr,val)=>{ if (/^\s*(javascript:|data:)/i.test(val)) return ` ${attr}="#"`; return ` ${attr}="${val}"`; }); t = t.replace(/\s(xlink:href|href)\s*=\s*'(.*?)'/gi, (m,attr,val)=>{ if (/^\s*(javascript:|data:)/i.test(val)) return ` ${attr}='#'`; return ` ${attr}='${val}'`; }); return t; } /* ===== DOM ===== */ const presetSel=$('preset'), orient=$('orient'), wIn=$('w'), hIn=$('h'), unit=$('unit'), dpi=$('dpi'), bleed=$('bleed'), fit=$('fit'); const fmt=$('fmt'), q=$('q'), pdfMode=$('pdfMode'), zipAll=$('zipAll'), fileIn=$('file'), drop=$('drop'), list=$('list'), runBtn=$('run'); const out=$('out'), saveZipBtn=$('saveZip'), marginIn=$('margin'), safeIn=$('safe'), colsIn=$('cols'), rowsIn=$('rows'); const gapxIn=$('gapx'), gapyIn=$('gapy'), cropSel=$('crop'), autoSel=$('autorotate'), nameTplIn=$('nameTpl'); const PRESETS=[ ['자유입력','free',0,0], ['A0 (841×1189 mm)','A0',841,1189],['A1 (594×841 mm)','A1',594,841],['A2 (420×594 mm)','A2',420,594], ['A3 (297×420 mm)','A3',297,420],['A4 (210×297 mm)','A4',210,297],['A5 (148×210 mm)','A5',148,210],['A6 (105×148 mm)','A6',105,148], ['B4 (257×364 mm)','B4',257,364],['B5 (182×257 mm)','B5',182,257],['B6 (128×182 mm)','B6',128,182], ['레터 Letter (8.5×11 in)','LETTER',215.9,279.4],['리갈 Legal (8.5×14 in)','LEGAL',215.9,355.6],['탭로이드 Tabloid (11×17 in)','TABLOID',279.4,431.8], ['Executive (7.25×10.5 in)','EXEC',184.15,266.7], ['명함 KR (90×50 mm)','BC-KR',90,50],['명함 EU (85×55 mm)','BC-EU',85,55],['명함 US (3.5×2 in)','BC-US',88.9,50.8], ['포스트카드 (100×148 mm)','POST',100,148],['정사각 120×120 mm','SQ-120',120,120], ['사진 4×6 in','P-4x6',101.6,152.4],['사진 5×7 in','P-5x7',127,177.8],['사진 8×10 in','P-8x10',203.2,254] ]; PRESETS.forEach(p=>{const o=document.createElement('option');o.textContent=p[0];o.value=p[1];presetSel.appendChild(o)}); presetSel.value='A4'; presetSel.addEventListener('change',()=>{ const v=presetSel.value; if(v==='free') return; const f=PRESETS.find(p=>p[1]===v); if(!f) return; wIn.value=f[2]; hIn.value=f[3]; unit.value='mm'; }); /* ===== 파일 상태 ===== */ let files=[]; function renderList(){ list.textContent=""; if(!files.length){ const div=document.createElement('div'); div.className='muted'; div.style.padding='8px'; div.textContent='선택된 파일이 없습니다.'; list.appendChild(div); return; } files.forEach((f,idx)=>{ const row=document.createElement('div'); row.className='item'; const pill=document.createElement('span'); pill.className='pill'; pill.textContent='#'+(idx+1); const info=document.createElement('div'); info.style.flex='1'; const nameDiv=document.createElement('div'); nameDiv.textContent=f.name; const meta=document.createElement('div'); meta.className='muted'; meta.style.fontSize='11px'; meta.textContent=(f.type||'')+', '+Math.round(f.size/1024)+' KB'; info.appendChild(nameDiv); info.appendChild(meta); const btn=document.createElement('button'); btn.textContent='삭제'; btn.addEventListener('click',()=>{files.splice(idx,1);renderList()}); row.appendChild(pill); row.appendChild(info); row.appendChild(btn); list.appendChild(row); }); } function addFiles(listLike){ let total = files.reduce((s,f)=>s+f.size,0); for(let i=0;i<listLike.length;i++){ const f=listLike[i]; if(!f) continue; if(files.length >= MAX_FILES){ logln("경고: 최대 파일 수 초과("+MAX_FILES+"개). 나머지는 무시됩니다."); break; } if(f.size > MAX_FILE_BYTES){ logln("경고: "+f.name+" 은(는) 60MB 초과로 제외"); continue; } total += f.size; if(total > MAX_TOTAL_BYTES){ logln("경고: 총 용량 300MB 초과. 더 이상 추가되지 않습니다."); break; } files.push(f); } renderList(); } fileIn.addEventListener('change', e=>addFiles(e.target.files)); ['dragenter','dragover'].forEach(ev=>drop.addEventListener(ev, e=>{e.preventDefault(); drop.classList.add('over')})); ['dragleave','dragend','drop'].forEach(ev=>drop.addEventListener(ev, e=>{ e.preventDefault(); if(ev==='drop'){ addFiles(e.dataTransfer.files) } drop.classList.remove('over'); })); /* ===== 목표 규격 계산/그리기 ===== */ function getTarget(){ let W=parseFloat(wIn.value||0), H=parseFloat(hIn.value||0), U=unit.value, D=parseInt(dpi.value||300), B=parseFloat(bleed.value||0), O=orient.value; if(O==='L'){ const t=W; W=H; H=t } const add=B*2; let pxW,pxH,mmW,mmH; if(U==='px'){ let baseW=W, baseH=H; if(B>0){ const addPx=mm2px(add,D); baseW+=addPx; baseH+=addPx } pxW=Math.max(1,Math.round(baseW)); pxH=Math.max(1,Math.round(baseH)); mmW=px2mm(pxW,D); mmH=px2mm(pxH,D); }else{ mmW=W+add; mmH=H+add; const px=toPx(mmW,mmH,'mm',D); pxW=px[0]; pxH=px[1]; } if(pxW*pxH > MAX_CANVAS_PX){ const scale = Math.sqrt(MAX_CANVAS_PX/(pxW*pxH)); pxW = Math.floor(pxW*scale); pxH = Math.floor(pxH*scale); mmW = px2mm(pxW, D); mmH = px2mm(pxH, D); logln("경고: 캔버스 픽셀 한도에 맞춰 자동 축소 적용 ("+pxW+"×"+pxH+" px)"); } return {pxW,pxH,mmW,mmH,dpi:D,bleedMm:B,trimMmW:mmW-2*B,trimMmH:mmH-2*B}; } function drawCropMarks(ctx,target){ if(cropSel.value!=='on') return; const D=target.dpi, B=target.bleedMm, trimW=target.trimMmW, trimH=target.trimMmH; if(B<=0) return; const mark=3, off=0.2; const x0=mm2px(B-off,D), y0=mm2px(B-off,D), x1=mm2px(B+trimW+off,D), y1=mm2px(B+trimH+off,D), len=mm2px(mark,D); ctx.save(); ctx.strokeStyle='rgba(0,0,0,.8)'; ctx.lineWidth=.8; ctx.beginPath(); ctx.moveTo(x0-len,y0);ctx.lineTo(x0,y0);ctx.lineTo(x0,y0-len); ctx.moveTo(x1+len,y0);ctx.lineTo(x1,y0);ctx.lineTo(x1,y0-len); ctx.moveTo(x0-len,y1);ctx.lineTo(x0,y1);ctx.lineTo(x0,y1+len); ctx.moveTo(x1+len,y1);ctx.lineTo(x1,y1);ctx.lineTo(x1,y1+len); ctx.stroke(); ctx.restore(); } function drawSafety(ctx,target){ const safe=parseFloat(safeIn.value||0); if(!(safe>0)) return; const D=target.dpi; const x=mm2px(target.bleedMm+safe,D), y=mm2px(target.bleedMm+safe,D); const w=mm2px(target.trimMmW-2*safe,D), h=mm2px(target.trimMmH-2*safe,D); ctx.save(); ctx.setLineDash([6,4]); ctx.strokeStyle='rgba(0,0,0,.55)'; ctx.lineWidth=1; ctx.strokeRect(x,y,w,h); ctx.restore(); } function placeOne(ctx,img,boxW,boxH,boxX,boxY){ const sw=img.naturalWidth||img.videoWidth||img.width, sh=img.naturalHeight||img.videoHeight||img.height; const arS=sw/sh, arB=boxW/boxH, mode=fit.value; let rotate=0; if(autoSel.value==='on'){ const scaleNoRot=Math[mode==='cover'?'max':'min'](boxW/sw, boxH/sh); const scaleRot=Math[mode==='cover'?'max':'min'](boxW/sh, boxH/sw); if(scaleRot>scaleNoRot) rotate=90; } ctx.save(); ctx.imageSmoothingQuality='high'; if(rotate){ ctx.translate(boxX+boxW/2,boxY+boxH/2); ctx.rotate(Math.PI/2); boxX=-boxH/2; boxY=-boxW/2; const t=boxW; boxW=boxH; boxH=t; } if(mode==='stretch'){ ctx.drawImage(img,boxX,boxY,boxW,boxH) } else if((mode==='contain' && arS>arB) || (mode==='cover' && arS<arB)){ let tw=boxW, th=boxW/arS; if(mode==='cover'){ th=boxH; tw=th*arS } const dx=boxX+(boxW-tw)/2, dy=boxY+(boxH-th)/2; ctx.drawImage(img,dx,dy,tw,th); }else{ let th2=boxH, tw2=boxH*arS; if(mode==='cover'){ tw2=boxW; th2=tw2/arS } const dx2=boxX+(boxW-tw2)/2, dy2=boxY+(boxH-th2)/2; ctx.drawImage(img,dx2,dy2,tw2,th2); } ctx.restore(); } function saveLinkForBlob(blob,name,autoClick){ const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=name; a.rel='noopener'; a.textContent='⤓ '+name; a.addEventListener('click', ()=>{ setTimeout(()=>URL.revokeObjectURL(a.href), 4000); }, {once:true}); out.appendChild(a); if(autoClick){ try{ a.click() }catch(_){ } } } async function rasterFromTIFF(file){ try{ await window.ensureUTIF(); }catch(_){ throw new Error('TIFF 라이브러리를 불러오지 못했습니다') } try{ const ab=await file.arrayBuffer(); const ifds=window.UTIF.decode(ab); if(window.UTIF.decodeImages) window.UTIF.decodeImages(ab, ifds); else if(window.UTIF.decodeImage) window.UTIF.decodeImage(ab, ifds[0]); else throw new Error('UTIF API 없음'); const rgba=window.UTIF.toRGBA8(ifds[0]); const w=ifds[0].width, h=ifds[0].height; const c=document.createElement('canvas'); c.width=w; c.height=h; const ctx=c.getContext('2d'); const id=ctx.createImageData(w,h); id.data.set(rgba); ctx.putImageData(id,0,0); const img=new Image(); img.decoding='async'; img.referrerPolicy='no-referrer'; img.src=c.toDataURL('image/png'); await new Promise(res=>img.onload=res); return img; }catch(e){ throw new Error('TIFF 처리 실패') } } async function imageFromFile(file){ const type=(file.type||'').toLowerCase(); if(type.includes('tif') || /\.(tif|tiff)$/i.test(file.name)) return rasterFromTIFF(file); if(type.includes('image') || /\.(png|jpe?g|webp|gif|bmp|svg)$/i.test(file.name)){ if(/\.svg$/i.test(file.name) || type.includes('svg')){ const raw=await file.text(); const safe= sanitizeSVGText(raw); const svg='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(safe); const img=new Image(); img.decoding='async'; img.referrerPolicy='no-referrer'; await new Promise((res,rej)=>{ img.onload=res; img.onerror=()=>rej(new Error('SVG 로드 실패')); img.src=svg; }); return img; }else{ const buf=await file.arrayBuffer(); const blob=new Blob([buf]); const url=URL.createObjectURL(blob); const img=new Image(); img.decoding='async'; img.referrerPolicy='no-referrer'; await new Promise((res,rej)=>{ img.onload=res; img.onerror=()=>rej(new Error('이미지 로드 실패')); img.src=url; }); URL.revokeObjectURL(url); return img; } } throw new Error('이미지/벡터가 아님'); } async function composePageCanvas(target,images){ const c=document.createElement('canvas'); c.width=target.pxW; c.height=target.pxH; if(c.width * c.height > MAX_CANVAS_PX) throw new Error('캔버스 한도 초과'); const ctx=c.getContext('2d'); if(fmt.value==='jpeg'){ ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,c.width,c.height) } const D=target.dpi, marginMm=parseFloat(marginIn.value||0); const workX=mm2px(target.bleedMm+marginMm,D), workY=mm2px(target.bleedMm+marginMm,D); const workW=mm2px(target.trimMmW-2*marginMm,D), workH=mm2px(target.trimMmH-2*marginMm,D); const cols=Math.max(1,parseInt(colsIn.value||1)), rows=Math.max(1,parseInt(rowsIn.value||1)); const gapX=mm2px(parseFloat(gapxIn.value||0),D), gapY=mm2px(parseFloat(gapyIn.value||0),D); const cellW=Math.floor((workW-(cols-1)*gapX)/cols), cellH=Math.floor((workH-(rows-1)*gapY)/rows); for(let r=0;r<rows;r++){ for(let cidx=0;cidx<cols;cidx++){ const i=r*cols+cidx; if(i>=images.length) break; const boxX=workX+cidx*(cellW+gapX), boxY=workY+r*(cellH+gapY); placeOne(ctx,images[i],cellW,cellH,boxX,boxY); } } drawCropMarks(ctx,target); drawSafety(ctx,target); return c; } async function handleImagesAsPages(filesSlice,target){ const cols=Math.max(1,parseInt(colsIn.value||1)), rows=Math.max(1,parseInt(rowsIn.value||1)), perPage=cols*rows; const pages=[]; for(let i=0;i<filesSlice.length;i+=perPage){ const chunk=filesSlice.slice(i,i+perPage); const imgs=[]; for(const f of chunk){ imgs.push(await imageFromFile(f)) } pages.push(await composePageCanvas(target,imgs)); } return pages; } async function handlePDFFile(file,target){ const ab=await file.arrayBuffer(); if(!window.pdfjsLib){ try{ await loadWithFallback(PDFJS_CANDIDATES); }catch(e){ throw new Error('PDF 라이브러리를 불러오지 못했습니다'); } } try { window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js"; } catch(_) {} const pdf=await window.pdfjsLib.getDocument({data:ab}).promise; const canvases=[]; for(let p=1;p<=pdf.numPages;p++){ const page=await pdf.getPage(p); const scale=target.dpi/72; const viewport=page.getViewport({scale}); const c=document.createElement('canvas'); const ctx=c.getContext('2d'); c.width=Math.round(viewport.width); c.height=Math.round(viewport.height); if(c.width * c.height > MAX_CANVAS_PX) throw new Error('PDF 페이지 캔버스 한도 초과'); await page.render({canvasContext:ctx,viewport}).promise; canvases.push(c); } if(fmt.value==='pdf' && pdfMode.value==='pdf'){ const mmW=target.mmW, mmH=target.mmH; if(!window.jspdf?.jsPDF){ await loadWithFallback(jsPDF_CANDIDATES); } const doc=new window.jspdf.jsPDF({orientation:mmW>=mmH?'l':'p',unit:'mm',format:[mmW,mmH]}); canvases.forEach((cv,i)=>{ if(i>0) doc.addPage([mmW,mmH], mmW>=mmH?'l':'p'); const data=cv.toDataURL('image/jpeg',.95); doc.addImage(data,'JPEG',0,0,mmW,mmH); }); const outBlob=doc.output('blob'); const base = sanitizeFileName(file.name.replace(/\.[^.]+$/,'')); return [{blob:outBlob, name: base+'_reflow_'+Math.round(mmW)+'x'+Math.round(mmH)+'mm_'+target.dpi+'dpi.pdf'}]; }else{ const outs=[]; for(let i=0;i<canvases.length;i++){ const b = await new Promise(res=>canvases[i].toBlob(bb=>res(bb), 'image/'+(fmt.value==='pdf'?'png':fmt.value), parseFloat(q.value||.9))); const ext=(fmt.value==='jpeg'?'jpg': fmt.value==='pdf'?'png': fmt.value); const base = sanitizeFileName(file.name.replace(/\.[^.]+$/,'')); outs.push({blob:b, name: base+'_p'+(i+1)+'_'+canvases[i].width+'x'+canvases[i].height+'.'+ext, page:i+1}); } return outs; } } async function exportPages(pages,target,baseName){ if(fmt.value==='pdf'){ const mmW=target.mmW, mmH=target.mmH; if(!window.jspdf?.jsPDF){ await loadWithFallback(jsPDF_CANDIDATES); } const doc=new window.jspdf.jsPDF({orientation:mmW>=mmH?'l':'p',unit:'mm',format:[mmW,mmH]}); pages.forEach((c,i)=>{ if(i>0) doc.addPage([mmW,mmH], mmW>=mmH?'l':'p'); const data=c.toDataURL('image/jpeg', .95); doc.addImage(data,'JPEG',0,0,mmW,mmH); }); const outBlob=doc.output('blob'); const nm=formatName(nameTplIn.value,{name:baseName,ext:'pdf',dpi:target.dpi,wpx:target.pxW,hpx:target.pxH,wmm:Math.round(target.mmW),hmm:Math.round(target.mmH),trim_wmm:Math.round(target.trimMmW),trim_hmm:Math.round(target.trimMmH),page:1,index:1}); return [{blob:outBlob, name: sanitizeFileName(nm)}]; }else{ const outs=[]; for(let i=0;i<pages.length;i++){ const b=await new Promise(res=>pages[i].toBlob(bb=>res(bb), 'image/'+fmt.value, parseFloat(q.value||.9))); const ext2=(fmt.value==='jpeg'?'jpg':fmt.value); const nm2=formatName(nameTplIn.value,{name:baseName,ext:ext2,dpi:target.dpi,wpx:target.pxW,hpx:target.pxH,wmm:Math.round(target.mmW),hmm:Math.round(target.mmH),trim_wmm:Math.round(target.trimMmW),trim_hmm:Math.round(target.trimMmH),page:i+1,index:i+1}); outs.push({blob:b, name: sanitizeFileName(nm2)}); } return outs; } } async function run(kind){ clearLog(); out.textContent = ""; if(!files.length){ logln("파일을 추가하세요."); return; } const target=getTarget(); logln('목표 규격: '+Math.round(target.mmW*10)/10+'×'+Math.round(target.mmH*10)/10+' mm @ '+target.dpi+' DPI ('+target.pxW+'×'+target.pxH+' px), 도련 '+target.bleedMm+' mm'); const imgs=[], pdfs=[], others=[]; for(const f of files){ const t=(f.type||'').toLowerCase(); if(t.includes('pdf') || /\.pdf$/i.test(f.name)) pdfs.push(f); else if(t.includes('image') || /\.(svg|tif|tiff)$/i.test(f.name)) imgs.push(f); else others.push(f); } const allOut=[]; if(imgs.length){ logln('이미지/벡터 '+imgs.length+'개 처리 (N-up 배치)'); try{ const pages=await handleImagesAsPages(imgs,target); const outs=await exportPages(pages,target,'images'); outs.forEach(o=>{ allOut.push(o); saveLinkForBlob(o.blob,o.name,false) }); logln('이미지 배치 완료: '+pages.length+' 페이지'); }catch(err){ logln('오류(이미지): '+err.message) } } for(const fpdf of pdfs){ logln('PDF 처리중: '+fpdf.name); try{ if(!window.pdfjsLib){ await loadWithFallback(PDFJS_CANDIDATES); try { window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js"; } catch (_) {} } const outs=await handlePDFFile(fpdf,target); outs.forEach(o=>{ allOut.push(o); saveLinkForBlob(o.blob,o.name,false) }); logln('완료: '+fpdf.name+' → '+outs.length+'개 결과'); }catch(err){ logln('오류(PDF): '+err.message) } } if(others.length) logln('지원하지 않는 형식: '+ others.map(f=>f.name).join(', ')); if((zipAll.value==='yes' || kind==='zip') && allOut.length>0){ try{ if(!window.JSZip) await loadWithFallback(JSZip_CANDIDATES); logln('ZIP 묶는 중…'); const z=new window.JSZip(); allOut.forEach(o=>z.file(o.name,o.blob)); const zipBlob=await z.generateAsync({type:'blob'}); const zipName='machumsae_'+ts()+'.zip'; saveLinkForBlob(zipBlob, zipName, true); logln('ZIP 생성 완료'); }catch(err){ logln('ZIP 생성 오류: '+err.message) } } logln('모든 작업이 끝났습니다. 필요시 위 링크를 클릭해 저장하세요.'); } // Blob URL 회수 보증(페이지 이탈/새로고침 시 정리) const __hc7_blobs = new Set(); const __origCreate = URL.createObjectURL; const __origRevoke = URL.revokeObjectURL; URL.createObjectURL = function(obj){ const u = __origCreate.call(URL, obj); try { __hc7_blobs.add(u); } catch(_) {} return u; }; URL.revokeObjectURL = function(u){ try { __hc7_blobs.delete(u); } catch(_) {} return __origRevoke.call(URL, u); }; window.addEventListener('beforeunload', () => { try { __hc7_blobs.forEach(u => { try{ __origRevoke.call(URL, u); }catch(_){} }); __hc7_blobs.clear(); } catch(_) {} }); runBtn.addEventListener('click', ()=>run('normal')); saveZipBtn.addEventListener('click', ()=>run('zip')); })(); </script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-91597a4fd4b809d820e03b8cb7c3f10bb5ffa703/static/script/common.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"7718720-586","customProps":{"userId":"0","blogId":"7718720","entryId":"586","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"586","entryTitle":"마춤새 - 인쇄 규격·확장자 변환기","entryType":"POST","categoryName":"+실생활에 필요한 소프트웨어","categoryId":"1219766","serviceCategoryName":"IT 인터넷","serviceCategoryId":401,"author":"7140437","authorNickname":"Happycode7","blogNmae":"Happycode7","image":"kage@b7s2UE/btsQaMSHWqA/gMmVR4TKePCStmfSEKyPX1","plink":"/586","tags":["PDF","PDF변환","규격변환","마춤새","용지규격","용지규격변환","인쇄규격","인쇄규격변환","크기맞춤","확장자변환"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null","thirdProvideAgree":null}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.7/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

'+실생활에 필요한 소프트웨어' 카테고리의 다른 글

경제 블록 퍼즐 (0)	2025.09.03
첫 팬이 주는 스포츠 훈련 도구 – 실시간 포즈 비교·훈련 보조 (6)	2025.08.31
OCR과 배열함수 - 이미지에서 시트까지, LOOKUP 자동화 (13)	2025.08.26
망태 부인 - 조작목소리 감별기 (13)	2025.08.24
명태 – 문서 진위·전세사기 위험 점검 도구 (2)	2025.08.22

마춤새 - 인쇄 규격·확장자 변환기

'+실생활에 필요한 소프트웨어' 카테고리의 다른 글

관련글

티스토리툴바