토픽 푸터의 답글 버튼이 스레드를 깨뜨릴 수 있음

안녕하세요,

네, 흥미로운 상황이라는 건 알아요. 이 주제를 작성한 이유는 파란색 답장 버튼(특히 모바일에서는 [1])이 게시물 내의 답장 버튼보다 더 많이 사용되고 있는 것 같아서입니다. 답변이 실제로는 최신 게시물이 아니라 원글(OP)에 대한 것일 때 이는 문제가 됩니다.

이로 인해 두 가지 문제가 발생합니다:

  1. 메시지가 실제로 전송된 대상 사용자는 멘션되거나 인용되지 않는 한 알림을 받지 못합니다.

  2. 이런 상황이 발생하면, 게시글을 이동하는 등의 작업에서 스태프의 업무가 훨씬 어려워집니다. 해당 게시글은 (선택 + 답장) 기능으로 선택할 수 없기 때문이며, 이를 인지하지 못하면 스레드(대화)가 깨질 수 있습니다.

이 문제를 어떻게 처리하는 것이 최선일지 고민하고 있습니다. 아마도 파란색 버튼의 이름을 주제에 답장으로 간단히 바꾸거나, 해당 버튼이 원글(OP)에 대한 답장임을 어떤 방식으로든 표시하는 방법이 있을 것입니다… :thinking:

결국 데스크톱에서 주제 하단(footer)의 답장 버튼을 주제에 답장으로 변경하고, 주제 제어 섹션 제목을 추가하기로 했습니다. 모바일에서는 이미 드롭다운 메뉴에 주제 제어 섹션이 존재합니다.

이렇게 하면 사용자가 해당 버튼으로 주제(원글)에 응답하고 있다는 것을 더 잘 인식할 수 있기를 바랍니다. :slightly_smiling_face:


  1. 답장 시 아이콘만 표시되기 때문에 ↩︎

3개의 좋아요

저도 동의하는 편이에요. 저도 가끔 잘못된 버튼을 누르거든요. 당신의 아이디어를 훔쳐서 버튼 이름 중 하나를 변경할지도 몰라요. 우리 포럼에서는 빠른 인용(quick quote) 컴포넌트를 사용하는데, 어떤 게시글에 답변하는지 명확하게 알 수 있어서 정말 잘 작동해요.

3개의 좋아요

네, 하지만 이제 테마 컴포넌트를 통해 토픽 푸터(파란색)의 답글을 이름 변경할 수 있습니다. 토픽 푸터의 답글 버튼과 게시물 내 답글 버튼이 동일한 문자열 js.topic.reply.title을 사용하기 때문입니다. 따라서 이 값을 변경하면 두 버튼 모두 변경됩니다.

새로운 테마 컴포넌트나 기존 컴포넌트에 다음을 추가하여 토픽 푸터 버튼에 대해 이를 변경할 수 있습니다.

Common / CSS

#topic-footer-buttons {
  .topic-footer-main-buttons {
    button.btn-primary.create {
      span.d-button-label:after {
        // 답글 뒤에 이 콘텐츠를 추가합니다
        content: " to topic";
      }
    }
  }
}

훌륭한 컴포넌트네요, 공유해 주셔서 감사합니다 :slightly_smiling_face: 저도 확인해 보겠습니다. :heart:

4개의 좋아요

정말요? 여러 사람에게 답할 때에도요?

답글이 인용으로 시작되고, 다음 장(또는 부분)이 실제로는 주제에 대한 답글인 경우는 어떻게 될까요?

이 부분은 다소 혼란스럽다고 생각합니다. 그리고… 많은 일반 사용자가 ‘올바른’ 답글 버튼을 사용하지 않거나(차이를 완전히 이해하지 못하거나), 완벽하게 작동한다고 단정하기 어렵습니다.

더 나은 옵션은 무엇일까요? 저도 잘 모르겠습니다.

2개의 좋아요

무엇을 말씀하시는지는 잘 모르겠지만, 같은 게시물 내에서 다른 사람에게 답글을 달기 위해 복사해서 붙여넣기를 통해 빠른 인용을 여러 번 사용할 수 있습니다. 제가 정말로 이해할 수 없는 부분은 무엇인가요? 다음 장? “정답” 버튼? 어떤 것을 말씀하시는 건지 전혀 모르겠네요.

어쨌든, 아래에 있는 답글 버튼을 이제 이름 변경했는데, 그 차이가 마음에 들어요. 인터페이스가 조금 더 명확해졌거든요. 코드 스니펫을 공유해줘서 감사합니다 @dodesz :slight_smile:

1개의 좋아요

이것은 당신에게 보내는 답입니다.

하지만 이것은 Don에게 보내는 답입니다.

정말 훌륭하네요! 그렇다면… ‘답글 작성(Reply Post)’ 버튼에도 비슷한 방식으로 텍스트를 변경할 수 있을까요?

그리고 이 부분은 토픽 답글로 사용할 수 있겠네요:

저는 주요 문제가 인용(quoting)과/또는 태그 달기(tagging) 자체는 아니라고 생각합니다(빠른 인용(Quick quote) 컴포넌트가 이를 해결해 주긴 하지만요). 문제는 두 개의 서로 다른 버튼이 같은 일을 하면서도 약간 다르게 작동한다는 점이라고 봅니다.

다른 측면에서도 이해합니다. 사용자들에게는 답글은 답글이고 답글입니다. 하지만… 누군가가 게시글/댓글/답글을 읽을 때, 왜 가장 가까운 답글 버튼 대신 맨 마지막 답글 버튼을 사용하는 걸까요?

네, 압니다. 인용 없이 하면 이것저것 문제가 생기긴 하지만, 여전히 그래요.

—

지금 제 말을 조금이라도 따라오시나요? 이 게시글은 어떻게 작동해야 할까요: 당신에게 보내는 답글일까요, Don에게 보내는 답글일까요, 둘 다 아닐까요, 아니면 둘 다일까요? 물론 — 저는 인용을 했지만, 사실 이 게시글이 어떤 종류의 답글인지 생각해보려는 시도는 꽤나 무의미해집니다.

두 게시물을 모두 인용했기 때문에 자동 백레퍼런스가 생성되었습니다. 이제 두 게시물에 모두 있는 1개의 답글 ⌄ 버튼을 클릭하면 자신의 게시물을 볼 수 있습니다.

“답글” 버튼 사이에 좀 더 명확한 구분이 있으면 도움이 될 것 같다는 데 동의합니다. 저도 제 커뮤니티에서 테스트해 볼 예정입니다.

2개의 좋아요

아! 정말 맞아요. 매일 새로운 것을 배우는데, 그걸 어떻게 놓칠 수가 있었을까요 :man_facepalming:

3개의 좋아요

뒤로 참조 링크(위쪽 화살표)뿐만 아니라, 아래쪽 화살표를 클릭/탭하면 인용 상자도 표시됩니다:

죄송합니다. 아까 제가 잘못 이해했던 것 같습니다.

1개의 좋아요

이것을 알려주셔서 감사합니다, Don. 저는 몇 년 동안 이걸 해보고 싶었습니다! 제 필요에 맞춰 이 아이디어를 한 단계 더 발전시켰습니다. 제 사이트는 조금 특별해서 모든 카테고리가 단순한 토론이 아니기 때문에, 답글 버튼의 텍스트를 완전히 변경하는 방식을 선택했습니다. 예를 들어 이미지 비평 카테고리는 "비평을 달거나 답글을 남기세요"로 변경했는데, '또는 답글을 남기세요(or Reply)'를 추가함으로써 Jakke님의 우려를 해결할 수 있다고 생각합니다. 그 점을 언급해 주셔서 감사합니다, Jakke. 처음에는 단순히 "비평을 달아주세요"로 설정해 두었는데, 말씀하신 대로 모든 상황에 적용하기는 어렵다는 점이 맞습니다.

font-size: 0 트릭은 좋아하지 않지만, 어떤 이유인지 모르겠지만 visibility:hidden 트릭은 이 경우 작동하지 않았습니다. 또한 px 대신 1em으로 font-size를 설정해 보았지만 이것도 작동하지 않는 것 같았습니다. 결국 버튼이 눈에 더 잘 띄도록 약간 더 큰 폰트를 사용했지만, 폰트가 스케일링되도록 em을 사용하는 편이 더 좋았을 것 같습니다.

// Image Critique
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          //hide reply text
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // New text
          font-size: 18px;
          content: "Critique Image or Reply";
        }
      }
    }
  }
}

이것은 특히 AMA(Ask Me Anything) 카테고리에 매우 유용합니다. 여기서 답글 버튼을 "질문하기"로 변경했는데, 완벽합니다! 또한 AMA 진행자가 작은 답글 버튼을 사용해야 함을 이해하는 데도 도움이 됩니다.

// AMA
body.category-learning-ama {
  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label {
          //hide reply text
          font-size: 0;
        }
      }
    }
  }

  #topic-footer-buttons {
    .topic-footer-main-buttons {
      button.btn-primary.create {
        span.d-button-label:after {
          // New text
          font-size: 18px;
          content: "Ask a question";
        }
      }
    }
  }
}

또한 답글 버튼에 배경색을 설정하여 더 눈에 띄게 했습니다. 호버 시 올바르게 전환되는 방법을 아직 찾지 못했는데,这方面的 아이디어가 있다면 도움이 될 것입니다…

.discourse-no-touch .topic-body .actions .fade-out {
    background: var(--primary-low);
}

어쨌든, 제 이 긴 글이 다른 분들에게 도움이 되길 바랍니다!

2개의 좋아요