<figure>와 <figcaption> – 이미지와 설명을 의미 있게 묶는 방법

 

 

안녕하세요 😊
웹 페이지에서 이미지를 넣을 때 대부분 <img> 태그만 사용하시죠?
하지만 단순히 이미지를 넣는 것만으로는 무엇을 표현한 이미지인지 설명이 부족할 수 있습니다.

 

HTML5에서는 <figure>와 <figcaption> 태그를 사용하여,
이미지(또는 코드, 다이어그램 등)와 그에 대한 설명을 시맨틱하게 묶어서 표현할 수 있습니다.

---

📍 1. <figure> 태그란?

• 독립적인 콘텐츠 블록을 의미합니다.
• 이미지, 코드 블록, 다이어그램, 인용문 등 본문과 별도로 존재할 수 있는 요소를 감쌀 때 사용합니다.
• 이동하거나 본문과 분리해도 의미가 유지됩니다.

예시:

 

<figure>
  <img src="sunset.jpg" alt="노을이 지는 바다 풍경">
</figure>

---

📍 2. <figcaption> 태그란?

• <figure> 안에서 사용하는 설명 태그입니다.
• 이미지에 캡션(설명)을 붙이는 역할을 합니다.
• <figure> 안에서 첫 번째나 마지막 요소로 위치해야 합니다.

예시:

 

<figure>
  <img src="sunset.jpg" alt="노을이 지는 바다 풍경">
  <figcaption>그림 1. 바닷가에서 촬영한 일몰</figcaption>
</figure>

 

👉 이렇게 하면 검색엔진, 스크린리더 등에서
이미지와 설명이 한 세트라는 걸 정확히 이해할 수 있습니다.

---

📍 3. 코드와 함께 쓰는 예시

<figure>는 이미지뿐만 아니라 코드 예시 같은 경우에도 잘 어울립니다.

 

<figure>
  <pre><code>console.log("Hello World");</code></pre>
  <figcaption>예시 코드: Hello World 출력하기</figcaption>
</figure>

---

📍 4. 스타일링 활용

<figure>와 <figcaption>은 기본적으로 블록요소라 줄바꿈이 생깁니다.
CSS로 보기 좋게 꾸밀 수 있습니다.

 

figure {
  margin: 1em auto;
  text-align: center;
}

figcaption {
  margin-top: 8px;
  font-size: 0.9em;
  color: #666;
}

 

👉 캡션을 본문보다 작고 회색 계열로 표현하면 부가 설명임을 시각적으로 잘 드러낼 수 있습니다.

---

📍 5. 접근성과 SEO 장점

• 스크린리더: 이미지와 설명을 함께 읽어주어 시각장애인 접근성이 좋아집니다.
• 검색엔진: <figcaption> 내용이 이미지 설명 텍스트로 활용될 수 있어 SEO에도 이점이 있습니다.
• 시맨틱 웹: 단순 <div>나 <p>보다 의미 있는 태그라 유지보수에도 좋습니다.

---

📍 6. 언제 사용하면 좋을까?

• 블로그 글에서 사진에 설명을 달 때
• 데이터 시각화 차트에 제목/설명 추가할 때
• 코드 예시나 인용문을 설명과 함께 묶고 싶을 때

---

✅ 마무리

HTML5의 <figure>와 <figcaption>은 단순히 이미지에 설명을 다는 수준을 넘어,
콘텐츠와 설명을 시맨틱하게 묶어주는 강력한 도구입니다.

 

이미지를 단순히 “보여주기”에서 그치지 말고, 설명까지 함께 제공한다면
검색엔진 최적화(SEO), 접근성, 가독성 모두 잡을 수 있습니다.