The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.
```
예를 들어 `python -m http.server 8000`으로 HTTP를 통해 폴더를 제공하고 `http://localhost:8000/index.html`을 여세요. 그러면 두 파일이 같은 출처를 공유합니다. 로컬 파일 URL은 여기서 시험한 로딩 방식이 아닙니다.
일반적인 직사각형 float 줄바꿈과 비교하려면 `class="sample narrow contour"`를 `class="sample narrow"`로 바꿉니다. 520픽셀 열을 시험하려면 `narrow`를 `wide`로 바꿉니다. 문단과 이미지는 그대로 유지됩니다.
[display 참고 문서](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root)는 `flow-root`가 블록 서식 맥락을 만든다고 설명합니다. 여기서는 float 이미지를 해당 샘플 안에 담습니다. 단어를 배치하는 기능은 아니며, 그 작업은 브라우저의 인라인 레이아웃이 수행합니다.
*실제 HTML 레이아웃 네 개가 같은 원본 SVG와 문단을 사용합니다. 윤곽선 버전은 shape-outside와 10px shape margin을 추가하며, 수동으로 배치한 단어는 없습니다.*
## 3. 두 가지 이상의 너비에서 렌더링된 줄 확인하기
Chromium 155에서 Arial 16px, 줄 높이 24px로 보이는 샘플 네 개를 실행했습니다. 이미지는 150 × 180px로 유지했고 열의 고정 콘텐츠 너비는 360px와 520px였습니다. 두 윤곽선 샘플은 모두 `shape-margin: 10px`와 `shape-image-threshold: 0.5`를 사용했습니다.
| 실제 샘플 | 렌더링된 텍스트 줄 수 | 첫 줄 시작점 | 텍스트 높이 |
| ---------------- | ------------ | ------- | ------ |
| rectangle-narrow | 18 | 150px | 432px |
| rectangle-wide | 13 | 150px | 312px |
| contour-narrow | 18 | 115.5px | 432px |
| contour-wide | 12 | 115.5px | 288px |
좁은 윤곽선 샘플은 총 줄 수를 줄이지 않으면서 줄바꿈을 바꿨습니다. 더 넓은 너비에서는 직사각형 비교군보다 한 줄 적었습니다.
각 단어의 기본 DOM Range 직사각형을 측정하고 세로 위치별로 묶었습니다. 이는 렌더링된 텍스트 줄 측정이며 브라우저 내부의 줄 상자 객체에 접근한 것이 아닙니다. 계산된 float·shape 설정, 불러온 이미지 치수, 실제 SVG 이미지의 알파 샘플도 확인했습니다.
두 너비 모두 일부 윤곽선 줄은 직사각형 float의 150px 제외 경계보다 왼쪽에서 시작했습니다. 이미지가 끝난 뒤에는 텍스트가 열 전체로 돌아왔습니다. 이 관찰은 시험한 윤곽선이 단지 스크린샷 모양만 바꾼 것이 아니라 실제 레이아웃에 영향을 주었음을 보여 줍니다.
정확한 줄과 좌표는 글꼴, 브라우저, 문단, 이미지, 너비에 따라 달라집니다. 문장을 바꾸거나 다른 글꼴을 불러오면 바뀔 수 있습니다. 이 수치를 디자인 상수로 유지하지 말고 좁고 넓은 크기에서 실제 콘텐츠를 시험하세요.
## 4. 도형 여백, 알파, 로딩을 나누어 다루기
[`shape-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin)은 텍스트가 감싸는 도형을 확장하여 도형과 텍스트 사이에 공간을 만듭니다. 여기서 10px는 배치 선택이며, 보이는 모든 글리프와 일러스트의 모든 점 사이에서 실측한 최소 간격이 아닙니다.
[CSS Shapes 규격](https://www.w3.org/TR/css-shapes-1/)은 일반 박스 모델을 유지하고 도형의 효과를 float의 마진 박스로 제한합니다. shape margin을 크게 해도 이미지의 CSS 박스가 커지지는 않습니다. 디자인에 더 많은 공간이 필요하면 float 치수와 일반 마진도 검사하세요.
[`shape-image-threshold`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold)는 이미지 도형 추출에 사용하는 알파 임계값을 선택합니다. 원본 시험 도형은 바깥이 완전 투명하고 중앙 아트워크는 불투명합니다. 부드러운 그림자나 반투명 가장자리에는 의도한 임계값 선택과 시각적 검토가 필요합니다. 임계값을 바꿔도 불투명 배경을 투명하게 만들 수는 없습니다.
이미지 URL은 도형 로딩 조건도 충족해야 합니다. CSS Shapes는 이미지 URL에 CORS 요청을 지정하며, 로딩에 실패하면 사용자 지정 도형 없이 동작합니다. 이 예제에서는 SVG를 페이지 옆에서 제공하여 교차 출처 의존성을 피합니다. CDN에 호스팅한다면 해당 서버의 CORS 응답을 설정하고 요청과 레이아웃을 검사하세요. `img` 요소에서 이미지가 보인다는 사실만으로 도형 요청의 성공을 확인할 수는 없습니다.
## 5. 텍스트 순서를 유지하고 완성 페이지 확인하기
시험한 네 문단은 모두 `br` 요소나 단어별 위치 지정 없이 하나의 텍스트 노드에 완전히 같은 텍스트를 유지했습니다. CSS는 문단의 DOM 순서를 다시 쓰지 않고 시각적 줄바꿈을 바꿨습니다. 이 소스 확인만으로 스크린 리더 세션을 실행하거나 접근성 감사를 했다고 주장하지는 않습니다.
이미지를 사용할 수 없거나 레이아웃이 바뀌어도 문단을 읽을 수 있게 하세요. 매우 좁은 열에서는 이미지 옆에 가느다란 텍스트 띠를 두기보다 이미지가 문단 위에 오는 단순한 배치가 더 읽기 쉬울 수 있습니다. 윤곽선 효과를 억지로 만들려고 텍스트를 줄이지 말고 실제 분기점과 콘텐츠를 확인하세요.
float는 여전히 CSS 박스를 예약합니다. 도형 줄바꿈이 이미지를 사방으로 텍스트가 흐르는 일반 장애물로 바꾸지는 않습니다. 이 왼쪽 float 예제에서 인접 텍스트는 오른쪽을 감싸고 이후 아래로 이어집니다.
## 증상의 원인부터 해결하기
| 증상 | 확인 사항과 복구 방법 |
| ------------------------------- | ----------------------------------------------------------------------------------- |
| 텍스트가 직사각형을 따름 | float가 활성화되었는지, 치수가 정의되었는지, shape URL이 로드되었는지, 원본 주변이 투명한지 확인합니다. |
| 텍스트가 보이는 일러스트와 겹침 | 표시된 SVG와 shape URL, 치수, 종횡비를 비교합니다. 알파 임계값과 shape margin을 검사합니다. |
| 이미지는 보이지만 윤곽선을 따르지 않음 | img 요청과 별개로 도형 이미지 요청과 CORS 동작을 검사합니다. CDN을 추가하기 전에 같은 출처 예제를 시험합니다. |
| flex나 grid의 자식이 예상대로 float하지 않음 | float 이미지 자체를 flex·grid 항목으로 만들지 말고 이 예제처럼 float와 문단을 일반 흐름 컨테이너 안에 둡니다. |
| 좁은 문단을 읽기 어려움 | 이미지 크기를 줄이거나 적절한 분기점에서 텍스트 위로 옮긴 다음 실제 문단을 다시 시험합니다. |
| SVG 레이블이 여전히 줄바꿈되지 않음 | 위 표의 SVG 내부 텍스트 작업 흐름을 사용합니다. Shape-outside는 인접 HTML 흐름을 바꾸며 SVG 텍스트 배치를 바꾸지는 않습니다. |
적합한 평면 일러스트가 래스터로만 남아 있고 편집 가능한 실루엣 아트워크가 필요하다면 PerfectVector의 [클립아트를 SVG로 변환하는 작업 흐름](https://perfectvector.com/ko/clipart-to-svg)으로 후보를 복원할 수 있습니다. 외곽선과 주변 투명도를 원본과 비교하고 페이지에서 실제 SVG URL을 시험하세요. 투명 래스터 이미지도 이미지 기반 CSS 도형을 제공할 수 있습니다. 알파 줄바꿈을 활성화하기 위해 반드시 SVG가 필요한 것은 아닙니다.
깨끗한 기존 SVG가 있다면 유지하세요. 벡터화는 주변 HTML 레이아웃을 만들거나 문단의 의미 구조를 대신 보존하거나 특정 브라우저의 줄바꿈 결과를 보장하지 않습니다.
## 자주 묻는 질문
**shape-outside는 SVG 내부 텍스트를 줄바꿈하나요?**
아니요. 이 예제는 float 이미지 옆의 HTML 인라인 흐름을 바꿉니다. SVG 레이블, SVG 안에 삽입한 HTML, 경로를 따르는 텍스트는 서로 다른 배치 작업입니다.
**투명해 보이는 SVG가 여전히 직사각형처럼 줄바꿈되는 이유는 무엇인가요?**
파일의 불투명 배경, 도형 이미지 요청 실패, 누락된 float 크기 설정, float가 작동하지 않는 레이아웃 맥락을 확인하세요. 흰색 픽셀은 투명 픽셀과 다릅니다.
**PNG를 먼저 SVG로 변환해야 하나요?**
알파 기반 줄바꿈만을 위해서는 필요하지 않습니다. 적합한 투명 래스터 이미지도 도형을 제공할 수 있습니다. 편집 가능한 아트워크나 다른 벡터 요구 사항이 있을 때 SVG를 사용하세요.
**모든 화면 크기에서 줄바꿈이 같게 유지되나요?**
아니요. 사용 가능한 너비, 글꼴 치수, 텍스트, 이미지 크기, 브라우저 레이아웃이 줄에 영향을 줍니다. 실제 콘텐츠를 두 가지 이상의 너비에서 시험하세요.
## 출처
1. [MDN shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — float 영역과 알파에서 계산한 이미지 도형을 설명합니다.
2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — 텍스트가 감싸는 도형 주위에 추가하는 간격을 정의합니다.
3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — 이미지 도형에 사용하는 알파 임계값을 정의합니다.
4. [CSS Shapes 모듈 레벨 1](https://www.w3.org/TR/css-shapes-1/) — float 박스 제한, 이미지 로딩, CORS 동작을 지정합니다.
5. [MDN display와 flow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — float를 담는 데 사용하는 서식 맥락을 설명합니다.
편집 가능한 아트워크가 없다면 [클립아트 SVG 후보를 준비하고](https://perfectvector.com/ko/clipart-to-svg), 실루엣과 투명도를 검사한 뒤 지원할 너비에서 페이지의 실제 문단 배치를 확인하세요.
## Explore
- [Read the HTML article](https://perfectvector.com/ko/blog/css-text-around-svg-shape)
- [SVG textLength: 글자를 왜곡하지 않고 레이블 맞추기](https://perfectvector.com/ko/blog/svg-textlength-fit.md)
- [SVG 텍스트 세로 정렬: 다시 만든 레이블 중앙 맞추기](https://perfectvector.com/ko/blog/svg-text-vertical-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)