사이트에 Discourse를 전체 댓글 시스템으로 임베드하기

Discourse의 임베딩 시스템을 사용하면 iframe을 통해 외부 사이트에서 주제 댓글을 표시할 수 있습니다. 하지만 지금까지는 읽기 전용 경험에 그쳤습니다. 방문자가 답글을 달거나, 좋아요를 누르거나, 토론에 참여하려면 Discourse 사이트로 이동해야 했습니다.

이제 임베딩에 **완전 앱 모드(full app mode)**를 추가했습니다. 이 모드는 iframe 내부에 Discourse 애플리케이션 전체를 로드합니다. 이제 방문자는 블로그나 웹사이트를 떠나지 않고도 답글을 달고, 좋아요를 누르고, 인용하고, 주제에 상호작용할 수 있습니다.

활성화 방법

관리자 > 고급 > 임베딩으로 이동하면, 페이지 상단에 완전 앱 모드를 활성화하기 위한 새로운 토글이 보입니다.

토글이 켜지면:

  • 임베딩 구성 스니펫에 fullApp: trueembedHeight: '800px' 매개변수가 자동으로 포함됩니다.
  • 이 모드를 활성화하는 사이트 설정이 자동으로 활성화됩니다.

이 설정은 임베딩 > 설정 탭에서도 embed_full_app으로 사용할 수 있습니다.

방문자에게 변화하는 점

완전 앱 모드가 활성화되면, 임베딩된 iframe은 정적인 답글 목록 대신 Discourse UI 전체를 로드합니다. 외부 사이트의 방문자는 다음과 같은 작업을 수행할 수 있습니다:

  • 주제에 답글을 직접 달기
  • 게시물에 좋아요를 누르고 인용하기
  • 포럼에서 하듯이 주제 내에서 탐색하기

이를 통해 블로그 독자는 페이지를 떠나지 않고도 일급의 토론 경험을 누릴 수 있습니다.

데모

Discourse 신뢰 수준 이해하기, 이제 태그에 대해 이야기할 때입니다, Discourse AI 소개와 같은 게시글에서 실제 작동하는 모습을 볼 수 있습니다.

55개의 좋아요

정말 놀랍고 게임 체인저입니다. 팀 여러분, 잘하셨어요. :discourse: :clap:

7개의 좋아요

와, 정말 멋진 발전이네요!! :+1:

3개의 좋아요

정말 멋지네요! 원래 페이지 안에서 바로 편집할 수 있다는 점도 좋지만, 제 입장에선 내장 버전에서 수학 수식이 렌더링된다는 점이 더 큰 개선 사항이라고 생각합니다. 제 사이트에서 사용해 보기를 고대하고 있어요.

직접 테스트해 보고자 링크해 주신 데모 주제 중 하나를 방문해 거기서 답변을 작성했는데, 몇 가지 작은 문제를 발견했습니다:

  1. 마크다운/리치 에디터 전환 버튼이 에디터 툴바에 표시되지 않았고,
  2. 게시 후 사이트에서 해당 글을 편집하려고 했더니 다른 창에서 편집 중이라는 경고가 표시되었는데, 실제로는 다른 창이 열려 있지 않았으며,
  3. 제 답변을 삭제할 수 없었습니다. 분명 커뮤니티에서 삭제한 것 같습니다.

전체적으로 보면 큰 발전입니다. 감사합니다!

4개의 좋아요

임베드 환경에서 경험을 단순화하기 위해 해당 기능과 수많은 다른 UI 요소를 제거했습니다. 필요하시다면 작은 테마 컴포넌트를 통해 사이트에 다시 추가할 수 있을 것입니다.

새로운 기능에 있어서 항상 적절한 균형을 맞추려 노력하고 있으며, 대부분의 블로그에 적합한 경험을 만들었다고 생각합니다. 다만, 기대하시듯 Discourse는 항상 사용자 지정이 가능합니다.

흥미롭네요. 이 문제에 주의를 기울이겠습니다.

7개의 좋아요

이 기능을 통해 같은 디스커스(커뮤니티) 내부에 임베드할 수 있을까요?

즉, 블로그처럼 토픽을 만들고, 댓글은 별도의 토픽으로 분리하는 식으로요.

계정이 없는 방문자가 댓글을 쓰려 하면 계정을 만들도록 유도할까요?

이것에 새로운 스레드형 답변 기능이 추가되면 꽤 좋을 것 같습니다.

아마도요? 여기서의 초점은 아니어서 전혀 테스트해 보지 않았습니다.

이 기능의 범위를 벗어납니다.

네, 로그인을 위해 새 탭을 엽니다.

네! 그건 곧 나올 예정이라 저희도 기대하고 있습니다!

2개의 좋아요

이걸 채팅에서도 할 수 있으면 좋겠다 :smiley:

정말 놀랍네요. 이 기능을 다시 한번 살펴볼까 하던 바로 그때에 딱 등장했습니다 :smiley:

고려해 볼 수 있는 한 가지 사항은 스크롤바를 어떻게든 눈에 띄게 만드는 것입니다. 예를 들어, 여기에서: Understanding Discourse Trust Levels 를 보면 다음과 같은 화면이 보입니다:

이 화면은 댓글이 3개 있는 것처럼 보입니다. 마우스를 올리면 오른쪽 위 모서리에 기본 스크롤바의 아주 작은 은색 줄(Firefox, linux)이 보일 뿐입니다.

즉, Discourse가 무엇인지 모르는 사용자라면 현재 답글이 3개 있고, Jay 이름 옆의 답글 버튼은 주제 전체에 대한 일반적인 답글 버튼이라고 가정할 것입니다. 안타까운 현실은, 사람들이 이 실수를 할 때마다 Jay에게 답글 알림이 계속 간다는 점입니다.

다음과 같은 방법이 있는지 궁금합니다:
a) 주제에 답글 남기기(Reply to Topic) 버튼을 항상 표시되도록 하는 방법?
b) 우아하고 비침습적인 스타일을 유지하면서 스크롤을 더 눈에 띄게 만드는 방법?

9개의 좋아요

좋은 제안들입니다. 더 일반적으로 말하자면, UI 요소들이 너무 약해지지 않았을까요? 어제의 ‘신뢰 수준’ 블로그 게시물에 답변했을 때, 타임라인 스크롤 요소가 없어 제 답변을 확인하기 위해 한동안 무한 스크롤을 해야 했습니다.

4개의 좋아요

리포트 관점에서 답변/좋아요는 어떻게 처리되나요? 지정된 카테고리가 있나요?

수정: 아, 이제 이해한 것 같습니다. 임베드된 페이지가 카테고리에 게시되는 것이네요. 이처럼.

2개의 좋아요

정말 좋습니다. 감사합니다.

다른 사용자들의 댓글처럼, 무한 스크롤은 직관적이지 않으며, 댓글 수가 정의된 높이를 초과하면 답글 버튼이 화면에서 사라집니다.

3개의 좋아요

어떤 이유에선지 Super Fight Bot이 챌린지와 기타 가장 오래된 댓글에 관한 내용을 반환합니다.

하지만 저는 이 임베드가 정말 좋았습니다.

안타깝게도, 당신의 예시 중 하나에서 보듯, 이 방식은 사용자가 iframe 안(여러 가지 단점이 있음)에서 눈이 부실 정도로 많은 양의 댓글을 스크롤해야만 맨 아래에 도달해 1차 댓글을 작성할 수 있게 됩니다. 답글이 아닌 최상위 댓글을 추가할 수 있는 방법이 있을까요?

5개의 좋아요

정말 좋습니다!

몇 가지 질문이 있습니다:

  • 도메인을 허용 목록(allow-list)에 추가할 수 있나요? (즉, 우리 도메인만 임베드할 수 있도록)
  • 임베드가 포함된 모든 페이지에서 Discourse 앱 전체가 로드되나요, 아니면 한 번 로드된 후 유지되나요? 예를 들어, mydomain.com/page1, /page2, /page3 등이 있는 경우, 모든 페이지에서 처음부터 다시 로드해야 하나요?

이제 플로팅 답글 버튼이 있습니다.

타임라인 위젯을 호출하는 플로팅 요소가 있습니다

이것은 일반적인 Discourse 주제이며, 게시물의 답글 버튼을 클릭하면 답글로 처리됩니다.

여전히 자바스크립트를 통해 다른 웹사이트에 Discourse 댓글을 임베드하는 10년 전의 기능이므로, 동일한 허용 목록 동작이 적용됩니다.

5개의 좋아요

2개의 게시물이 새 주제로 분리되었습니다: Tecnoblog’s Experience With Discourse Comments

게시물 3개가 새 주제 Ghost 댓글 통합 Discourse 문제 해결로 분리되었습니다.

Discourse의 UI/전반적인 UX에 대해 만족하지 못했던 분이라면, 이 문제를 해결하는 가장 좋은 방법은 무엇일까요? 이 아이디어는 잠재력이 있어 보입니다.

기존 시스템을 다른 시스템, 예를 들어 WordPress나 더 나은 대안으로 감싸는 방식도 가능할 것 같습니다.

메뉴를 Discord 카테고리 등과 자연스럽게 통합하고, Discord의 게시글과 페이지 등 모든 요소를 매끄럽게 연결할 수 있다면 정말 좋겠습니다.

이 작업을 수행하는 최선의 방법은 무엇일까요? WordPress인가요? 아니면 더 인기 있는 다른 솔루션이 있을까요?

제 목표는 전반적인 UX를 개선하는 것입니다. 더 현대적인 디자인, 시각적 요소, 이미지 등을 활용하고 싶습니다. 현재는 텍스트 링크와 텍스트만 너무 많이 구성되어 있습니다. 정보 제공 페이지 역할을 하는 양질의 게시글이 많이 있습니다. 이러한 내용을 다른 시스템에 정교하게 통합할 수 있다면 좋겠습니다.

ChatGPT Cortex를 활용하면 다양한 가능성이 열리지만, 가능하면 더 간결하고 사용하기 쉬운 솔루션을 원합니다.

Discourse를 아직 잘 모르는 입장이니 무지한 질문을 용서해 주세요. 이 기능이 Disqus 같은 서비스와 직접적으로 경쟁하기 위해 설계된 건가요? 뭔가 다른 것 같은 느낌이 드는데, 아직 전체 맥락을 완전히 파악하지는 못하겠습니다.

참고로, 저는 Discourse를 제 직장 업무에 도입하여 회원제 전용 온라인 커뮤니티를 구축하고 있습니다. 회원 관리 시스템을 통해 SSO를 사용하고 있습니다. 또한 블로그도 운영 중인데, 이 기능을 활용하여 익명 댓글을 허용하지 않으면서도 새로운 회원을 끌어올 수 있는 방법을 찾을 수 있을지 궁금합니다.

이 기능에는 많은 가능성이 있다고 느끼지만, 아직 그 전체적인 잠재력을 파악하기는 어렵습니다. 팀과 이곳 커뮤니티의 피드백을 기대하고 있습니다.

2개의 좋아요