Google Slides 프레젠테이션에 진행률 표시줄 표시
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
코딩 수준: 중급
기간: 15분
프로젝트 유형: 편집기 부가기능
목표
- 솔루션의 기능을 이해합니다.
- 솔루션 내에서 Apps Script 서비스가 하는 역할을 이해합니다.
- 스크립트를 설정합니다.
- 스크립트를 실행합니다.
이 솔루션 정보
이 솔루션을 사용하여 프레젠테이션의 슬라이드 하단에 진행률 표시줄을 추가하세요.

작동 방식
스크립트는 프레젠테이션에 슬라이드가 몇 개 있는지 계산하고 각 슬라이드의 하단에 직사각형 도형을 추가합니다. 스크립트는 각 직사각형 도형의 너비를 늘려 슬라이드 내에서 진행 상황을 표시합니다.
Apps Script 서비스
이 솔루션은 다음 서비스를 사용합니다.
- 슬라이드 서비스 - 프레젠테이션의 슬라이드를 가져와 각 슬라이드에 직사각형 도형을 추가합니다.
기본 요건
이 샘플을 사용하려면 다음 기본 요건이 필요합니다.
- Google 계정 (Google Workspace 계정의 경우 관리자 승인이 필요할 수 있음)
- 인터넷에 액세스할 수 있는 웹브라우저
스크립트 설정
- 다음 버튼을 클릭하여 진행률 표시줄 슬라이드 프레젠테이션의 사본을 만드세요. 이 솔루션의 Apps Script 프로젝트는 프레젠테이션에 첨부되어 있습니다.
사본 만들기
- 프레젠테이션에서 확장 프로그램
>
진행률 표시줄 >
진행률 표시줄 표시를 클릭합니다.
메시지가 표시되면 스크립트를 승인합니다.
OAuth 동의 화면에 이 앱은 인증되지 않았습니다라는 경고가 표시되면 고급 >
{프로젝트 이름} (안전하지 않음)으로 이동을 선택하여 계속합니다.
다시 확장 프로그램 >
진행률 표시줄 > 진행률 표시줄 표시를 클릭합니다.
진행률 표시줄을 삭제하려면 확장 프로그램
>
진행률 표시줄 > 진행률 표시줄 숨기기를 클릭합니다.
코드 검토
이 솔루션의 Apps Script 코드를 검토하려면 아래의 소스 코드 보기를 클릭하세요.
참여자
이 샘플은 Google Developer Expert의 도움을 받아 Google에서 유지관리합니다.
다음 단계
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-25(UTC)
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\u003cp\u003eThis Google Apps Script solution adds a progress bar to the bottom of Google Slides presentations to visually track progress through the slides.\u003c/p\u003e\n"],["\u003cp\u003eThe script uses the Slides service to calculate the number of slides, add a rectangle shape to each slide, and dynamically adjust the rectangle's width to represent progress.\u003c/p\u003e\n"],["\u003cp\u003eUsers can easily install the script by making a copy of the provided presentation and authorizing the script to access their Google Slides.\u003c/p\u003e\n"],["\u003cp\u003eThe progress bar can be shown or hidden using the "Progress bar" menu found under "Extensions" in Google Slides after installation.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can review and modify the source code, which is publicly available on GitHub, for customization or further development.\u003c/p\u003e\n"]]],["This solution adds a progress bar to Google Slides presentations using Apps Script. The script calculates the total slides and adds a rectangle to the bottom of each slide, increasing the rectangle's width to visually represent progress. Users copy a sample presentation, authorize the script, and then run it to create or remove the progress bars via the \"Extensions\" menu. It utilizes the Slides service to manipulate slides and shapes, adding and deleting these elements.\n"],null,["# Show progress bars in a Google Slides presentation\n\n**Coding level** : Intermediate \n\n**Duration** : 15 minutes \n\n**Project type**: Editor add-on\n\nObjectives\n----------\n\n- Understand what the solution does.\n- Understand what the Apps Script services do within the solution.\n- Set up the script.\n- Run the script.\n\nAbout this solution\n-------------------\n\nUse this solution to add a progress bar to the bottom of the slides in\nyour presentation.\n\n### How it works\n\nThe script calculates how many slides are in the presentation and adds a\nrectangle shape to the bottom of each slide. The script increases the width for\neach rectangle shape to show progress within the slides.\n\n### Apps Script services\n\nThis solution uses the following service:\n\n- [Slides service](https://developers.google.com/apps-script/reference/slides)--Gets a presentation's slides and adds a rectangle shape to each one.\n\nPrerequisites\n-------------\n\nTo use this sample, you need the following prerequisites:\n\n- A Google Account (Google Workspace accounts might require administrator approval).\n- A web browser with access to the internet.\n\nSet up the script\n-----------------\n\n1. Click the following button to make a copy of the **Progress bar** Slides presentation. The Apps Script project for this solution is attached to the presentation. \n [Make a copy](https://docs.google.com/presentation/d/1wMwCeISpBgSal0K1K8qXPdr-MYZxkU_A-RobUIYZ8WU/copy)\n2. In the presentation, click **Extensions** \\\u003e **Progress bar** \\\u003e **Show progress bar**.\n3. When prompted, authorize the script.\n If the OAuth consent screen displays the warning, **This app isn't verified** ,\n continue by selecting **Advanced** \\\u003e\n **Go to {Project Name} (unsafe)**.\n\n4. Again, click **Extensions** \\\u003e\n **Progress bar** \\\u003e **Show progress bar**.\n\n5. To remove the progress bar, click **Extensions**\n \\\u003e\n **Progress bar** \\\u003e **Hide progress bar**.\n\nReview the code\n---------------\n\nTo review the Apps Script code for this solution, click\n**View source code** below: \n\n#### View source code\n\n\u003cbr /\u003e\n\nslides/progress/progress.gs \n[View on GitHub](https://github.com/googleworkspace/apps-script-samples/blob/main/slides/progress/progress.gs) \n\n```javascript\n/**\n * @OnlyCurrentDoc Adds progress bars to a presentation.\n */\nconst BAR_ID = 'PROGRESS_BAR_ID';\nconst BAR_HEIGHT = 10; // px\n\n/**\n * Runs when the add-on is installed.\n * @param {object} e The event parameter for a simple onInstall trigger. To\n * determine which authorization mode (ScriptApp.AuthMode) the trigger is\n * running in, inspect e.authMode. (In practice, onInstall triggers always\n * run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or\n * AuthMode.NONE.)\n */\nfunction onInstall(e) {\n onOpen();\n}\n\n/**\n * Trigger for opening a presentation.\n * @param {object} e The onOpen event.\n */\nfunction onOpen(e) {\n SlidesApp.getUi().createAddonMenu()\n .addItem('Show progress bar', 'createBars')\n .addItem('Hide progress bar', 'deleteBars')\n .addToUi();\n}\n\n/**\n * Create a rectangle on every slide with different bar widths.\n */\nfunction createBars() {\n deleteBars(); // Delete any existing progress bars\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const ratioComplete = (i / (slides.length - 1));\n const x = 0;\n const y = presentation.getPageHeight() - BAR_HEIGHT;\n const barWidth = presentation.getPageWidth() * ratioComplete;\n if (barWidth \u003e 0) {\n const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,\n barWidth, BAR_HEIGHT);\n bar.getBorder().setTransparent();\n bar.setLinkUrl(BAR_ID);\n }\n }\n}\n\n/**\n * Deletes all progress bar rectangles.\n */\nfunction deleteBars() {\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const elements = slides[i].getPageElements();\n for (const el of elements) {\n if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&\n el.asShape().getLink() &&\n el.asShape().getLink().getUrl() === BAR_ID) {\n el.remove();\n }\n }\n }\n}\n```\n\n\n\u003cbr /\u003e\n\nContributors\n------------\n\nThis sample is maintained by Google with the help of Google Developer Experts.\n\nNext steps\n----------\n\n- [Extending Google Slides with Apps Script](/apps-script/guides/slides)\n- [Slides service reference](/apps-script/reference/slides)"]]