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

# 섀도박스 SVG: 서로 연결된 종이 레이어 디자인하기

> 프레임을 맞추고 종이 도형을 연결한 섀도박스 SVG를 디자인하세요. 쌓는 순서를 확인하고 떠 있는 달이 저장 도형을 어떻게 바꾸는지 살펴봅니다.

Source: https://perfectvector.com/ko/blog/shadow-box-svg-connected-layers

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

섀도박스용 다층 SVG를 만들려면 각 깊이 레이어를 연결된 패널로 디자인하세요. 프레임, 그 깊이에 속한 그림, 의도한 종이를 하나로 유지할 충분한 연결 도형이 필요합니다. 모든 패널의 바깥 치수를 같게 하고, 겹치는 재료 도형을 합친 다음 앞쪽 패널이 무엇을 가리는지 확인합니다.

이 안내는 산 풍경 패널 세 개로 SVG 디자인과 파일 준비를 보여 줍니다. 저장 윤곽을 점검하고 브라우저에서 렌더링했습니다. Cricut Design Space로 가져오거나 종이를 자르지 않았으므로 연결부 강도, 재료 설정, 실제 조립은 여전히 시험해야 합니다.

## 각 종이 패널에 무엇을 넣을지 정하기

**깊이 레이어**는 다른 패널 앞이나 뒤에 놓이는 패널 하나입니다. 색은 화면에서 식별하는 데 도움이 되지만 역할은 위치와 모양이 결정합니다. PNG를 색으로 나눈다고 그 관계가 정해지지는 않습니다. 비닐이나 평면 색상 쌓기는 별도의 [Cricut용 다층 SVG 가이드](https://perfectvector.com/ko/blog/layered-svg-for-cricut)를 사용하세요.

**남길 재료 영역**은 유지하려는 종이를 뜻합니다. **컷아웃**은 제거할 구멍입니다. **브리지**는 디테일을 나머지 패널에 연결하는 종이 띠입니다. **떠 있는 섬**은 패널과 연결되지 않은 남길 재료입니다.

아래 예제에서 뒷패널에는 산과 달이 있습니다. 가운데 패널에는 나무와 땅, 앞패널에는 낮은 둔덕이 있습니다. 각 패널에는 외곽 프레임이 있으며 남길 모든 디테일이 프레임에 연결됩니다.

**저장한 SVG 디자인 예제**

![연결된 200 mm SVG 패널 세 개, 분리된 달 반례, 정렬한 평면 쌓기의 브라우저 렌더링](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

*세 패널은 각각 연결된 남길 영역 하나를 포함합니다. 분리된 달 버전에는 두 개가 있습니다. 평면 쌓기는 어떤 도형이 다른 도형을 가리는지 보여 주며 종이 강도나 실제 깊이를 시뮬레이션하지 않습니다.*

## 같은 바깥 경계로 세 레이어 만들기

도형 빼기와 합집합이 가능한 벡터 편집기, 단순한 무늬, 사용할 액자의 치수가 필요합니다. 도형을 합치기 전에 편집 가능한 원본을 보관하세요. 사용 가능한 벡터 그림이 이미 있다면 그 파일에서 시작합니다. 무늬가 PNG나 JPG로만 있다면 먼저 경로를 복원한 다음 종이 연결부를 따로 디자인하세요.

### 1. 프레임 하나를 만들고 복제하기

액자 안에서 패널에 사용할 수 있는 공간을 측정하세요. 최종 작품 크기를 선택하기 전에 뒷판과 계획한 간격재가 차지할 공간을 고려합니다.

이 파일은 **200 × 200 mm** 바깥 정사각형과 **12 mm 프레임 띠**를 사용합니다. 구멍은 x = 12~~188 mm, y = 12~~188 mm입니다. 예제 치수이며 모든 액자에 맞는 권장값이 아닙니다.

바깥 정사각형과 가운데에 놓인 작은 정사각형을 그리세요. 작은 정사각형을 빼서 구멍을 만든 다음 프레임을 세 패널용으로 복제합니다. Inkscape 문서는 **Difference**를 빼기, **Union**을 선택 경로들의 외곽을 하나로 합치는 연산으로 설명합니다. Difference에서는 쌓는 순서가 중요합니다. 뺄 도형이 남길 도형 위에 있어야 합니다. [Inkscape 불리언 연산](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

모든 레이어에 같은 페이지 원점과 바깥 정사각형을 사용하세요. 각 내보내기를 개별 무늬에 맞춰 자르지 마세요. 예제 파일은 모두 `width="200mm"`, `height="200mm"`, `viewBox="0 0 200 200"`을 선언하며 저장 도형의 경계도 같은 200 mm입니다. SVG의 `viewBox`는 뷰포트에 매핑할 좌표 사각형을 정의합니다. 대상 앱에서 실물 치수를 다시 확인하세요. [W3C SVG 좌표계](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. 뒷장면을 프레임에 연결하기

산 실루엣의 밑부분이 아래 프레임 띠와 겹치게 놓고 위에 달을 더하세요. 구멍 안에 혼자 있는 달은 별도로 남을 종이 조각이므로 뒷패널을 한 장으로 유지하려면 의도적인 연결이 필요합니다.

이 예제의 달 중심은 **x = 145, y = 46 mm**이고 명목 반지름은 **14 mm**입니다. **x = 143\~147 mm**의 세로 사각형이 위 프레임에 연결합니다. 합치기 전에 사각형이 달과 프레임 모두에 겹칩니다.

프레임, 산, 달, 브리지를 합집합으로 합치고 결과 윤곽을 확인하세요. 원래 객체 사이의 겹침 경계는 사라져야 하며 추가 내부 절단 윤곽으로 남아서는 안 됩니다.

예제 브리지는 **너비 4 mm**입니다. 점검한 파일을 설명하는 수치입니다. 사용하는 종이, 길이, 기계, 완성 크기의 최소 너비를 정하지 않습니다. 계획한 재료와 도형으로 작은 시험을 만드세요.

### 3. 가운데 대상을 밑부분으로 연결하기

나무의 수관, 줄기, 땅을 연결해 두세요. 이 예제의 줄기는 x = 56\~64 mm로 **너비 8 mm**입니다. 수관과 땅에 겹치고 땅은 아래 프레임 띠와 겹칩니다. 이 도형들을 가운데 패널로 합치세요.

눈, 별, 글자 속 공간에 따라 어떤 영역이 붙어 있는지가 달라질 수 있습니다. 단순화하기 전에 남길 재료인지 컷아웃인지 검토하세요. 내보낸 뒤 구멍이 예상치 않게 채워진다면 [SVG 구멍·채우기 규칙 진단](https://perfectvector.com/ko/blog/svg-holes-fill-in)을 따릅니다.

### 4. 대상이 보이도록 전경을 낮게 유지하기

세 번째 프레임에 낮은 둔덕을 더하고 아래 띠와 합치세요. 산은 나무 뒤에, 둔덕은 앞에 오도록 세 패널을 정렬합니다.

**가림**은 보는 방향에서 한 도형이 다른 도형을 숨기는 것을 뜻합니다. 이 평면 쌓기에서는 나무가 산 일부를, 둔덕이 나무 밑부분을 가립니다. 달은 계속 보입니다. 둔덕이 수관이나 다른 의도한 중심 디테일을 가린다면 내보내기 전에 둔덕을 낮추거나 대상을 옮기세요.

화면 쌓기는 보이는 도형 관계를 확인하는 데 도움이 됩니다. 간격재 두께, 시선 각도, 조명, 액자 안의 가용 깊이는 실물 모형이 필요합니다.

## 저장 SVG에서 재료 연결 확인하기

경로 요소 하나에도 분리된 도형이 여러 개 들어갈 수 있습니다. **경로 수는 연결성 시험이 아닙니다.** 복합 경로는 경로 객체 하나에 여러 윤곽을 포함하며 채우기 규칙이 둘러싸인 영역 중 어디를 채울지 정합니다. SVG 규격은 예제 파일의 `evenodd`를 포함한 채우기 규칙을 정의합니다. [W3C SVG 채움과 채우기 규칙](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

남길 영역을 합집합으로 합쳐 예제 패널을 작성하고 닫힌 윤곽을 내보낸 뒤 저장 SVG 데이터에서 채움 영역을 재구성했습니다. 겹쳐 쌓인 유색 도형이 아니라 실제 내보낸 도형을 확인한 것입니다.

| 저장 파일         | 연결된 남길 영역 | 점검으로 확인한 내용              |
| ------------- | --------- | ------------------------ |
| 뒤: 산, 달, 브리지  | 1         | 달이 브리지를 통해 프레임에 연결됨      |
| 가운데: 나무와 땅    | 1         | 수관, 줄기, 땅, 프레임이 한 영역을 이룸 |
| 앞: 낮은 둔덕      | 1         | 둔덕이 프레임에 연결됨             |
| 브리지를 제거한 뒤 패널 | 2         | 달이 별도의 남길 섬이 됨           |

네 파일 모두 경로 요소 하나를 포함합니다. 연결된 패널에는 바깥 경계와 구멍 경계라는 닫힌 윤곽 두 개가 각각 있습니다. 떠 있는 달 버전에는 별도 달을 위한 세 번째 윤곽이 있습니다. 그래서 레이어 이름, 그룹, 경로 수만으로 의도한 시트가 연결돼 있는지 알 수 없습니다.

자신의 내보내기에서는 다음을 진행하세요.

1. 저장 SVG를 다시 열고 각 패널을 단순한 채움으로 따로 봅니다.
2. 모든 디테일에서 프레임까지 남길 재료를 따라 연속 경로를 확인합니다. 도형이 거의 만나는 곳은 확대하세요. 점 접촉에는 측정 가능한 종이 띠가 없습니다.
3. 합친 객체 주변 윤곽을 확인합니다. 유지할 재료를 나누는 겹침 이음선을 합치세요.
4. 구멍을 도형으로 확인합니다. 다른 도형 위에 칠한 흰 도형은 아래 윤곽을 제거하지 않고도 구멍처럼 보일 수 있습니다.
5. 공통 원점과 치수로 저장 레이어들을 다시 평면 미리보기에 쌓습니다.

디테일이 고립돼 있다면 브리지를 더해 합치거나, 연결된 재료 위로 옮기거나, 컷아웃으로 만들거나, 별도 부착 조각으로 계획하세요. 조립 계획에 선택을 명확히 남깁니다.

## 무늬가 래스터일 때 PerfectVector의 역할

PerfectVector는 적절한 PNG나 JPG 그림에서 편집 가능한 SVG 경로를 복원할 수 있습니다. [Cricut용 SVG 과정](https://perfectvector.com/svg-for-cricut)은 도형을 미리 보고 대상 파일을 준비하기 전에 색을 다듬는 작업을 지원합니다. 재사용하려는 래스터 무늬에 이 단계를 사용하세요. 프레임 구성, 브리지, 깊이 순서는 별도의 디자인 작업입니다.

굵은 실루엣이나 단순한 평면 일러스트로 시작하세요. 패널에 놓기 전에 복원 윤곽에 떠도는 조각이나 빠진 구멍이 있는지 확인합니다. [선화 SVG 변환 가이드](https://perfectvector.com/ko/blog/line-art-to-svg)는 윤곽 트레이싱과 원래 그린 선의 차이를 설명합니다.

세밀한 사진에서는 어떤 객체를 어느 깊이에 놓고 어떤 도형을 종이로 만들지 결정해야 합니다. 패널을 계획하기 전에 형태를 단순화하거나 다시 그리세요. 자동 색상 분리가 조립 계획을 제공하지는 않습니다.

## 대상 파일을 확인한 뒤 재료 시험하기

바깥 경계가 맞고, 의도한 남길 영역이 연결되며, 겹침 이음선이 제거되고, 저장한 쌓기에서 올바른 디테일이 보이면 SVG 디자인 점검이 끝납니다. 조립 순서가 명확하도록 원본과 함께 번호가 있는 레이어 목록을 보관하세요.

완성품을 만들기 전에 실제 커팅 애플리케이션과 액자에서 다음을 확인하세요.

* 가져온 패널 치수가 의도한 크기와 일치합니다.
* 미리보기가 구멍을 유지하며 불필요한 내부 절단이 없습니다.
* 각 패널에 의도한 절단 작업과 재료가 지정돼 있습니다.
* 가장 긴 브리지의 작은 샘플이 절단, 매트에서 떼기, 취급을 견딥니다.
* 선택한 간격재가 남길 재료 위에 들어가며 구멍으로 보이지 않습니다.
* 조립한 쌓기가 뒷판을 넣은 액자에 맞습니다.

가져오기로 구멍이나 윤곽이 바뀌면 저장 도형으로 돌아가 그 특정 윤곽을 고치세요. 브리지가 찢어지거나 휘면 너비, 길이, 부착부, 재료를 수정하고 다시 시험합니다. 브라우저 렌더링만으로 이 물리적 문제를 해결할 수는 없습니다. [일반 Cricut SVG 준비 가이드](https://perfectvector.com/ko/blog/svg-files-for-cricut)는 더 넓은 파일 점검을 다룹니다.

## 자주 묻는 질문

### 사진을 섀도박스 SVG로 자동 변환할 수 있나요?

벡터화는 사진에서 도형을 복원할 수 있지만 깊이 레이어, 프레임 연결, 컷아웃, 조립 순서는 직접 선택해야 합니다. 단순한 실루엣은 유용한 시작점입니다. 복잡한 사진은 수동 단순화나 다시 그리기가 필요할 수 있습니다.

### 각 섀도박스 패널은 SVG 경로 하나여야 하나요?

경로 하나에 연결되지 않은 남길 섬이 들어갈 수 있습니다. 경로 수에 의존하지 말고 남길 영역과 실제 윤곽을 확인하세요. 이 예제에서는 연결된 뒷패널과 분리된 달 반례 모두 경로 요소 하나를 포함합니다.

### 브리지 너비는 얼마로 해야 하나요?

재료, 길이, 최종 크기, 커팅 과정에 맞춰 선택하고 시험하세요. 시연한 달 브리지는 4 mm 너비이지만 자르거나 강도를 시험하지 않았습니다. 예제 치수이며 보편적인 최솟값이 아닙니다.

### 섀도박스 레이어는 Cricut 색상 레이어와 같은가요?

섀도박스 레이어는 깊이 배치 안의 패널입니다. 색상 레이어는 그림을 색이나 재료로 나눕니다. 깊이 패널은 프레임 하나에 연결된 여러 무늬를 포함할 수 있습니다. 무늬를 색으로만 나눈다고 연결부가 디자인되지는 않습니다.

## 출처

1. [Inkscape — 불리언 연산](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — Union, Difference, Combine과 쌓는 순서의 역할을 설명합니다.
2. [W3C — SVG 좌표계, 변환, 단위](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — `viewBox`로 매핑하는 좌표 사각형을 정의합니다.
3. [W3C — SVG 채색](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — 예제의 채움, 하위 경로, `evenodd` 채우기 규칙을 정의합니다.
4. [PerfectVector — Cricut용 SVG](https://perfectvector.com/svg-for-cricut) — 래스터 그림 복원, 도형 검토, 절단 전 점검을 설명합니다.

***

무늬가 PNG나 JPG에서 시작한다면 [PerfectVector로 SVG 경로를 준비](https://perfectvector.com/ko/svg-for-cricut)하고 윤곽과 구멍을 확인하세요. 편집기에서 프레임 연결부와 깊이 레이어를 만들고 저장 패널을 다시 연 다음, 완성 섀도박스를 만들기 전에 작은 재료 샘플을 시험합니다.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/shadow-box-svg-connected-layers)
- [Cricut 녹아웃 디자인: 바탕과 이름 레이어 계획하기](https://perfectvector.com/ko/blog/cricut-knockout-real-cutouts.md)
- [Cricut SVG의 잔여물 제거가 어려운 이유와 파일 수정 방법](https://perfectvector.com/ko/blog/cricut-svg-hard-to-weed.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)