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

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

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

예를 들어 여행 사진과 촬영 장소 설명이 하나의 정보라면 다음처럼 작성할 수 있습니다. figcaption은 figure의 첫 번째 또는 마지막 자식으로 둡니다. 파일을 내려받고 경로를 맞추는 준비는 이미지 넣기: img, alt, 크기의 같은 예제 이미지를 사용할 수 있습니다.

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="호수의 작은 섬에 있는 나무와 먼 산"
       width="960" height="540">
  <figcaption>그림: 수업에 사용하는 호수·나무 예제</figcaption>
</figure>

사진이 본문 너비보다 크면 head의 style에 다음 CSS를 넣습니다. figcaption의 문장을 바꿔도 alt가 자동으로 바뀌지 않으므로 두 내용을 각각 검토합니다.

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

이미지 강좌의 960px 예제 파일을 HTML 파일과 같은 폴더에 두고 위 코드를 body에 넣습니다. 파일명은 html-image-sample-lake-tree-960-v1.webp, 실제 크기는 960×540픽셀입니다. 캡션은 기본적으로 사진 아래에 보이며, 위로 옮기려면 figcaption을 첫 자식으로 배치합니다.

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

alt와 figcaption은 역할이 다릅니다

alt는 이미지를 볼 수 없을 때 이미지의 정보나 기능을 대신 전달하는 텍스트입니다. figcaption은 모든 독자에게 보이는 그림의 제목·출처·맥락 같은 설명입니다. 둘을 기계적으로 같은 문장으로 채우면 중복해서 읽힐 수 있습니다. 이미지가 맡는 기능과 키보드 이용을 함께 판단하는 방법은 HTML 접근성 기본: 제목·링크·이미지·키보드에서 점검합니다.

위 예제의 alt는 사진에 보이는 핵심 정보를, figcaption은 수업에 사용하는 예제라는 맥락을 전달합니다. 순전히 장식인 그림에만 alt=""를 검토하세요. 판단이 어려울 때는 W3C WAI 이미지 대체 텍스트 결정표를 참고합니다.

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

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

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

출처를 캡션에 연결하려면 앞의 figcaption을 아래처럼 바꿀 수 있습니다. 이 주소는 실제 제공 파일을 안내하는 강좌입니다. 다른 이미지를 사용할 때는 실제 제작자·자료 페이지와 사용 조건을 확인하고, 링크를 넣었다는 이유만으로 이용 허락을 얻었다고 생각하지 마세요.

<figcaption>예제 이미지 출처: <a href="https://www.codingfactory.net/15483">이미지 넣기 강좌의 제공 파일</a>.</figcaption>

화면에는 사진 아래에 출처 문구와 링크가 보이고, alt는 계속 사진 속 나무·호수·산의 핵심 정보를 설명합니다. 출처를 alt에 모두 반복하지 않습니다.

표시 결과가 어색할 때

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

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