grid_on 이미지 격자 분할기 star

작동 방식

이 도구는 사진을 HTML 캔버스에 불러온 뒤, 선택한 행과 열 수에 따라 그 캔버스를 N×M 격자로 나누고, 캔버스 영역 추출 방식을 사용해 각 셀을 개별 이미지로 잘라냅니다 — 어떤 서버도 픽셀 데이터를 보지 않습니다. 잘라낸 각 타일은 원본 자르기 영역과 동일한 해상도로 별도의 PNG 파일로 다운로드됩니다. 즉 3000×3000픽셀 이미지를 3×3 격자로 나누면 1000×1000픽셀 타일 9개가 만들어집니다.

이 도구가 설계된 구체적인 사용 사례인 인스타그램 멀티 포스트 그리드는, 인스타그램이 프로필 그리드에서 여러 타일에 걸쳐 이어지는 하나의 멀티 이미지 "퍼즐" 게시물을 네이티브로 지원한 적이 없기 때문에 존재합니다. 이 효과를 재현하기 위해 크리에이터들은 가로로 긴 이미지 하나를 미리 개별 정사각형 타일로 나누고, 각각을 별도의 게시물로 업로드해야 했습니다. 인스타그램의 프로필 그리드는 게시물을 최신순으로, 왼쪽에서 오른쪽, 위에서 아래로 렌더링하기 때문에, 타일은 자연스러운 읽기 순서의 반대 순서로 업로드해야 합니다 — 오른쪽 아래 타일부터 시작해 각 행 안에서는 오른쪽에서 왼쪽으로, 위쪽 행보다 아래쪽 행을 먼저 거슬러 올라가는 방식입니다. 이렇게 해야 아홉 개의 게시물이 모두 존재하게 된 시점에, 최신순 렌더링이 이를 올바른 왼쪽에서 오른쪽, 위에서 아래 순서의 그림으로 다시 조립합니다.

예시: 3×3 격자에서 타일 1(이미지의 왼쪽 위)은 마지막으로 업로드해야 하는 게시물이어야 하고, 타일 9(이미지의 오른쪽 아래)는 첫 번째로 업로드해야 합니다. 이미지 읽기 순서대로 업로드하면 프로필에 뒤섞이고 거울에 비친 듯한 그리드가 만들어집니다 — 이 기법에서 가장 흔히 저지르는 실수입니다.

알아두어야 할 사항

• 종횡비가 중요합니다: 정사각형(1:1) 원본 이미지는 인스타그램용으로 깔끔한 정사각형 타일로 나뉩니다. 정사각형이 아닌 사진은 정사각형이 아닌 타일을 만들어내는데, 포스터에는 문제가 없지만 이미지를 먼저 정사각형으로 패딩하지 않으면 인스타그램 자체의 정사각형 썸네일 크롭에 의해 예측할 수 없게 잘릴 수 있습니다.
• 무손실 자르기: 각 타일은 원본 비트맵에서 전체 해상도로 추출되어 PNG로 내보내지므로, 분할 자체는 어떤 압축 아티팩트도 만들지 않습니다 — 이후 발생하는 품질 손실은 업로드 시 재압축하는 플랫폼 쪽에서 비롯됩니다.
• 핵심은 업로드 순서입니다: 분할 자체는 간단합니다. 그리드가 제대로 보이는지는 전적으로 타일을 읽기 순서의 반대로, 오른쪽 아래부터 게시하는 데 달려 있습니다.
• 인스타그램 전용이 아닙니다: 동일한 N×M 분할 방식은 큰 포스터를 여러 장의 종이에 나눠 인쇄하거나, 하나의 이미지를 정규 타일 격자로 나눠야 하는 다른 어떤 프로젝트에도 사용할 수 있습니다.