🔳배경 패턴 반복 간격 계산기

캔버스 너비가 타일 크기의 정확한 배수가 아니면 마지막 줄의 타일이 화면 끝에서 잘린 채로 표시됩니다. 타일 개수와 간격을 함께 조정해야 반복 패턴이 자연스럽게 끝맺음됩니다.

아니요. 이 계산기는 타일 크기는 그대로 유지하고 타일 사이의 여백만 미세하게 조정해 캔버스 너비에 정확히 맞춥니다. 타일 디자인을 변형하지 않고도 잘림 없는 반복 패턴을 만들 수 있습니다.

패턴 크기·캔버스 크기 기반 타일 반복 간격 자동 계산

캔버스(컨테이너) 너비 (px)

패턴 타일 크기 (px)

최소 희망 간격 (px)

배경 패턴, 타일이 잘리면 완성도가 떨어진다

반복되는 배경 패턴을 디자인할 때 가장 흔한 실수는 캔버스 너비를 고려하지 않고 타일 크기와 간격을 임의로 정하는 것입니다. 그 결과 마지막 줄의 타일이 화면 끝에서 잘린 채로 표시되어 패턴이 부자연스러워 보입니다.

이 계산기는 (캔버스 너비 + 최소 간격) ÷ (타일 크기 + 최소 간격)으로 한 줄에 들어갈 타일 수를 구하고, 그 개수에 맞춰 (캔버스 너비 - 타일 수 × 타일 크기) ÷ (타일 수 - 1) 공식으로 실제 간격을 재조정합니다.

타일 크기를 바꾸면 패턴 디자인 자체가 달라지지만, 간격만 살짝 조정하면 타일 모양은 그대로 유지한 채 캔버스에 딱 맞는 반복 패턴을 만들 수 있습니다. 이렇게 계산된 간격은 원하는 최소 간격과 크게 차이 나지 않으면서도 잘림 없이 정확히 들어맞습니다.

카드 그리드, 아이콘 반복 배경, 체크보드 패턴처럼 일정한 간격으로 요소를 배치해야 하는 모든 UI에 이 계산 방식을 적용할 수 있습니다. CSS Grid나 Flexbox의 gap 속성에 계산된 값을 바로 적용하면 됩니다.

패턴 타일이 잘려 보이는 이유는 무엇인가요?

캔버스 너비가 타일 크기의 정확한 배수가 아니면 마지막 줄 타일이 화면 끝에서 잘립니다. 개수와 간격을 함께 조정해야 자연스럽게 끝맺음됩니다.

간격(gap)을 조정하면 타일 크기가 바뀌나요?

아니요. 타일 크기는 유지하고 간격만 미세 조정해 캔버스에 정확히 맞춥니다.