둥근 모서리 이미지 — 사진 모서리 둥글게, 원형·알약 모양까지
사진의 네 모서리를 둥글게 잘라 투명 PNG나 배경색을 채운 JPG로 저장합니다. 반경은 사진 짧은 변에 대한 비율로 정해서 어떤 크기의 사진에서든 같은 느낌으로 둥글어지고, 50%로 올리면 정사각형은 원, 직사각형은 알약 모양이 됩니다. 모서리마다 반경을 다르게 줄 수도 있습니다.
둥근 모서리는 딱딱한 직각보다 부드럽고 정돈된 인상을 줍니다. 블로그 썸네일, 발표 자료에 넣을 캡처, 상세 페이지 이미지, 프로필 사진처럼 이미지를 다른 요소와 나란히 놓을 때 자주 씁니다. 웹페이지라면 CSS border-radius로도 되지만, 카카오톡·PPT·한글 문서처럼 CSS를 쓸 수 없는 곳에 넣으려면 이미지 자체를 둥글게 잘라야 합니다.
모서리는 CSS의 border-radius와 같은 원호로 그립니다. 예전에는 2차 곡선으로 그려 모서리가 원보다 덜 둥글었고, '원형'을 골라도 400×400 정사각형에서 5,527개 픽셀이 실제 원과 어긋났습니다. 지금은 원형, 10% 반경, 가로로 긴 알약 모양 모두 원호에서 벗어난 픽셀이 0개입니다.
반경 고르기
| 반경 (짧은 변 대비) | 느낌 | 어울리는 곳 |
|---|---|---|
| 2~5% | 살짝 부드러움 | 문서·발표 자료에 넣는 캡처 |
| 8~12% | 요즘 앱·웹 카드 느낌 | 썸네일, 상품 이미지 |
| 20~30% | 뚜렷하게 둥근 모양 | 배너, 강조하고 싶은 사진 |
| 50% | 원 또는 알약 모양 | 프로필 사진, 버튼 모양 이미지 |
왜 픽셀이 아니라 비율인가
20픽셀 반경은 400픽셀 이미지에서는 뚜렷하지만 4,000픽셀 폰 사진에서는 거의 티가 나지 않습니다. 그래서 반경을 짧은 변에 대한 비율로 정하고, 실제로 몇 픽셀이 되는지는 옆에 함께 표시합니다. 같은 10%로 여러 장을 만들면 크기가 다른 사진들도 같은 모양으로 맞춰집니다.
모서리마다 다르게 설정할 때는 위쪽 두 모서리만 둥글리는 카드 모양이나, 한쪽 모서리만 각진 말풍선 모양을 만들 수 있습니다. 두 모서리 반경의 합이 변의 길이를 넘으면 CSS와 같은 규칙으로 모든 반경을 같은 비율로 줄여 모양이 깨지지 않게 합니다.
투명 배경과 배경색
기본은 투명입니다. 잘린 모서리가 투명하게 남는 PNG라서 어떤 색 위에 올려도 자연스럽습니다. 미리보기의 회색 체크 무늬는 투명한 부분을 보여주는 표시일 뿐 저장되지 않습니다.
올릴 곳의 배경색이 정해져 있다면 배경색을 지정해 채울 수 있습니다. 이때는 JPG로 저장해도 되고, 사진이라면 PNG보다 용량이 훨씬 작습니다. 투명 배경인 채로 JPG를 고르면 JPG는 투명을 담을 수 없어 모서리를 흰색으로 채운다고 미리 알려줍니다.
자주 묻는 질문
미리보기에서는 둥근데 저장하면 각져 보여요.
예전 버전은 미리보기 캔버스에 화면용 둥근 모서리가 따로 걸려 있어서, 반경 0에서도 화면에서만 둥글게 보였습니다. 지금은 미리보기에 저장될 픽셀 그대로가 보입니다. 저장한 PNG를 흰 배경 앱에서 열면 투명한 모서리가 흰색으로 보일 수 있는데, 이는 보는 프로그램의 배경색입니다.
앱 아이콘을 만들 때 미리 둥글려야 하나요?
아니요. iOS와 안드로이드는 아이콘 모양을 시스템이 직접 적용하므로 정사각형 그대로 제출해야 합니다. 앱 아이콘은 앱 아이콘 만들기 도구를 쓰세요.
아주 큰 사진도 되나요?
됩니다. 다만 아이폰 사파리는 약 1,677만 화소가 넘는 이미지를 그리지 못해서, 그보다 큰 사진은 한도 안으로 줄여 저장하고 줄어든 크기를 표시합니다.
사진이 서버로 전송되나요?
아니요. 모든 처리는 브라우저 안에서 이루어집니다.