이미지 둥근 모서리 최대로 올리면 알약모양 되는 이유
이미지 모서리를 둥글게 처리하는 도구에서 반경 슬라이더를 끝까지 올렸는데, 기대했던 부드러운 둥근 사각형이 아니라 양 끝이 완전히 둥근 알약(캡슐) 모양이 나오는 경우가 있습니다. 정사각형 사진이라면 아예 원 모양이 되기도 합니다. 이건 오류가 아니라 반경(%)을 어느 변 기준으로 계산하느냐에 따라 생기는, 미리 계산할 수 있는 결과입니다.
요약 ① 반경(%)은 이미지의 가로·세로 중 더 짧은 변을 기준으로 계산됩니다. ② 그 값이 짧은 변의 절반에 이르면 그 변 쪽 모서리가 완전한 반원이 되어, 정사각형은 원, 직사각형은 알약 모양이 됩니다. ③ 사각형 느낌을 유지하려면 반경을 최대치보다 낮게, 원본 이미지 비율에 맞춰 계산해서 넣어야 합니다.
반경을 최대로 올렸더니 알약 모양이 되는 이유
가로로 긴 배너 사진이나 썸네일에 카드 느낌을 주려고 모서리 둥글기를 최대로 올리면, 네 모서리가 각각 둥근 사각형이 아니라 사진 전체가 양쪽 끝만 완전히 둥근 알약 모양으로 바뀌는 경우가 흔합니다. 정사각형 아이콘이나 프로필 사진에서는 같은 조작이 완전한 원을 만들기도 합니다.
숫자를 최댓값으로 놓았을 뿐인데 왜 사각형이 아니라 알약이나 원이 나오는지 원리를 모르면, 결과가 나올 때마다 슬라이더를 이리저리 움직이며 감으로 맞춰야 합니다. 이미지 비율이 바뀔 때마다 같은 % 값이 전혀 다른 모양을 만들어내기 때문입니다.
반경(%)이 실제로 계산되는 기준 — 직접 확인하는 방법
모서리를 둥글게 깎는 도구는 보통 반경(%)을 이미지의 가로·세로 중 더 짧은 변을 기준으로 계산합니다. 반지름(px)은 "(반경 % ÷ 100) × 짧은 변의 픽셀 길이"로 구할 수 있고, 이 값이 가로나 세로 길이의 절반에 이르면 그 방향의 모서리가 완전한 반원으로 이어집니다. 정사각형은 네 모서리가 동시에 반원이 되어 원이 되고, 직사각형은 짧은 변 쪽 두 모서리만 반원이 되어 알약 모양이 됩니다.
가로 800px·세로 400px 사진에 반경 50%를 주면, 짧은 변인 세로(400px) 기준 반지름이 200px이 되어 세로 길이의 절반과 같아지므로 위아래가 완전한 반원, 즉 알약 모양이 됩니다. 같은 사진에 10%만 주면 반지름은 40px에 그쳐 사각형 느낌이 그대로 남습니다.
포토샵이나 GIMP처럼 반경을 %가 아니라 픽셀로 직접 입력하는 프로그램에서는, 위 계산식으로 원하는 % 값에 해당하는 px 반지름을 미리 구해 넣으면 같은 결과를 재현할 수 있습니다. 이 계산을 매번 손으로 하지 않고 슬라이더를 움직이며 바로 눈으로 확인하고 싶다면, 아래에서 확인해볼 수 있습니다.
무료 · 회원가입 없음 · 브라우저에서만 처리되어 서버에 업로드되지 않음 · 투명 배경 PNG로 다운로드
자주 막히는 지점
| 증상 | 원인 | 확인 방법 |
|---|---|---|
| 정사각형인데 50%를 줘도 완전한 원이 안 됨 | 실제 픽셀 가로·세로 길이가 1px이라도 다름 | 원본 파일 속성이나 편집 프로그램에서 가로·세로 픽셀 값이 정확히 같은지 확인 |
| 반경을 낮게 줬는데도 알약처럼 보임 | 이미지 자체가 이미 매우 가늘고 긴 비율이라 짧은 변이 작아 낮은 %로도 반지름이 절반에 가까워짐 | 짧은 변 길이 기준으로 반지름을 다시 계산하거나, 먼저 비율을 좀 더 정사각형에 가깝게 자름 |
| 다운로드한 PNG를 다른 사이트에 올렸더니 모서리에 흰 배경이 다시 생김 | 업로드한 사이트가 PNG를 JPG로 재저장하면서 투명 영역을 단색으로 채움 | 업로드 후 다시 내려받아 확장자가 PNG로 유지됐는지 확인 |
| 미리보기나 다운로드 버튼이 안 보임 | 이미지를 아직 선택하지 않았거나 미리보기가 계산되는 중 | 이미지를 선택한 뒤 잠깐 기다렸다가 미리보기가 뜨는지 확인 |
정리
이미지 모서리 반경(%)은 가로·세로 중 더 짧은 변을 기준으로 계산되고, 그 값이 짧은 변 절반에 닿으면 정사각형은 원, 직사각형은 알약 모양이 됩니다. 이 계산 방식만 알면 반경 슬라이더를 아무리 움직여도 결과를 미리 예측할 수 있습니다.
사각형 느낌을 유지하고 싶다면 반경을 최대치보다 확실히 낮게, 원하는 카드 모서리 느낌에 맞춰 짧은 변 길이로 역산해서 넣으면 됩니다.
무료 · 회원가입 없음 · 브라우저에서만 처리되어 서버에 업로드되지 않음 · 투명 배경 PNG로 다운로드
자주 묻는 질문
정사각형 이미지에서 반경 50%를 주면 무조건 완전한 원이 되나요?
가로와 세로 픽셀 길이가 정확히 같은 정사각형이라면 그렇습니다. 반경 50%는 짧은 변(이 경우 가로=세로) 길이의 절반과 같은 반지름을 만들고, 네 모서리가 동시에 완전한 반원이 되어 사각형 전체가 원 안에 들어맞는 모양이 됩니다. 다만 리사이즈나 크롭 과정에서 가로세로가 1px이라도 어긋나면 아주 미세하게 타원에 가까워질 수 있습니다.
카드처럼 살짝만 둥글게 하려면 반경을 몇 %로 줘야 하나요?
정해진 정답은 없지만, 반지름이 짧은 변의 절반에서 멀수록 사각형 느낌이 강하게 남고 절반에 가까울수록 알약이나 원에 가까워집니다. 디자인 도구에서 흔히 쓰는 8~16px 정도의 살짝 둥근 느낌을 재현하고 싶다면, 그 px 값을 이미지의 짧은 변 길이로 나눈 뒤 100을 곱해 %로 환산해서 넣으면 비슷한 결과를 만들 수 있습니다.
왜 저장할 때 원본 확장자(JPG)가 아니라 PNG로만 저장되나요?
모서리 바깥으로 깎여나간 영역을 투명하게 남겨야 하는데, 이 투명도(알파 채널) 정보를 저장할 수 있는 형식이 PNG이기 때문입니다. JPG는 알파 채널을 지원하지 않아서 투명 영역이 단색으로 채워지므로, 둥근 모서리 바깥을 비워두려면 PNG로 저장하는 것이 유일한 방법입니다.