Discourse 웹 페이지 워터마크

[saquetim (Sérgio Saquetim)]

이 테마 컴포넌트는 페이지에 워터마크를 추가합니다.

다음 중 어떤 정보를 추가할 수 있습니다:

• 짧은 텍스트 메시지
• 현재 로그인된 사용자 이름
• 페이지가 렌더링된 타임스탬프

워터마크가 어떻게 그리고 언제 렌더링될지 사용자 지정할 수 있는 여러 설정이 있습니다:

• show_watermark_in_background: 활성화하면 페이지에 워터마크를 생성하고 표시합니다.

• scroll_enabled: 활성화하면 워터마크가 페이지와 함께 스크롤됩니다.

• only_in_categories: 워터마크가 표시되어야 할 카테고리 목록.

• except_in_categories: 워터마크가 표시되지 말아야 할 카테고리 목록.

• only_in_tags: 워터마크가 표시되어야 할 태그 목록.

• except_in_tags: 워터마크가 표시되지 말아야 할 태그 목록.

• if_site_title_matches: 사이트 제목이 이 정규 표현식과 일치할 경우에만 워터마크를 표시합니다. 사용 사례에 대한 자세한 내용은 Discourse Web Page Watermark - #5 by pfaffman 를 참조하세요.

• or_if_url_matches: URL이 목록의 정규 표현식 중 하나와 일치하는 경우 워터마크를 표시합니다(OR). 테스트되는 URL에는 호스트 이름이 포함되지 않는다는 점에 유의하세요.

• tile_width: 워터마크 정보를 포함하는 타일의 너비(px).

• tile_height: 워터마크 정보를 포함하는 타일의 높이(px).

• color: 워터마크 텍스트의 색상.

• text_align: 렌더링될 때 텍스트가 x, y 좌표에 대해 어떻게 정렬되어야 하는지.

• text_rotation: 렌더링될 때 텍스트가 x, y 좌표에 대해 회전되어야 할 각도.

• display_text: 워터마크에 렌더링될 텍스트.

• display_text_font: 텍스트 렌더링에 사용되는 폰트(CSS 폰트 값으로 해석됨).

• display_text_x: 타일 캔버스에서 텍스트 그리기를 시작할 지점의 x축 좌표(픽셀 단위).

• display_text_y: 타일 캔버스에서 텍스트 그리기를 시작할 지점의 y축 좌표(픽셀 단위).

• display_username: 활성화하면 워터마크에 현재 사용자 이름이 렌더링됩니다.

• display_username_font: 사용자 이름 렌더링에 사용되는 폰트(CSS 폰트 값으로 해석됨).

• display_username_x: 타일 캔버스에서 사용자 이름 그리기를 시작할 지점의 x축 좌표(픽셀 단위).

• display_username_y: 타일 캔버스에서 사용자 이름 그리기를 시작할 지점의 y축 좌표(픽셀 단위).

• display_timestamp: 활성화하면 워터마크에 페이지가 렌더링된 타임스탬프가 렌더링됩니다.

• display_timestamp_format: 타임스탬프가 포맷팅되는 방식. 유효한 포맷에 대한 정보는 Moment.js | Docs 을 참조하세요.

• display_timestamp_font: 타임스탬프 렌더링에 사용되는 폰트(CSS 폰트 값으로 해석됨).

• display_timestamp_x: 타일 캔버스에서 타임스탬프 그리기를 시작할 지점의 x축 좌표(픽셀 단위).

• display_timestamp_y: 타일 캔버스에서 타임스탬프 그리기를 시작할 지점의 y축 좌표(픽셀 단위).

주의 사항

• 포럼 인스턴스에 워터마크를 추가할 계획이라면 거기서 촬영한 스크린샷에 태그를 붙이는 것이 좋습니다. 이를 통해 스크린샷이 본인에게 귀속될 수 있거나, 사용자가 스크린샷을 찍어 소셜 미디어에 게시하는 것을 막을 수 있습니다.
  그러나 워터마크를 추가하면 가독성이 떨어질 수 있다는 점을 인지하는 것이 중요합니다. UX와 워터마크 사용 사이에서 타협점을 찾아야 합니다.

• 워터마크는 페이지 아래쪽의 div에 렌더링됩니다. 테마에 따라 위쪽의 컴포넌트가 이를 가릴 수 있으므로, 페이지에 추가하는 경우 테마에 높은 투명도가 있어야 합니다. CSS를 사용하여 z-index를 변경하면 모든 컴포넌트 위에 배치할 수도 있습니다. 가시성을 개선하기 위해 mix-blend-mode도 조정해야 합니다.

div#watermark-background {
  z-index: 99999;
  mix-blend-mode: multiply;
}

• 이 컴포넌트는 대부분의 밝은 테마와 잘 작동하는 합리적인 기본값을 갖추고 있습니다. 그러나 어두운 테마에 워터마크를 추가하는 것은 가독성에 더 큰 영향을 미칠 가능성이 있으므로 까다롭습니다. 본인의 경우에 가장 잘 작동하도록 설정과 CSS를 조정하는 것을 강력히 권장합니다.

• 워터마크가 div에 렌더링되므로 브라우저의 개발자 도구를 사용하는 방법을 아는 모든 사용자는 이를 숨길 수 있습니다. 이는 아마도 99%의 비기술적 사용자에게 의도된 역할을 수행할 것이지만, foolproof(완벽한) 해결책이 아님을 인지하는 것이 중요합니다.

스크린샷

데스크톱 뷰:

모바일 뷰:

	미리보기	Discourse Watermark - Theme Creator
	레포지토리	Discourse-Watermark
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마를 처음 사용하시나요?	Discourse 테마 사용 입문가 가이드

수정:

• 2022-01-12: 워터마크가 표시되는 시점을 제어하는 새로운 설정 추가.

[Mr.X_Mr.X]

카테고리별로 설정할 수 있나요? 어떤 사용자는 특정 카테고리에만 워터마크가 필요할 수 있습니다.

[codinghorror (Jeff Atwood)]

아, 그렇군요. 이미지 워터마크와 혼동했네요. 제목을 더 명확하게 수정하겠습니다. 다소 특이한 사용 사례인 것 같아요. 모든 웹 페이지에 워터마크를 적용하는 웹사이트는 아무것도 본 적이 없습니다.

[saquetim (Sérgio Saquetim)]

@Mr.X_Mr.X

카테고리 기반으로 할 수 있을까요? 어떤 사용자는 워터마크가 필요한 특정 카테고리만 있을 수 있습니다.

좋은 아이디어네요. 이 기능을 조만간 개발하는 데 최선을 다하겠습니다.

@codinghorror

아, 알겠습니다. 이미지 워터마크와 혼동하고 있었네요. 제목을 더 명확하도록 수정하겠습니다. 좀 비정상적인 사용 사례인 것 같습니다… 모든 웹 페이지에 워터마크를 넣는 웹사이트를 아무것도 알지 못합니다.

@codinghorror, 제목을 명확히 해 주셔서 감사합니다.

비정상적인 사용 사례라는 데 동의합니다. 현재 상태로는 금융 부문 기업처럼 편집증적인 보안 부서를 가진 기업의 비공개 포럼에서 주로 유용할 것 같습니다.

처음 만든 MVP(최소 기능 제품)였습니다. 커뮤니티에서 받은 피드백을 바탕으로 기능을 추가해 나갈 것입니다.

Mr. X가 제안한 카테고리 기반 필터를 조만간 추가할 수 있기를 바랍니다. 그러면 더 넓은 사용자층에게 유용해질 것입니다.

[pfaffman (Jay Pfaffman)]

방금 PR을 제출했습니다: skip display if title matches - Pull Request #1 - megothss/discourse-watermark - GitHub

이 PR은 기본적으로 비어 있는 테마 설정 include_if_title_matches를 추가합니다. 이 설정이 비어 있으면 아무것도 변경되지 않습니다.

설정에 값이 있는 경우, 워터마크가 표시되려면 SiteSetting.title이 해당 값과 일치해야 합니다.

사용 사례는 데이터베이스 변경 없이 스테이징 사이트에서는 워터마크가 표시되도록 하고 프로덕션에서는 표시되지 않도록 하는 것입니다. include_if_title_matches를 "staging"으로 설정하고 스테이징 사이트의 SiteSetting.title에 "staging"을 포함시켜 두면(프로덕션 데이터베이스가 복구되어도 유지되도록 ENV 변수로 설정), 워터마크는 스테이징 사이트에서는 표시되지만 프로덕션에서는 표시되지 않습니다.

이 변경 사항 덕분에 스테이징 사이트가 있는 모든 사이트에 이 플러그인을 설치할 예정입니다.

[saquetim (Sérgio Saquetim)]

@pfaffman

PR를 제출했습니다: skip display if title matches by pfaffman · Pull Request #1 · megothss/discourse-watermark · GitHub

오늘 병합했습니다. 약간 수정했습니다. 설정 이름이 if_site_title_matches로 변경되었습니다.

최신 커밋이 구버전 인스턴스에서 작동하는지 확인해 보실 수 있을까요?

@Mr.X_Mr.X

카테고리별로 설정할 수 있나요? 우리 중 일부는 워터마크가 필요한 특정 카테고리만 있을 수 있습니다.

@codinghorror

약간 비정상적인 사용 사례인 것 같습니다… 모든 웹 페이지에 워터마크를 적용하는 웹사이트를 아무것도 본 적이 없습니다.

워터마크가 특정 카테고리, 태그 또는 URL에서 표시되도록 허용하는 새로운 버전을 방금 출시했습니다.

새로운 옵션 덕분에 훨씬 더 많은 사용 사례를 커버할 수 있을 것 같습니다.

[pfaffman (Jay Pfaffman)]

@saquetim

최신 커밋이 구버전 인스턴스에서 정상적으로 작동하는지 확인해 볼 수 있을까요?

프로덕션 사이트와 스테이징 사이트 모두에서 정상적으로 작동하는 것을 확인했습니다. 이 작업을 진행하던 당시 프로덕션 사이트는 Discourse.siteSettings.xxx를 통해 작동하고 있었지만, 곧 해당 설정이 변경될 수 있는 업그레이드를 진행할 예정입니다.

스테이징 사이트에 워터마크가 표시되는 것을 확인해 보니 큰 도움이 됩니다. 테마를 만들어 주셔서 감사합니다!

[baylands]

(기능적으로) 보이지 않는 워터마크를 추가할 수 있는 옵션을 넣을 수 있을까요? 예를 들어, 배경색과 색 값이 1~2 정도 다른 값을 사용하고, 모든 요소의 아래에 배치하는 방식입니다. 이렇게 하면 스크린샷에서 해당 색 값을 찾아 사용자 이름 텍스트를 식별할 수 있습니다.

사용 목적은 스크린샷을 막기 위한 것이 아니라, 비공개 포럼의 게시물을 스크린샷으로 찍어 유포하는 사용자를 찾는 것입니다.

대안으로, 저희 포럼은 자동으로 라이트/다크 모드를 전환하므로, 색 값을 하드코딩하기 위해 테마를 두 개 복사해서 실행하는 것도 가능할까요? 아니면 워터마크 색상을 테마별 설정으로 만들 수 있을까요?

감사합니다. 저희에게 완벽한 해결책이 될 수 있을 것 같습니다.

[pfaffman (Jay Pfaffman)]

@baylands

사용 사례는 스크린샷을 막는 것이 아니라, 비공개 포럼의 게시물을 스크린샷으로 찍어 유포하는 사용자를 찾는 것입니다.

만약 그들을 설득해서 멈추게 할 수 있다면, 누가 그랬는지는 중요하지 않을 수도 있지 않나요?

현재 테마에 따라 색상이 바뀌도록 하는 것은 어려울 것 같습니다. 비밀 워터마크를 사용하여 누군가를 잡으려는 것이 목적이라면, 다른 테마를 비활성화하는 것이 최선의 방법일 것입니다.

[saquetim (Sérgio Saquetim)]

@baylands,

@baylands

기능적으로 거의 보이지 않는 워터마크를 생성할 수 있는 옵션을 추가할 수 있을까요? 예를 들어, 배경색과 1~2개의 색상 값만 차이 나는 워터마크를 모든 요소 아래에 배치하는 것입니다. 그러면 스크린샷을 확인하여 해당 색상 값을 찾아 사용자 이름 텍스트를 발견할 수 있을 것입니다.

사용 목적은 스크린샷을 억제하는 것이 아니라, 비공개 포럼의 게시물을 스크린샷으로 찍어 배포하는 사용자를 찾아내는 것입니다.

이론적으로는 가능합니다. 하지만 프로덕션 환경에서 사용하기 전에 신중하게 테스트해 보시길 권합니다. 질문자님의 사용 사례에서는 워터마크와 배경색 사이에 거의 대비가 없으므로, 업로드 시 적용된 형식과 설정에 따라 압축 과정에서 이 정보가 손실될 가능성이 꽤 높습니다.

이 컴포넌트의 주요 사용 목적은 스크린샷을 억제하는 것이지만, 질문자님의 방식을 시도해 보시고 작동하는지 확인해 보실 수 있습니다. 제가 이전에 생각해 본 적 없는 사용 사례입니다.

@baylands

대안으로, 저희 포럼은 자동 라이트/다크 모드 전환을 사용하는데, 색상 값을 하드코딩하기 위해 테마를 두 개로 실행할 수 있을까요? 아니면 워터마크 색상을 테마별 설정으로 만들 수도 있을까요?

@pfaffman

현재 테마에 따라 색상이 변경되도록 하는 것은 어려울 것 같습니다. 비밀 워터마크를 사용하여 누군가를 적발하려는 것이 목적이라면, 다른 테마를 비활성화하는 것이 최선의 방법일 것입니다.

이 컴포넌트는 라이트 테마와 다크 테마를 동시에 사용하는 것이 가능합니다. 개발 당시 이 사용 사례를 고려한 적이 있습니다. 동일한 컴포넌트를 여러 개 실행할 필요도 없습니다.

color 설정은 CSS 변수 사용을 지원합니다. 예를 들어, 이 설정의 기본 값은 var(--primary-low)입니다.

따라서 워터마크를 적용하려는 모든 테마에서 적절한 색상이 설정된 CSS 변수만 사용된다면, 문제없이 사용할 수 있습니다!

시도해 보신다면, 예상대로 작동하는지 알려주시면 감사하겠습니다.

[baylands]

감사합니다. 많은 부분이 명확해졌습니다!

변수 경로를 시도해 보다가 문제가 발생했습니다.

저희는 라이트 테마라는 테마 하나만 사용하고 있으며, 이 테마는 자동 다크 모드에 라이트와 다크 색상 팔레트를 사용합니다.

라이트 테마 CSS에 “–secondary-watermark” 변수를 추가할 수는 있지만, 라이트 테마에서 다크 색상 팔레트를 사용할 때 변경되지 않습니다.

테마가 아닌 색상 팔레트에 변수를 추가하는 방법을 찾지 못해서, 결과적으로 라이트 테마의 오버라이드는 라이트 색상 팔레트에서만 작동합니다. 색상 팔레트가 자동으로 다크로 전환되면 워터마크가 즉시 보이기 시작합니다.

좀 이상한 특성이어서 한동안 고민해야 했습니다. 혹시 변수로 계산을 수행할 수 있는지 아시나요? 예를 들어 --secondary-watermark를 --secondary에서 10을 뺀 값으로 정의할 수 있는지요? 그런 식으로요. 가능하다고 생각되면 그 방법이 해결책이 될 것 같습니다.

솔직히 저희 사용 사례는 다소 특이합니다. 워터마크가 눈에 보인다고 해서 사람들이 이를 우회하는 방법을 찾아내지 못하도록 막을 수는 없을 것 같습니다. 저희는 폐쇄형 멤버십 그룹이라 스크린샷을 공유하는 사람들을 제명할 수 있어야 합니다. 그 부분이 저희에게는 더 중요합니다.

다시 한번 감사합니다!

[baylands]

is-light-color-scheme 함수를 사용해서 해결했어요. 기대한 대로 정확히 작동합니다. 감사합니다!

[adambirds]

이 사실 우리에게 정말 좋은 일입니다. 우리 그룹에 잠입한 사람들이 사설 포럼 게시물을 소셜 미디어에 올려 우리를 나쁘게 보이게 하려고 시도해 왔기 때문에, 이 기능이 있으면 그런 일을 막거나 문제 사용자를 쉽게 차단할 수 있습니다. 이 기능을 개발해 주신 @saquetim에게 감사드립니다.

[pfaffman (Jay Pfaffman)]

비권장(deprecation) 항목이 몇 개 있습니다.

deprecate-shim.js:33 DEPRECATION: [THEME 15 'discourse-watermark'] Usage of the Ember Global is deprecated. You should import the Ember module or the specific API instead. [deprecation id: ember-global] See https://deprecations.emberjs.com/v3.x/#toc_ember-global for more details.

DEPRECATION: [THEME 15 'discourse-watermark'] Using `run.schedule` has been deprecated. Instead, import the value directly from @ember/runloop:

  import { schedule } from '@ember/runloop'; [deprecation id: deprecated-run-loop-and-computed-dot-access]

도와드리고 싶지만, 제 스스로도 화를 끄느라 바쁩니다

[saquetim (Sérgio Saquetim)]

이건 좀 개인적인 이야기인데요.

위젯에서 벗어나도록 리팩토링도 해야 해요.
더 이상 그럴 필요는 없거든요.

시간이 나면 최대한 빨리 수정해 보겠습니다.

[Ventrilo (Jason)]

제가 사용하는 테마에서는 제대로 작동하지 않습니다. 워터마크가 페이지의 얼마나 많은 부분을 차지하는지 결정할 수 있는 등 더 많은 사용자 지정 옵션이 있으면 좋겠습니다. (예를 들어, 섹션을 탐색할 때 헤더가 아니라 게시물의 콘텐츠/페이지 배경에만 워터마크가 표시되도록 하는 것)

제 테마와 관련하여, 어떤 색상 선택기 CSS를 사용하든, 색상이 아무리 밝든, 텍스트/SVG는 어둡거나 검은색으로 표시됩니다.

[Ventrilo (Jason)]

이 문제에 대한 업데이트가 예정되어 있나요? @saquetim

[yoke_snowwolf (snaper)]

좋은 컴포넌트인데, Ember 5를 지원하지 않나요?
ReferenceError: Ember is not defined 에러가 발생합니다.
제 인스턴스의 Ember 버전은 v5.5.0입니다.
@saquetim

[saquetim (Sérgio Saquetim)]

조금 시간을 내서 호환 가능한 버전을 작업해 보겠습니다.

[pfaffman (Jay Pfaffman)]

Hey @saquetim. 이거 확인해 보셨나요? 아직 깨져 있는 것 같아요: