Google 시트 미리보기: 가능한 방법이 있을까요?

구글 시트 미리보기(또는 그 부재)에 대한 오래된(거의 10년 전쯤?) 주제를 몇 개 발견했습니다. 현재에도 이것이 작동할 수 있는 방법이 있을까요?

왜 이렇게 묻는지 말씀드리겠습니다.

우리 커뮤니티에서는 구글 시트를 통해 중요한 정보를 관리하고 있습니다. 페이스북에서는 게시물에 링크된 스프레드시트의 미리보기가 현재 시점의 스프레드시트 상태를 담은 스냅샷 형태로 표시됩니다. 스프레드시트의 색상 코딩만으로도 충분한 정보를 얻을 수 있는 경우가 많기 때문에(실제로 그런 경우가 많습니다), 반드시 파일을 열지 않아도 되어 매우 실용적입니다.

제가 무슨 뜻인지 보여드리기 위해 일반적인 게시물의 스크린샷을 첨부합니다:

다채로운 셀 덕분에 구글 시트를 클릭해서 들어가지 않아도(더 자세한 내용을 보고 싶지 않는 한) 상황을 한눈에 파악할 수 있습니다.

Discourse 주제(토픽)를 사용하지 않고도 이러한 종류의 ‘임베드’ 효과를 구현할 수 있는 방법이 있을까요?

Google Docs 데스크톱 버전에서 파일 → 공유로 이동한 후, 게시 → 임베드를 선택하세요.

그 후 생성된 iframe을 Discourse에 붙여넣을 수 있습니다.

Discourse 관리자 설정에서 허용된 iframe URL 목록에 Google Docs 도메인을 추가해야 합니다.

결과는 다음과 같습니다:

창이 작게 유지되어 실용적이지는 않습니다…

감사합니다! 분명 효과가 있을 것 같습니다. 모바일에서도 이렇게 할 수 있는 방법이 있을까요? 회원 중 절반 이상이 모바일만 사용한다고 추정됩니다. :fearful:

참고: 아래 내용은 방금 내가 만든 다른 주제에서 가져온 것입니다(고마워요 @merefield, @darkpixlz). 지난 12월에 올린 내용과 정확히 같은 질문이었죠. 내 머릿속에서 완전히 잊어버렸네요(스키 사고가 거의 1년 전 일이지만, 여전히 일부 일에서는 제대로 돌아가지 못하는 상태인 것 같습니다. 너그러운 마음으로 봐주세요).

저희 커뮤니티에서는 각 회원이 도움을 요청할 때 보통 공유하는 추적 스프레드시트가 있습니다. 현재 Facebook에서 작동하는 방식은 스프레드시트의 최신 부분을 보여주는 '미리보기’가 생성되는 것입니다:

이것은 매우 유용합니다(적어도 Facebook이 유용한 한 가지 이유!) 왜냐하면 스프레드시트에 클릭하지 않아도 필요한 관련 데이터의 개요를 볼 수 있기 때문입니다. 물론 우리는 자주 클릭하지만, 어떤 종류의 상황에 직면해 있는지 대략적인 이해를 제공합니다.

여기서 Discourse에서 onebox가 작동하려면 Google 문서가 게시되어 있어야 한다고 읽었습니다. 제 문서에 대해 그렇게 해보았지만 작동하지 않는 것 같습니다:

심지어 시트가 비공개라고 표시되는데, 실제로는 그렇지 않습니다! ‘링크 공유’ 링크를 공유하면 같은 결과가 나옵니다:

이보다 나은 방법이 있을까요? 이것은 우리가 기능하는 방식의 근본적인 부분입니다: 우리의 작업 핵심은 집에서 혈당을 모니터링하는 사람들이 이를 추적하고 해석하는 것을 돕는 것이며, 이 스프레드시트 모델은 이를 위한 우리의 ‘마법’ 도구입니다.

Facebook이 Google 스프레드시트의 의미 있는 스냅샷을 표시할 수 있다면, Discourse에서도 이를 관리할 수 있는 방법이 있을 것 같다는 추측을 해봅니다?

(아이고, 좀 난감하겠다. 복구 잘 되길 바랄게!!! :heart:)

@Canapin의 제안이 도움이 됐어?

음, “어느 정도 동작은” 하지만 iframe이 정말로 작네요 :-/ – 아마도 그대로 사용하기는 어려울 것 같습니다:

iframe 크기를 수정할 방법이 있을까요?

가능하다면 이 게시글에 링크를 걸어줄 수 있을까요? CSS 클래스를 확인해서 가능 여부를 파악해 보겠습니다.

CSS로 조금만 손보면 된다면 좋은 소식이네요!

이것이 작동한다면, 기술에 익숙하지 않은 회원들을 위해 이를 어떻게 단순화할 수 있을지 고민하고 있습니다. 일종의 “사용자용 쇼트코드”를 정의할 수 있는 방법이 있을까요? 예를 들어, 사용자가 임베드 코드를 스프레드시트에 한 번만 붙여넣는 곳(커스텀 사용자 필드?)을 만들어 두고, 게시글에 %my_spreadsheet% (또는 임의의 값)만 입력하면 iframe이 표시되도록 하는 방식이 가능할까요?

잠깐 살펴봤는데, 문서 iframe 임베드를 위한 특정 클래스는 없지만, max-width가 실제 폭이 아닌 100%로 설정되어 있다는 것을 확인했습니다. 이 값을 100%로 설정하면 폭이 넓어지며, 높이는 사용자가 자유롭게 조절할 수 있습니다.

.post__regular .cooked {
    iframe {
      max-width: 100%;
      max-height: min(1000px, 200vh);
      width: 100%;
      height: 500px;
    }
}

개인적으로는 모든 사용자에게 전역적으로 적용되도록 사이트의 컴포넌트로 추가하겠습니다.

네, 제가 만든 이 작은 “커뮤니티 트윅”용 컴포넌트에 CSS를 추가했어요. 감사합니다!

그리고 이제 사람들이 게시물에 그 iframe을 쉽게 삽입할 수 있게 만드는 문제가 남았네요. (구글 시트로 가서 게시하고, 임베드 코드를 복사하고, 다시 돌아와서 붙여넣는 과정을 거치라고 하면 아무도 안 할 테니까요.)

이제 iframe 솔루션은 적절한 크기로 조정되어 정말 좋습니다. 스프레드시트에서 스크롤을 통해 나머지 값을 확인할 수 있고, 파일을 열지 않아도 되니까요. 모바일에서도 잘 작동합니다! 감사합니다. 문제의 상당 부분이 정말 잘 해결되었습니다.

불행히도 더 고급 JavaScript로 들어가지 않는 한, 그런 일이 일어나는 것은 거의 불가능해 보입니다. 저는 Discourse JS API에 대해 아주 익숙하지는 않지만, URL을 가져와 <iframe src="..."></>로 감싸고 /edit/pubhtml?widget=true&amp;headers=false로 교체하는 것만큼은 쉬운 것 같습니다.

이것이 큰 우려 사항이라면, 커뮤니티 구성원들에게 이를 올바르게 내보내는 방법에 대해 알려주는 튜토리얼 포스트를 작성하는 것을 권장합니다. 또는 #contribute:feature에서 공식 onebox 지원을 요청할 수도 있습니다.

저는 JS 지식이 많지 않지만, 그 방향으로 가능한 해결책이 보인다면 파고들어 볼 수 있습니다.
원래 주제에서 약간 벗어나지만, 제 “꿈의 솔루션”은 툴바에 버튼을 추가해서 “사용자의 스프레드시트를 추가”할 수 있게 하는 것입니다. :sweat_smile:

반드시 사용 설명서와 튜토리얼을 게시할 계획이지만, 제 커뮤니티 인구는 “일반 대중”에 가까워서, 튜토리얼이 있어도 이런 종류의 작업은 도전적입니다.

네, 확실히 가능합니다. 다만 지원 스레드에서 누군가가 무료 작업을 해줄 거라고 기대하기는 어렵죠. 예산이 있다면 #marketplace나 다른 채널에서 도움을 받을 수 있을 거예요!

그래서 꿈이 생긴 거죠! :wink:

도와주셔서 정말 감사합니다. 이 스프레드시트에 쓸 수 있는, 적어도 실행 가능한 무언가를 갖게 되어 정말 기쁩니다!

아, 둘 다 해결책으로 표시하고 싶었는데, 하나만 표시할 수 있네요 :-/

컴포저에 버튼을 추가해서 클릭 시 iframe을 삽입하는 건 어떨까요? Theme Component에서는 충분히 구현할 수 있습니다.

이후 applySurroundaddText로 변경하고 iframe 콘텐츠를 직접 추가하면 됩니다.

사용자별로 개인화할 수 있나요?