> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG 패스 모서리 둥글게: 채워진 도형의 형태 바꾸기

> 접선 방향이 맞는 호로 SVG 채우기 모서리 하나를 둥글게 만듭니다. 반지름이 모서리에 맞는지 확인하고 둥근 획 연결이 원래 채우기를 바꾸지 않는 이유를 살펴보세요.

Source: https://perfectvector.com/ko/blog/round-svg-path-corners

Language: ko
Author: Irene Kim
Published: 2026-10-12T08:00:00+09:00

SVG 패스의 채워진 모서리를 둥글게 하려면 패스의 기하 형태를 바꿔야 합니다. 인접한 직선 구간을 각각 꼭짓점 전에 끝내고 새 끝점들을 곡선으로 연결하세요. `stroke-linejoin="round"`는 연결부에 그려지는 획을 바꾸며 원래 채우기 윤곽선은 그대로 둡니다.

이 튜토리얼에서는 직접 만든 채우기 엠블럼의 직각 모서리 하나를 둥글게 만듭니다. 일반 텍스트 편집기와 브라우저가 필요합니다. 완성하면 20 단위 원형 필렛이 있는 전체 SVG, 선택한 반지름이 들어맞는지 확인하는 검사, 비교하거나 복원할 수 있는 원래 각진 파일이 남습니다.

필렛은 뾰족한 모서리를 대체하며 이웃한 변에 접선 방향으로 만나는 곡선입니다. 예제는 수평·수직 직선 사이에 원의 4분의 1에 해당하는 호를 사용합니다. 임의의 추적된 Bézier 패스를 자동으로 둥글게 만드는 기능은 아닙니다.

## 그림에 필요한 변경 선택하기

[stroke-linejoin 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin)는 패스 모서리에 획을 그리는 방법을 정의합니다. 칠해진 테두리를 바꾸려는 경우에는 둥근 연결을 사용하세요. 채워진 실루엣을 바꾸려면 실제 패스를 편집해야 합니다.

| 개체 또는 요구사항       | 적절한 시작점              | 바뀌는 것          |
| ---------------- | -------------------- | -------------- |
| 일반 SVG 사각형       | 사각형에 `rx` 또는 `ry` 설정 | 사각형 모서리의 기하 형태 |
| 획이 있는 각진 패스      | 둥근 획 연결 설정           | 기존 패스 주변의 획 표현 |
| 채워진 다각형 또는 엠블럼   | 선택한 모서리를 곡선으로 교체     | 채워진 실루엣        |
| 곡선이 있는 복잡한 추적 패스 | 선택한 접합부를 검사하고 편집     | 실제 구간에 따라 다름   |

일반 사각형의 `rx`와 `ry`는 [SVG rect 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect)에서 설명합니다. 이 엠블럼에는 대각선 변도 있으므로 둥근 사각형으로 바꾸면 선택한 모서리 외의 부분까지 달라집니다.

획에 긴 돌출부가 생기는 것만 문제라면 [마이터 돌출 진단](https://perfectvector.com/ko/blog/svg-miter-spikes)부터 확인하세요. 이 글에서는 채워진 기하 형태 자체를 바꿉니다.

## 각진 원본 저장하기

아래 전체 파일을 `emblem-original.svg`에 복사한 뒤 브라우저에서 여세요. 오른쪽 위 꼭짓점은 (170, 30)입니다. 들어오는 변은 수평이고 나가는 변은 (170, 100)까지 아래로 이어집니다.

```xml
<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>
```

이 파일을 비교용 원본으로 보존하세요. 해당 패스에 `stroke="#df9d34"`, `stroke-width="8"`, `stroke-linejoin="round"`를 추가하면 그려진 테두리가 둥글어집니다. 하지만 어두운 채우기는 여전히 원래 뾰족한 모서리까지 차지합니다.

## 해당 모서리를 20 단위 호로 교체하기

들어오는 직선의 끝을 꼭짓점에서 왼쪽으로 20 단위 떨어진 (150, 30)으로 옮기세요. 나가는 직선의 시작은 아래로 20 단위 떨어진 (170, 50)으로 옮기세요. 중심이 (150, 50)이고 반지름이 20인 원이 두 점을 4분의 1 호로 연결합니다.

두 번째 전체 파일을 `emblem-rounded.svg`로 저장하세요.

```xml
<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>
```

`A20 20 0 0 1 170 50`은 가로·세로 반지름이 20이고 회전이 0이며, 작은 호와 sweep 플래그 1을 사용해 (170, 50)에서 끝나는 원호를 뜻합니다. [SVG 패스 명세](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands)는 이 매개변수들을 정의합니다. 시계 방향으로 꺾이는 이 모서리에서는 의도한 4분의 1 원을 선택합니다. 호가 잘못된 방향으로 굽는다면 [호 플래그 가이드](https://perfectvector.com/ko/blog/svg-arc-flags)로 진단할 수 있습니다.

원의 반지름은 첫 끝점에서 수직이고 두 번째 끝점에서 수평입니다. 따라서 접선은 들어오는 수평선과 나가는 수직선을 따릅니다. 곡선이 둥글게 보여도 연결부에 꺾임이 남을 수 있습니다. 이 구성은 해당 두 변의 접선 방향을 맞춥니다.

![둥근 획이 칠해진 각진 채우기 엠블럼, 패스에 20 단위 필렛을 적용한 같은 엠블럼, 반지름이 너무 커 다음 꼭짓점을 지나치는 구성의 비교](https://perfectvector.com/blog/round-svg-path-corners/fillet-comparison.webp)

*첫 번째 예제는 획 표현을 바꾸고 두 번째는 어두운 채우기 윤곽선을 바꿉니다. 세 번째는 더 짧은 인접 변을 무시한 잘못된 결과를 보여주며, 반지름 검사가 이 경우를 거부합니다.*

## 반지름이 인접한 변에 들어맞는지 확인하기

이 90도 모서리에서 원형 필렛은 각 인접 변을 따라 반지름과 같은 길이를 사용합니다. 들어오는 구간은 길이가 140 단위지만 나가는 구간은 70 단위뿐입니다. 모서리 하나를 처리하는 이 구성에서는 반지름이 양수이면서 70 이하여야 합니다. 나가는 변에 직선 부분을 남기려면 더 작은 반지름을 선택하세요.

다음 함수는 의도적으로 이 엠블럼의 해당 모서리에만 사용할 수 있게 만들었습니다. JavaScript 콘솔이나 Node.js에서 실행하면 대체할 `d` 값을 생성합니다.

```javascript
function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}

roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z
```

반지름이 80이면 단순한 구성에서는 호가 다음 꼭짓점 (170, 100)을 넘어 (170, 110)에서 끝납니다. 이후 `V100`에서 방향이 되돌아갑니다. 브라우저가 그리는 모양을 그대로 받아들이지 말고 그 반지름을 거부하세요.

다른 직선 모서리에서는 접점까지의 거리가 각도에 따라 달라집니다. 내부 각도가 θ인 일반적인 볼록 모서리의 거리는 `r / tan(θ / 2)`입니다. 공유하는 변의 양 끝을 모두 둥글게 만든다면 두 끝에서 사용한 거리의 합이 그 변 안에 들어가야 합니다. 오목한 모서리, 기존 곡선, 복합 도형에는 추가적인 기하 판단이 필요하며 이 함수는 이를 처리하지 않습니다.

## 바뀐 실루엣을 검증하고 원본 보존하기

1. 전체 SVG 파일 두 개를 같은 크기와 배경에서 여세요.
2. 둥근 획 연결을 적용한 버전에서 획을 잠시 제거하세요. 채우기는 각진 원본과 같아야 합니다.
3. 모서리를 둥글게 만든 버전의 오른쪽 위 윤곽선을 비교하세요. 나머지 변, 대각선, 전체 위치는 원본과 같아야 합니다.
4. 반지름 검사에 20을 넣고 다음으로 80을 넣으세요. 첫 번째는 제시한 패스를 만들고 두 번째는 반지름 오류를 던집니다.
5. 저장된 SVG를 실제 사용할 대상에서 검사하세요. 둥글게 만드는 과정에서 의도한 특징이 사라지거나 대상 프로그램이 모양을 바꾼다면 원본을 복원하세요.

확인 방법: 원본, 둥근 획 버전, 필렛 버전의 패스를 Chromium에서 렌더링했습니다. (169, 31)의 채우기 검사점은 앞의 두 도형 안에 있었고 필렛 도형 바깥에 있었습니다. 위와 같은 함수는 20을 허용하고 80을 거부했습니다. 또한 두 호 끝점이 반지름 및 인접 접선 방향과 맞는지 확인했습니다. 제공한 직선 모서리 예제를 검증한 것이며 일반적인 필렛 알고리즘이나 절단기의 출력을 검증한 것은 아닙니다.

곡선이 바깥으로 불룩해진다면 호 끝점과 sweep 플래그를 살펴보세요. 꺾임이 남아 있다면 곡선의 접선이 이웃한 구간과 맞는지 확인하세요. 별도의 수정 작업은 [Bézier 매끄러운 연결 가이드](https://perfectvector.com/ko/blog/svg-bezier-smooth-joins)에서 설명합니다. [SVG 편집 가이드](https://perfectvector.com/ko/blog/how-to-edit-an-svg)는 파일 열기, 검사, 사용할 수 있는 원본 보존을 다룹니다.

## 모서리 편집 전에 PerfectVector가 맡는 단계

그림이 래스터 이미지로만 있다면 PerfectVector로 벡터 패스를 재구성할 수 있습니다. 먼저 재구성한 윤곽선을 검사한 뒤 사본에서 어떤 모서리를 바꿀지 정하세요. [이미지 벡터 변환 작업 절차](https://perfectvector.com/ko/image-to-vector)는 재구성 단계를 제공하며 이 필렛 구성을 자동 적용하지는 않습니다.

벡터 원본이 있다면 그 파일을 사용하세요. 추적한 윤곽선에는 이 직선 모서리 예제와 맞지 않는 Bézier 구간이나 작은 불규칙 형태가 들어갈 수 있습니다. 모든 추적 접합부를 둥글게 만드는 것보다 의도한 단순 엠블럼을 다시 그리는 편이 쉬울 수 있습니다. 의도적으로 디자인을 바꾸기 전에는 승인된 형태를 보존하고, 다음 납품 점검에는 [블로그 작업 가이드](https://perfectvector.com/ko/blog)를 활용하세요.

## 자주 묻는 질문

### 둥근 획 연결을 적용해도 채우기 모서리가 뾰족한 이유는 무엇인가요?

연결 설정은 패스 주변에 그려지는 획을 제어합니다. 채우기는 기존 패스 기하 형태를 따르므로 해당 형태를 곡선으로 교체하기 전까지 원래 모서리를 유지합니다.

### 이 함수를 모든 SVG 패스에 사용할 수 있나요?

아니요. 제시한 직선 엠블럼의 지정된 직각 모서리 하나만 처리합니다. 다른 각도, 오목한 모서리, 기존 곡선, 공유 변의 제약에는 각각 별도의 구성이 필요합니다.

### 이 작업으로 바로 절단할 수 있는 파일이 되나요?

예제의 채워진 윤곽선 하나를 바꾸는 작업입니다. 저장된 기하 형태를 검사하고 실제 절단기나 제작 공정에서 요구하는 점검을 수행하세요. 이 브라우저 테스트가 실제 절단 결과를 입증하지는 않습니다.

## 출처

1. [MDN: SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin): 비교 예제에서 채우기 기하 형태와 구분한 획 표현 설정을 정의합니다.
2. [MDN: SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect): 일반 사각형에서 사용할 수 있는 더 단순한 반지름 제어를 설명합니다.
3. [W3C: SVG 타원 호 명령](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands): 전체 둥근 패스에 사용한 호 반지름, 플래그, 끝점을 정의합니다.

***

원본 패스가 없다면 [PerfectVector로 그림을 재구성](https://perfectvector.com/ko/image-to-vector)하세요. 윤곽선을 기준 이미지와 비교하고 재구성한 원본을 저장한 뒤, 의도적인 모서리 편집은 별도 사본에서 실제 사용 크기로 테스트하세요.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/round-svg-path-corners)
- [SVG 상대 경로 명령: 현재 지점 추적하기](https://perfectvector.com/ko/blog/svg-relative-path-commands.md)
- [SVG를 가져오면 크기가 틀릴 때: 진단과 해결](https://perfectvector.com/ko/blog/svg-imports-wrong-size.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)