이미지 캡션 지원 - 대체 텍스트와 함께

기여 기능
1

Continuing the discussion from How to add a description for uploaded images?:

I came looking for a way to add a caption—visible to all—to an image. (<figcaption>)

alt vs. caption

I love that Discourse supports alt text for sight-impaired readers, but they’re effectively unavailable to sighted readers. Sighted readers don’t neccessarily need the same full image description, but would often be served by a bit of context, e.g. What movie is that screenshot from? What’s the title of that artwork?

The search was complicated a bit by the fact that “caption” is often used here when discussing image alt text. Even the Discourse AI feature is called “Caption with AI.” This point is made in a discussion of the manual “captioning” (alt text) method.

syntax

The parent thread ends in 2019 with:

I found some old relevant topics at CommonMark noting that:

But https://talk.commonmark.org/ is currently bannered with “Please note the CommonMark spec is currently frozen with respect to features” and the image spec doesn’t appear to address the use of captions.

next

Would it be so bad to diverge from CommonMark in this case and implement something in Discourse to support the common <figcaption> tag for images?

Test our new composer!
Encourage/enforce adding image descriptions
2

저는 접근성 전문가가 아니지만, 이 기능 요청을 이해하지 못하고 있습니다. alt와 figcaption의 실질적인 차이가 무엇이며, 왜 CommonMark와 다른 방향으로 가자고 주장하는 것인가요? 제가 놓치고 있는 부분이 있을까요?

예를 들어 내 고양이의 사진을 업로드하면 사진과 연결된 캡션이 자동으로 생성됩니다. 이후 캡션을 편집하여 맥락을 공유할 수 있습니다.

A gray tabby cat is sitting on a wooden railing outdoors, looking alert and curious with a green, leafy background. (Captioned by AI)
A gray tabby cat is sitting on a wooden railing outdoors, looking alert and curious with a green, leafy background. (Captioned by AI)3024×4032 1.19 MB

캡션은 마우스를 올렸을 때(데스크톱)와 사진을 선택하여 크게 볼 때 사진 하단에 표시됩니다:

Screenshot 2025-06-09 at 7.58.47 AM

1개의 좋아요
3

Tobias 씨, 검토해 보니 이 부분은 제가 과장해서 말한 것 같습니다:

alt 텍스트는 시력 있는 독자에게도 사용할 수 있습니다 – 다만 주제 내역을 스크롤할 때 제가 보통 하지 않는 마우스 조작이 필요합니다. “alt” 아이콘이 존재하지 않는 한, 이미지에 마우스를 올려 alt 텍스트의 유무를 확인할 생각조차 하지 못했을 것입니다. 이는 사실 일리가 있습니다. alt 텍스트는 추가 정보를 전달하기 위한 것이 아니라, 시력 있는 사용자에게는 본질적으로 불필요한 것이어야 하니까요…

저도 접근성 전문가가 아니지만, 이 두 기능이 시력 있는 사용자와 시각장애인 모두에게 꽤 다른 목적을 위해 사용되고 있다고 봅니다.

alt 텍스트:

  • 시각장애인을 위해 시각적 요소에 상응하는 수준의 상세한 이미지 설명을 제공하도록 권장됩니다.
  • 이미지가 보이기 때문에 시력 있는 사용자에게 기본적으로 숨겨집니다.
  • (대부분 스크린 리더와 기타 접근성 도구가 기본적으로 처리한다고 추정됩니다.)

figcaption:

  • 모든 사용자를 위한 제목, 부연 설명, 인용구 또는 기타 맥락 단서를 제공할 수 있습니다 – 이미지가 묘사하는 내용의 완전한 설명일 필요는 없습니다.
  • 시력 유무와 관계없이 모든 사용자를 위해 문서/게시글의 흐름 안에 표시됩니다.
  • 일반적인 브라우징 및 스크롤링 외에 보기 위한 특별한 조작이 필요 없습니다.

결론적으로, alt 텍스트는 이미지를 대체합니다 – 이미지가 정확히 무엇인지 알려줍니다. 반면 figcaption은 저자가 그 이미지를 왜 넣었는지 알려줄 수 있습니다.

귀하의 이미지에 대한 alt 텍스트는 정확합니다: “회색 줄무늬 고양이가 야외의 나무 난간에 앉아 경계롭고 호기심 많은 표정으로 초록색 잎사귀 배경을 바라보고 있습니다.” (접근성 전문가들은 더 많은 세부 사항과 더 적은 주관성을 제안할 수 있습니다: “회색 줄무늬 고양이가 야외의 나무 벤치에 단정하게 앉아 프레임 대부분을 차지하며 카메라 밖의 무언가를 바라보고 있습니다. 햇살이 비치는 초록색 배경은 흐릿하게 처리된 반면, 그늘에 있는 고양이의 얼굴은 선명하게 초점이 맞춰져 있습니다.”)

반면 figcaption은 *“alt 텍스트 예시용 고양이”*라고 쓰일 수 있거나 – *“Ravenpaw는 당신의 조신함에 개의치 않습니다.”*라고 쓰일 수도 있습니다.

CommonMark와 다른 방향으로 가는 것의 광범위한 영향력에 대해서는 말씀드릴 수 없습니다 – 저는 단지 CommonMark에 새로운 기능 구현 계획이 없다면, 널리 유용한 기능에 대해서는 차별화가 정당화될 수 있다고 생각했을 뿐입니다.

2개의 좋아요
4

토비아스님, 안녕하세요. 초보입니다. 제 phpBB 보드를 Discourse로 이전하려고 합니다. 이미지를 마우스로 올리면 캡션이 표시되는 기능이 정말 마음에 듭니다. 하지만 업로드할 때 캡션을 어떻게 추가하는지 명확하지 않네요. 혹시 설명해 주실 수 있을까요? 테스트 사이트에 업로드를 시도해 보았지만 성공하지 못했습니다.

물론 이와 관련된 질문도 있습니다. import_phpbb3.sh를 해킹하여 phpBB의 “파일 주석”(첨부 파일에 대한)을 변환된 업로드에 할당함으로써, 마우스를 올리면 캡션이 표시되도록 하는 것이 얼마나 어려운지 궁금합니다. 또한: phpBB에서는 .mp3나 .mp4와 같은 다른 MIME 타입에도 파일 주석을 할당할 수 있습니다. Discourse에서도 이런 기능이 가능한가요?

감사합니다.
Dan

1개의 좋아요
5

내 고양이 사진이 정말 귀엽다는 걸 떠올리게 해줘서 고마워! 내가 예시로 든 것에서는 캡션이 인공지능을 이용해 자동으로 생성되었어. 메타에서도 그런 식으로 처리되는 거라고 생각해. 또한 discourse 기반 사이트에서도 기본적으로 그렇게 할 수 있지. 만약 자가 호스팅 사이트에서 그렇게 하려면, AI를 설정해서 구현해야 해.

6

AI 자동 자막 기능은 7월에 제거되었습니다.


자막을 추가하는 방법은 사용하는 에디터에 따라 다릅니다. 리치 텍스트 에디터에서는 이미지를 클릭한 후, 이미지 아래에 있는 텍스트를 클릭하여 편집하면 됩니다.


마크다운 모드에서는 미리보기의 작은 연필 아이콘을 통해 편집하거나, 에디터에 직접 입력할 수 있습니다.

1개의 좋아요
7

Dan 님, 반갑습니다!

엄밀히 말해, 그것은 캡션이 아니라 이미지 대체 텍스트(alt text)입니다. 시각 장애 사용자를 위해 이미지를 설명하는 용도로 사용됩니다. (저도 Dan 님을 위해 편집 화면 캡처를 준비하고 있었는데, Moin 님이 먼저 하셨습니다.)

phpBB 가져오기 시 파일 주석 처리에 대한 질문은 이 스레드에서 놓칠 수 있으므로, 관련 지원 토픽으로 별도의 질문을 하는 것이 더 적절합니다.

1개의 좋아요
8

안녕하세요, 정말 감사합니다! 멋진 기능이에요. Todd님, 말씀하신 대로 맞습니다. phpBB 가져오기에 대해 문의할 적절한 장소를 찾아보겠습니다.

gif에 텍스트를 추가할 수는 있지만, 마우스를 올리면 표시되지 않는다는 점을 참고해 주세요. 다만 제 보드에서는 gif를 자주 사용하지는 않습니다. phpBB에서는 .mp3와 .mp4에 댓글을 추가할 수 있지만, Discourse에는 텍스트를 추가할 수 있는 그런 옵션이 없는 것 같습니다. 댓글이 달린 첨부 파일들을 .sql 백업 파일에서 찾아내어 어떻게 처리할지 결정해야겠어요.

Discourse에 기대가 크고, 제 보드를 21세기로 이끌어갈 준비가 되어 있습니다! :zany_face:

-Dan

9

CommonMark에 대한 언급, Todd 님 감사합니다. 저는 이전까지 이 표준에 대해 몰랐는데, 이제 이 스레드가 훨씬 더 이해가 됩니다.

저는 22년째 phpBB 보드를 운영해 왔으며, 그동안 제 필요에 맞게 갤러리 표시, 인라인 PDF 지원, Litebox, 캡션( Litebox 사용/미사용) 등을 위해 코드를 상당히 개조(hack)해 왔습니다. figcaption에 대해 언급하시자마자 기억이 났습니다. 제가 직접 개조한 attachment.html 템플릿의 일부 코드 조각을 공유합니다:

  `<figure><a data-fancybox="gallery1" href="{_file.U_DOWNLOAD_LINK}" data-caption="{_file.COMMENT}"><img src="{_file.THUMB_IMAGE}" class="postimage" alt="{_file.DOWNLOAD_NAME}"  title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
  <!-- ENDIF -->
  <!-- IF _file.COMMENT --><figcaption>{_file.COMMENT}</figcaption><!-- ENDIF -->
  </figure>`

우리의 친구 figcaption입니다.

이제 저는 phpBB를 떠나야 할 때인 것 같습니다. 이 플랫폼은 더 이상 제 용도에 맞지 않게 되었고, Discourse가 훨씬 더 견고한 플랫폼입니다. 하지만 - CommonMark에 대해나 왜 이를 따르는 것이 좋은지에 대해 권위 있는 의견을 내지는 못하지만 - Discourse에서 이미지, PDF, 동영상, 오디오 등에 캡션을 달 수 없다는 점은 저에게는 심각한 결함입니다. 어떻게 처리하든, 이에 대한 어떤 방식의 지원은 있어야 합니다.

제 소견입니다.
-Dan

3개의 좋아요
10

죽은 말과 채찍질에 대하여:

caption
caption1145×659 213 KB

제 phpBB 보드의 ‘Garage’ 카테고리 내 ‘How To’ 하위 카테고리에서 가져온 스크립트입니다. 썸네일을 클릭하면 Fancybox에서 이미지와 함께 댓글이 팝업으로 표시됩니다. 텍스트는 게시글과/또는 댓글에 표시될 수 있으며, 이를 통해 깔끔하고 정돈된 구성을 만들 수 있습니다.

Discourse에서 이러한 기능이 누락되어 있어 제 작업이 완전히 멈춰 버렸습니다. 이 문제를 우회할 수 있는 방법이 떠오르는 분이 계신다면, 기꺼이 듣고 싶습니다.

-Dan