카드 또는 대화상자에 텍스트 및 이미지 추가

이 페이지에서는 카드 또는 대화상자 메시지에 텍스트와 이미지를 추가하는 방법을 설명합니다. 를 사용하세요.

카드 빌더를 사용하여 채팅 앱용 JSON 카드 메시지를 디자인하고 미리 봅니다.

카드 빌더 열기

기본 요건

  • Google Workspace 계정 액세스 권한이 있는 사용자 Google Chat
  • 게시된 채팅 앱 새로운 채팅 앱, 팔로우하기 빠른 시작:

    • 이미지 추가

    이 Image 위젯 HTTPS URL에 호스팅된 PNG 또는 JPG 이미지를 표시합니다. 표시된 이미지의 너비가 표시된 카드의 전체 너비를 채웁니다. 이미지의 가로세로 비율을 유지하도록 높이가 조정됩니다. Image 위젯 지원 작업 onclick개 사용자가 이미지를 클릭할 때 발생하는 프로세스입니다. onclick 작업의 예는 다음과 같습니다.

    • 다음으로 하이퍼링크 열기 OpenLink님, Google Chat 개발자 문서로 연결되는 하이퍼링크, https://developers.google.com/chat입니다.
    • 다음을 실행합니다. 액션 커스텀 함수를 실행하는 API입니다.

    Image 위젯에는 다음과 같은 제한사항이 있습니다.

    • PNG 및 JPG 이미지만 지원됩니다.
    • 호스트 URL은 HTTPS여야 합니다.
    • 성능 카드를 보장하기 위해 권장되는 최대 이미지 크기는 2MB입니다.

    다음은 Image 위젯으로 구성된 카드입니다. 그러면 Google Chat 개발자 문서 방문 페이지 이미지입니다. 사용자가 Google Chat 개발자 문서가 새 탭에서 열립니다.

    이미지 구성요소 추가

    Image 위젯은 스타일 지정이 제한된 이미지입니다. imageCompent 위젯 를 사용하면 이미지에 cropStyle 및 borderStyle를 적용할 수 있습니다.

    다음 예는 이미지 중 하나가 잘림:

    이미지 자르기

    이미지의 모양을 조정하려면 cropStyle 이미지에 적용할 수 있는 여러 도형은 다음과 같습니다.

    • SQUARE을 사용하여 정사각형 자르기를 적용합니다.
    • CIRCLE을 사용하여 원형으로 자를 수 있습니다.
    • RECTANGLE_CUSTOM를 사용하여 커스텀 관점으로 직사각형 자르기 적용 있습니다. 예를 들어 RECTANGLE_4_3를 사용하여 직사각형 자르기를 적용할 수 있습니다. 4:3 가로세로 비율

    다음 예에서는 그리드에서 cropStyle가 다른 5개의 이미지를 보여줍니다. 다음 각 이미지에 적용됩니다.

    아이콘 추가

    이 Icon 위젯 는 내장 아이콘 또는 맞춤 아이콘을 클릭합니다. 다음에서 Icon 사용 가능: 카드 메시지 및 대화상자 사용할 수 있습니다.

    • 독립형 아이콘을 표시합니다.
    • 콘텐츠의 일부로 관련 텍스트 앞에 아이콘 표시 DecoratedText 위젯
    • 아이콘을 대화형 버튼으로 표시 ButtonList 위젯

    다음은 기본 제공 아이콘이 있는 Icon 구성요소로 구성된 카드입니다.

    다음 표에는 카드 메시지에 사용할 수 있는 기본 제공 아이콘이 나와 있습니다.

    비행기 북마크
    버스 자동차
    시계 CONFIRMATION_NUMBER_ICON
    DESCRIPTION 달러
    이메일 EVENT_SEAT
    FLIGHT_ARRIVAL FLIGHT_DEPARTURE
    호텔 HOTEL_ROOM_TYPE
    INVITE MAP_PIN
    멤버십 MULTIPLE_PEOPLE
    이름 전화
    RESTAURANT_ICON SHOPPING_CART
    STAR 스토어
    티켓 학습
    VIDEO_CAMERA VIDEO_PLAY

    서식이 지정된 텍스트의 단락 추가

    이 TextParagraph 위젯 - 선택적 HTML 형식을 사용하여 텍스트의 단락을 표시합니다. 설정 시 텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다. 지원되는 HTML 태그에 대한 자세한 내용은 카드 텍스트 서식 지정.

    예를 들어 단락 텍스트에는 다음과 같은 형식을 사용할 수 있습니다.

    • HTML <b>, <u>, <i>을 사용하여 굵게, 밑줄 또는 기울임꼴이 적용된 텍스트 표시 태그 사이에 있어야 합니다.
    • HTML <a href="https://www.google.com">hyperlinks</a>을(를) 사용하여 웹사이트를 연결하세요.
    • HTML <font color="#ea9999">font tags</font>을 사용하여 색상을 추가합니다.

    각 TextParagraph 위젯은 새 단락으로 렌더링되며 HTML <p> 태그와 유사합니다.

    다음은 다음에 사용되는 두 개의 TextParagraph 위젯으로 구성된 카드입니다. 간단한 HTML 형식으로 두 개의 단락을 표시합니다.

    장식 요소가 있는 텍스트 표시

    이 DecoratedText 위젯 선택적 레이아웃 및 기능으로 텍스트를 표시합니다. 예를 들면 다음과 같습니다.

    • startIcon를 사용하여 텍스트 앞에 icon를 표시합니다.
    • topLabel로 텍스트 앞에 제목을 표시합니다.
    • button로 클릭 가능한 버튼을 추가하거나 switchControl로 전환 가능한 전환을 추가합니다.

    화면에 정보를 표시해야 하는 경우 DecoratedText 위젯을 사용합니다. 대화형 방식으로 배포됩니다 이 위젯은 연락처 카드, 주문 상태 업데이트, 업무 티켓 알림

    DecoratedText 위젯은 간단한 텍스트 HTML 형식을 지원합니다. 설정 시 텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다. 대상 지원되는 HTML 태그에 대한 자세한 내용은 카드 텍스트 서식 지정.

    다음은 표시하는 데 사용되는 DecoratedText 위젯으로 구성된 카드입니다. 전화번호, 이메일 주소, 온라인 상태, 전화번호 등 웹사이트:

    문제 해결

    Google Chat 앱 또는 card가 오류를 반환하는 경우 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됨 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI가 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생합니다. 예를 들어 카드 메시지가 나타납니다.

    채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만 오류 해결에 도움이 되는 오류 메시지 및 로그 데이터를 사용할 수 있음 채팅 앱의 오류 로깅이 사용 설정된 경우 보는 데 도움이 필요한 경우 오류를 수정하는 방법에 대한 자세한 내용은 Google Chat 오류 문제 해결하기