웹 앱

스크립트의 사용자 인터페이스를 빌드하는 경우 스크립트를 웹 앱으로 게시할 수 있습니다. 예를 들어 사용자가 지원팀 구성원과 약속을 예약할 수 있는 스크립트는 사용자가 브라우저에서 직접 액세스할 수 있도록 웹 앱으로 표시하는 것이 가장 좋습니다.

독립형 스크립트와 애플리케이션에 Google Workspace 바인드된 스크립트 모두 아래 요구사항을 충족하는 한 웹 앱으로 전환할 수 있습니다.

웹 앱 요구사항

다음 요구사항을 충족하는 스크립트는 웹 앱으로 게시할 수 있습니다.

요청 매개변수

사용자가 앱을 방문하거나 프로그램을 통해 앱에 HTTP GET 요청을 보내면 Apps Script에서 doGet(e) 함수를 실행합니다. 프로그램이 앱에 HTTP POST 요청을 보내면 Apps Script는 doPost(e)를 대신 실행합니다. 두 경우 모두 e 인수는 모든 요청 매개변수에 대한 정보를 포함할 수 있는 이벤트 매개변수를 나타냅니다. 이벤트 객체의 구조는 아래 표에 나와 있습니다.

필드
e.queryString

URL에서 쿼리 문자열 부분의 값 또는 쿼리 문자열이 지정되지 않은 경우 null입니다.

name=alice&n=1&n=2
e.parameter

요청 매개변수에 해당하는 키-값 쌍의 객체입니다. 여러 값을 가진 매개변수의 경우 첫 번째 값만 반환됩니다.

{"name": "alice", "n": "1"}
e.parameters

e.parameter와 유사하지만 각 키의 값 배열이 있는 객체

{"name": ["alice"], "n": ["1", "2"]}
e.pathInfo

/exec 또는 /dev 뒤의 URL 경로입니다. 예를 들어 URL 경로가 /exec/hello로 끝나면 경로 정보는 hello입니다.
e.contextPath 사용되지 않으며, 항상 빈 문자열입니다.
e.contentLength

POST 요청의 경우 요청 본문의 길이, GET 요청의 경우 -1의 길이

332
e.postData.length

e.contentLength와 동일

332
e.postData.type

POST 본문의 MIME 유형입니다.

text/csv
e.postData.contents

POST 본문의 콘텐츠 텍스트

Alice,21
e.postData.name

항상 'postData' 값

postData

예를 들어 아래와 같이 username 및 age과 같은 매개변수를 URL에 전달할 수 있습니다.

https://script.google.com/.../exec?username=jsmith&age=21

그런 다음 매개변수를 다음과 같이 표시할 수 있습니다.

function doGet(e) {
  var params = JSON.stringify(e);
  return ContentService.createTextOutput(params).setMimeType(ContentService.MimeType.JSON);
}

위의 예에서 doGet(e)는 다음과 같은 출력을 반환합니다.

{
  "queryString": "username=jsmith&age=21",
  "parameter": {
    "username": "jsmith",
    "age": "21"
  },
  "contextPath": "",
  "parameters": {
    "username": [
      "jsmith"
    ],
    "age": [
      "21"
    ]
  },
  "contentLength": -1
}

스크립트를 웹 앱으로 배포

스크립트를 웹 앱으로 배포하려면 다음 단계를 따르세요.

  1. 스크립트 프로젝트의 오른쪽 상단에서 배포 > 새 배포를 클릭합니다.
  2. '유형 선택' 옆에서 배포 유형 사용 설정 > 웹 앱을 클릭합니다.
  3. '배포 구성' 아래의 필드에 웹 앱에 대한 정보를 입력합니다.
  4. 배포를 클릭합니다.

앱을 사용하려는 사용자에게 액세스 권한을 부여한 경우 웹 앱 URL을 공유할 수 있습니다.

웹 앱 배포 테스트

웹 앱으로서 스크립트를 테스트하려면 다음 단계를 따르세요.

  1. 스크립트 프로젝트의 오른쪽 상단에서 배포 > 배포 테스트를 클릭합니다.
  2. '유형 선택' 옆의 배포 유형 사용 설정 > 웹 앱을 클릭합니다.
  3. 웹 앱 URL 아래에서 복사를 클릭합니다.

  4. 브라우저에 URL을 붙여넣고 웹 앱을 테스트합니다.

    이 URL은 /dev로 끝나며 스크립트에 대한 수정 액세스 권한이 있는 사용자만 액세스할 수 있습니다. 이 앱 인스턴스는 항상 가장 최근에 저장된 코드를 실행하며 개발 중에 테스트하는 용도로만 사용됩니다.

권한

웹 앱의 권한은 앱을 실행하는 방법에 따라 다릅니다.

  • 내 계정으로 앱 실행 - 이 경우 스크립트는 웹 앱에 액세스하는 사용자와 관계없이 항상 스크립트의 소유자인 사용자로서 실행됩니다.
  • 웹 앱에 액세스하는 사용자로 앱 실행 - 이 경우 스크립트는 웹 앱을 사용하는 활성 사용자의 ID로 실행됩니다. 이 권한 접근 방식을 사용하면 사용자가 액세스를 승인할 때 웹 앱에 스크립트 소유자의 이메일이 표시됩니다.

Google Sites에 웹 앱 삽입하기

Google Sites에 웹 앱을 삽입하려면 먼저 웹 앱을 배포해야 합니다. 또한 Deploy 대화상자의 배포된 URL이 필요합니다.

웹 앱을 사이트 페이지에 삽입하려면 다음 단계를 따르세요.

  1. 웹 앱을 추가할 사이트 페이지를 엽니다.
  2. 삽입 > URL 삽입을 선택합니다.
  3. 웹 앱 URL을 붙여넣은 다음 추가를 클릭합니다.

웹 앱은 페이지 미리보기의 프레임에 표시됩니다. 페이지를 게시할 때 웹 앱이 정상적으로 실행되기 전에 사이트 뷰어가 웹 앱을 승인해야 할 수도 있습니다. 승인되지 않은 웹 앱은 사용자에게 승인 메시지를 표시합니다.

웹 앱 및 브라우저 기록

Apps Script 웹 앱에서 다중 페이지 애플리케이션을 시뮬레이션하거나 URL 매개변수를 통해 제어되는 동적 UI가 있는 애플리케이션을 시뮬레이션하는 것이 좋습니다. 이렇게 하려면 앱의 UI나 페이지를 나타내는 상태 객체를 정의하고 사용자가 앱을 탐색할 때 상태를 브라우저 기록에 푸시하면 됩니다. 또한 사용자가 브라우저 버튼을 사용하여 앞뒤로 이동할 때 웹 앱이 올바른 UI를 표시하도록 기록 이벤트를 수신 대기할 수 있습니다. 로드 시 URL 매개변수를 쿼리하면 이러한 매개변수를 기반으로 앱이 동적으로 UI를 빌드하여 사용자가 특정 상태에서 앱을 시작할 수 있게 할 수 있습니다.

Apps Script는 브라우저 기록에 연결된 웹 앱 만들기를 지원하기 위해 두 개의 비동기 클라이언트 측 JavaScript API를 제공합니다.

  • google.script.history: 브라우저 기록 변경사항에 대한 동적 응답을 허용하는 메서드를 제공합니다. 여기에는 브라우저 기록으로 상태 (정의할 수 있는 간단한 객체)를 푸시하고 기록 스택의 최상위 상태를 대체하고 기록 변경사항에 응답하도록 리스너 콜백 함수를 설정하는 작업이 포함됩니다.

  • google.script.url는 현재 페이지의 URL 매개변수 및 URL 프래그먼트(있는 경우)를 검색하는 방법을 제공합니다.

이러한 기록 API는 웹 앱에서만 사용할 수 있습니다. 사이드바, 대화상자 또는 부가기능에는 지원되지 않습니다. Google Sites에 삽입된 웹 앱에서도 이 기능을 사용하지 않는 것이 좋습니다.