그리드 만들기: 투명 PNG와 SVG
여기서 그리드 만들기는 간단해요. 원하는 픽셀 크기의 투명한 배경 위에 같은 간격의 선을 그려 줘요. 열, 행, 선 두께와 색을 정한 뒤 PNG나 SVG로 다운로드하거나 CSS 배경으로 복사할 수 있어요. 디자인, 레이아웃, 스크린샷 위에 올리는 가이드 레이어로 쓰면 편해요. 모든 작업은 브라우저 안에서 이뤄지고 파일은 업로드되지 않아요.
투명 그리드 PNG 만드는 방법
그리드는 페이지에서 바로 그려져요. 순서는 네 단계예요.
- 캔버스 너비 (px)와 캔버스 높이 (px)를 입력하세요. 둘 다 10에서 5000까지이고, 처음에는 1920×1080이에요.
- 열(1~200, 처음 12)과 행(1~200, 처음 6)을 정하세요.
- 선 두께 (px)를 1~50으로 정하고 선 색상을 고르세요. 기본값은 빨간색 #FF0000이에요.
- 미리보기를 확인한 뒤 PNG 다운로드, SVG 다운로드, CSS 복사 중 하나를 누르세요.
적용 버튼은 없어요. 값을 입력할 때마다 미리보기가 다시 그려져요. 뒤쪽의 체크무늬는 파일에서 투명한 부분을 보여 주는 용도이고, 다운로드 파일에는 들어가지 않아요.
캔버스와 열, 행으로 정해지는 셀 크기
캔버스는 똑같이 나뉘어요. 셀 하나의 너비는 캔버스 너비를 열 수로 나눈 값이고, 높이는 캔버스 높이를 행 수로 나눈 값이에요. 미리보기 아래의 “셀 하나는 … × … px예요” 문구에서 값을 바꿀 때마다 결과를 볼 수 있어요. 정사각형 셀을 원하면 가로와 세로가 같은 크기가 되는 숫자를 고르세요. 1920×1080 캔버스를 16열, 9행으로 나누면 120×120 px 셀이 돼요.
선은 안쪽 각 분할 위치의 가운데에 그려져요. 캔버스가 딱 나누어떨어지지 않으면 선이 두 픽셀 사이에 걸려서 PNG에서 조금 흐리게 보일 수 있어요. 선을 또렷하게 하려면 너비는 열 수의 배수, 높이는 행 수의 배수로 정하세요.
자주 쓰는 그리드 PNG 크기
많이 쓰는 크기는 다음과 같아요(너비×높이, 열×행, 셀 크기).
- 풀HD 정사각형 셀: 1920×1080, 16×9, 120×120 px
- 4K 정사각형 셀: 3840×2160, 32×18, 120×120 px
- 가로 3칸, 세로 3칸 정사각형: 1080×1080, 3×3, 360×360 px
- 가로 3칸, 세로 3칸 세로형 9:16: 1080×1920, 3×3, 360×640 px
투명 그리드 PNG를 이 크기로 만들어 두면 어떤 이미지 위에도 바로 올릴 수 있어요.
선 두께, 선 색상, 고급 옵션
선 두께는 캔버스 픽셀 기준의 선 너비예요. 큰 캔버스에서는 이미지를 줄였을 때도 보이도록 얇은 선일수록 값을 더 크게 하세요. 선 색상 칸은 브라우저의 색상 선택기를 열고, 옆에 16진수 값을 보여 줘요. 바탕과 대비되는 색을 고르세요. 어두운 작업물 위에는 흰색, 밝은 작업물 위에는 어두운 색이 좋아요.
고급 옵션에는 체크박스가 세 개 있어요. 기본 그리드는 안쪽 분할 위치에만 선이 있어서 파일의 가장자리는 비어 있어요.
- 바깥 테두리는 테두리를 추가해요. 캔버스 안쪽에 그려지므로 선 두께가 그대로 유지돼요.
- 중앙 십자선은 가운데를 지나는 세로선과 가로선을 하나씩 추가해요. 열이나 행이 짝수이면 가운데에 이미 선이 있어서, 홀수일 때만 달라진 점이 보여요.
- 대각선은 캔버스 전체에 모서리에서 모서리로 두 줄을 그어 가운데에서 교차시켜요.
PNG, SVG 다운로드와 CSS 배경 복사
PNG를 내려받으면 캔버스와 똑같은 크기의 투명 이미지가 그리드-1920x1080.png 같은 이름으로 저장돼요. SVG를 내려받으면 같은 그리드가 배경 없는 벡터 선으로 그리드-1920x1080.svg 같은 이름으로 저장돼요. CSS를 복사하면 background-image: url("data:image/svg+xml,...") 한 줄과 background-size 한 줄이 클립보드에 들어가서, 별도 이미지 파일 없이 페이지 위에 그리드를 깔 수 있어요.
배경은 기본적으로 반복돼요. 타일처럼 이어 붙일 때는 기본 그리드의 바깥쪽 가장자리에 선이 없다는 점을 기억하세요. 바깥 테두리를 켜 두면 이음새마다 테두리 두 개가 만나서 설정한 값의 약 두 배 굵기로 보여요.
피그마 그리드와 사진 위 그리드, CSS 레이아웃은?
이미 가진 사진 위에 그리드를 그려서 격자 방식으로 그림을 그리고 싶다면 격자 이미지 생성기를 쓰세요. 페이지 레이아웃을 만들고 grid-template-areas 코드를 얻고 싶다면 CSS Grid용 도구가 맞아요. 이 도구는 비어 있는 투명한 그리드 파일 자체를 만들 때 쓰세요.
피그마 그리드와 일러스트레이터에도 각자 내장 그리드와 가이드가 있어요. 정확한 크기의 파일로 그리드가 필요할 때 이 도구를 쓰면 돼요.
자주 묻는 질문
투명한 그리드 PNG는 어떻게 만드나요?
“캔버스 너비 (px)”와 “캔버스 높이 (px)”를 입력하고, “열”과 “행”을 정한 뒤 “선 색상”을 고르고 “PNG 다운로드”를 누르세요. 파일의 배경은 투명해요. 미리보기의 체크무늬는 그걸 보여 주기 위한 것일 뿐이에요. 파일은 내 크기가 들어간 “그리드-1920x1080.png” 같은 이름으로 저장돼요.
가로 3칸, 세로 3칸 그리드는 어떻게 만드나요?
“열”을 3, “행”을 3으로 정하세요. 세로선 두 줄과 가로선 두 줄이 그려지고 캔버스가 똑같은 칸 아홉 개로 나뉘어요. 가장자리에도 테두리를 원하면 “고급 옵션”에서 “바깥 테두리”를 켠 뒤 “PNG 다운로드”를 누르세요.
9:16 그리드 PNG는 몇 px로 만들어야 하나요?
전체 화면 세로 이미지라면 “캔버스 너비 (px)”를 1080, “캔버스 높이 (px)”를 1920으로 정하세요. 2160×3840은 같은 9:16 비율에 선명도가 두 배예요. 둘 다 5000 px 한도 안에 들어가요. 미리보기 아래 표시에서 셀 하나의 크기를 확인할 수 있어요.
흰색 그리드 오버레이 PNG는 어떻게 만드나요?
“선 색상”에서 흰색 #FFFFFF를 고르세요. 미리보기의 체크무늬 위에서는 흰 선이 잘 안 보일 수 있어요. 하지만 다운로드한 PNG는 투명한 배경 위에 흰 선을 그대로 담고 있어서, 사진이나 어두운 레이아웃 위에 올리면 또렷하게 보여요.
SVG 파일로도 만들 수 있나요?
네. “SVG 다운로드”를 누르면 같은 그리드가 벡터 파일(예: 그리드-1920x1080.svg)로 저장돼요. 선은 고른 색의 획이고 배경 채우기는 없어요. 얼마나 확대해도 선명하고, 브라우저나 벡터 편집 프로그램에서 열 수 있어요.
그리드를 CSS 배경으로 쓰려면 어떻게 하나요?
“CSS 복사”를 누르고 결과를 스타일 규칙에 붙여 넣으세요. 그리드를 인라인 SVG로 담은 background-image와 캔버스 크기와 같은 background-size가 들어 있어요. background-size를 바꾸면 크기를 조절할 수 있고, 작은 캔버스로 만들어 배경을 반복시켜도 돼요. “바깥 테두리”를 끄면 타일 가장자리에는 선이 없어요.
일러스트레이터나 피그마에 그리드를 추가하려면요?
두 프로그램 모두 자체 그리드와 가이드가 있어요. 정확한 크기의 파일로 그리드가 필요할 때 이 도구를 쓰세요. 일러스트레이터에서는 SVG를 열면 선이 벡터로 유지돼요. PNG는 투명한 레이어로 작업물 위에 올리면 돼요. 피그마에서는 두 파일 모두 프레임에 추가할 수 있어요.
아이폰이나 아이패드에서 PNG가 더 작게 저장되는 이유는 뭔가요?
아이폰과 아이패드의 사파리는 약 1600만 픽셀을 넘으면 빈 이미지를 돌려줘요. 그래서 PNG를 크기에 맞게 줄여 저장하고, 저장된 크기를 안내 문구로 알려 줘요. SVG는 항상 요청한 원래 크기를 유지하니까 정확한 치수가 필요하면 SVG를 쓰세요.
