공유 가능한 QR 코드

:information_source: 요약 링크 소스를 공유하기 위한 QR 코드 생성기를 추가합니다
:eyeglasses: 미리보기 https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables
:hammer_and_wrench: 리포지토리 https://github.com/Alteras1/discourse-qr-code-shareables
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: 디스커스 테마를 처음 사용하시나요? 디스커스 테마 사용 입문 가이드

이 테마 컴포넌트 설치

공유 가능한 링크의 소스에 QR 코드를 추가합니다. QR 코드의 스타일을 조정할 수 있는 설정을 포함합니다.

스크린샷

설정

이름 설명
share_in_private 비공개 컨텍스트(로그인 필요 사이트 및 비공개 메시지)에서 QR 코드 사용을 허용합니다.
dots_color QR 코드 내 점의 색상.
dots_type QR 코드에 사용되는 점의 유형.
옵션: rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color QR 코드 내 사각형 코너의 색상.
corners_square_type QR 코드 내 사각형 코너의 유형.
옵션: dots, square, extra-rounded, dot, rounded, classy, classy-rounded
corners_dots_type QR 코드 코너에 사용되는 점의 유형.
옵션: dot, square, dots, rounded, classy, classy-rounded, extra-rounded
background_color QR 코드의 배경색.
image QR 코드에 임베드할 이미지. 제공되지 않으면 이미지가 없이 정상적으로 QR 코드가 생성됩니다.
image_hide_background_dots 이미지가 배경 점 뒤에 숨겨져야 합니다.
image_margin QR 코드 내 임베드된 이미지 주변의 여백. px 단위
image_size QR 코드에 대한 임베드된 이미지의 상대적 크기. 0에서 1까지의 비율입니다.

참고 사항

일부 기능 요청(Create a QR code for invitesPossible to share a post by save a picture with a QR code?)을 읽은 후, 공유 가능한 링크에 QR 코드를 추가하는 아이디어가 마음에 들었습니다. 현재 이는 주제 및 게시물 공유에만 적용됩니다. 초대 생성 모달에는 플러그인 아웃렛이 없거나 Sharing API를 사용하지 않기 때문입니다.

이는 QR 코드 커스터마이징을 위해 https://www.npmjs.com/package/qr-code-styling 패키지를 사용합니다.

17개의 좋아요

그걸 어떻게 공유해야 할까요? 저는 QR 코드를 인쇄 매체에서만 사용해 봤거든요 :man_shrugging:

3개의 좋아요

이 기능은 공유하려는 상대방이 사용자의 화면을 볼 수 있는(예: 모바일에서 QR 코드를 빠르게 표시하는 경우) 시나리오에서 유용합니다. QR 코드는 HTML 캔버스 요소이므로, 마우스 오른쪽 버튼을 클릭하여 이미지로 저장할 수 있습니다.

4개의 좋아요

iPad에서는 저장 또는 복사가 작동하지 않습니다.

1개의 좋아요

아, HTML 캔버스에 남겨두고 왔다는 걸 알았어. PNG로 변환하도록 수정해서 배포했어.

5개의 좋아요


아래 그림의 QR 코드처럼 중앙이 비어 있는 형태라 약간 낯설게 느껴집니다.

2개의 좋아요

정말 좋은 추가 감사합니다!

이런 부분은 어쨌든 메워야 하는 것이겠죠? QR 코드를 통한 초대 기능이 있다면 정말 최고일 것 같습니다!

8개의 좋아요

수정 사항을 배포했습니다. image hide background dotsimage margin이 이제 제대로 작동해야 합니다.

5개의 좋아요

코어에 새로운 플러그인 아웃렛 몇 가지에 대한 PR을 올렸습니다. 초대 기능에서 Sharing API를 사용하지 않는 특별한 이유가 있는지 모르겠어서, PR은 플러그인 아웃렛 관련 내용으로만 유지하겠습니다.

7개의 좋아요

그 문제에 대해 팀과 이야기해 보세요.

6개의 좋아요

게시물에서 이 기능을 어떻게 작동시킬 수 있나요? 저는 주제에서만 작동하도록 설정할 수 있습니다:

현재 다음과 같은 결과가 표시됩니다:

또한 탐욕스럽게도 제 사이트의 모든 링크에 대해 이 기능(즉, QR 코드 생성)을 기본적으로 사용할 수 있으면 좋겠습니다!!

4개의 좋아요

이 테마 컴포넌트가 마음에 들어요! 저희 가족 포럼에는 고양이 화장실을 깨끗이 유지하는 방법 같은 howto 절차에 대한 카테고리가 있어요. 이미 화장실 옆에 간단한 안내문을 인쇄해 두는 걸 고려하고 있었거든요. 상세한 설명이 담긴 포럼으로 연결되는 QR 코드를 넣을 수도 있겠네요. URL을 사용해 다른 곳에서 만들 수도 있지만, 저는 Discourse에서 직접 처리하는 걸 선호해요.

흥미롭네요. 이 기능이 초대 시스템에 어떻게 개선이 되는지 그 대단한 이야기를 들려주실 수 있을까요? QR 코드 초대장은 어떻게, 어디서 공유되고 어떻게 수락되나요? 다른 플랫폼에서 이 기능이 어떻게 구현되고 있는지 참고할 수 있는 사례도 공유해 주실 수 있나요? 또한, 초대 시스템 내에서 QR 코드가 어디에서 제공되는 것을 상상하고 계신가요?

새로운 공유 링크를 사용하고 계신 거예요. 이 링크는 모달 없이 공유할 URL만 가져옵니다. 게시글 메뉴 사이트 설정으로 이동하면 원래의 게시글 공유 메뉴 항목을 활성화할 수 있으며, 그러면 이제 QR 코드도 함께 표시됩니다. 또한 게시글의 타임스탬프를 클릭하면 원래의 공유 팝업을 접근할 수도 있습니다.

5개의 좋아요

게시물 타임스탬프에 공유 모달이 연결되어 있다는 사실은 전혀 몰랐습니다! 인정하지만, 그곳에 숨겨 놓은 것은 좋은 아이디어이고, 더 간결한 공유 링크는 가장 일반적인 용도에 잘 맞습니다.

참고로, 제 안드로이드 폰(Pixel 7 Pro)은 자동으로 QR 코드를 생성합니다. 이 방식은 초대 모달에서도 작동합니다. 그리고 이것이 제 주요 사용 사례입니다. 하지만 실제로는 이 부분을 조사해 본 적이 없습니다. 아, 발견의 여정이네요!

다만 이 TC가 만드는 것들만큼 예쁘지는 않습니다!

3개의 좋아요

오! 네. 이미 안드로이드에서 구현되어 있네요. 누가 알았겠어요! 훌륭하네요! :rocket: 알려주셔서 감사합니다. 그래서 이미 에픽한 기능이네요!

하지만 잠깐!

iOS에서는 이 옵션을 찾지 못하겠습니다. :green_apple:

iOS에서 QR 옵션을 볼 수 없어요?

2개의 좋아요

QR 코드를 생성하는 데 비용이 많이 드나요? 그렇지 않다면, 버튼을 눌러야만 QR 코드를 표시하게 하는 대신 공유 모달에서 자동으로 표시되도록 하면 안 될까요?

비용은 전혀 들지 않으므로, 나머지는 코딩 문제입니다. 하지만 대부분의 사람들에게 QR 코드는 그냥 노이즈일 뿐이므로, 직접적으로 보이게 할 수는 없습니다.

2개의 좋아요

비즈니스 카드입니다. Discourse를 사용하는 회사가 플랫폼 가입을 위한 QR 코드를 가질 수 있습니다. 또는 이벤트 포스터 등에 사용할 수도 있죠.

수정: Rob의 Android 관련 글을 방금 봤네요. 하지만 말씀하신 대로, Discourse 내부에서 처리하는 쪽을 선호합니다.
:wink:

3개의 좋아요

@Jagster가 말했듯이 QR 코드를 생성하는 데 비용이 많이 드는 것은 아니며, QR 코드가 얼마나 즉각적이고 눈에 띄게 표시되는지는 주로 개인 취향의 문제입니다. TC는 공유 API(와 일부 DOM 조작)를 활용하여 QR 코드를 표시하며, 이를 다른 공유 소스와 동일한 수준으로 취급합니다. 이는 QR 코드를 정보를 전송하는 보조 수단으로 보는 제 관점과 대체로 일치했습니다. 그러나 미국 밖에서 휴가를 보내기 시작한 이후, 물리적 세계에서 QR 코드가 얼마나 널리 퍼져 있는지 꽤 놀랐습니다.

설정 화면에 즉시 QR 코드 옵션을 추가하는 방안을 검토해 볼 수 있지만, 그럴 경우 QR 코드의 배치 위치와 방식을 다시 생각해 봐야 할 것입니다. 솔직히 말하면, 현재 모달(데스크톱과 모바일 뷰 모두)에서 QR 코드가 배치된 방식은 DOM 조작을 통해 억지로 끼워 넣은 느낌이 강합니다. 이상적으로는 데스크톱 뷰에서 “링크 복사” 버튼과 동일한 수준으로 취급되는 QR 코드가 모달의 오른쪽 전체를 차지하는 것이 좋겠지만, 그렇게 하려면 새로운 플러그인 아웃렛과 상당한 CSS 변경이 필요합니다. 현재 공유 모달에는 플러그인 아웃렛이 단 하나만 있으며, “새 주제” 버튼 바로 옆에 위치해 있어 복잡한 CSS를 사용하거나 더 많은 DOM 조작을 하는 것을 정말로 피하고 싶습니다.

요약: 휴가를 마치고 돌아온 후, 즉시 QR 코드 설정을 추가하는 것이 추가적인 노력을 기울일 가치가 있는지 더 고민해 보고 결정하겠습니다.

4개의 좋아요

이미지를 사용할 때 QR 코드가 생성되지 않습니다. 사용된 형식, 크기 등에 대한 요구 사항이 있나요?

2개의 좋아요

음, 이상하네요. 이미지 자체에 대해 특히 까다로운 요구사항은 없어야 하는데…

어떤 이미지와 이미지 크기 설정을 사용 중이신가요?