웹 앱

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

아래의 요구사항을 충족하면 독립형 스크립트와 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에 삽입된 웹 앱에서도 이 기능을 사용하는 것은 권장하지 않습니다.