이미지 원형 자르기 온라인 무료 — 둥근 프로필 사진 만들기

원과 둥근 사각형, 어느 쪽을 쓸까

사실 도형은 여러분이 고르는 것이 아닙니다. 플랫폼이 아바타를 표시할 때 자체 마스크를 씌우고, 그것은 덮어쓸 수 없습니다. 여러분이 실제로 고르는 것은 파일이 그 마스크와 맞는지 여부입니다.

이것이 중요한 이유는 원이 정사각형의 약 21%를 잘라내는데 그 전부가 모서리이기 때문입니다. 직접 원으로 자르면 무엇이 남는지 정확히 볼 수 있습니다. 정사각형을 통째로 올리고 잘되기를 바라면, 플랫폼의 원이 모서리에 있던 것을 잘라냅니다 — 모자의 윗부분, 어깨, 로고의 절반 같은 것들 말입니다.

요령을 말하자면, 얼굴에는 원이, 워드마크에는 둥근 사각형이 맞습니다. 얼굴은 이미 대체로 둥글기 때문에 모서리에는 애초에 정보가 없었습니다. 글자가 들어간 로고는 대개 세로보다 가로가 길어 원이 단어의 양 끝을 잘라냅니다. 슬랙과 iOS, 플레이 스토어가 아이콘에 둥근 사각형을 쓰면서도 모든 소셜 네트워크가 사람에게는 원을 쓰는 이유가 여기에 있습니다.

투명 PNG가 용량을 더 쓸 값어치가 있는 이유

JPG로 자른 원은 사실 원이 아닙니다. JPG에는 알파 채널이 없어 네 모서리가 무언가를 반드시 담아야 하고, 보통은 흰색입니다. 흰 페이지 위에서는 아무도 눈치채지 못합니다. 그 아바타를 어두운 테마나 색이 있는 카드, 슬라이드, 영상 오버레이 위에 올리면 머리 주위로 흰 삼각형 네 개가 나타납니다.

PNG와 WebP는 둘 다 알파 채널이 있어 모서리에 '아무것도' 저장하지 않고, 원이 어떤 배경 위에서도 깔끔하게 합성됩니다. 여기서 PNG를 기본값으로 둔 이유입니다. WebP는 대략 3분의 1 용량으로 같은 일을 하고 요즘 브라우저는 모두 읽을 수 있지만, 일부 업로드 양식과 오래된 데스크톱 프로그램은 여전히 이 확장자를 거부합니다. 파일을 남의 시스템에 넘겨야 한다면 PNG가 안전한 선택입니다.

JPG를 쓸 만한 유일한 경우는 용량 제한입니다. 양식이 JPG를 요구하거나 수십 킬로바이트로 제한한다면 여기서 JPG를 고르고, 배경색을 목적지 페이지가 실제로 쓰는 색으로 맞춰 모서리가 그 안에 묻히게 하세요.

32픽셀에서도 알아볼 수 있게 얼굴 잡기

아바타는 여러분이 내보낸 크기로 보이는 일이 거의 없습니다. 댓글 목록에서는 가로 32~40픽셀입니다. 그 크기에서 살아남는 것은 머리의 윤곽, 얼굴과 배경의 대비, 그리고 눈이 대략 어디 있는지뿐입니다. 나머지는 전부 뭉개집니다.

그러니 자연스럽게 느껴지는 것보다 더 바짝 자르세요. 원 높이의 약 60~70%를 머리로 채우고, 눈은 중앙선보다 조금 위에 두고, 머리 위에 아주 약간의 여백을 남겨 잘림이 실수처럼 보이지 않게 하세요. 가장 흔한 실수는 복잡한 배경입니다. 얼마 없는 픽셀을 두고 얼굴과 경쟁해 썸네일 전체를 잡음으로 만듭니다. 배경이 어수선하다면 원형 자르기 뒤에 단색이나 흐린 배경을 두는 편이 어느 크기에서도 더 잘 읽힙니다.

실용적인 검증법 하나: 아바타를 내보낸 뒤 파일 탐색기에서 가장 작은 썸네일 설정으로 보세요. 본인이 봐도 자신인지 모르겠다면 남들도 마찬가지입니다.

iOS 스퀘어클 이야기

애플의 앱 아이콘은 둥근 직사각형이 아닙니다. 둥근 직사각형은 직선 변이 4분원 모서리와 만나는데, 그 이음매에서 곡률이 갑자기 튑니다 — 눈은 그것을 살짝 꺾인 지점으로 읽습니다. 애플은 대신 초타원 을 쓰는데, 곡률이 가장자리에서부터 서서히 커지기 때문에 윤곽에 눈에 띄는 전환이 전혀 없습니다. 디자이너들은 그 결과를 스퀘어클이라 부릅니다.

캔버스는 원호 모서리만 그릴 수 있어서, 여기의 둥근 사각형 모드는 진짜 초타원이 아니라 둥근 직사각형에 가까운 근사입니다. 아바타 크기에서는 모서리마다 1~2픽셀 차이라 아무도 알아채지 못합니다. 모서리 반경을 한 변의 약 22%로 두면 애플이 앱 아이콘에 쓰는 비율과 같아집니다. 이 도구의 기본값은 24%인데, 슬랙을 비롯한 대부분의 채팅 앱이 아바타를 마스킹하는 방식과 맞습니다.

슬라이더는 50%까지 올라가고, 그것은 곧 원입니다 — 모서리 반경이 한 변의 절반에 이른 둥근 사각형에는 직선 변이 하나도 남지 않습니다. 이 연속성 때문에 여기서는 두 도형이 별개의 도구가 아니라 하나의 코드 경로를 공유합니다.

테두리, 그리고 테두리가 잘리는 이유

아바타 둘레의 링은 복잡한 배경에서 아바타를 떼어 놓는 좋은 방법이고, 플랫폼의 마스크를 견디는 유일한 스타일 요소이기도 합니다 — 단, 링이 이미지 바깥이 아니라 안쪽에 있을 때만 그렇습니다.

여기는 정확히 짚을 만합니다. 어떤 도구가 320 px 원 바깥에 6 px 테두리를 덧붙이면 파일은 332 px가 되고, 플랫폼은 그것을 다시 축소한 뒤 자체 원형 마스크를 씌웁니다 — 그러면 링 한가운데가 잘려 나가 고르지 않게 됩니다. 이 도구는 테두리를 안쪽에 그려 요청한 크기를 지키므로 320 px는 그대로 320 px이고, 링은 마스크가 기대하는 가장자리에 정확히 놓입니다. 테두리 슬라이더가 한 변의 12%로 제한된 것도 같은 이유입니다. 그 이상은 링이 아니라 액자가 되기 때문입니다.

브라우저에서 자르는 편이 더 안전한 이유

대부분의 '온라인 원형 자르기' 사이트는 사진을 업로드해 서버에서 자른 뒤 돌려줍니다. 자기 얼굴 사진이라면 그 차이는 결코 작지 않습니다. 남의 디스크에 사본이 남고, 그달의 보관 정책이 무엇이든 그 정책의 적용을 받으며, 종종 그 사본에 대한 라이선스를 넘기는 이용약관 조항까지 딸려 옵니다.

Resizo에는 이미지를 받는 백엔드가 없습니다. 자르기는 브라우저 자체의 canvas API를 통해 여러분의 탭 안에서 이루어집니다. 확인하는 방법은 두 가지입니다. 브라우저의 네트워크 패널을 열어 자르는 동안 아무것도 전송되지 않는지 보거나, 페이지를 불러온 뒤 인터넷 연결을 끊고 그대로 잘라 보세요 — 여전히 작동합니다.

유용한 부수 효과도 있습니다. 다시 인코딩하는 과정에서 EXIF 메타데이터가 사라지므로, 휴대폰이 원본에 기록한 GPS 좌표와 촬영 시각이 공개하는 아바타에 따라붙지 않습니다. 그 메타데이터가 필요하다면 원본 파일을 보관해 두세요.