Discourse를 이용해 블로그, Reddit, X 또는 Facebook 스타일의 스크롤 플랫폼 구축하기

이 주제를 통해 디스코urses를 더 시각적이고 연속적으로 스크롤할 수 있는 플랫폼으로 변모시키는 여정을 기록하고자 합니다. 레딧, X, 페이스북이 제공하는 브라우징 경험에 더 가까운 형태라고 할 수 있습니다.

이 주제에서 제가 시도한 것, 잘된 것, 잘되지 않은 것, 사용하는 컴포넌트 및 마주친 문제들을 공유할 예정입니다. 또한 전통적인 포럼 레이아웃을 넘어 디스코urses를 다른 목적으로 활용하려는 분들에게도 도움이 되기를 바랍니다.

이 프로젝트의 출발점은 90-9-1 법칙이었습니다.

대부분의 소셜 미디어, 블로그 등에서:

  • **90%**의 사용자는 주로 콘텐츠를 탐색하고 소비합니다.

  • **9%**는 간헐적으로 반응, 좋아요, 공유 또는 댓글을 남깁니다.

  • **1%**는 대부분의 콘텐츠를 능동적으로 생성합니다.

물론 커뮤니티마다 정확한 비율은 달라지지만, 원칙은 동일합니다: 대부분의 방문자는 기여자가 아닌 독자입니다.

디스코urses는 9%와 1%를 위해 훌륭합니다. 토론, 답변, 적극적인 참여를 중심으로 설계되었기 때문입니다. 그러나 저는 단순히 사이트를 열어 흥미롭고 새로운 콘텐츠를 탐색하려는 훨씬 더 큰 그룹에게도 동등하게 매력적으로 만들고 싶습니다.

제가 구축하려는 것

저는 디스코urses를 사용하여 레딧, X 또는 페이스북과 유사한 더 시각적이고 연속적인(두루 스크롤링) 피드를 만들고 싶습니다.

이상적인 경험은 다음과 같아야 합니다:

  • 홈페이지를 열면 즉시 관련 주제 피드가 보입니다.

  • 주제에서 주제로 연속적으로 스크롤할 수 있습니다.

  • 별도의 페이지를 열지 않고 주제 내용을 미리 볼 수 있습니다.

  • 이미지, 비디오, 발췌문을 피드에서 직접 볼 수 있습니다.

  • 눈길을 끄는 항목에 대해 좋아요, 북마크, 답변을 남길 수 있습니다.

  • 이전에 스크롤한 콘텐츠가 자동으로 비켜납니다.

  • 나중에 돌아왔을 때 항상 같은 홈페이지가 아니라 새로운 또는 아직 보지 못한 주제를 봅니다.

  • 사용자가 상호작용하는 카테고리, 태그, 주제를 사용하여 피드를 점차 개인화합니다.

일부 사람들은 이를 "두루 스크롤링"이라고 부르지만, 이는 또한 수많은 사람들이 현재 온라인 콘텐츠를 소비하는 방식이기도 합니다. 그들은 댓글을 달지 않고 수십 개의 글을 읽을 수 있지만, 여전히 뷰를 생성하고 링크를 공유하며 매일 다시 방문하는 진정한 사용자입니다.

왜 디스코urses로 구축하는가?

디스코urses는 이미 대부분의 어려운 부분을 제공합니다:

  • 사용자 계정 및 프로필

  • 카테고리 및 태그

  • 좋아요, 북마크 및 알림

  • 신뢰 수준 및 모더레이션

  • 주제 생성 및 답변

  • 읽음/안 읽음 추적

  • 추천 및 관련 주제

  • 성숙한 플러그인 및 테마 컴포넌트 시스템

부재로 보이는 것은 발견과 수동 소비를 중심으로 설계된 피드입니다. (물론 디스코urses는 처음부터 이렇게 설계된 것이 아닙니다)

현재까지의 진행 상황

  1. @awesomerobot님의 멋진 레딧풍 테마에서 시작했습니다. 커스텀 사이드바 제거 등 다양한 측면을 편집할 수 있도록 포크해야 했으며, 우리가 원하는 대로 디자인하기 위해 CSS도 크게 수정했습니다.
  2. 중첩 뷰(Nested Views)를 활성화하는 것이 필수적이었습니다. 이 유형의 사이트에 필요한 스타일을 충족하기 때문입니다.
  3. 모든 카테고리와 커스텀 링크를 표시하는 유튜브 스타일의 스크롤 가능 메뉴를 제작하여 추가했습니다. 커스텀 상단 내비게이션 링크를 사용하여 링크를 커스터마이즈하고 추가했습니다.
  4. 주제 미리보기 모달은 필수였으며, 이것을 디자인하기 시작했지만 전설적인 @Don님이 더 나은 버전을 제작하여 여기에서 찾을 수 있습니다.
  5. 모든 곳에 정적 캐시된 우측 사이드바가 필수였기 때문에 우측 사이드바 블록에서 시작하여 주제 등에서 표시되도록 테마 컴포넌트를 제작했습니다.
  6. 커스텀 헤더 링크(아이콘)를 사용하여 헤더에 "게시물 만들기"를 추가하여 컨테이너를 더 깔끔하게 만들었습니다.
  7. 게시물 이미지를 중앙 정렬하고 흐릿한 배경을 적용하여 더 깔끔하게 보이도록 했습니다 (레딧과 유사).
  8. 주제 발췌문을 150자로 설정하고 주제 카드에서 제목과 이미지 사이에 표시하는 것이 필수적이었습니다 (페이스북과 X와 유사).

다음 단계는 다음과 같은 기능을 갖춘 전용 피드입니다:

  1. 지난 14일과 같은 정의된 기간의 최신 콘텐츠로 시작합니다.

  2. 사용자가 팔로우하는 카테고리와 태그의 주제를 우선시합니다.

  3. 발견을 위해 인기 또는 트렌딩 주제를 혼합합니다.

  4. 주제가 실제로 뷰되었거나 스크롤로 지나간 시점을 기록합니다.

  5. 영구적으로 숨기지 않으면서 뷰된 주제의 우선순위를 낮춥니다.

  6. 피드에서 직접 반응과 답변을 허용합니다.

이것은 전통적인 주제 목록이나 토론을 대체하지 않습니다. 이는 동일한 디스코urses 콘텐츠를 발견하고 소비하는 추가적인 방식이 될 것입니다.

여정을 따라오세요

프로젝트가 발전함에 따라 이 주제를 계속 업데이트할 예정입니다. 테스트하는 컴포넌트, 만드는 변경 사항, 마주치는 장애물 등을 포함하여요.

특히 다음 사항에 대해 유사한 시도를 해본 분들의 의견을 듣고 싶습니다:

  • 기존 읽음 추적 데이터가 이를 지원할 수 있는지.

  • 피드가 익명 및 신규 등록 사용자에게 어떻게 작동할 수 있는지.

  • 복잡한 추천 알고리즘을 도입하지 않고 얼마나 많은 개인화가 달성될 수 있는지.

  • 연속적인 주제 미리보기가 상당한 성능 문제를 일으키는지.

목표는 침묵하는 90%가 커뮤니티의 중요한 부분임을 인식하고, 그들이 실제로 인터넷을 사용하는 방식에 맞춰 설계된 경험을 제공하는 것입니다.

이 프로젝트에 사용할 테스트 사이트는

https://www.m8wtf.com/입니다.

11개의 좋아요

정말 마음에 듭니다—관심 있게 지켜보고 있어요. 데모를 잠깐 살펴봤는데 훌륭하네요! 시간이 날 때 다시 확인하겠습니다.

4개의 좋아요

우리는 Discourse의 Unified New 페이지를 홈으로 사용하는 방법을 시도해 보았습니다. 이 페이지가 우리가 원했던 피드를 정확히 제공하는 것으로 보였기 때문입니다. 사용자는 뷰포트 밖으로 스크롤하면 /new에서 게시물이 제거되도록 하는 플러그인을 사용했습니다. (@Don 님이 이 기능을 작동하게 만드셨습니다)

혼란은 제가 항상 기존에 가입된 계정으로 로그인하여 Discourse를 테스트해 왔기 때문에 발생했습니다. 그래서 제 Unified New 페이지에는 항상 게시물이 가득 차 있었습니다. 신규 사용자에게는 이 페이지가 어떻게 작동하는지 완전히 이해하지 못하고 있었습니다.

새로운 테스트 계정을 생성한 후, Unified New 페이지가 완전히 비어 있다는 것을 발견했습니다. 해당 사용자에게 오래된 토픽은 “새로운” 것으로 간주되지 않기 때문입니다. 즉, 현재로서는 우리가 계획했던 콘텐츠가 가득 찬 홈 피드를 제공할 수 없습니다.

와, 댓글과 긍정적인 피드백 주셔서 정말 감사합니다. 이건 사실 당신 취향이 아니시고, Discourse가 의도한 용도와도 맞지 않는다는 걸 잘 알고 있어요.

@don은 새로운 /feed 스타일 시스템과 홈페이지를 도입하는 새 플러그인을 개발 중입니다. 이 시스템은 사용자에게 실제 새 게시글을 표시한 후, 사용자가 뷰포트(가시 영역)를 넘겨 스크롤하면 해당 게시글을 제거합니다. 모든 게시글을 확인한 경우 /latest로 리디렉션됩니다. 현재 작업 진행 중입니다.

1개의 좋아요

@don에게 큰 감사를 드립니다. 그의 아직 출시되지 않은 새로운 플러그인 덕분에 이제 피드가 정상적으로 작동하여 사용자는 항상 최신 콘텐츠를 볼 수 있습니다. 다만, 댓글은 이전과 동일한 방식으로 작동하도록 유지되어 뷰포트에서 사라지지 않습니다.

새로운 사용자는 가입 시 최근 14일간의 모든 게시물을 보게 되며, 이는 상단 페이지의 기본 시간 범위를 통해 조정할 수 있습니다.

2개의 좋아요

다음 의안 항목은 피드를 개인화하기 위한 컴포넌트/플러그인 개발입니다. 예를 들어 다음과 같은 방식을 적용할 수 있습니다.

피드 점수 =

40% 관심사
25% 최신성
15% 이전 행동
10% 사이트 인기도
10% 무작위성/발견

이렇게 하면 피드는 다음과 같이 보입니다.

WARDOGS 얼리 액세스 목요일 출시
새로운 PS5 업데이트로 인한 이상한 컨트롤러 버그
누군가가 시속 70마일(약 113km/h)의 전기 스쿠터 제작
넷플릭스, 새 인비티너스 시리즈 확정
글래스고 WTF 스토리
무작위 인기 음식 & 음료 스토리

새로운 사용자의 경우 다음과 같은 구성이 될 수 있습니다.

25% 게이밍
15% TV & 영화
15% WTF 뉴스
15% 테크
10% 음식 & 음료
10% 스포츠
10% 휠스 & 스릴

그런 다음 사용자가 30~50개의 게시물을 스크롤하면 피드가 적응을 시작합니다.

또는 가입 시 사용자가 관심사(예: 카테고리)를 선택하도록 하는 컴포넌트를 만드는 것도 고려해 보았습니다.

관심 있는 분야는 무엇인가요?

:check_box_with_check: 게이밍
:check_box_with_check: WTF 뉴스
:check_box_with_check: 테크
☐ 정치
:check_box_with_check: TV & 영화
☐ 스포츠
:check_box_with_check: 휠스 & 스릴
☐ 음식 & 음료

이 작업에는 시간과 테스트가 필요합니다.

1개의 좋아요

모바일에서 토픽을 클릭하면 시트 형태로 토픽 미리보기가 뜨고, 더 자세히 보거나 닫고 피드를 계속 볼 수 있다는 점이 좋습니다. 잘 만들었네요!

1개의 좋아요

이건 @don의 테마 컴포넌트 때문이에요 :wink: Topic Preview Modal

2개의 좋아요

이번 여정의 목표는 무엇인가요? 테마, 컴포넌트, 혹은 무언가 통합된 형태인가요? 컴포넌트 등과 번들링된 테마인가요?

이것은 제가 수년 동안 기다려 온 것과 같은 것입니다. Discourse의 UX는 매번 제가 이 서비스를 사용하는 것을 막아왔습니다. Discourse 자체가 정말로 훌륭하지만, UX는 … 정말로 … 그 정도가 아니에요.

여러분의 여정에 행운을 빕니다.

데모가 모바일에서 정말 멋져 보입니다.

1개의 좋아요

가이드가 나올 예정입니다 :slight_smile: 제가 만든 모든 컴포넌트를 GitHub에 업로드하고, 다른 사람들이 이미 만들거나 만들고 있는 컴포넌트에 대한 링크도 함께 제공하겠습니다. 다른 분들이 크게 기여했기 때문에 제가 이를 번들링하는 것은 옳지 않다고 느껴집니다.

정말 그렇습니다. Discourse의 백본은 훌륭하기 때문에, 기존의 전형적인 Discourse가 아닌, 괜찮은 무언가를 만들어낼 수 있는지 확인해 보기 위해 Discourse를 사용하게 되었습니다.

1개의 좋아요

일부 테마에는 컴포넌트가 번들로 제공되기도 합니다. 이 부분을 고려해 보세요. 그리고 보편적으로 lucide 아이콘을 사용하는 것도 좋을 것 같습니다.

1개의 좋아요

정말 멋져 보입니다. Op의 게시물 이후에 Op를 꾸미기 위해 #theme-creator가 있습니다.

답글이 있는 다른 토픽을 보니, 아마도 Don의 TC Author 배지를 이미 사용하고 계신 것 같습니다.

정말 훌륭한 작업입니다.

2개의 좋아요

아니요, 그건 제가 설치하기 전에 사용했던 커스텀 CSS입니다.

1개의 좋아요

Topic List Previews (TLP) 와 같은 스타일인가요?

좋은 예시: https://www.starzen.space/

정확히 말하면, 비주얼보다는 백엔드 쪽에 더 가까운 작업이에요.

1개의 좋아요

아, 알겠습니다. 이 진술 때문에 제가 엉뚱한 방향으로 이끌렸었네요. 만약 TLP를 다른 요구 사항 기준으로 점수를 매긴다면 다음과 같습니다:

  • 홈페이지를 열자마자 관련 주제 피드를 즉시 볼 수 있습니다.

    :white_check_mark:

  • 주제에서 주제로 연속적으로 스크롤할 수 있습니다.

    :white_check_mark:

  • 별도의 페이지를 열지 않고 주제 내용을 미리 볼 수 있습니다.

    :white_check_mark: (다만 더 정교할 수 있습니다 - 이 기능을 훨씬 더 정교하게 구현한 Discourse 포크를 개발해 본 경험이 있습니다)

  • 이미지, 비디오 및 발췌문을 피드에서 직접 볼 수 있습니다.

    2/3 :slight_smile: (주제 목록에서 라이브 비디오를 재생하는 등 이 기능을 훨씬 더 정교하게 구현한 Discourse 포크를 개발해 본 경험이 있습니다 :+1:)

  • 눈길을 끄는 항목에 대해 ‘좋아요’, ‘북마크’ 또는 '답글’을 남길 수 있습니다.

    :white_check_mark:

  • 이전에 스크롤한 콘텐츠를 자동으로 화면 밖으로 이동시킵니다.

    :white_check_mark:

  • 나중에 다시 방문했을 때 매번 같은 홈페이지가 아닌 새로운 주제나 아직 보지 못한 주제를 볼 수 있습니다.

    :white_check_mark:

  • 사용자가 상호작용하는 카테고리, 태그, 주제를 사용하여 피드를 점진적으로 개인화합니다.

    :cross_mark: 아직 아닙니다. 백엔드는 준비되어 있습니다.

참고로, 이 문제는 이전에 몇 번 언급된 적이 있습니다. 예:

나는 이제 그걸 다 읽었는데, 실제로 해본 사람은 아무도 없어.

1개의 좋아요

적어도 하나 정도는 알고 있지만, 오픈소스가 아닙니다.