CSS clip-path 속성으로 말풍선 주석 상자 만드는 방법

웹 페이지에서 채팅이나 댓글처럼 보이는 주석(comment) 상자, 즉 말풍선 형태의 UI는 CSS의 clip-path 속성과 ::after 가상 요소를 활용하면 이미지 없이도 손쉽게 만들 수 있습니다.

핵심 원리는 다음과 같습니다. 본체가 되는 사각형 상자에 border-radius로 둥근 모서리를 적용하고, ::after 가상 요소로 작은 삼각형 꼬리를 추가한 뒤, clip-path: polygon() 함수로 원하는 모양만 남기는 방식입니다.

clip-path 속성의 기본 문법

Selector {
   clip-path: /*값*/
}

polygon() 함수에는 각 꼭짓점의 좌표를 쉼표로 구분하여 지정합니다. 예를 들어 polygon(0 0, 100% 0, 100% 80%)은 왼쪽 위, 오른쪽 위, 오른쪽 아래 세 점을 연결한 직각삼각형 모양을 만듭니다.

예제 1: 좌우 방향의 주석 상자 만들기

다음 예제에서는 두 개의 주석 상자를 만들고, 각각 오른쪽 아래와 왼쪽 아래에 서로 다른 방향의 꼬리를 붙여 마치 대화가 오가는 것처럼 표현합니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .cb {
            position: relative;
            padding: 2%;
            border-radius: 8%;
            width:25%;
         }
         .cb::after {
            content: "";
            position: absolute;
            height: 30px;
            width: 30px;
            bottom: -30px;
            left: 80%;
         }
         #one {
            box-shadow: inset 0 0 12px green;
            left: 65%;
         }
         #two {
            box-shadow: inset 0 0 12px blue;
            left: 4%;
         }
         #one::after {
            left: 80%;
            box-shadow: inset 0 0 12px green;
            clip-path: polygon(0 0, 100% 0, 100% 80%);
         }
         #two::after{
            left: 8%;
            box-shadow: inset 0 0 12px blue;
            clip-path: polygon(0 0, 100% 0, 0 80%);
         }
      </style>
   </head>
   <body>
      <div class="cb" id="one">
         Demo Comment 1
      </div>
      <div class="cb" id="two">
         Demo Comment 2
      </div>
   </body>
</html>

코드 설명

.cb 클래스는 주석 상자의 기본 스타일을 정의합니다. position: relative를 지정해야 자식인 ::after 꼬리를 절대 위치로 배치할 수 있습니다.
.cb::after는 상자 아래쪽에 위치할 30×30px 크기의 빈 요소를 생성합니다.
#one::after에는 polygon(0 0, 100% 0, 100% 80%)을 적용해 오른쪽으로 기운 꼬리를, #two::after에는 polygon(0 0, 100% 0, 0 80%)을 적용해 왼쪽으로 기운 꼬리를 만듭니다.
box-shadow: inset 값으로 상자 내부에 은은한 색상 테두리 효과를 더했습니다.

위 코드를 실행하면 초록색과 파란색 주석 상자가 각각 반대 방향의 꼬리와 함께 출력됩니다.

예제 2: 본문 텍스트와 함께 사용하기

다음 예제는 실제 문단 안에서 특정 단어를 강조하는 주석 상자를 구현한 것입니다. 본문 중 <span>으로 감싼 단어와 연결되는 느낌을 주도록 꼬리의 위치를 조정했습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .cb {
            position: relative;
            padding: 2%;
            border-radius: 8%;
            width:15%;
            box-shadow: inset 0 0 12px orange;
         }
         .cb::after {
            content: "";
            position: absolute;
            height: 30px;
            width: 30px;
            bottom: -30px;
            left: 80%;
            box-shadow: inset 0 0 12px orange;
         }
         #one {
            left: 65%;
         }
         #one::after {
            left: 10%;
            clip-path: polygon(0 0, 100% 0, 0 80%);
         }
         span{
            background-color: lightblue;
         }
      </style>
   </head>
   <body>
      <div class="cb" id="one">
         accumsan
      </div>
      <p>
            Aenean tempor lobortis porttitor. Nulla erat purus, commodo <span>accumsan</span> viverra id, sollicitudin eget dui. Curabitur mollis scelerisque quam, vitae dictum diam dictum in. Aenean fermentum efficitur suscipit. Donec non ligula purus.
      </p>
   </body>
</html>

코드 설명

주석 상자와 꼬리에 주황색 inset 그림자를 적용해 하나의 요소처럼 자연스럽게 이어지도록 했습니다.
#one::after의 left: 10% 값으로 꼬리를 상자의 왼쪽 끝으로 옮겨, 아래 본문의 강조 단어 쪽을 가리키게 했습니다.
본문의 <span> 요소에는 연한 파란색(lightblue) 배경을 지정해 주석 상자가 가리키는 대상임을 시각적으로 강조했습니다.

이처럼 clip-path와 가상 요소만 활용하면 별도의 이미지나 JavaScript 없이도 다양한 형태의 말풍선·주석 상자를 자유롭게 디자인할 수 있습니다. polygon()의 좌표 값을 조절하면 꼬리의 길이, 각도, 방향을 원하는 대로 바꿀 수 있다는 점도 기억해 두면 유용합니다.