← 모두의 툴

정각이 아닌 각도로 회전하면 캔버스가 왜 커지는가

가이드 · 2026.08.21 최종 확인

사진을 90도만 돌릴 때는 가로세로가 그대로 맞바뀔 뿐 아무 문제가 없습니다. 그런데 스캔한 문서가 3도쯤 기울어져 있어서 미세 조정으로 돌리거나, 사진을 45도 회전시켜 보면 결과 이미지의 캔버스 크기가 원본보다 눈에 띄게 커지는 걸 볼 수 있습니다. 왜 회전만 했는데 이미지 크기가 달라질까요? 정답은 "회전하는 것은 이미지가 아니라 그 이미지를 담는 사각형"이라는 데 있습니다.

1. 회전은 사각형을 기울이는 일이다

이미지는 항상 가로×세로 직사각형입니다. 이 직사각형을 원점을 중심으로 각도 θ만큼 회전시키면, 네 꼭짓점도 함께 회전하면서 원래의 가로·세로 축과 어긋난 마름모꼴 모양이 됩니다. 그런데 화면이나 파일에 저장되는 캔버스는 항상 가로축·세로축에 나란한(axis-aligned) 사각형이어야 하므로, 기울어진 마름모 전체를 잘라내지 않고 담으려면 그 마름모를 완전히 감싸는 새로운 가로축 정렬 사각형, 즉 바운딩 박스(bounding box)가 필요합니다. 이 바운딩 박스는 원본 사각형보다 항상 크거나 같습니다 — 정확히 언제 커지는지가 다음 절의 핵심입니다.

2. 바운딩 박스 크기는 cos·sin으로 계산된다

원본 이미지의 가로를 w, 세로를 h, 회전각을 θ라고 하면, 회전된 사각형을 감싸는 바운딩 박스의 새 가로·세로는 다음 공식으로 구해집니다.

새 가로(nw) = w·|cos θ| + h·|sin θ|
새 세로(nh) = w·|sin θ| + h·|cos θ|

이 공식은 회전된 사각형의 네 꼭짓점을 각각 x축·y축에 투영했을 때 차지하는 최대 폭과 최대 높이를 삼각함수로 표현한 것입니다. 각도가 0도에 가까울수록 sin θ가 0에 가까워 원본 크기와 거의 같고, 45도에 근접할수록 cos·sin이 모두 커져 바운딩 박스가 최대로 부풀어 오릅니다.

실제로 이미지 회전 도구의 내부 코드를 확인해 보면 이 공식이 그대로 구현돼 있습니다. 라디안으로 변환한 각도의 절댓값 cos·sin을 구한 뒤 ow*cos+oh*sin, ow*sin+oh*cos로 캔버스의 새 가로·세로를 계산하고, 그 크기에 맞춰 캔버스 자체를 다시 만듭니다. 즉 "원본 크기 그대로 두고 모서리를 잘라내는" 방식이 아니라, 캔버스 크기 자체를 회전 결과에 맞춰 동적으로 넓히는 방식으로 잘림을 원천 차단합니다.

3. 숫자로 확인하기: 800×400 이미지를 30도 회전

가로 800px, 세로 400px인 직사각형 이미지를 30도 회전시키면 다음과 같이 계산됩니다.

계산식결과
cos(30°)0.8660-
sin(30°)0.5000-
새 가로(nw)800×0.8660 + 400×0.5약 893px
새 세로(nh)800×0.5 + 400×0.8660약 746px

원본이 800×400(가로가 세로의 2배)이었는데 회전 후에는 893×746으로, 가로는 약 12% 늘고 세로는 거의 2배 가까이 늘어납니다. 세로가 훨씬 크게 늘어나는 이유는 원래 짧았던 세로 방향이 회전으로 인해 원본 가로 성분(800×sin30°=400px)을 새로 흡수하기 때문입니다.

4. 왜 90·180·270도에서는 안 커지는가

같은 공식에 정각을 넣어보면 이유가 바로 보입니다. 90도에서는 cos(90°)=0, sin(90°)=1이므로 nw = w×0 + h×1 = h, nh = w×1 + h×0 = w — 즉 가로세로가 정확히 맞바뀔 뿐 더 커지지 않습니다. 180도에서는 cos=-1, sin=0이라 nw=w, nh=h로 원본 그대로입니다. 정각 회전이 특별한 게 아니라, cos·sin 값이 정확히 0 또는 1이 되는 지점이라 우연히 바운딩 박스가 원본과 같아지는 것뿐입니다. 반대로 45도는 cos·sin이 둘 다 약 0.707로 최대치에 가까워 바운딩 박스가 가장 크게 부푸는 각도입니다.

5. 모서리에 남는 빈 공간과 저장 포맷 함정

바운딩 박스가 원본보다 커진 만큼, 회전된 사각형과 새 캔버스 사이의 네 모서리에는 빈 공간이 생깁니다. 이 부분은 캔버스를 초기화할 때 기본값인 완전 투명(alpha 0)으로 남기 때문에 PNG로 저장하면 자연스럽게 투명한 모서리가 됩니다. 문제는 이 결과물을 투명도를 지원하지 않는 JPG로 저장할 때입니다 — 투명 모서리가 검은색으로 바뀌어 버릴 수 있는데, 이 함정의 원리는 투명 배경을 JPG로 바꾸면 검게 나오는 이유 가이드에서 자세히 다룹니다. 회전 결과물을 다른 배경 위에 합성하려면 투명 배경 만들기 도구로 후처리하는 것도 방법입니다.

6. 실전 팁: 기울어진 문서 스캔 보정

스캔 문서를 미세하게 회전시켜 수평을 맞추는 경우, 대개 1~5도 안팎의 작은 각도만 사용하므로 바운딩 박스 확장 폭도 크지 않습니다. 하지만 결과 이미지를 다시 이미지 자르기 도구로 다듬어 여백을 제거하거나, 이미지 크기 확인 도구로 최종 픽셀 크기를 검증하는 습관을 들이면 후속 작업(인쇄, 업로드 등)에서 예상치 못한 캔버스 크기 때문에 놀라는 일을 줄일 수 있습니다.

자주 묻는 질문

Q. 정사각형 이미지도 회전하면 캔버스가 커지나요?

네. w=h인 정사각형이라도 45도 회전 시 nw=nh=w×(cos45°+sin45°)≈w×1.414로, 원본보다 약 41% 커집니다. 정사각형이라고 예외는 아닙니다.

Q. 캔버스가 커지지 않게 원본 크기로 고정해서 회전할 수는 없나요?

가능하지만 그 경우 회전된 사각형의 네 모서리가 캔버스 밖으로 밀려나 잘려나갑니다. 잘림 없이 전체를 보존하려면 바운딩 박스 확장이 필수입니다.

Q. 회전과 좌우 반전을 같이 적용하면 바운딩 박스 계산이 달라지나요?

아니요. 반전은 scale(-1,1) 같은 단순 부호 반전이라 가로·세로 크기 자체에는 영향을 주지 않습니다. 바운딩 박스 크기는 순전히 회전각의 cos·sin에만 의존합니다.

Q. 파일이 서버로 업로드되나요?

아니요. 회전 연산은 Canvas API로 브라우저 안에서 실행되므로 원본 이미지가 외부로 전송되지 않습니다.