HTML 강좌 / figure와 figcaption으로 그림과 설명 묶기

figure는 사진·그림·도표·코드처럼 본문에서 한 단위로 참조할 수 있는 콘텐츠를 묶고, figcaption은 그 콘텐츠의 설명을 붙입니다. 모든 이미지에 반드시 필요한 요소는 아니지만, 이미지와 설명을 함께 읽어야 할 때 유용합니다.

이미지와 설명을 한 단위로 묶기

예를 들어 여행 사진과 촬영 장소 설명이 하나의 정보라면 다음처럼 작성할 수 있습니다. figcaption은 figure의 첫 번째 또는 마지막 자식으로 둡니다.

<figure>
  <img src="lake.webp"
       alt="잔잔한 호수 뒤로 이어진 산 능선"
       width="960" height="540">
  <figcaption>이른 아침에 촬영한 호수 풍경</figcaption>
</figure>

lake.webp 파일을 HTML 파일과 같은 폴더에 두고 브라우저에서 열면 사진 아래에 설명이 표시됩니다. 설명을 위에 놓고 싶다면 figcaption을 이미지보다 앞에 두세요. 사진의 크기와 여백은 CSS로 조정합니다.

파일이 다른 폴더에 있다면 src도 그 위치에 맞춰야 합니다. 예를 들어 images/lake.webp에 저장했다면 src="images/lake.webp"로 적습니다. width와 height에는 원본 이미지의 비율에 맞는 값을 사용해, 불러오는 동안 페이지가 갑자기 밀리는 현상을 줄입니다.

alt와 figcaption은 역할이 다릅니다

alt는 이미지를 볼 수 없을 때 이미지의 정보나 기능을 대신 전달하는 텍스트입니다. figcaption은 모든 독자에게 보이는 그림의 제목·출처·맥락 같은 설명입니다. 둘을 기계적으로 같은 문장으로 채우면 중복해서 읽힐 수 있습니다.

위 예제에서는 alt가 사진에 무엇이 보이는지를 설명하고, figcaption은 촬영 상황을 알려 줍니다. 이미지가 순전히 장식이라면 alt=""를 검토하되, 캡션만으로 핵심 이미지 정보가 전달되는지도 확인하세요. 접근성 판단에는 W3C WAI 이미지 대체 텍스트 결정표가 도움이 됩니다.

사진이 그래프라면 ‘막대그래프’라고만 적지 말고 본문에서 필요한 핵심 추세를 전달해야 합니다. 긴 데이터 설명이 필요한 경우에는 그림 주변의 본문이나 표로 자세히 제공하고, alt는 그 설명으로 독자를 안내할 수 있습니다. 대체 텍스트의 길이보다 이미지가 빠져도 정보가 남는지가 판단 기준입니다.

figure를 사용하지 않아도 되는 경우

문장 사이에 자연스럽게 들어가는 단순 이미지에 별도의 설명이 필요 없다면 img만 사용해도 됩니다. 반대로 본문에서 “아래 그림”처럼 참조하거나 코드 예제와 그 설명을 한 묶음으로 보여 주려면 figure가 적합합니다. figure 안에는 이미지뿐 아니라 다른 독립 콘텐츠도 들어갈 수 있습니다. 요소의 자세한 용법은 MDN figure 참고 문서를 확인하세요.

표시 결과가 어색할 때

브라우저 기본 스타일 때문에 figure에 좌우 여백이 생길 수 있습니다. 구조를 바꾸기 전에 CSS의 margin을 확인하세요. 이미지 파일이 보이지 않으면 파일명과 상대경로가 실제 위치와 일치하는지도 점검합니다.

figcaption이 보이지 않는다면 태그가 figure 안에 있는지, 요소를 닫는 태그가 빠지지 않았는지 확인하세요. 캡션은 사진의 대체 텍스트를 자동으로 만들어 주지 않으므로 두 내용은 각각 검토해야 합니다.