웹 앱

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

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

웹 앱 요구사항

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

doGet 또는 doPost 함수가 포함되어 있습니다.
이 함수는 HTML 서비스 HtmlOutput 객체 또는 콘텐츠 서비스 TextOutput 객체를 반환합니다.

요청 매개변수

사용자가 앱을 방문하거나 프로그램이 앱에 HTTP GET 요청을 보내면 Google Apps Script가 doGet 함수를 실행합니다. 프로그램이 앱에 HTTP POST 요청을 보내면 Apps Script는 doPost를 대신 실행합니다. 두 경우 모두 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

다음과 같은 URL에 username 및 age과 같은 매개변수를 전달합니다.

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은 다음 출력을 반환합니다.

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

다음 매개변수 이름은 시스템에서 예약되어 있으므로 URL 매개변수나 POST 본문에서 사용하면 안 됩니다.

c
sid

이러한 매개변수를 사용하면 '요청하신 파일이 존재하지 않습니다.'라는 오류 메시지와 함께 HTTP 405 응답이 발생할 수 있습니다. 가능하면 다른 매개변수 이름을 사용하도록 스크립트를 업데이트하세요.

스크립트를 웹 앱으로 배포

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

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

액세스 권한을 부여한 사용자와 웹 앱 URL을 공유합니다.

한 도메인에 배포된 웹 앱은 소유권이 다른 도메인의 공유 드라이브 또는 계정으로 변경되면 작동하지 않습니다. 새 소유자 또는 공동작업자가 새 도메인에 웹 앱을 다시 배포하면 이 문제가 해결됩니다. 또는 웹 앱이 원래 도메인으로 다시 이동되면 재배포하지 않고도 해당 도메인에서 웹 앱이 다시 작동하기 시작합니다.

웹 앱 배포 테스트

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

스크립트 프로젝트의 오른쪽 상단에서 배포 > 테스트 배포를 클릭합니다.
'유형 선택' 옆에 있는 배포 유형 사용 설정 > 웹 앱을 클릭합니다.
웹 앱 URL 아래에서 복사를 클릭합니다.
브라우저에 URL을 붙여넣고 웹 앱을 테스트합니다.

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

웹 앱에서 세부적인 OAuth 기능을 테스트하려면 프로젝트에 아직 승인이 없어야 합니다. 기존 승인을 무효화하려면 ScriptApp.invalidateAuth를 사용하세요. 이미 배포되어 활성 사용자의 ID로 실행 중인 웹 앱의 경우 매니페스트에서 executeAs JSON 필드를 USER_DEPLOYING로 수정합니다.

개발자로 실행되는 웹 앱을 배포할 때는 ScriptApp.getOAuthToken을 통해 획득한 OAuth 토큰을 처리할 때 각별히 주의하세요. 이러한 토큰은 다른 애플리케이션에 데이터 액세스 권한을 부여할 수 있으므로 클라이언트에 전송하면 안 됩니다.

권한

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

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

악용을 방지하기 위해 Apps Script는 새 사용자가 사용자로 실행되는 웹 앱을 승인할 수 있는 비율을 제한합니다. 이러한 한도는 게시 계정이 Google Workspace 도메인에 속하는지 여부 등 여러 요인에 따라 달라집니다.

공유 드라이브를 사용하여 웹 앱에서 공동작업하세요. 공유 드라이브의 웹 앱이 배포될 때 '내 계정으로 실행'을 선택하면 스크립트 소유자가 없으므로 웹 앱이 배포한 사용자의 권한으로 실행됩니다.

Google Sites에 웹 앱 삽입하기{:#embed-web-app}

악의적인 사용을 방지하기 위해 삽입된 웹 앱에는 액세스 권한이 적용됩니다. 삽입된 웹 앱이 작동하지 않는 것 같으면 웹 앱 소유자와 도메인 관리자가 설정한 권한이 앱 사용을 허용하는지 확인하세요.

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

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

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

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

웹 앱 및 브라우저 기록

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

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

google.script.history는 브라우저 기록 변경에 동적으로 응답할 수 있는 메서드를 제공합니다. 여기에는 상태 (정의한 간단한 객체)를 브라우저 기록에 푸시하고, 기록 스택의 최상위 상태를 바꾸고, 기록 변경에 응답하는 리스너 콜백 함수를 설정하는 것이 포함됩니다.
google.script.url은 현재 페이지의 URL 매개변수와 URL 프래그먼트가 있는 경우 이를 가져오는 방법을 제공합니다.

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

웹 앱 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.