두 원의 가장자리에 맞닿는 채워진 브리지 만드는 방법
두 원 사이에 채워진 브리지를 만들려면 두 원의 바깥쪽 공통 접선 두 개가 원에 닿는 네 점을 찾은 다음, 그 점들을 연결해 닫힌 사각형을 만드세요. 이 사각형을 원과 합쳐 하나로 이어진 실루엣을 만들거나, 원의 복사본을 빼서 원 가장자리에 맞는 곡선형 끝을 가진 별도의 브리지를 만들 수 있습니다.
이 튜토리얼에서는 Inkscape를 사용해 플랫 캐릭터나 가상 반려동물 일러스트에 정밀한 연결부를 만듭니다. 여기서 선택한 구성은 원과 매끄럽게 이어지는 직선형 위쪽 변과 아래쪽 변을 만듭니다. 예제에서는 정확한 좌표를 제시하고, 이어서 원의 크기와 위치가 달라져도 재사용할 수 있는 공식을 설명합니다.
브리지가 두 원과 어떻게 매끄럽게 이어지나요?
브리지가 원에 닿더라도 윤곽선과 매끄럽게 이어지지 않을 수 있습니다. 원주 위 아무 곳에나 꼭짓점을 두면 접점은 생기지만, 브리지의 변이 눈에 띄는 모서리를 만들 수 있습니다. 매끄럽게 이어지려면 그 변이 접점에서 원의 접선을 따라야 합니다.
서로 떨어진 두 원에는 바깥쪽 공통 접선 한 쌍을 사용하세요. 이 접선은 두 원의 바깥쪽을 따라 이어지는 직선입니다. 각 접점은 원 위에 있고, 그 점을 지나는 반지름은 접선과 수직입니다. 이 조건은 Wolfram MathWorld의 원-원 접선 방정식에 표현되어 있습니다.
네 접점이 구성 사각형을 이룹니다. 긴 두 변은 브리지의 바깥으로 드러나는 변이 되고, 닫는 두 변은 원을 가로지릅니다. 도형을 합치거나 원이 겹치는 부분을 제거하면 이 닫는 변은 사라집니다.
이 구성으로는 변이 직선인 연결부가 만들어집니다. 안쪽으로 휘어 들어가 잘록해지는 연결부를 만들려면 곡선을 따로 설계해야 합니다. 접점만으로는 그런 형태를 정할 수 없습니다.
그리기 전에 무엇을 준비해야 하나요?
완전한 원 두 개를 준비하고, 단색 채우기를 적용한 뒤 윤곽선은 없애세요. 작업 내내 같은 좌표 단위를 사용하세요. 눈에 보이는 윤곽선은 맞춰야 할 경계를 가릴 수 있으므로, 채워진 도형의 구성을 마친 뒤 최종 윤곽선을 추가하세요.
Inkscape에서 E를 눌러 타원 도구를 선택한 다음, Ctrl을 누른 채 드래그해 원을 만드세요. 정확한 크기를 지정하려면 도구 컨트롤에서 Rx와 Ry 값을 같게 설정하세요. 객체가 호나 부채꼴이면 계속하기 전에 타원 전체 만들기를 사용하세요. 이 컨트롤은 원, 타원 및 호에 관한 Inkscape 가이드에 설명되어 있습니다.
오브젝트 → 채우기와 윤곽선을 여세요. 단색 채우기를 설정하고 윤곽선 페인트 아래에서 십자 모양의 페인트 없음 컨트롤을 선택하세요. 구성을 살펴보는 동안 불투명도를 100%로 유지하세요. 설정에 관한 자세한 내용은 채우기와 윤곽선 대화 상자를 참조하세요.
원본 원 두 개의 복사본을 작업 영역 바깥에 따로 보관하세요. 최종 불리언 작업은 구성을 변경하므로, 원본이 있으면 나중에 더 쉽게 조정할 수 있습니다.
예시 좌표로 정확한 브리지를 어떻게 만드나요?
다음 예시 치수를 사용하세요. 접점 구성을 쉽게 살펴볼 수 있도록 가늘고 길게 좁아지는 연결부를 의도적으로 만들었습니다. 좌표 단위는 픽셀이며, x는 오른쪽으로, y는 아래쪽으로 증가합니다.
| 객체 | 중심 | 반지름 | 경계 상자 |
|---|---|---|---|
| 원 A | (100, 100) | 70 | x = 30–170; y = 30–170 |
| 원 B | (200, 100) | 10 | x = 190–210; y = 90–110 |
두 중심 사이의 거리는 100단위입니다. 반지름을 빼면 가장 가까운 원 가장자리 사이에 20단위의 간격이 생깁니다. 브리지는 이 간격을 채우면서 원의 윤곽선과 매끄럽게 이어져야 합니다.
이 원들의 네 접점은 다음과 같습니다.
| 점 | 위치 | 좌표 |
|---|---|---|
| A 위쪽 | 원 A의 위쪽 접점 | (142, 44) |
| B 위쪽 | 원 B의 위쪽 접점 | (206, 92) |
| B 아래쪽 | 원 B의 아래쪽 접점 | (206, 108) |
| A 아래쪽 | 원 A의 아래쪽 접점 | (142, 156) |
베지어/펜 도구를 선택하고 표에 표시된 순서로 꼭짓점 네 개가 있는 경로를 만드세요. 드래그하지 말고 각 꼭짓점을 클릭한 다음, 시작점을 클릭해 경로를 닫으세요. 원과 같은 단색 채우기를 적용하고 윤곽선은 없애세요.
정확히 배치하려면 사각형을 먼저 대략 그리세요. N을 눌러 노드 도구로 전환하고, 한 번에 노드 하나씩 선택해 도구 컨트롤에서 x와 y 좌표를 입력하세요. 좌표 단위는 픽셀로 설정하세요. Inkscape의 숫자 입력란은 노드 도구 옵션에 설명되어 있습니다.
점들을 연결할 때는 둘레를 따라가세요. A 위쪽 → B 위쪽 → B 아래쪽 → A 아래쪽 → 닫기 순서입니다. 도형을 가로질러 대각선으로 연결하면 의도한 채워진 브리지가 아니라 경로가 교차하게 됩니다.
이 예시 좌표는 결정론적 계산으로 검증했습니다. 각 접점은 해당 원의 중심에서 올바른 거리에 있으며, 브리지의 긴 변은 해당 접점의 반지름과 수직입니다.
브리지를 합칠까요, 따로 둘까요?
캐릭터를 어떻게 편집하거나 색칠할지에 따라 최종 구성을 선택하세요.
| 원하는 결과 | 구성 |
|---|---|
| 하나의 연속된 단색 실루엣 | 원 두 개와 사각형을 합집합으로 합치기 |
| 원에서 끝나는 별도 색상의 브리지 | 사각형에서 원의 복사본을 빼기 |
| 나중에 조정할 수 있는 편집용 구성 | 어느 작업을 하기 전에 원본 원과 사각형을 보관하기 |
하나의 실루엣을 만들려면 원 두 개와 사각형을 모두 선택한 뒤 경로 → 합집합을 선택하세요. 별도의 브리지를 만들려면 원을 복제하고, 복제한 원을 하나의 빼기용 도형으로 합친 다음 사각형 위에 놓으세요. 빼기용 도형과 사각형을 선택하고 경로 → 차이를 선택하세요. 원본 원은 선택 영역 바깥에 보관하세요.
차이 작업은 겹치는 원 부분을 제거해 마주 보는 원의 경계를 따라가는 곡선형 브리지 끝을 남깁니다. 합집합은 전체 채워진 윤곽선을 유지합니다. 이러한 작업과 쌓인 순서의 중요성은 Inkscape 불리언 작업 가이드에 설명되어 있습니다.
사각형의 직선형 닫는 변은 구성용 변입니다. 다듬지 않은 사각형을 다른 색으로 표시해 두면 원 내부에 이 현들이 드러납니다. 브리지에 고유한 색을 적용하고 원주에서 정확히 끝나게 하려면 빼기 작업 흐름을 사용하세요.
다른 원의 접점은 어떻게 계산하나요?
다음 공식은 MathWorld의 접선 방정식에 나오는 반지름 길이와 수직 조건에 기반한 계산용 도구입니다. 임의의 위치에 있는 원에도 적용되므로 두 원을 수평으로 정렬할 필요가 없습니다.
중심을 A = (ax, ay)와 B = (bx, by)로 두고, 양의 반지름을 rA와 rB로 둡니다. 먼저 중심 사이의 거리와 A에서 B를 가리키는 단위 벡터를 계산합니다.
d = sqrt((bx − ax)² + (by − ay)²)
u = (ux, uy) = ((bx − ax) / d, (by − ay) / d)
수직인 단위 벡터 v = (−uy, ux)를 만듭니다. 그런 다음 다음 값을 계산합니다.
q = (rA − rB) / d
s = sqrt(1 − q²)
n₁ = q·u + s·v
n₂ = q·u − s·v
여기서 벡터 곱셈은 각 성분에 스칼라를 곱하는 것을 뜻합니다. 각 벡터 n은 중심에서 접점 방향을 가리킵니다. 네 점은 다음과 같습니다.
- A₁ = A + rA·n₁
- B₁ = B + rB·n₁
- A₂ = A + rA·n₂
- B₂ = B + rB·n₂
둘레를 A₁ → B₁ → B₂ → A₂ → 닫기 순서로 그리세요. 원의 배치와 좌표 방향에 따라 두 법선 중 어느 쪽이 위쪽 변을 나타낼지는 달라질 수 있습니다.
예시에서는 u = (1, 0), q = 0.6, s = 0.8입니다. 두 법선은 (0.6, 0.8)과 (0.6, −0.8)입니다. 각 법선에 각 원의 반지름을 곱한 뒤 해당 중심을 더하면 앞서 제시한 네 좌표를 얻습니다.
이 구성은 해당 벡터에서 바로 도출됩니다. 각 법선의 길이가 1이므로 접점은 원 위에 놓입니다. 대응하는 두 접점 사이 선분과 법선의 내적은 0이므로 접선 조건이 성립합니다. 반지름이 같으면 q = 0이 되어 브리지의 변은 두 중심을 잇는 선과 평행합니다.
이 구성을 조정해야 하는 경우는 언제인가요?
서로 떨어진 원을 연결하는 작업에서는 d > rA + rB여야 합니다. 그래야 브리지가 채울 실제 간격이 생깁니다. 원이 이미 겹친 경우에도 두 원을 합칠 수 있지만, 결과는 다른 형태의 문제를 다룹니다.
두 개의 서로 다른 바깥쪽 접선이 생기려면 공식에서 d > |rA − rB|여야 합니다. 등호가 성립하면 접선 구성이 무너집니다. 그보다 작으면 한 원이 다른 원 안에 들어가고 제곱근 안의 값이 실수가 아닙니다. 두 중심이 일치하면 단위 벡터 계산도 정의되지 않습니다. 이러한 한계는 위 공식에서 비롯됩니다.
원 중 하나를 이동하거나 크기를 바꿀 때마다 접점을 다시 계산하세요. 브리지 꼭짓점을 눈대중으로 옮기면 접촉은 유지하면서 접선 조건을 잃을 수 있습니다. 마찬가지로 원 하나를 늘려 타원으로 바꾸면 기하 구조가 달라지므로 이 원 전용 공식은 더 이상 적용되지 않습니다.
완성된 연결부는 어떻게 확인하나요?
결과물을 확대해서, 그리고 실제로 표시할 크기에서 살펴보세요. 눈에 띄는 결함이 있으면 다음 순서로 원인을 찾으세요.
- 채우기를 확인하세요. 사각형이 닫혀 있고 채워져 있으며 선분이 교차하지 않는지 확인하세요.
- 원의 기하 구조를 확인하세요. 계산에 사용한 중심, 반지름, 좌표 단위가 맞는지 확인하세요.
- 네 접점을 확인하세요. 곡선 핸들을 바꾸기 전에 노드 좌표부터 바로잡으세요.
- 최종 구성을 확인하세요. 합집합이나 차이 작업으로 의도한 실루엣 또는 별도 브리지가 만들어졌는지 확인하세요.
- 윤곽선을 확인하세요. 디자인에 필요하면 완성된 실루엣에 윤곽선을 추가하세요. 별도로 윤곽선을 적용한 조각에는 원치 않는 내부 경계가 없는지 살펴보세요.
수치로 확인하려면 각 접점과 원의 중심 사이 거리를 측정하세요. 그 거리는 해당 원의 반지름과 같아야 합니다. 그런 다음 브리지의 바깥으로 드러나는 각 변이 접점의 반지름과 수직인지 확인하세요. 이 검사를 통해 정확하게 연결된 상태와 겉보기에만 정렬된 상태를 구분할 수 있습니다.
접점이 정확하면 이제 그림을 어떻게 구성할지 정하면 됩니다. 하나로 합친 실루엣으로 만들거나 채워진 조각을 따로 둘 수 있습니다. 원본 원과 계산한 접점을 보관해 두면 캐릭터의 비율이 달라질 때마다 가장자리에 맞는 브리지를 다시 만들 수 있습니다.