이미지 3개 미만 자동 그리드 설정 편의성 개선

기여 기능
1

자동 이미지 그리드에 대한 최소 이미지 수 설정 가능

자동 이미지 그리드 기능의 한계에 직면했습니다.

현재 자동 그리드 동작은 사이트 설정의 ‘자동 그리드 이미지’ 옵션에 의해 제어되는 것으로 보이지만, 컴포저가 [grid]...[/grid]를 삽입하는 실제 임계값은 여전히 프론트엔드 코드에 고정되어 있습니다.

관련 컴포저 로직은 현재 하드코딩된 값을 사용하고 있습니다:

const MIN_IMAGES_TO_AUTO_GRID = 3;

따라서 제가 파악한 바로는, 현재 관리자는 다음과 같은 선택지를 가지고 있습니다:

현재 관리자가 할 수 있는 것 결과
자동 그리드 이미지 활성화 3개 이상의 연속된 이미지 업로드가 자동으로 [grid]...[/grid]로 감싸짐
자동 그리드 이미지 비활성화 자동 그리드 래핑 없음
임계값을 3에서 다른 숫자로 변경 현재 사이트 설정으로 제공되지 않음

문제는 3이 모든 커뮤니티에 반드시 적합한 임계값이 아닐 수 있다는 점입니다.

일부 사이트에서는 자동 그리드가 유용하지만, 사용자가 더 많은 양의 이미지를 한꺼번에 업로드할 때만 작동하는 것이 좋습니다. 예를 들어, 관리자는 3개의 이미지가 업로드되는 즉시 트리거되는 대신, 5, 6, 10 또는 다른 값에서 자동 그리드가 시작되도록 설정할 수 있습니다.

이것은 설명 텍스트와 함께 소수의 이미지를 인라인으로 업로드하는 경우가 많지만, 더 큰 갤러리는 여전히 그리드로 압축되어야 하는 커뮤니티에서 특히 유용할 것입니다.

제안된 방향

컴포저가 자동으로 그리드를 삽입하기 전에 연속된 이미지 업로드의 최소 수에 대한 설정 가능한 사이트 설정을 추가하여 이를 개선할 수 있다고 생각합니다.

다음과 같은 것입니다:

auto_grid_images_minimum_count

예를 들어:

설정 예시 값
enable_auto_grid_images true
auto_grid_images_minimum_count 5

이 경우에도 자동 그리드는 사용 가능하지만, 구성된 임계값에 도달한 후에만 트리거됩니다.

새로운 설정의 기본값이 3인 경우 기존 동작을 기본값으로 유지하면서 관리자에게 더 많은 제어권을 부여합니다.

실험적 브랜치 / 가능한 출발점

더 많은 Discourse 개발 경험이 있는 사람이 이를 포크하고, 정리하거나, 아이디어를 발전시킬 시간이 있다면, 의도된 방향을 보여주는 작은 실험적 브랜치를 여기에 만들었습니다:

image-grid-num-setting branch

이 브랜치는 아직 정교한 PR으로 의도된 것이 아닙니다. 의도된 방향을 보여주는 출발점에 가깝습니다:

  • 자동 그리드 최소 이미지 수에 대한 새로운 사이트 설정 추가
  • 해당 설정을 클라이언트에 노출
  • 컴포저 업로드 코드에서 하드코딩된 MIN_IMAGES_TO_AUTO_GRID = 3 체크를 구성된 값으로 대체
  • 기존 자동 그리드 문구가 임계값이 항상 3인 것처럼 보이지 않도록 관리자 설정 텍스트 업데이트
  • 필요할 경우 프론트엔드 스펙 추가/업데이트

제가 염두에 둔 프론트엔드 변경 사항은 대략 다음과 같습니다:

const minImagesToAutoGrid = Number(
  this.siteSettings.auto_grid_images_minimum_count ?? 3
);

if (
  this.siteSettings.enable_auto_grid_images &&
  this.#consecutiveImages?.length >= minImagesToAutoGrid &&
  this.textManipulation
) {
  this.textManipulation.autoGridImages([...this.#consecutiveImages]);
  this.#consecutiveImages.length = 0;
}

또한 PR #36014에서 Discourse 스타일의 열거형(enum) 사이트 설정의 최근 예시가 있습니다:

PR #36014 - FEATURE: adds calendar_upcoming_events_default_view setting

해당 PR은 이미지 그리드와 직접 관련이 있는 것이 아니라 캘린더 및 이벤트 플러그인을 위한 것이므로, 이 기능이 해당 PR의 영향을 받는다고 제안하는 것은 아닙니다. 이러한 유형의 설정 가능한 사이트 설정에 대한 유용한 구현 패턴을 보여주는 것 같아서 언급합니다: 설정을 정의하고, 클라이언트에 노출한 후, 프론트엔드에서 siteSettings를 통해 읽습니다.

관련 링크

자동 그리드 이미지 비활성화에 대한 원래 토론:

Turning off auto-grid-images?

자동 이미지 그리드 공지:

Automatically apply grids to image uploads

사이트 설정 아키텍처를 보여주는 예시 PR:

PR #36014 - FEATURE: adds calendar_upcoming_events_default_view setting

제 실험적 브랜치:

image-grid-num-setting branch

2개의 좋아요
2

특히 본인의 경험에 대해 조금 더 공유해 주시겠습니까?

어떤 설정을 사용하시겠으며, 그 이유는 무엇입니까?

3

고맙습니다. 네, 맞습니다.

제 사이트의 경우, 임계값을 이미지 5개로 설정할 가능성이 높습니다.

그 이유는 많은 게시물이 갤러리라고 할 수 없을 정도로 자연스럽게 3개의 이미지를 포함할 수 있기 때문입니다. 예를 들어, 사용자는 다음과 같은 이미지를 업로드할 수 있습니다:

  • 문제점에 대한 스크린샷
  • 관련 설정/오류를 보여주는 두 번째 스크린샷
  • 결과나 비교를 보여주는 세 번째 이미지

이런 상황에서 자동 그리드(auto-grid)는 연속된 이미지에 적용되어 시각적인 혼란을 방지하는 데 도움이 됩니다.

또한, 이미지 업로드를 많이 장려하는 것은 저장소나 백업 용량 측면에서 이상적이지 않다는 점도 고려하고 있습니다. 따라서 저는 사용자들이 대량의 이미지를 포함한 게시물을 작성하도록 유도하려는 것이 아닙니다. 제 주장은 이미 여러 이미지가 업로드된 경우의 레이아웃 제어에 더 가깝습니다.

저에게 있어 자동 그리드는 게시물이 몇 장의 설명용 이미지를 넘어 더 큰 규모의 이미지 묶음으로 넘어갔을 때 더 유용해집니다. 제 사이트에서는 그런 경우에 5개가 더 적절한 임계값으로 느껴집니다.

따라서 저는 자동 그리드를 완전히 비활성화하지 않으려 합니다. 특정 상황에서는 이 기능을 좋아합니다. 문제는 현재 고정된 임계값인 3이 설명의 일부로 소수의 이미지가 자주 사용되는 커뮤니티에서는 다소 공격적이라는 점입니다.

그래서 저는 auto_grid_images_minimum_count와 같은 사이트 설정이 유용할 것이라고 생각합니다. 현재 동작 방식을 선호하는 사이트는 3으로 유지할 수 있고, 제 사이트와 같은 사이트는 5나 2, 또는 다른 값으로 높일 수 있습니다.

2개의 좋아요
4

질문자님의 특정 경우에 대해, 다음과 같이 하면 어떨까요:

  • auto-grid가 기본적으로 “carousel” 레이아웃을 사용하거나 또는
  • 사용자가 전체 그룹의 “ungrid” 처리를 더 쉽게 할 수 있게 하는 것

이제 또 다른 생각이 떠오르는데…

아마도 "image group"의 개념을 해당 그룹의 "layout"과 더 명확히 분리하는 것이 좋을 수 있습니다.

예를 들어, 리치 에디터에서 그룹에 대해 세 가지 옵션(목록, 그리드, 캐러셀)을 전환할 수 있으면, 모든 항목을 그룹 안에 그대로 두면서도 사용자가나 모더레이터가 원하는 레이아웃을 한 번의 클릭으로 선택할 수 있어, 기본값을 선택하기 위해 사용된 휴리스틱이 원하는 것과 다른 경우에 더 편리해질 수 있을 것입니다.

5

네, 저는 그 분리 방식이 합리적이라고 생각합니다.

제 경우, 핵심 문제는 그리드가 존재하는 것이 아닙니다. 문제는 현재의 휴리스틱(경험적 규칙)이 3장의 연속된 이미지라는 시점에서 레이아웃을 매우 일찍 결정하고, 그 결정을 게시글에 [grid]...[/grid] 마크업으로 노출한다는 점입니다.

"이것은 이미지 그룹이다"라는 사실과 "이 그룹은 목록(줄바꿈 없음) / 그리드(줄바꿈 있음) / 캐러셀(bbcode 파라미터가 있는 줄바꿈 있음)로 표시되어야 한다"는 것을 분리하는 것이 장기적으로 더 깔끔한 모델이 될 것이라고 동의합니다.

제 생각에는 다음과 같은 방식이 적절할 것입니다:

  • 작성기(composer)가 이미지 그룹을 인식하거나 생성합니다. 즉, 리치 텍스트 에디터에서 인식하거나 마크다운 에디터에서 생성하는 것입니다.
  • 그룹에는 레이아웃 선택지가 있습니다: 목록, 그리드, 또는 캐러셀 - 이는 bbcode의 파라미터입니다.
  • 사용자나 관리자가 2단계로 그 레이아웃을 변경할 수 있으며, 이는 마크다운 작성기의 2번째 패널(pane)을 통해 가능합니다.
  • 게시글이 사용자가 [grid] 태그를 이해하거나 주의 깊게 보존하는 것에 의존하지 않습니다. 이는 단일 패널(single-pane) 리치 텍스트 에디터가 유용한 부분입니다.

이는 단순히 임계값 설정을 추가하는 것보다 더 많은 사례를 해결할 수 있을 것입니다. 하지만 여전히 더 넓은 범위의 기능입니다.

제 특정 사이트의 경우, 저는 여전히 작은 이미지 그룹의 기본값으로 **목록(list)**을 선택할 것입니다. 왜냐하면 스크린샷 3장은 갤러리보다는 설명의 일부인 경우가 많기 때문입니다. 더 큰 배치의 경우, 그리드나 캐러셀이 유용할 수 있다고 봅니다.

따라서 개선은 두 단계로 나눌 수 있을 것입니다:

  1. 현재 동작에 대한 더 작은 관리자 설정 또는 더 큰 사용자 설정, 예를 들어 auto_grid_images_minimum_count로 기존 기본값인 3을 유지하는 것
  2. 나중에 더 풍부한 이미지 그룹 레이아웃 모델, 여기서 목록/그리드/캐러셀을 마크업을 수동으로 편집하지 않고 더 쉽게 변경할 수 있습니다. 그러나 저는 이것이 다른 기능 요청 주제에 속한다고 생각합니다.

다만, 두 번째 방향이 선호된다면, 제 첫 번째 게시물에서 제안한 그 임계값 설정은 덜 중요해질 수 있지만, 근본적인 문제는 동일하다고 생각합니다: 관리자와 사용자는 여러 이미지가 정상적인 인라인 설명용 이미지가 아닌 갤러리 스타일의 블록으로 취급되는 시점에 대해 조금 더 많은 제어권을 필요로 합니다.

1개의 좋아요
6

네, 그래서 지금 내가 생각하는 방식은 다음과 같이 하는 겁니다:

  • 이미지가 1개 이상 업로드되면 [grid]로 감싸기
    • 개수가 3 이하이면 기본적으로 [grid mode=list]로 설정
    • 개수가 3을 초과하고 10 이하이면 기본적으로 [grid mode=grid]로 설정
    • 개수가 10을 초과하면 기본적으로 [grid mode=carousel]로 설정
  • 리치 모드와 미리보기에서 사용자가 list, grid, carousel 모드 간을 쉽게 전환할 수 있도록 하기

@chapoi, @renato 이 부분에 대해 여러분의 생각을 듣고 싶습니다.

1개의 좋아요
7

설득적이지 않아요. OP의 스크린샷 예시 같은 경우에도 이 요소들이 나란히 배치되길 원합니다.

무엇이든 시도하기보다 원래 제안된 설정을 더 선호하지만, 이 기능 요청에 더 많은 투표가 모이거나 다른 곳에서 같은 의견을 듣기 전까지는 아무 행동도 취하지 않는 것이 좋겠습니다.

1개의 좋아요