커뮤니티 지원 - 설정 가능한 기부

커스터마이징 테마 컴포넌트
1
:information_source: 요약 커뮤니티 지원 - 설정 가능한 기부
:eyeglasses: 미리보기 Theme Creator
:hammer_and_wrench: 저장소 GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub
:heart: 도움이 되셨나요? ./support --coffee
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스코urs 테마 초보자이신가요? 디스코urs 테마 사용 입문 가이드

이 테마 컴포넌트 설치

안녕하세요 :waving_hand:

목표는 매우 다양한 커뮤니티 디자인과 사용 사례에 유연하게 대응하면서도 설정을 테마 설정(Theme Settings) 내에서 완전히 처리할 수 있도록 하는 것이었습니다.

Screenshot 2026-09-13 at 22.30.53
Screenshot 2026-09-13 at 22.30.531305×697 175 KB

:sparkles: 기능

:heart: 기부/지원 모달

이 컴포넌트는 자동으로 지원 모달을 표시하도록 선택적으로 구성할 수 있습니다.

자동 모달은 다음을 지원합니다:

  • 설정 가능한 표시 지연 시간
  • URL/경로 기반 가시성
  • 회원/익명 사용자 가시성
  • 최소 신뢰 수준(Trust Level)
  • 제외 그룹
  • 설정 가능한 닫기 쿠키 유지 기간
  • 세 가지 모달 크기: normal, large, maximized

모달은 어디서든 다음을 사용하여 수동으로 열 수 있습니다:

#donate

이것은 자동 가시성 규칙과 의도적으로 독립되어 있어, 커뮤니티가 #donate 링크를 공유하거나 사이드바에 추가하는 동안에도 자동 지원 프롬프트가 표시되는 위치를 제어할 수 있습니다.

:credit_card: 기부/지원 방법

디스코urs의 **오브젝트 설정 편집기(Objects setting editor)**를 사용하여 여러 지원 방법을 구성할 수 있습니다.

각 방법은 다음을 가질 수 있습니다:

  • 이름
  • 설명
  • 제공자
  • 소유자
  • 아이콘
  • URL
  • 버튼 텍스트
  • 복사 가능한 값
  • 추천 상태
  • 번역

이것은 제공자 무관(provider-agnostic)하므로, 컴포넌트는 특정 결제 제공자를 요구하지 않습니다.

예를 들어, 방법은 기존 PayPal, Revolut, Wise 또는 다른 결제/지원 페이지를 가리키도록 할 수 있습니다.

:globe_showing_americas: 방법별 현지화

기부 방법은 자체 번역을 지원합니다.

로케일 선택기에는 사용 가능한 디스코urs 로케일이 포함되며, 각 방법은 다음을 번역할 수 있습니다:

  • 이름
  • 설명
  • 버튼 텍스트
  • 복사 라벨
  • 소유자
  • 제공자

정확한 로케일이 사용 불가능한 경우, 컴포넌트는 기본 로케일로 폴백한 후 영어/다른 사용 가능한 번역으로 폴백합니다.

:bar_chart: 지원 목표 및 진행 바

이 컴포넌트는 선택적인 지원 목표와 진행 바를 포함합니다.

구성할 수 있는 항목:

  • 현재 금액
  • 목표 금액
  • 통화
  • 지원 라벨
  • 지원 기간
  • 진행 표시
  • 지원 바 표시 위치

지원되는 기간:

  • 일회성
  • 월간
  • 연간

진행 바는 **목표 초과 지원(over-goal support)**도 처리합니다.

단순히 100%에서 멈추는 대신, 실제 백분율이 계속 표시됩니다:

75%   → 정상 진행
100%  → 목표 달성
125%  → 다음 목표 주기 25% 진행
220%  → 세 번째 목표 주기 20% 진행

시각적 진행 바는 단일 컴팩트 바로 유지됩니다.

첫 번째 목표 이전:

background: tertiary-low
fill:       tertiary

Screenshot 2026-09-14 at 7.38.52
Screenshot 2026-09-14 at 7.38.52273×107 14.2 KB

정확히 100%, 200%, 300% 등일 때:

background: success
fill:       success

Screenshot 2026-09-14 at 7.39.26

마일스톤 사이:

background: success-low
fill:       success

Screenshot 2026-09-14 at 7.39.52

이것은 커뮤니티가 원래 목표를 크게 초과하더라도 의미 있는 진행 상황을 계속 표시할 수 있음을 의미합니다.

:bust_in_silhouette: 지원자 아바타

지원 바는 선택적으로 지원자 아바타를 표시할 수 있습니다.

지원자는 현재 supporters 오브젝트 설정을 통해 수동으로 구성됩니다.

각 지원자는 다음을 가질 수 있습니다:

  • 사용자 이름
  • 기여 금액
  • 통화

사용자 이름은 사용자 프로필과 대조되어 해결되므로, 사용자의 프로필/아바타 정보를 자동으로 표시할 수 있습니다.

지원 바에 직접 표시되는 아바타 수는 구성 가능합니다.

예를 들어:

◉ ◉ ◉ ◉ ◉ +8

구성된 표시 아바타 수보다 지원자가 더 많은 경우, 나머지 지원자는 DMenu를 통해 접근할 수 있습니다.

지원자 메뉴는 다음을 표시할 수 있습니다:

  • 아바타
  • 사용자 이름
  • 프로필 링크
  • 기여 금액
  • 통화

Screenshot 2026-09-14 at 7.42.12
Screenshot 2026-09-14 at 7.42.12408×310 44.1 KB

기여 금액은 독립적으로 활성화하거나 비활성화할 수 있습니다.

지원자는 supporter_groups 설정을 사용하여 하나 이상의 그룹에서 가져올 수도 있습니다. 이것은 수동으로 구성된 지원자 목록을 대체하는 것이 아니라 보완합니다.

:artist_palette: 여러 디자인

이 컴포넌트는 세 가지 독립적인 시각적 디자인을 포함합니다:

  • 클래식: 균형 잡힌 커뮤니티 스타일 프레젠테이션
  • 미니멀: 줄어든 시각적 크롬과 컴팩트한 프레젠테이션
  • 모던: 더 강한 위계 구조와 더 눈에 띄는 카드

디자인은 선택된 뷰와 독립적이므로, 두 가지를 자유롭게 조합할 수 있습니다.

:puzzle_piece: 여러 뷰

이 컴포넌트는 여러 프레젠테이션 모드를 지원합니다:

  • 풀: 히어로, 추천 방법 및 기부 방법을 포함한 완전한 지원 콘텐츠
  • 컴팩트: 더 작은 배치용 줄어든 프레젠테이션
  • 미니멀: 방법 중심의 프레젠테이션
  • 프로그레스: 지원 목표 및 진행만

이것은 동일한 컴포넌트를 설정이나 스타일링을 중복하지 않고 매우 다른 위치에 사용할 수 있게 합니다.

:notebook: 포스트 임베드

지원 콘텐츠를 포스트에 직접 임베드할 수 있습니다.

enable_post_embed을 활성화한 다음, 다음을 사용합니다:

[wrap=donate]
[/wrap]

Screenshot 2026-09-13 at 22.32.42
Screenshot 2026-09-13 at 22.32.421305×501 119 KB

추가 뷰는 래퍼를 통해 직접 사용할 수 있습니다:

[wrap=donate-compact]
[/wrap]

[wrap=donate-minimal]
[/wrap]

[wrap=donate-progress]
[/wrap]

Screenshot 2026-09-13 at 22.32.29
Screenshot 2026-09-13 at 22.32.291305×495 33 KB

래퍼는 뷰를 제어하고, 전역 design 설정은 시각적 디자인을 제어합니다.

이는 지원 콘텐츠가 전역 UI 요소로 나타나는 것이 아니라 특정 포스트의 컨텍스트의 일부가 되어야 할 때 유용합니다.

:electric_plug: 플러그인 아웃렛 지원

이 컴포넌트는 플러그인 아웃렛을 통해 지원 위젯을 렌더링할 수 있습니다.

outlet_enabled을 활성화하고 outlet_locations에 원하는 아웃렛 이름을 |로 구분하여 지정합니다.

아웃렛 뷰와 디자인은 독립적으로 구성할 수 있습니다:

  • outlet_view
  • outlet_design

이것은 지원 컴포넌트를 토픽 목록, 헤더, 푸터 및 기타 지원되는 아웃렛과 같은 위치에 사용할 수 있게 합니다.

Screenshot 2026-09-13 at 22.31.40
Screenshot 2026-09-13 at 22.31.40280×695 28.8 KB

:loudspeaker: 디스코urs 광고 호환성

이 컴포넌트는 디스코urs 광고 플러그인과 함께 사용할 수도 있습니다.

광고 플러그인에 직접 의존하는 대신, 커뮤니티 지원은 안정적인 HTML 임베드 마커를 제공합니다:

<div data-donation-widget="support"></div>

이것은 HTML 광고에 복사하여 원하는 광고 아웃렛에 배치할 수 있습니다.

컴포넌트가 마크업과 CSS를 소유하므로, 광고 자체 내에 기부 스타일링을 중복할 필요가 없습니다.

뷰와 디자인은 선택적으로 오버라이드할 수 있습니다:

<div
  data-donation-widget="support"
  data-view="compact"
  data-design="minimal"
></div>

이것은 일관된 디자인을 유지하면서 동일한 지원 시스템을 다른 광고 배치에 재사용할 수 있음을 의미합니다.

:globe_with_meridians: 범용 HTML 임베드

동일한 임베드 메커니즘은 다른 HTML 지원 배치에서도 사용할 수 있습니다:

<div data-donation-widget="support"></div>

HTML 마커는 의도적으로 단순하게 유지되며, 테마 컴포넌트가 실제 렌더링을 처리합니다.

이것은 디자인이나 컴포넌트 구현을 변경할 때 각 개별 임베드를 다시 작성할 필요가 없도록 합니다.

:eyes: 가시성 제어

자동 및 전역으로 렌더링된 지원 콘텐츠는 여러 설정을 통해 제어할 수 있습니다:

  • 회원에게 표시
  • 익명 사용자에게 표시
  • 최소 신뢰 수준
  • 제외 그룹
  • 홈페이지에 표시
  • URL/경로 매칭

제외 그룹은 모달, 플러그인 아웃렛 위젯 및 범용 임베드와 같이 자동으로 렌더링된 지원 콘텐츠에 적용됩니다.

컨텍스트 콘텐츠는 사용 가능합니다:

  • #donate
  • [wrap=donate]

이것은 명시적으로 공유된 지원 링크나 컨텍스트 지원 블록에 접근하는 것을 방지하지 않으면서도 특정 사용자를 홍보/자동 지원 UI에서 제외할 수 있게 합니다.

:cookie: 닫기/쿠키 제어

자동으로 열린 모달이 닫힐 때, 컴포넌트는 그 결정을 기억할 수 있습니다.

쿠키 유지 기간은 다음과 같이 구성할 수 있습니다:

  • 없음
  • 분
  • 일
  • 주
  • 월
  • 년

이것은 선택된 유지 기간에 따라 동일한 방문자에게 자동 모달이 반복적으로 나타나는 것을 방지합니다.

:memo: 기본 예시

지원 모달 열기

#donate

포스트에 지원 콘텐츠 임베드

[wrap=donate]
[/wrap]

컴팩트 포스트 버전

[wrap=donate-compact]
[/wrap]

범용 HTML 임베드

<div data-donation-widget="support"></div>

사용자 정의 프레젠테이션으로 임베드

<div
  data-donation-widget="support"
  data-view="compact"
  data-design="minimal"
></div>

:heart: ./support --coffee

8개의 좋아요
2

좋아요, 그리고 요즘 정말 필요한 거죠.

그리고 동시에 이런 방식으로 기부금을 모으는 것이 불법인 나라에서 살고 있어서 꽤 씁쓸합니다. 핀란드에서는 무언가를 팔거나 — 아니면 위험을 감수해야 하죠. 물론 완전히 다른 이야기긴 합니다.

2개의 좋아요