Grid Maker

이미지에 그리드

이미지에 정밀한 그리드를 얹기 — 열 수 또는 정확한 픽셀 간격으로, 모든 선을 제어하고 전체 해상도 PNG/JPG로 내보내세요.

JPG · PNG · WebP100% 브라우저 처리진짜 정사각 셀무료 · 가입 불필요
원본 1920×1080 → 출력 1920×1080 · 12 × 7 셀
이미지에 그리드

모든 처리가 브라우저 안에서 이뤄집니다. 이미지와 설정은 절대 전송되지 않습니다.

이미지에 그리드 = 정밀함

이미지에 그리드를 얹을 때 핵심은 정밀함입니다. UI 목업은 간격 시스템의 8픽셀 리듬에 맞는 선이 필요하고, 스프라이트 시트는 타일 크기 그대로의 셀이 필요하고, 스캔이나 도면은 알려진 척도의 측격이 필요합니다. 열 수 그리드는 비율에 완벽하고, 픽셀 그리드는 '이 요소가 정말 거기 있나?'라는 질문에 답합니다.

이 도구로 이미지에 그리드를 두 방식으로 얹을 수 있습니다. 열 모드는 이미지를 균등한 열의 진짜 정사각으로 나눕니다(예제 일러스트에 기본 12열). 픽셀 모드는 10~500 원본 픽셀마다 선을 그어, 그리드가 임의의 비율이 아니라 디자인 시스템이나 타일맵에 정확히 정렬되게 합니다. 정보 줄에는 원본과 출력의 정확한 크기와 셀 수가 항상 표시됩니다. 그리드를 입힌 것이 곧 받는 것입니다.

선 스타일은 완전히 통제됩니다. 임의의 HEX 색상, 1~10픽셀 굵기, 10~100% 불투명도. 이미지가 참조 시트를 겸할 때는 A1/B1 라벨도 붙일 수 있습니다. 내보내기는 브라우저에서 전체 해상도로 렌더링됩니다 — 정확한 픽셀은 PNG로, 가벼운 공유는 JPG로. 어떤 순간에도 아무것도 업로드되지 않습니다.

열 또는 픽셀: 이미지에 그리드를 얹는 두 방식

비율이 절대 크기보다 중요하다면 열 모드입니다. 그리기 참조에 격자를 입히고, 구도를 확인하고, 배너를 균등한 구획으로 나눕니다. 셀은 완전한 정사각으로 나오고, 같은 열 수를 다른 이미지에 쓰면 같은 구조가 재현됩니다.

이미지가 시스템 안에 살아 있다면 픽셀 모드입니다. 웹·앱 디자이너는 4/8/12px 간격 척도로, 스프라이트와 타일 작가는 타일 크기 그대로, 지도와 분석 이미지는 주석을 달 수 있는 척도로 격자를 입힙니다. 이미지에 그리드를 이 방식으로 얹는 것은 필요한 곳에 정확히 자를 인쇄하는 일입니다.

  • 간격 시스템에 맞춰 레이아웃 점검
  • 스프라이트와 타일 크기를 픽셀 단위로 확인
  • 도면과 스캔을 이미지 안에서 측정
  • 작업을 균등한 구획으로 나누기
  • 이미지에 그리드를 얹어 좌표 참조로

이미지에 그리드를 얹을 때 선 스타일링

기술 점검에는 조용한 선이 어울립니다. 중립 회색이나 슬레이트, 중간 불투명도, 1~2픽셀 굵기로 그리드 아래 이미지가 읽히게 둡니다. 프레젠테이션 배경, 자료 삽화, SNS 템플릿 같은 창작적 오버레이는 더 대담한 색과 굵기를 감당할 수 있고, HEX 필드와 색 선택기로 브랜드 색이 한 번에 가능합니다.

라벨 옵션은 격자를 입힌 이미지를 주소가 붙은 시트로 바꿉니다. 셀은 가로로 A1, B1, C1, 세로로 1, 2, 3이라 불리고, 여러 사람이 같은 흐름에서 이미지에 그리드를 얹을 때도 리뷰 댓글과 작업 메모가 모호해지지 않습니다.

정확한 출력과 정직한 숫자

다운로드 전에 미리보기 아래 읽기 값이 원본 크기, 최종 출력 크기, 셀 밀도를 알려 줍니다. 큰 이미지가 브라우저 안전 한계(4096픽셀, 1200만 화소) 안에 들도록 축소되어야 한다면, 안내는 확정 뒤가 아니라 전에 나타납니다.

이 정직함은 기하까지 미칩니다. 선은 미리보기와 같은 좌표에서 출력 크기로 다시 렌더링되고, 픽셀 간격은 항상 원본 이미지의 픽셀을 기준합니다. 여기서 이미지에 그리드를 얹으면 100px 셀은 100px 셀로 도착합니다. 미리보기에서도, 손에 남는 파일에서도.

이미지에 그리드 얹기 (4단계)

  1. 이미지 불러오기

    최대 20MB의 JPG, PNG, WebP를 놓거나 예제 일러스트로 시작하세요. 이미지는 로컬 메모리에서 즉시 열립니다.

  2. 그리드 방식 고르기

    비율 작업은 열, 시스템 정렬은 픽셀로. 수나 간격을 정하고 정보 줄의 변화를 지켜 보세요.

  3. 스타일과 확인

    색상·굵기·불투명도·라벨을 정하고, 내보내기 전에 원본·출력·셀 수를 확인합니다.

  4. 전체 크기로 내보내기

    원본 픽셀에서 최대 4096px의 PNG 또는 JPG를 내려받으세요. 로컬, 즉시, 워터마크 없음.

이미지에 그리드를 여기서 얹는 이유

픽셀 정확 간격 모드

원본 이미지의 10~500픽셀마다 선. 시스템 안의 이미지에 그리드를 얹으면 타일과 간격과 도면이 설계 그대로 정렬됩니다.

정직한 크기 읽기

원본, 출력, 셀 수가 내보내기 전에 표시됩니다. 안전 한계를 위한 축소가 있으면 그것까지 포함해 알려 줍니다.

팀을 위한 라벨

선택적 A1/B1 주소는 이미지에 그리드를 얹은 결과를 모두가 칸 단위로 인용할 수 있는 참조 시트로 만듭니다.

100% 브라우저 파이프라인

디코드, 렌더, 인코드 — 모두 기기에서. 이미지에 그리드를 업로드 없이 얹는 것이 가장 안전한 길입니다.

이미지에 그리드 FAQ

이미지에 그리드를 얹는 두 방식의 차이는?

열 모드는 이미지를 완전한 정사각의 균등 열로 나눕니다 — 비율에 최적. 픽셀 모드는 원본 N픽셀마다 선을 긋습니다 — 간격 시스템이나 타일에 그리드를 이미지에 정확히 맞춰야 할 때 최적입니다.

정확한 픽셀 크기로 격자를 입히려면?

픽셀 모드로 전환하고 이미지 픽셀로 간격을 입력하세요(예: 32px 타일은 32). 정보 줄에 셀 수가 표시되어 내보내기 전에 확인할 수 있습니다.

출력이 축소되면 간격이 바뀌나요?

간격은 원본 픽셀로 정의되고 출력에 비례해 스케일됩니다. 이미지에 그리드를 얹은 구조는 미리보기와 다운로드에서 동일하고, 바뀌는 것은 파일 크기뿐입니다.

선과 함께 라벨도 붙일 수 있나요?

있어요. 라벨을 켜면 각 셀에 선 색상으로 A1 주소가 붙습니다. 셀이 충분히 읽힐 만큼 클 때부터 나타납니다.

어느 내보내기 형식을 골라야 하나요?

PNG는 정확한 픽셀을 보존하는 디자인·실무용 안전한 기본값입니다. JPG는 완벽한 가장자리가 덜 중요한 공유용 가벼운 파일을 줍니다.