앱스 스크립트 사용법 (3) 구글 드라이브에 접근하기

이번에는 구글 앱스 스크립트를 사용하여 구글 드라이브에 접근하고, 지정한 폴더 내에 저장되어 있는 이미지 파일의 리스트를 만들어주는 시트를 만들어 보겠습니다.

개요

이번 샘플 시트도 실제로 회사에서 활용하고 있는 시트입니다.

1. 폴더에 리스트로 추출하고 싶은 이미지를 넣어 둔다.
2. 리스트를 출력할 스프레드시트를 준비한다.
3. 스프레드시트에 파일 이름과 이미지를 삽입하는 앱스 스크립트를 작성한다.

이 시트가 사용되는 상황을 조금 더 자세하게 설명드리자면,
게임을 글로벌 서비스하려고 할 때, 각 지역에 맞게 로컬라이즈 작업을 진행하게 됩니다. 가장 기본적으로 진행하는 로컬라이즈 작업이 바로 번역입니다. 모두 텍스트이면 번역 담당자 혼자서 작업할 수 있겠지만, 텍스트가 들어가 있는 이미지는 디자이너에게 작업을 의뢰해야 합니다. 우선 번역하는 사람이 어떤 이미지에 어떤 텍스트를 넣어줘야 하는지 리스트로 정리해서 넘겨줘야 디자이너가 작업할 수 있습니다. 이때 사용하면 편리한 시트입니다.

★샘플 스프레드시트
https://docs.google.com/spreadsheets/d/1mPYKCtz8w7r3jx1wDNW-8lSxgGUzBF1_Y7__xVOPMdw/edit?usp=sharing

 

폴더에 이미지 넣기

먼저, 폴더에 번역이 필요한 이미지를 넣습니다.
이때, 이미지는 일정 기준의 높이를 넘지 않도록 미리 크기를 작게 조정해 주시기 바랍니다. 샘플 이미지는 최대 높이를 65px로 제한하였습니다.

이미지 내에 있는 텍스트를 확인할 수만 있으면 되기 때문에 굳이 원본 파일을 넣을 필요가 없습니다. 이미지 파일 크기가 작은 편이 스크립트 실행 속도도 빠릅니다.
그리고 이미지의 최대 높이를 제한하는 이유는 스크립트로 이미지의 높이를 구할 수 없기 때문입니다. 이미지 높이에 따라 Row의 높이를 조정할 수 없으니 일정 기준치로 제한해야 이미지가 겹치지 않게 출력됩니다.

참고로, 마지막 txt 파일은 이미지 파일이 아닌 파일은 리스트에 출력하지 않는 것을 확인하기 위해 일부러 넣어두었습니다.

리스트를 출력할 스프레드시트를 준비

‘이미지 리스트’라는 이름의 스프레드시트를 작성합니다.

A열에는 파일 이름, B열에는 이미지를 출력할 예정이니, 각 열을 미리 넉넉한 너비로 조절합니다. B열은 이미지의 최대 너비보다 조금 넓게 잡는 것이 좋습니다.

앱스 스크립트를 작성

도구 > 스크립트 편집기 메뉴를 클릭합니다.

스크립트 편집 화면에 아래 코드를 넣고 저장합니다.

function myFunction() {
 
 var sheet = SpreadsheetApp.getActiveSheet();
 sheet.clear();
 
 // Specify the folder by Folder ID
 // 접근할 구글 드라이브의 Folder ID를 입력한다.
 var dafolderId = "<이미지 파일을 넣어둔 폴더의 ID>";
 var daforder = DriveApp.getFolderById(dafolderId);
 var dafiles = daforder.getFiles();
 
 var srow = 0;
 // Get file
 while(dafiles.hasNext()){
  var dafile = dafiles.next();
  var file_name = dafile.getName();
 
  // file check: only image files.
  // 확장자가 gif, jpg, png인 파일만 출력한다.
  var ext = file_name.slice(file_name.lastIndexOf(".") + 1).toLowerCase();
  if (!(ext == "gif" || ext == "jpg" || ext == "png")) {
   continue;
  }
 
  srow = srow + 1;
  // Insert file name at (srow, 1)
  // (srow, 1)위치에 파일이름을 출력 
  sheet.getRange(srow, 1).setValue(file_name);
  // Row의 높이를 이미지 최대 높이(샘플의 경우 65px)보다 조금 더 크게 조정
  sheet.setRowHeight(srow, 80); 
 
  // Insert image at(srow, 2)
  // (srow, 2)위치에 이미지를 출력 
  if(dafile != null){
   sheet.insertImage(dafile.getBlob(), 2, srow)
  } 
 }
}

프로젝트 이름은 get_image_list라고 저장합니다.

여기서, 스크립트 중에 편집해야 하는 곳이 하나 있습니다.

 var dafolderId = "<이미지 파일을 넣어둔 폴더의 ID>";

상기 코드 중 <이미지 파일을 넣어둔 폴더의 ID> 에는 구글 드라이브에 이미지 파일을 넣어둔 폴더의 ID를 넣어주어야 합니다. 폴더 ID는 구글 드라이브의 url의 끝부분을 복사해오시면 됩니다.

샘플의 폴더 ID는 1LspAy348DXuekMU0WFrjEfpMAQENPMjY 입니다.

이제 ▶(실행)버튼을 클릭합니다.

처음 실행하실 때, 권한 요청을 해옵니다. 실행을 허용해주세요. (자세한 스샷은 생략합니다.)

 

실행 결과

스크립트를 실행하면 아래와 같이 A열에 파일 이름, B열에는 이미지 파일이 출력됩니다.

스크립트에서 파일 확장자가 gif, jpg, png인 이미지 파일만 출력하게 만들어 두었기 때문에 일부러 넣어둔 txt 파일은 리스트에 출력되지 않았습니다.

실제 활용

스크립트로 만들어진 리스트에 헤더를 추가하고,
C열에 이미지에 표시되어 있는 텍스트 (샘플에서는 한국어),
D열에 번역된 텍스트 (샘플에서는 영어)를 입력합니다.

이렇게 완성된 리스트를 디자이너에게 넘겨주면 이미지 작업이 한층 수월해지겠지요?

※ 주의사항: 이 스크립트를 한번 실행한 후에 다시 실행하는 경우, 기존의 시트를 삭제하고 새로운 시트를 준비해주세요.  코드의 sheet.clear(); 으로 텍스트는 지워지지만, 한번 삽입된 이미지는 지워지지 않습니다.