CSS shape-outside 속성으로 원형 요소 주변에 텍스트를 자연스럽게 배치하는 방법

CSS의 shape-outside 속성을 활용하면 원형 이미지 주변으로 텍스트가 흐르는 잡지 스타일의 레이아웃을 손쉽게 만들 수 있습니다.

왜 원형 텍스트 래핑인가?

콘텐츠를 좀 더 흥미롭고 잡지 같은 느낌으로 연출하고 싶다면, CSS를 활용해 텍스트가 다양한 형태의 요소를 따라 정렬되고 감싸지도록 만들 수 있습니다. 특히 원형 이미지 옆으로 본문이 부드럽게 흐르는 레이아웃은 시각적인 완성도를 크게 높여 줍니다.

먼저 기본이 될 HTML 콘텐츠를 작성해 보겠습니다.

<article class="post">
  <img
    class="circle"
    src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
    alt="A globus"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
    voluptas omnis, quis, est vitae?
  </p>
</article>

여기서 눈여겨볼 점은 <article> 요소에는 post라는 클래스가, <img> 요소에는 .circle이라는 클래스가 각각 지정되어 있다는 것입니다.

CSS 작성하기

이제 아래와 같은 CSS를 추가합니다.

.post {
  max-width: 800px;
  margin: 3rem auto;
}

.circle {
  float: right;
  height: 30vw;
  margin-left: 1rem;
  margin-left: calc(1rem + 2vw);
  object-fit: cover;
  shape-outside: circle(50%);
  width: 30vw;
}

결과는 다음과 같습니다.

꽤 괜찮지 않나요? 텍스트가 원형 이미지의 곡선을 따라 자연스럽게 흐르는 것을 확인할 수 있습니다.

핵심은 shape-outside 속성

이 마법 같은 효과의 핵심은 바로 shape-outside CSS 속성입니다. 이 속성은 float된 요소 주변에서 인라인 콘텐츠가 어떤 모양을 따라 흐를지 정의합니다. circle(50%)처럼 기하학적 함수를 사용하면 원, 타원, 다각형 등 다양한 형태를 지정할 수 있으며, 최신 브라우저 대부분에서 지원됩니다. 다만 Internet Explorer에서는 동작하지 않으니 구형 브라우저 지원이 필요한 프로젝트라면 이 점을 유의해야 합니다.