만들기 도구

더미 이미지 만들기

크기만 적으면 임시 이미지가 됩니다. 여러 크기를 한 번에 만들어 ZIP으로.

🔒 입력한 내용과 파일은 이 브라우저 안에서만 처리합니다. 서버로 보내지 않습니다.

크기 넣기

기본 글에서 {w}는 가로, {h}는 세로 숫자로 바뀝니다. 글을 비우면 글 없이 색만 채웁니다.

    더미 이미지 만들기 사용법

    아직 준비되지 않은 사진이나 배너 자리에 임시로 넣어 둘 이미지를 만드는 도구입니다. 웹 페이지 시안에서 이미지가 들어갈 칸의 크기를 보여 줄 때, 쇼핑몰 스킨을 만들며 상품 사진 대신 넣어 둘 때, 이미지 업로드 기능을 시험할 여러 크기의 파일이 필요할 때 씁니다. 회색 바탕에 "800×600"처럼 크기가 적힌 이미지가 기본 모양입니다.

    쓰는 순서

    1. 위 칸에 크기를 800x600처럼 가로x세로로 한 줄에 하나씩 적습니다. 크기 넣기의 버튼을 누르면 그 크기가 한 줄 추가됩니다.
    2. 적는 대로 아래 목록에 이미지가 만들어집니다. 작은 그림, 파일 이름, 크기와 용량이 함께 나옵니다.
    3. 배경 색, 글자 색, 형식을 고릅니다. 바꾸면 전부 다시 만듭니다.
    4. 하나씩 저장하거나 전체를 ZIP으로 받기를 누릅니다. 데이터 주소 복사는 이미지를 파일 없이 HTML에 바로 넣을 수 있는 글자로 복사합니다.

    예시: 네 가지 크기를 한 번에

    예시 넣기를 누르면 다음 네 줄이 들어갑니다.

    800x600
    1200x630 공유 그림
    300x250 광고 자리
    150x150 프로필

    첫 줄은 글을 따로 적지 않았으므로 기본 글 규칙에 따라 "800×600"이 들어갑니다. 나머지 세 줄은 크기 뒤에 적은 글이 크게 들어가고 그 아래에 크기가 작게 한 줄 더 붙습니다. 파일 이름은 placeholder_800x600.png, placeholder_1200x630_공유_그림.png처럼 크기와 글로 지어집니다. 네 개가 만들어지면 ZIP 버튼 옆에 개수와 전체 용량이 표시됩니다.

    옵션

    옵션동작
    기본 글글을 따로 적지 않은 줄에 들어갈 글입니다. {w}는 가로, {h}는 세로 숫자로 바뀝니다. "{w}×{h} 배너"처럼 섞어 쓸 수 있고, 비우면 글 없이 색만 채웁니다.
    글자 크기비워 두면 이미지 크기에 맞춰 자동으로 정하고, 글이 길면 폭 안에 들어가도록 줄입니다. 숫자를 넣으면 그 크기로 고정합니다.
    테두리와 대각선 표시가장자리에 선을 두르고 모서리끼리 잇는 X자 선을 그립니다. 화면 설계서에서 "여기는 이미지 자리"라는 뜻으로 쓰는 표시입니다.
    따로 적은 글 아래에 크기도 표시끄면 적은 글만 나옵니다.

    형식 고르기

    형식특징알맞은 곳
    PNG단색 이미지라 용량이 작고 어디서나 열립니다문서, 발표 자료, 업로드 시험
    JPG사진용 형식. 글자 둘레가 조금 번집니다JPG만 받는 곳
    WebPPNG보다 조금 더 가볍습니다WebP 처리 기능을 시험할 때
    SVG도형과 글자를 코드로 적은 형식. 크기와 상관없이 수백 바이트입니다웹 시안, 데이터 주소로 넣을 때

    자주 쓰는 크기

    • 1920x1080, 1280x720: 16:9 화면과 영상 미리보기 그림.
    • 1200x630: 링크를 메신저나 SNS에 붙였을 때 뜨는 미리보기 그림의 권장 크기.
    • 1080x1080: 정사각형 게시물과 상품 대표 사진.
    • 300x250, 728x90: 웹 광고에서 가장 흔한 중간 직사각형과 가로 띠 배너 크기. 광고가 들어갈 자리를 비워 둘 때 씁니다.
    • 150x150: 프로필 사진과 작은 목록 그림.

    데이터 주소로 넣기

    데이터 주소 복사를 누르면 data:image/svg+xml;base64,...로 시작하는 긴 글자가 복사됩니다. 이것을 <img src="여기">에 붙이면 파일 없이 이미지가 보입니다. 메일 본문 시안이나 한 파일짜리 HTML 견본을 만들 때 편합니다. 글자가 지나치게 길어지지 않도록 200KB가 넘는 이미지는 복사하지 않고 알려 주므로 SVG 형식으로 쓰는 것을 권합니다.

    알아 둘 점

    • 잘못 적은 줄은 건너뛰고 몇 번째 줄이 왜 틀렸는지 알려 줍니다. 한 변은 1~8000px, 한 번에 100개까지입니다.
    • 자리 표시 이미지는 공개 전에 반드시 실제 이미지로 바꿔야 합니다. 파일 이름이 placeholder로 시작하므로 프로젝트에서 이 낱말을 검색하면 빠뜨린 곳을 찾기 쉽습니다.
    • 색과 형식 같은 옵션은 기억되지만 적어 둔 크기 목록은 기억하지 않습니다.

    자주 묻는 질문

    자리 표시 이미지는 왜 쓰나요?

    실제 사진이나 그림이 준비되기 전에 화면 배치를 먼저 잡기 위해서입니다. 크기가 적힌 회색 상자를 넣어 두면 디자이너와 개발자, 의뢰인이 어느 자리에 어떤 크기의 이미지가 들어갈지 같은 그림을 보고 이야기할 수 있습니다.

    외부 자리 표시 이미지 서비스의 주소를 쓰는 것과 무엇이 다른가요?

    주소로 불러오는 방식은 편하지만 그 서비스가 느려지거나 문을 닫으면 내 화면의 이미지가 깨지고, 인터넷이 안 되는 환경에서는 보이지 않습니다. 이 도구로 만든 파일을 프로젝트에 넣어 두면 그런 걱정이 없습니다. 파일을 두기 번거로우면 데이터 주소 복사로 이미지를 글자로 받아 img 태그에 바로 넣을 수 있습니다.

    어떤 형식으로 저장하는 게 좋은가요?

    웹 시안이라면 SVG가 가장 가볍고 확대해도 선명합니다. 1920x1080 크기도 1KB가 안 됩니다. 문서나 발표 자료, SVG를 받지 않는 프로그램에는 PNG를 쓰세요. JPG는 올릴 곳이 JPG만 받을 때 씁니다.

    한글 글자를 넣을 수 있나요?

    넣을 수 있습니다. 크기 뒤에 한 칸 띄고 글을 적으면 그 이미지에 들어갑니다. PNG, JPG, WebP는 글자가 그림으로 굳어 어디서나 같게 보이고, SVG는 여는 기기의 기본 글꼴로 그려져 글꼴 모양이 조금 달라질 수 있습니다.

    만들 수 있는 가장 큰 크기는 얼마인가요?

    한 변 8000px까지, 한 번에 100개까지 만들 수 있습니다. 휴대폰에서는 아주 큰 이미지를 여러 개 만들면 메모리가 모자랄 수 있으니 큰 크기는 SVG로 만들거나 몇 개씩 나눠 만드세요.

    함께 쓰면 좋은 도구

    ✦파비콘 만들기글자·이모지·로고로 파비콘을 만들고 ICO, PNG 묶음, HTML 태그까지 한 번에.여러 건 한 번에✦CSS 그라데이션 만들기색과 위치를 조절해 그라데이션을 만들고 CSS 코드와 PNG 이미지로 가져갑니다.여러 건 한 번에✦색상 변환·명도 대비 검사HEX·RGB·HSL·CMYK 변환, 어울리는 색, 두 색의 명도 대비 검사, 여러 색 한 번에.여러 건 한 번에✦로렘 입숨·더미 텍스트 만들기한글·영문 채움 글을 문단, 문장, 정확한 글자 수로. HTML 태그도 붙입니다.여러 건 한 번에▣이미지 색 뽑기이미지의 한 점을 찍어 색 값을 보고, 주요 색 팔레트를 CSS·JSON·PNG로 가져갑니다.여러 건 한 번에

    마지막 수정 2026-11-09. 있었으면 하는 기능이나 불편한 점은 이 도구에 건의하기로 알려 주세요.