우선순위/심각도: 낮음. 플랫폼: Windows 10의 Firefox 127.0 및 Android 14의 Chrome 125.0.6422.165에서 확인됨. 설명: 아래를 참조하세요. 재현 단계: 해상도가 690×500픽셀 이하인 이미지를 업로드한 후, 수동으로 크기 조절(예: )하거나 [grid] 안에 배치(예: [grid]  [/grid])합니다.
기대되는 동작
Discourse의 라이트박스(Lightboxing) 작동 방식은 다음과 같습니다. 게시글에 맞춰 이미지가 축소된 경우, 클릭하여 전체 해상도로 볼 수 있도록 라이트박스가 적용되어야 합니다.
문제점
현재 구현 방식에 버그가 있습니다: 이미지의 원래 해상도를 웹사이트의 “최대 이미지 너비” 및 “최대 이미지 높이 설정”(기본값 690×500픽셀)과만 비교할 뿐, 수동 크기 조절 및 이미지 그리드는 무시합니다. 이로 인해 [최대 이미지 너비]×[최대 이미지 높이] 미만으로 축소된 이미지는 라이트박스가 적용되지 않을 수 있습니다.
이미지가 수동으로 축소된 경우 라이트박스가 적용되지 않는 예시입니다 – 아래 이미지 위에 마우스를 올리면 일관성 없이 라이트박스가 적용되는 것을 확인할 수 있으며, 라이트박스가 적용된 이미지를 클릭하면 좌우 키를 눌렀을 때 일부 이미지가 표시되지 않는 것을 볼 수 있습니다:[2]
제가 떠올린 생각이 하나 있습니다. 모든 이미지에 라이트박스를 적용하지 않을 이유가 있을까요? 적어도 모바일에서 정보 바와 작은 “확대” 아이콘을 가리지 않으면서도 이미지가 충분히 들어맞을 수 있는 이미지는 말입니다. 라이트박스는 고해상도 이미지를 볼 수 있게 해주는 것 외에도 두 가지 측면에서 가치가 있습니다:
대체 텍스트(alt text)를 표시합니다(대체 텍스트는 미리 입력되어 있고, title 텍스트의 구문이 더 난해하기 때문에 게시자가 title 텍스트보다 훨씬 더 자주 입력할 가능성이 있으므로 매우 중요합니다) 그리고
라이트박스를 클릭한 후 이미지를 넘길 때 해당 이미지가 누락되지 않습니다.
전체적으로 볼 수 있는 이미지에 라이트박스를 적용하지 않을 이유가 있을까요?
한 가지 옵션은 그리드에서 모든 이미지에 라이트박스를 적용하는 것 외에도, 페이지에서 특정 크기(예: 72×72픽셀 이상)를 초과하는 모든 이미지에 라이트박스를 적용하는 것입니다(여기서는 줄 단위로 생각하고 있습니다 – 크기가 약 3줄을 초과하는 모든 이미지). 어떻게 생각하시나요?
이상적으로는 리사이즈 설정은 690x500px의 기본값과 유사하게 유지하되, 라이트박스 설정은 72x72px에 더 가깝게(큰 이모지나 “스티커” 크기의 이미지보다 큰 것들) 설정하고 싶습니다.
라이트박스의 주요 의도는 이미지의 축소되지 않은 버전을 보는 것인 것 같지만, 저는 이를 캐러셀 스타일의 갤러리로 더 많이 사용합니다. 그래서 같은 그리드에 있는 이미지인데도 502px 높이의 이미지와 499px 높이의 이미지가 다르게 처리되는 것은 다소 어색하게 느껴집니다.
! 이 이미지는 1) 이모티콘이지만, 더 중요한 것은 2) 모바일에서 오른쪽 하단의 작은 확장 아이콘이 이미지의 대부분을 가리게 되므로, 라이트박스로 열리지 않아야 합니다. 현재는 고해상도 원본 이미지의 크기가 690×500픽셀(정확히는 372×468픽셀) 미만이기 때문에 라이트박스로 열리지 않지만, 축소된 상태이더라도 라이트박스로 열리지 않아야 합니다. 판단의 진정한 핵심 기준은 페이지에서의 크기입니다.
