둥근 모서리 이미지 생성기

이 라운더가 다른 점: 모든 모서리가 저마다의 반경을 가질 수 있고, 반경은 픽셀 또는 짧은 변의 퍼센트로 표현할 수 있으며, 모서리 자체는 평범한 라운드 호, 부드러운 스쿼클, 곧은 베벨 또는 안쪽으로 파인 스쿱이 될 수 있습니다. 도구는 일치하는 CSS border-radius 규칙도 출력하므로, 같은 모양을 파일이 아니라 코드로도 재현할 수 있습니다.

이미지 모서리를 둥글게 만드는 이유

이미지에 둥근 모서리를 추가하는 방법

1. 이미지를 불러오세요. 파일을 드롭 영역으로 끌어다 놓거나 이미지 선택을 고르세요. JPG, PNG, WebP, GIF, BMP, AVIF, SVG는 브라우저가 디코딩할 수 있으면 모두 작동합니다.
2. 반경을 설정하세요. 미리보기의 둥근 모서리 핸들 중 하나를 드래그하거나, 모서리 반경 슬라이더를 움직이거나, 정확한 숫자를 입력한 뒤 단위를 px와 % 사이에서 바꾸세요.
3. 모서리 스타일을 고르세요. 라운드, 스쿼클, 베벨 또는 스쿱. 각 모서리에 고유한 값을 주려면 모든 모서리 연결을 끄세요. 화면에는 제어하는 모서리와 같은 위치에 배치됩니다.
4. 원한다면 패딩, 배경 또는 테두리를 추가하세요. 패딩은 그림 주위로 캔버스를 키우고, 배경이 그 공간을 채우며, 테두리 링은 예전 직사각형이 아니라 둥근 윤곽을 따라갑니다.
5. 다운로드하세요. 비치는 모서리에는 PNG를 유지한 뒤 이미지 다운로드를 클릭하세요. 패널은 내보낸 크기와 파일 크기를 알려 주고, CSS 상자는 동등한 스타일시트 규칙을 보여 줍니다.

픽셀 또는 퍼센트 반경

픽셀 반경은 절대값입니다. 이미지가 400픽셀이든 4000픽셀이든 32 px는 32 px이므로, 같은 값이 작은 썸네일에서는 극적으로 보이고 큰 사진에서는 거의 보이지 않습니다. 퍼센트 반경은 이미지의 짧은 변을 기준으로 측정되므로 그림과 함께 스케일되어 모든 내보내기에서 같아 보입니다. 50%가 실용적인 최댓값이며, 정사각형 이미지에서는 원, 직사각형에서는 알약형을 만듭니다.

네 가지 모서리 스타일

• 라운드 — 사분원으로, 브라우저가 border-radius에 그리는 기하와 같습니다. 예측 가능하며, CSS에 일대일로 대응하는 유일한 스타일입니다.
• 스쿼클 — 슈퍼타원 스타일 모서리입니다. 곡선이 각 변을 따라 더 멀리서 시작되어 원이 가진 급격한 곡률 변화 없이 곧은 변으로 흘러가며, 그래서 iOS와 Android의 앱 아이콘 가이드라인이 이 형태를 씁니다.
• 베벨 — 모서리가 곧은 대각선으로 잘립니다. 곡선보다 날카롭고 기술적이며, 작은 크기에서도 선명하게 유지됩니다.
• 스쿱 — 호가 안쪽으로 휘어 오목한 한 입을 제거합니다. 맞은편 두 모서리를 스쿱하면 바로 티켓이나 태그로 읽힙니다.

출력 형식 선택

JPG에는 알파 채널이 없으므로, JPG로 내보내면 잘려 나간 모서리가 비어 있지 않고 선택한 배경색으로 채워집니다. 흰 페이지 위의 흰 둥근 사진처럼 그게 바로 원하는 경우도 많지만, 그것은 투명도가 아니며 나중에 되돌릴 수 없습니다.

주요 기능

• 설계상 비공개: 파일은 브라우저 FileReader API로 읽어 로컬 캔버스에 그려집니다. 업로드되지 않습니다.
• 모서리 드래그 편집: 미리보기에서 핸들을 대각선으로 당기면 손가락이나 커서를 따라 반경이 움직입니다.
• 모서리별 제어: 위쪽 두 모서리만 둥글게 하거나, 한쪽만 스쿱하고 나머지는 직각으로 둘 수 있습니다.
• 미리보기 배경: 투명도 체크무늬, 흰색, 어두운색, 컬러 그라데이션을 전환해 다운로드 전에 알파 가장자리를 확인하세요.
• 패딩, 배경 채우기, 테두리 링이 모두 같은 둥근 윤곽을 따릅니다.
• 출력 배율: 원본 해상도로 내보내거나, 같은 패스에서 75%, 50%, 25%로 줄이세요.
• 복사 가능한 CSS: 생성된 border-radius 규칙은 파일이 정답이 아닐 때 스타일시트에서 같은 모양을 재현합니다.
• 안티앨리어싱된 가장자리: 모서리는 클리핑 경로로 그려지므로, 계단형 거친 가장자리 대신 곡선이 부드럽게 유지됩니다.

이미지 파일인가, CSS인가?

둥근 그림이 슬라이드 덱, PDF, 이메일 서명, 마켓플레이스 목록, 또는 스타일시트를 실행하지 않는 도구로 간다면, 실제 투명도가 있는 실제 파일이 필요합니다. PNG를 내보내세요. 직접 제어하는 웹 페이지라면 CSS 규칙이 더 가볍고, 어떤 크기에서도 선명하며, 나중에 바꾸기도 쉽습니다. 스니펫을 복사하세요. 둘은 배타적이지 않습니다. 많은 팀이 외부용으로는 PNG를, 사이트용으로는 CSS를 함께 씁니다.

문제 해결

• 모서리가 거칠어 보입니다: 원본이 이미 작을 가능성이 큽니다. 확대한 이미지를 둥글게 하기보다, 가능한 가장 큰 해상도에서 둥글게 만든 뒤 축소하세요.
• 어두운 배경에 얇은 밝은 후광이 보입니다: 이미지에 흰색 매트가 구워져 들어 있습니다. 맞는 색으로 패딩을 1-2픽셀 더하거나, 반경을 조금 키워 후광을 잘라 내세요.
• 다운로드가 흰 사각형으로 열립니다: 형식이 JPG이거나 배경이 투명이 아닙니다. 출력 형식을 PNG로 바꾸세요.
• 아주 큰 사진이 느리게 느껴집니다: 캔버스가 슬라이더를 움직일 때마다 전체 해상도 이미지를 다시 그립니다. 슬라이더에서 손을 떼고 브라우저에 잠시 시간을 주거나, 출력 배율을 줄이세요.
• 애니메이션 GIF가 움직임을 잃습니다: 캔버스는 한 프레임만 내보냅니다. 첫 프레임만 둥글게 되어 저장됩니다.

자주 묻는 질문

내 이미지가 서버로 업로드되나요?

아니요. 파일은 브라우저의 FileReader API로 읽혀 사용자 기기의 HTML 캔버스에 그려집니다. miniwebtool로는 아무것도 전송되지 않으므로 비공개 스크린샷, 클라이언트 아트워크, 개인 사진이 컴퓨터를 떠나지 않습니다. 페이지 자체를 불러오려면 인터넷 연결이 필요합니다.

둥근 모서리가 투명이 아니라 흰색이나 검은색으로 보이는 이유는 무엇인가요?

투명도를 저장할 수 있는 형식은 PNG와 WebP뿐입니다. JPG로 내보내면 알파 채널이 없어서 잘려 나간 모서리가 배경색으로 채워집니다. 출력 형식 목록에서 PNG를 선택하고 배경을 투명으로 설정하세요. 그래도 모서리가 이상하면, 붙여넣는 앱이나 웹사이트가 알파를 지원하는지 확인하세요. 일부 편집기는 PNG 투명도를 흰색 위에 평탄화합니다.

완벽한 원형 이미지를 만들려면 어떻게 하나요?

반경 단위를 퍼센트로 바꾸고 반경을 50%로 설정하세요. 정사각형 이미지에서는 완벽한 원이 됩니다. 직사각형에서는 알약형 또는 스타디움 모양이 되는데, 퍼센트 반경은 짧은 변을 기준으로 측정되기 때문입니다. 원형 프리셋을 사용하면 정사각형으로 자른 뒤 한 번에 둥글게 만듭니다.

라운드, 스쿼클, 베벨, 스쿱 모서리의 차이는 무엇인가요?

라운드는 평범한 사분원으로, CSS border-radius가 그리는 모양과 같습니다. 스쿼클은 곡선을 각 변을 따라 더 멀리 펼쳐 이음새가 부드럽고 연속적이며, iOS와 Android 앱 아이콘이 쓰는 형태입니다. 베벨은 모서리를 곧은 대각선으로 잘라 냅니다. 스쿱은 바깥이 아니라 안쪽으로 휘어 각 모서리에서 오목한 한 입을 파내며, 티켓, 쿠폰, 배지에 잘 맞습니다.

픽셀 반경이 웹사이트의 CSS border-radius와 일치하나요?

반경은 이미지 자체의 픽셀에 적용되므로, 이미지가 원래 크기로 표시될 때만 CSS와 일치합니다. 1200픽셀 너비로 내보낸 이미지가 600픽셀 너비 칸에 보이면 절반으로 축소되므로, 48픽셀 반경은 화면에서 24픽셀처럼 보입니다. 크기에 무관한 결과를 원하면 퍼센트 단위를 쓰거나, 이미 축소 환산값을 알려 주는 이 도구의 CSS 스니펫을 복사하세요.

화질과 원본 해상도를 유지할 수 있나요?

네. 출력 배율을 바꾸거나 패딩을 추가하지 않으면 내보내기는 원본 픽셀 크기를 유지하며, PNG는 무손실이라 다시 압축되지 않습니다. 바뀌는 것은 모서리 픽셀뿐이며, 불투명에서 투명으로 바뀝니다. WebP와 JPG는 손실 압축이므로, 원본 픽셀의 정확한 복사보다 파일 크기가 더 중요할 때 사용하세요.