전체·개별 모서리
네 모서리를 함께 조절하거나 연결을 해제해 각 모서리를 독립적으로 설정할 수 있습니다.
큰 반경은 이미지 크기에 맞춰 정상화되어 모서리가 겹치거나 깨지지 않게 처리됩니다.012 · IMAGE EDIT
이미지 테두리둥근 모서리 도구
이미지에 테두리, 둥근 모서리, 원형 효과와 그림자를 추가하세요.
LOCAL브라우저에서 바로 처리
WORKSPACE이미지 외곽 스타일 작업장
이미지를 여기에 놓으세요
이미지는 서버로 전송되지 않고 브라우저에서 처리됩니다.
JPG · PNG · WebPHOW TO USE
사용 방법
- 01
이미지를 선택하고 둥근 모서리 또는 원형 형태를 선택합니다.
- 02
모서리 반경과 개별 모서리를 조절합니다.
- 03
필요하면 테두리 두께·색상·정렬을 설정합니다.
- 04
그림자 위치·블러·확산·불투명도와 배경·자동 여백을 확인합니다.
- 05
원본과 결과, 결과 픽셀을 비교한 뒤 출력 형식과 품질을 선택해 다운로드합니다.
EDGE STYLE GUIDE
둥근 모서리·테두리·그림자를
정확하게 적용하는 기준
화면에서만 둥글게 보이게 하는 CSS 효과가 아니라 실제 다운로드 이미지의 픽셀에 형태와 외곽 효과를 렌더링합니다.안쪽·중앙·바깥쪽 정렬
테두리는 둥근 모서리와 원형 경로를 따라가며 두께와 정렬에 따라 필요한 외곽 공간을 계산합니다.
바깥쪽 테두리를 사용하면 결과 캔버스가 원본보다 커질 수 있습니다.잘리지 않는 그림자
가로·세로 위치, 블러, 확산, 색상과 불투명도를 조절하고 자동 여백으로 그림자 범위를 확보합니다.
그림자 위치가 한쪽으로 치우쳐도 필요한 방향의 여백을 따로 계산합니다.어떤 형태를 선택해야 하나요?
- 프로필 사진은 원형 모드를 사용하면 원본을 임의로 자르지 않고 정확한 원형 결과를 만들 수 있습니다.
- 앱 화면이나 카드 이미지는 작은 반경과 얇은 테두리를 조합하면 원본 인상을 크게 바꾸지 않고 외곽만 정리할 수 있습니다.
- 투명 PNG는 둥근 모서리 바깥의 알파를 유지할 수 있어 웹·앱 자산에 적합합니다.
저장 전에 확인할 점
- JPG는 투명도를 저장하지 못하므로 투명 배경 상태에서 JPG로 저장하면 선택한 배경색이 합성됩니다.
- 바깥쪽 테두리와 큰 그림자는 결과 캔버스를 확장하므로 원본보다 결과 픽셀 크기가 커질 수 있습니다.
- 원형 모드는 직사각형 원본을 강제로 크롭하지 않고 전체를 보존하는 방식을 사용합니다.
- 일반 사용자용 서비스 상한은 결과 이미지 한 변 16,000px, 총 80,000,000픽셀입니다. 테두리·그림자·여백으로 확장된 최종 결과도 같은 기준을 적용합니다.
RENDER ROUTES
설정이 결과 크기에 반영되는 순서
형태만 바꾸는 경우와 테두리·그림자까지 사용하는 경우를 구분하면 결과 크기를 예측하기 쉽습니다.SHAPE→BORDER
형태를 먼저 확정
둥근 모서리 또는 원형을 먼저 정한 뒤 그 경로를 기준으로 테두리를 계산합니다.
BORDER→SHADOW
외곽 효과 범위 계산
중앙·바깥 테두리와 그림자의 X·Y·블러·확산 값을 이용해 필요한 외곽 범위를 계산합니다.
PADDING→OUTPUT
캔버스 확장 후 저장
자동 여백과 추가 여백을 합쳐 최종 캔버스를 만든 뒤 JPG·PNG·WebP로 렌더링합니다.
PRACTICAL DETAILS
실제 결과 품질을 좌우하는 네 가지
모서리 안티앨리어싱
작은 이미지나 큰 radius에서도 경계가 톱니처럼 보이지 않도록 실제 캔버스 경로를 사용합니다.
테두리 두께 균일도
원형과 둥근 모서리에서도 외곽선이 한쪽만 두껍거나 모서리에서 끊겨 보이지 않도록 경로를 맞춥니다.
투명 알파
PNG·WebP의 둥근 모서리와 그림자 주변은 투명 픽셀을 유지하고 미리보기 체크 패턴은 결과 파일에 포함하지 않습니다.
원본 해상도 출력
미리보기는 화면에 맞게 축소하지만 다운로드 시에는 원본 해상도를 기준으로 다시 렌더링합니다.
EXPERT POST
이미지 외곽 스타일을
깨끗하게 만드는 실무 기준
둥근 모서리, 원형 이미지, 테두리와 그림자는 단순한 장식처럼 보이지만 반경·정렬·알파·캔버스 계산이 어긋나면 저장 결과에서 바로 티가 납니다.반경은 이미지 크기와 함께 봐야 합니다
같은 40px 반경이라도 300px 이미지와 3000px 이미지에서 보이는 정도는 다릅니다. 카드형 이미지는 짧은 변을 기준으로 비율을 생각하고, 개별 모서리를 사용할 때는 네 모서리의 합이 가로·세로 크기와 충돌하지 않도록 정상화된 결과를 확인하는 것이 좋습니다.
원형 이미지는 50% radius만으로 충분하지 않습니다
직사각형 이미지에 단순히 50% 반경을 주면 타원이 됩니다. 정확한 원을 만들려면 정사각형 결과 영역이 필요합니다. 이 도구는 원본을 임의로 중앙 크롭하지 않고 전체를 보존하는 정사각형 캔버스에 배치한 뒤 원형 마스크를 적용합니다.
테두리 정렬에 따라 결과 크기가 달라집니다
안쪽 테두리는 원본 캔버스 안에 들어가므로 결과 크기를 유지하기 쉽습니다. 중앙과 바깥쪽 테두리는 일부가 원본 바깥으로 나가므로 잘리지 않게 캔버스를 넓혀야 합니다. 같은 두께라도 정렬 방식에 따라 이미지가 차지하는 실제 영역이 달라집니다.
둥근 모서리와 테두리는 같은 radius를 그대로 쓰면 어색할 수 있습니다
테두리 중심 경로와 이미지 마스크의 반경을 무조건 같은 값으로 두면 모서리에서 두께가 불균일해 보일 수 있습니다. 테두리 위치와 두께를 고려해 내부·외부 경로가 함께 맞아야 얇은 선부터 두꺼운 선까지 자연스럽습니다.
그림자 자동 여백은 잘림 방지 기능입니다
그림자의 블러와 확산만큼 사방에 같은 여백을 더하는 방식은 X·Y 오프셋이 큰 경우 비효율적이거나 한쪽이 잘릴 수 있습니다. 실제 그림자 범위를 상·하·좌·우로 나눠 계산해야 위치를 옮겨도 그림자가 결과 캔버스 밖으로 빠지지 않습니다.
투명 PNG와 JPG는 결과 기준이 다릅니다
PNG와 WebP는 둥근 모서리 바깥과 그림자 주변의 알파를 그대로 저장할 수 있습니다. JPG는 알파 채널이 없기 때문에 투명 영역을 특정 배경색과 합성해야 합니다. 같은 미리보기라도 JPG 저장 시 배경색에 따라 경계 인상이 달라질 수 있습니다.
미리보기와 다운로드를 같은 크기로 렌더링할 필요는 없습니다
고해상도 원본을 화면 미리보기마다 그대로 다시 그리면 브라우저 메모리와 반응성이 급격히 나빠질 수 있습니다. 미리보기는 화면 크기에 맞춰 가볍게 렌더링하고, 다운로드할 때 원본 해상도로 최종 렌더링하는 편이 품질과 성능을 함께 지키기 좋습니다.
그림자와 외곽 테두리는 파일 크기보다 픽셀 면적을 먼저 봐야 합니다
입력 파일이 작아도 큰 여백·바깥 테두리·그림자를 조합하면 결과 캔버스 면적은 크게 늘어날 수 있습니다. 실제 처리 한계는 압축 파일 용량만으로 판단하지 않고 결과 가로·세로와 총 픽셀, 인코딩 시 메모리 사용량을 함께 검수해야 합니다.
FAQ
자주 묻는 질문
01이미지 모서리를 둥글게 만들 수 있나요?+
예. 전체 모서리를 동시에 조절하거나 각 모서리를 개별 설정할 수 있습니다.
02원형 이미지도 만들 수 있나요?+
예. 직사각형 원본은 자르지 않고 정사각형 캔버스에 전체를 보존한 뒤 원형 마스크를 적용합니다.
03둥근 이미지에도 테두리를 넣을 수 있나요?+
예. 테두리는 둥근 모서리 경로를 따라 적용됩니다.
04테두리 정렬도 바꿀 수 있나요?+
예. 안쪽, 중앙, 바깥쪽 정렬을 선택할 수 있으며 필요한 경우 결과 캔버스가 확장됩니다.
05그림자를 추가할 수 있나요?+
예. 가로·세로 위치, 블러, 확산, 색상과 불투명도를 조절할 수 있습니다.
원본 파일은 수정되지 않으며 모든 처리는 현재 브라우저 안에서 수행됩니다.