게스트 게이트 테마 컴포넌트

[Don]

	레포지토리	GitHub - VaperinaDEV/discourse-guest-gate-theme-component: Forced login / registration popup insired by Quora · GitHub
	도움이 되셨나요?	> ./support --coffee
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urs 테마 초보자?	디스코urs 테마 사용 입문 가이드

Guest Gate v1.0

안녕하세요 이 테마 컴포넌트는 Guest Gate (Sign Up Popup Plugin) 에서 생성되었습니다. 모달을 사용하여 익명 방문자의 토픽을 잠그고 가입 또는 로그인을 강제할 수 있습니다. 이 컴포넌트는 방문자에게 가입을 장려하되 모달을 닫을 수 있도록 하는 알림 모달로도 사용할 수 있습니다(이를 위해 dismissable false 설정을 체크하지 마세요). 옵션에는 모달이 표시되기 전에 볼 수 있는 토픽 수를 변경하는 것이 포함됩니다.

팁: “커스텀 게이트” 옵션을 사용하여 모달 헤더를 숨기고자 한다면(위 이미지와 같이), guest_gate.title 필드를 삭제하고 스페이스바를 한 번 눌러야 합니다. 그러면 모달 제목이 제거되어 대신 이미지 아래에 제목을 사용할 수 있습니다.

주요 게이트 옵션이 두 가지 있습니다:

1. 일반 게이트 (기본값: 모달에 디스코urs 가입 CTA 텍스트를 사용). 이 텍스트들을 사용합니다: js.signup_cta.intro 및 js.signup_cta.value_prop

2. 커스텀 게이트 (모달을 사용자 정의할 수 있습니다: 이미지, 커스텀 텍스트 및 색상 추가).

---

그리고 많은 다른 설정들이 있습니다

Guest Gate 모달 전역 설정

1. max guest topic views
   게이트가 표시되기까지의 토픽 뷰 수. 게이트가 처음 나타난 후, 이 숫자 사이의 무작위 횟수 후에 다시 나타납니다.
2. dismissable false
   닫기 버튼을 제거하여 방문자가 닫는 것을 방지합니다.
3. use gate buttons
   링크 대신 모달 푸터에 버튼을 사용합니다.
4. custom url enabled
   커스텀 로그인 URL 및 커스텀 가입 URL 옵션을 활성화합니다. 이 옵션을 체크하지 않으면, 로그인 또는 가입 모달이 현재 토픽 페이지에 나타나는 것이 일반적 동작입니다.
5. custom login url
   예를 들어, /login은 “로그인” 모달이 표시된 홈 페이지입니다.
6. custom signup url
   예를 들어, /signup은 “가입” 모달이 표시된 홈 페이지입니다.
7. gate footer position
   푸터 버튼/링크 위치.
8. gate show only once
   Guest Gate 모달이 세션당 한 번만 표시됩니다.

---

커스텀 게이트 설정

1. custom gate enabled
   모달을 사용자 정의하려면 활성화합니다.
2. custom gate image
   모달 상단에 표시할 이미지를 업로드합니다.
3. custom gate image width
   업로드된 이미지의 너비. px, % 등을 사용할 수 있으며, 예를 들어 100%는 패딩을 제외한 전체 모달 너비의 이미지를 추가합니다.
4. custom gate big text color
   "큰 텍스트"는 이미지 아래에 나타납니다. 텍스트 색상을 설정할 수 있습니다.
5. custom gate little text color
   "작은 텍스트"는 큰 텍스트 아래에 나타납니다. 텍스트 색상을 설정할 수 있습니다.
6. custom gate background color
   모달 배경색을 변경합니다.
7. custom gate footer text color
   푸터 텍스트 색상을 변경합니다. use gate buttons 설정이 비활성화되고 커스텀 게이트가 설정된 경우에 적용됩니다.
8. custom gate link color
   푸터 링크 색상을 변경합니다. use gate buttons 설정이 비활성화되고 커스텀 게이트가 설정된 경우에 적용됩니다.

---

크레딧 플러그인 저자, 유지보수자 및 기여자들에게 큰 감사를 드립니다: @vinothkannans, @jgujgu and @michaeld

Guest Gate v2.0

안녕하세요

Guest Gate v2.0은 디스코urs의 익명 방문자를 위한 현대적이고 설정 가능한 게이트입니다.

이것은 방문자에게 가입 또는 로그인을 장려하기 위해 모달을 표시할 수 있으며, 부드러운 전환 프롬프트나 방문자가 닫을 수 없는 게이트로 사용할 수 있습니다.

Guest Gate는 원래 Guest Gate Sign Up Popup 플러그인에서 시작되어 그 이후로 상당히 발전했습니다.

Guest Gate 트리거

버전 2.0은 게이트를 트리거하는 여러 가지 방법을 지원합니다:

1. 페이지 뷰
   설정 가능한 수의 대상 페이지 뷰 후에 게이트를 표시합니다.

2. 시간
   방문자가 대상 페이지에서 설정 가능한 시간을 보낸 후에 게이트를 표시합니다.

3. 스크롤
   방문자가 페이지의 설정 가능한 비율을 스크롤한 후에 게이트를 표시합니다.

4. 라이트박스
   익명 방문자가 디스코urs 라이트박스에 이미지를 열 때 게이트를 표시합니다.

5. 어떤 것
   여러 트리거 유형을 활성화하고 첫 번째로 설정된 트리거가 도달하면 게이트를 표시합니다.

트리거와 모달이 나타나는 사이의 지연 시간도 설정할 수 있습니다.

---

반복 동작

Guest Gate가 표시된 후, 언제 다시 나타날 수 있는지 제어할 수 있습니다.

사용 가능한 모드:

• 트리거 반복: 설정된 트리거가 발동할 때마다 게이트를 표시합니다.

• 무작위 페이지 뷰: 무작위 수의 페이지 뷰 후에 게이트를 표시합니다.

• 세션당 한 번: 브라우저 세션 중에 게이트를 최대 한 번만 표시합니다.

레거시 한 번만 표시 설정도 하위 호환성을 위해 지원됩니다.

---

URL 가시성

두 가지 설정이 Guest Gate가 나타날 수 있는 위치를 제어합니다:

url_for_show

Guest Gate가 트리거될 수 있는 경로를 정의합니다.

예시:

• * 모든 페이지

• / 홈 페이지

• /latest 최신

• /t/* 토픽

• /c/* 카테고리

url_for_hide

Guest Gate가 절대 나타나서는 안 되는 경로를 정의합니다.

숨김 패턴은 항상 표시 목록보다 우선합니다.

---

모달 설정

dismissable

방문자가 Guest Gate 모달을 닫을 수 있도록 허용합니다.

이 옵션을 비활성화하면 닫을 수 없는 게이트를 만들 수 있습니다.

gate_modal_size

모달 너비를 선택합니다:

• compact

• standard

• wide

gate_body_alignment

주요 모달 콘텐츠의 수평 정렬을 선택합니다:

• left

• center

• right

gate_footer_position

로그인 / 가입 링크 또는 버튼의 정렬을 선택합니다:

• left

• center

• right

gate_title_visibility

모달 제목을 표시하거나 숨깁니다.

gate_title_position

제목 마진 위치를 제어합니다.

---

로그인 및 가입

Guest Gate는 일반적인 디스코urs 인증 흐름 및 커스텀 URL을 지원합니다.

use_gate_buttons

텍스트 링크 대신 모달 푸터에 버튼을 사용합니다.

custom_url_enabled

디스코urs의 네이티브 인증 동작 대신 커스텀 로그인 및 가입 URL을 사용합니다.

custom_login_url

커스텀 URL이 활성화된 경우 로그인에 사용되는 대상입니다.

custom_signup_url

커스텀 URL이 활성화된 경우 가입에 사용되는 대상입니다.

버튼 스타일과 Font Awesome 아이콘을 독립적으로 설정할 수도 있습니다.

---

Discourse Connect

Guest Gate는 Discourse Connect를 지원합니다.

Discourse Connect가 활성화되면 다음을 사용하여 별도의 가입 URL을 선택적으로 제공할 수 있습니다:

• enable_discourse_connect_signup

• discourse_connect_signup_url

---

커스텀 게이트

커스텀 게이트를 사용하면 모달의 콘텐츠와 외관을 완전히 사용자 정의할 수 있습니다.

다음으로 활성화합니다:

custom_gate_enabled

커스텀 게이트 디자인을 활성화합니다.

custom_gate_image

커스텀 텍스트 위에 표시되는 선택적 이미지입니다.

custom_gate_image_alt

커스텀 이미지에 대한 대체 텍스트입니다.

custom_gate_image_width

다음과 같은 값을 사용하여 이미지 너비를 설정합니다:

• 150px

• 50%

• 100%

custom_gate_image_position

이미지를 정렬합니다:

• left

• center

• right

custom_gate_big_text_position

커스텀 헤딩을 정렬합니다:

• left

• center

• right

custom_gate_little_text_position

커스텀 텍스트를 정렬합니다:

• left

• center

• right

커스텀 게이트는 또한 헤딩, 텍스트, 배경, 푸터 및 링크 색상을 위한 설정을 제공합니다.

---

분석

Guest Gate v2.0에는 선택적인 프라이버시 중심 분석 기능이 포함되어 있습니다.

다음으로 활성화합니다:

enable_analytics

활성화되면 Guest Gate는 다음을 추적합니다:

• 게이트 노출

• 트리거 이유

• 페이지 경로

• 로그인 클릭

• 가입 클릭

• SSO 작업

• 닫기 작업

이벤트는 window.dataLayer를 통해 노출되며 브라우저 이벤트로도 분기됩니다:

discourse-guest-gate:analytics

이를 통해 Guest Gate를 Google Analytics, Google Tag Manager, Matomo 또는 커스텀 분석 구현과 같은 분석 및 태그 관리 플랫폼과 통합할 수 있습니다.

Guest Gate는 개인 데이터를 수집하지 않습니다.

분석은 기본적으로 비활성화되어 있습니다.

analytics_debug_logging

분석을 구성하는 동안 Guest Gate 이벤트를 브라우저 콘솔에 출력하려면 이 기능을 활성화합니다.

프로덕션 환경에서는 비활성화하는 것이 좋습니다.

---

v1에서 마이그레이션

Guest Gate v2.0에는 기존 설치 환경을 위한 설정 마이그레이션이 포함되어 있습니다.

다음과 같은 레거시 설정이 자동으로 마이그레이션됩니다:

• max_guest_topic_views

• dismissable_false

• gate_show_when_thumbnail_clicked

따라서 업그레이드 후 기존 구성을 수동으로 다시 만들 필요가 없습니다.

---

요구 사항

Guest Gate v2.0은 Discourse 3.2.0 이상이 필요합니다.

---

크레딧
원래 플러그인 저자, 유지보수자 및 기여자들에게 큰 감사를 드립니다: @vinothkannans, @jgujgu and @michaeld

[markersocial]

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

로그인/회원가입 링크를 버튼으로 대체할 수 있다는 점이 마음에 듭니다.

회원가입 버튼을 강조(파란색) 색상으로, ‘이미 계정이 있습니다’ 버튼을 회색으로 설정하는 것이 더 표준적인 방식이라고 생각합니다. 적어도 인기 있는 사이트들을 관찰해 본 결과, 그런 경향이 있더라고요. 모달을 보는 대부분의 사람은 아직 계정이 없을 가능성이 높으므로, 그렇게 하는 것이 합리적일 것 같습니다.

[Don]

안녕하세요 @markersocial,

제안해 주셔서 감사합니다!

이 두 가지 설정을 추가했습니다. 이제 게스트 게이트 모달의 로그인 및 가입 버튼 스타일을 변경할 수 있습니다.

btn-primary 또는 btn-default

Feature: ability to change login and signup button style (#4)

[markersocial]

정말 좋습니다, @Don님 감사합니다! 이제 업데이트했고 완벽하게 작동합니다

제가 드릴 수 있는 다른 제안은 반복되는 프롬프트의 빈도를 사용자 지정할 수 있도록 하는 것입니다.

설정: 최대 게스트 토픽 조회 수
“게이트가 표시되기까지의 토픽 조회 수입니다. 게이트가 처음 표시된 후, 1부터 이 숫자 사이의 무작위 값으로 다시 표시됩니다.”

최대 게스트 토픽 조회 수를 1 또는 2로 설정하면 초기 가입을 장려하는 데 좋습니다. 하지만 사용자가 거절할 경우(세션당 한 번만 표시가 비활성화된 상태라면), lurker(단순 구경꾼)들에게 지나치게 공격적으로 느껴지지 않도록 더 낮은 빈도로 모달을 다시 표시할 수 있으면 좋겠습니다. 예를 들어, 5회 이상의 토픽 조회 후에 다시 표시하는 식으로요.

[davidkingham]

Don님, 멋진 컴포넌트네요! 가입 버튼의 URL을 커스터마이징할 수 있도록 수정해 주실 수 있을까요? 저는 SSL에 Memberful을 사용하고 있어서, 일반적인 가입 링크가 작동하지 않고 로그인 페이지로만 이동하거든요. 감사합니다!

[Don]

데이비드, 안녕하세요!

감사합니다, 아주 좋은 제안입니다!

해당 사항을 추가했습니다. redirect_to_home 설정을 custom_url_enabled와 두 가지 옵션으로 교체했습니다.

1. custom_login_url: /login
   (기본값은 홈페이지로 리다이렉트하고 로그인 모달을 여는 것입니다)
2. custom_signup_url: /singup
   (기본값은 홈페이지로 리다이렉트하고 가입 모달을 여는 것입니다)

Feature: abality to change guest gate buttons url (#6)

[davidkingham]

훌륭합니다! 다만 한 가지 문제가 있는데, 이제 커스텀 게이트 텍스트 옵션이 작동하지 않습니다

[Don]

사이트를 확인해 보았는데 제 환경에서는 정상적으로 작동합니다. 하드 리프레시를 시도하거나 브라우저를 다시 열어 보시는 것이 좋을 것 같아요. 캐시된 버전을 보고 계실 수도 있습니다.

[davidkingham]

저도 그렇게 생각했어요. 캐시를 비우고 브라우저 4가지를 시도해 봤는데 전부 같은 현상이었거든요. 정말 이상하네요! 다시 한번 시도해 주시겠어요? 방금 guest_gate.title을 'Test’로 변경했는데, 이 업데이트가 보이나요?

[Don]

네, 지금 제가 보는 모습입니다.

다른 브라우저와 기기에서도 확인해 보겠습니다.

[davidkingham]

VPN으로 접속해도, 폰으로 접속해도, 다른 네트워크를 사용해도 결과가 똑같아요. 이건 정말로 기묘한 일이네요! 다른 사람들이 올바른 텍스트를 볼 수 있다면 괜찮을 것 같아요!

[Don]

데이비드님, 안녕하세요.

이것은 정상적인 상황이 아닌 것 같습니다. 로케일(locale) 관련 버그가 있는 것 같아요. 제 최선의 제안은 set locale from accept language header 설정입니다.
사이트에서 이 설정을 사용 중이신 것 같고, 브라우저 언어가 다르고 Discourse가 기본 텍스트로 반환하기 때문에 모달에서 기본 텍스트가 표시되는 것일 수 있습니다.

이 설정을 끄고 다시 시도해 보시겠습니까?

---

이제 이 문제를 재현할 수 있습니다. 크롬 언어를 English (United Kingdom)에서 English (United States)로 변경하니 이런 현상이 발생했습니다.

그리고 다시 English (United Kingdom)로 되돌렸더니

[davidkingham]

Don님, 정말 큰 도움이 되었습니다! 제 설치 환경에서 언어 관련 버그가 있는 것 같습니다. 이 문제가 당신의 컴포넌트 때문으로 보이지 않아서 새로운 토픽을 만들려고 합니다. 이 문제를 살펴봐 주셔서 감사합니다.

수정: 제 관리자 로케일이 어떻게 미국(US)이 아니라 영국(UK)으로 바뀌어 있었네요, 정말 이상하네요! 다시 미국 로케일로 되돌리고 필드를 다시 채워 넣었더니 이제 모든 것이 정상적으로 작동합니다.

[Jonathan5]

이 방식이 정말 잘 작동합니다. 감사합니다.

첫 번째 게시글을 읽기 쉽게 하기 위해 몇 가지 작은 수정을 했습니다. 다만, 전혀 이해할 수 없었던 문장이 하나 있었습니다:

custom url enabled
기본적으로 로그인 및 가입 버튼/링크에 사용자 지정 URL을 추가합니다. 이 경우 방문자가 로그인 또는 가입 버튼을 클릭하면 홈페이지로 리다이렉트되고 로그인 또는 가입 모달이 열립니다. 참고: 이 옵션을 선택 해제하면 방문자가 버튼을 클릭한 후에도 현재 토픽 페이지에 남아 있게 되며, 게스트 게이트 모달이 닫을 수 있는 로그인 또는 가입 모달로 변경됩니다. 이렇게 하면 방문자가 모달을 닫고 토픽을 읽을 수 있습니다.

[Don]

Jonathan, 감사합니다 정말 감사드립니다

아쉽게도 제 영어 실력이 그렇게 좋지 않습니다 죄송합니다! 이 부분을 테마 컴포넌트에서 수정하거나, 아니면 PR을 보내셔도 됩니다.

custom url enabled 사이트 설정의 의미는 다음과 같습니다.
게스트 게이트의 로그인 및 가입 버튼/링크에 커스텀 URL을 추가할 수 있습니다. 기본적으로 이 버튼/링크는 /login과 /signup이라는 커스텀 URL을 사용하며, 방문자를 홈페이지로 리다이렉트한 뒤 로그인 또는 가입 모달을 열게 됩니다. 따라서 이 옵션을 체크하면 이 아래에 있는 두 가지 설정인 custom login url과 custom signup url이 활성화됩니다.

이 설정을 체크하지 않으면, 게스트 게이트의 로그인 또는 가입 버튼/링크를 클릭한 후에도 방문자는 현재 토픽 페이지에 머물러 있으며, 같은 토픽 페이지에서 로그인 또는 가입 모달이 열립니다. 이후 방문자는 모달을 닫을 수 있습니다.

이해에 도움이 되길 바라며, 더 이해하기 쉽게 만들어 주신 시간에도 다시 한번 감사드립니다

[Jonathan5]

영어는 문제없고, 중요한 건 자바스크립트에도 문제가 없다는 거죠 이렇게 하면 어떨까요?

4. custom url enabled — custom login url과 custom signup url 옵션을 활성화합니다. 이 옵션을 선택하지 않으면, 로그인 또는 가입 모달이 현재 주제 페이지에 표시됩니다.
5. custom login url — 예를 들어, /login은 로그인 모달이 표시된 홈페이지를 의미합니다.
6. custom signup url — 예를 들어, /signup은 가입 모달이 표시된 홈페이지를 의미합니다.

[Don]

@Jonathan5

그리고 당신의 JavaScript에 문제가 있는 것도 아닙니다

그건 대부분 플러그인 개발자와 기여자분들 덕분이기도 합니다. 하지만 저는 최선을 다해 이 플러그인을 개발하고 더 많은 기능, 수정 사항 등을 추가하고 있습니다.

---

수정해 주셔서 감사합니다 훨씬 더 좋아 보입니다. 테마 컴포넌트에도 이 부분을 수정하겠습니다.

[Himanshu_Singh]

여러분 안녕하세요,
최근 이 컴포넌트를 설치했는데 아주 잘 작동하고 있습니다. 다만 게이팅 메커니즘이 구글 봇의 토픽 크롤링 속도를 늦추는지에 대해서는 확신이 서지 않습니다.

크롤러에 미치는 영향에 대해 아시는 분이 있을까요?

[Himanshu_Singh]

Discourse Connect와 SSO를 함께 사용할 때 Guest Gate에서 설정 관련 문제가 발생하고 있습니다.

사용자는 메인 사이트에 로그인할 수 있고, Discourse에도 로그인된 상태로 보이지만, 몇 가지 주제를 클릭한 후에 Guest Gate 모달이 표시됩니다. 사용자가 이미 로그인된 상태인데 이런 일이 발생하는 것은 이례적입니다.

로그인 URL을 사용자 지정해 두었기 때문에, 사용자가 "이미 로그인되어 있습니다"를 클릭하면 사용자 지정 로그인 페이지로 이동하게 되고, 이 사이클이 반복됩니다.

이 문제를 우회하는 유일한 방법은 사용자가 Discourse의 기본 로그인 버튼을 클릭하면 자동으로 로그인되는 것입니다.

어떤 이유에서인지 Guest Gate가 SSO 로그인을 인식하지 못하고, 활성화하려면 기본 로그인이 필요한 것으로 보입니다.

다른 분들도 이 문제를 경험해 보셨나요? 해결책이나 우회 방법에 대한 조언이 있을까요?