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/입니다.

2개의 좋아요