구글 스프레드 시트에 버튼 구현하기(Apps Script)

안녕하세요.

 

오늘 포스팅에서는 구글 시트에서 앱스 스크립트를 통해 버튼을 구현하는 방법에 대해 알아보겠습니다.

 

언어: JavaScript

환경: Google Sheets / Apps Script

 

간단한 숫자 더하기 기능을 구현해 보겠습니다.

 

시트를 아래와 같이 작성합니다.

figure 1

button을 클릭하면 number1의 숫자와 number2의 숫자를 더해 result에 표기되도록 만들 예정입니다.

 

button의 부분에는 간단한 이미지를 만들어 넣어주겠습니다(figure 2 참조).

삽입 > 그림 > 이미지 작성 후 "저장 후 닫기" 클릭

figure 2

 

UI는 아래와 같습니다.

figure 3

다음으로 확장 프로그램 > Apps Script 진입하여 코드를 작성합니다.

figure 4

 

function sumCells() {
  // 현재 활성화된 시트 가져오기
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // A3과 B3의 값을 가져옴
  const valueA = sheet.getRange("A3").getValue();
  const valueB = sheet.getRange("B3").getValue();
  
  // 두 값을 더하고 C3에 입력
  const sum = valueA + valueB;
  sheet.getRange("C3").setValue(sum);
}

ctr + s를 눌러 코드를 저장 및 업데이트 합니다.

 

마지막으로, 시트로 돌아와 button 란에 만들어 두었던 그림에 function을 할당하겠습니다(figure 5, figure 6 참조).

그림 클릭 > ⋮ 클릭 > "스크립트 할당" 클릭

figure 5

 

function 명을 입력하고 "확인"을 눌러줍니다.

figure 6

추가로, 스크립트가 할당되어 버튼이 된 그림을 다시 선택하고 싶으면 마우스 오른쪽 버튼으로 클릭하면 그림 선택이 됩니다.

 

이제 테스트를 해보겠습니다.

figure 7

정상적으로 동작합니다.

 

이번에는 number1의 숫자와 선택된 셀의 숫자를 더하도록 코드를 수정해 보겠습니다.

function sumCells() {
  // 현재 활성화된 시트 가져오기
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // A3의 값을 가져옴
  const valueA = sheet.getRange("A3").getValue();
  
  // 사용자가 선택한 셀의 값을 가져옴
  const selectedRange = sheet.getActiveRange();
  const valueB = selectedRange.getValue();
  
  // 두 값을 더하고 C3에 입력
  const sum = valueA + valueB;
  sheet.getRange("C3").setValue(sum);
}

 

코드를 수정한 후 ctr + s를 눌러 스크립트를 업데이트 합니다.

 

테스트를 해보겠습니다.

figure 8

잘 동작하고 있습니다.

 

이를 응용하면 다양한 기능을 하는 시트를 구현할 수 있을 것 같습니다.

 

포스팅을 마치겠습니다.

 

감사합니다.