디자인 목업 생성기
이미지를 끌어다 놓거나 업로드하거나 붙여넣으면 웹 브라우저·폰 프레임에 즉시 합성해 Light·Dark·Gradient 테마로 보여줍니다. 고해상도 PNG로 다운로드. 모든 처리는 브라우저에서 이뤄집니다.
디자인 목업 생성기는 무엇인가요?
디자인 목업 생성기는 평범한 스크린샷이나 디자인을 브라우저 창이나 스마트폰 같은 실제 기기 프레임 안에 넣고 스타일링된 배경 위에 배치해, 완성도 높게 다듬어 바로 공유할 수 있게 만들어 줍니다. 디자이너·마케터·개발자는 포트폴리오, 랜딩 페이지, 앱스토어·플레이스토어 등록, SNS 게시물, 피칭 덱, 고객 발표자료에 이런 '맥락 이미지'가 수시로 필요합니다. 그대로의 스크린샷은 미완성으로 보이지만, 같은 이미지도 깔끔한 브라우저 크롬이나 폰 베젤 안에 들어가면 즉시 실제 제품처럼 보입니다. 기존 방식은 Photoshop 목업 템플릿, Figma 플러그인, 또는 이미지를 서버에 올리는 유료 서비스가 필요했습니다. 이 도구는 HTML5 Canvas API로 모든 합성을 로컬에서 처리합니다: 테마 배경, 부드러운 그림자, 기기 프레임을 그리고 이미지를 화면 영역에 cover 방식으로 맞춘 뒤 1x 또는 2x(레티나) 해상도 PNG로 내보냅니다. 웹 브라우저 창, 모바일 폰, A4 인쇄 용지, 단행본 표지 네 가지 타겟을 지원하며, 페이지를 떠나지 않고 몇 초 만에 스크린샷을 완성도 높은 브랜드 목업 세트로 만들 수 있습니다.
디자인 목업 생성기 사용 방법
자주 묻는 질문
제 이미지가 서버에 업로드되나요?
아닙니다. 이미지 불러오기, 프레임 그리기, PNG 내보내기까지 모든 과정이 HTML5 Canvas API로 브라우저 안에서만 진행됩니다. 이미지가 기기를 떠나지 않으므로 기밀 제품 스크린샷·미공개 디자인·고객 작업물도 안전합니다.
어떤 목업 스타일이 생성되나요?
각 타겟마다 세 가지 색 테마를 만듭니다: Light(부드러운 중립 배경), Dark(깊은 차콜/네이비 배경과 강한 그림자), Gradient(인디고→바이올렛 그라데이션). 선택한 프레임 자체는 동일하고 배경 톤과 그림자만 달라져 다양한 브랜드 느낌에 맞출 수 있습니다.
지원하는 타겟은 무엇인가요?
네 가지 타겟을 지원합니다: 웹 브라우저 창(주소창 포함), 모바일 폰 프레임(노치 포함), A4 인쇄 용지(210×297mm 세로), 단행본 표지(6×9인치). 각각 Light·Dark·Gradient 세 테마로 렌더링됩니다.
내보내는 이미지 해상도는?
모두 PNG로 내보냅니다. 2x 기준 웹은 폭 약 2720px, 모바일은 약 1160px이며, A4는 용지 자체가 2480×3508px(300 DPI, 인쇄용), 단행본 표지는 1800×2700px(300 DPI)로 렌더링됩니다(둘 다 주변 배경 여백이 조금 더 붙습니다). 인쇄·발표용은 2x, 빠른 미리보기는 1x를 권장합니다. 참고로 Adaptive 맞춤 모드에서는 프레임이 이미지 비율에 맞춰 변형되어 정확한 픽셀 크기가 달라집니다.
이미지가 프레임에 어떻게 맞춰지나요?
툴바의 Fill / Fit / Adaptive 토글로 정합니다. Fill은 프레임을 꽉 채우도록 확대하며 비율이 다르면 잘릴 수 있습니다. Fit은 고정 프레임 안에 이미지 전체를 표시하고 남는 영역을 여백으로 채우며, 여백 색은 흰색·그레이·검정 중 선택할 수 있습니다. Adaptive는 프레임 자체를 이미지 비율에 맞춰 변형해 잘림도 여백도 없습니다. 이미지 비율이 프레임과 비슷하면 Fill·Adaptive가, 전체를 반드시 보여줘야 하면 Fit이 안전합니다.