웹 앱

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

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

웹 앱 요구사항

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

요청 매개변수

사용자가 앱을 방문하거나 프로그램이 앱에 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 HtmlService.createHtmlOutput(params);
}

위의 예에서 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 및 새 버전의 Google Sites 모두에 웹 앱을 삽입할 수 있습니다.

새 Sites에 웹 앱 삽입하기

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

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

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

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

기존 Sites에 웹 앱 삽입하기

스크립트를 Google 문서 또는 스프레드시트에 결합하는 것과 동일한 방식으로 스크립트를 기존 Google 사이트 도구에 결합할 수 있습니다. 결합된 스크립트를 만들려면 사이트를 방문하여 톱니바퀴 아이콘 설정을 클릭한 다음 사이트 관리를 선택합니다. 사이트 관리 페이지에서 왼쪽 탐색 메뉴에 있는 Apps Script를 클릭한 다음 새 스크립트 추가 버튼을 클릭합니다. 이렇게 하면 Apps Script 편집기에서 웹 앱을 코딩하고 배포할 수 있는 새 스크립트가 열립니다.

페이지에 웹 앱을 삽입할 수도 있습니다. 웹 앱을 사이트에 결합하거나 URL이 있는 웹 앱을 사용할 수 있습니다. Google Sites 페이지에 웹 앱을 삽입하려면 다음 단계를 따르세요.

  1. 수정 권한이 있는 기존 사이트를 열거나 새 사이트를 만듭니다.
  2. 웹 앱을 삽입하려는 사이트의 페이지로 이동합니다.
  3. 수정 아이콘을 클릭한 다음 삽입 > Google Apps Script를 클릭합니다.
  4. 목록에서 웹 앱을 나타내는 스크립트를 선택합니다. 웹 앱이 이 사이트에 결합되지 않은 경우 대신 웹 앱 URL에 붙여넣을 수 있습니다.
  5. 선택 버튼을 클릭하고 다음 대화상자에서 원하는 옵션을 선택한 후 저장을 클릭합니다.
  6. 페이지에 변경사항을 저장하면 사이트 페이지에 삽입된 웹 앱이 표시됩니다.

웹 앱 및 브라우저 기록

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

Apps Script는 브라우저 기록에 연결된 웹 앱을 만드는 데 도움이 되는 두 가지 비동기 클라이언트 측 자바스크립트 API를 제공합니다.

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

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

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