구글시트 연동 가이드 | KSmate 안전보건팀

무엇이 달라지나
지금은 "화면 수정 → 내려받기 → 파일 교체"가 필요합니다. 이 연동을 하면 구글시트에 입력하기만 하면 사이트가 자동으로 그 데이터를 보여줍니다. 팀이 익숙한 엑셀(시트) 방식이라 배우기 쉽고, 여러 명이 동시에 관리할 수 있습니다.

전체 그림

[구글시트]  ──(Apps Script API)──▶  [안전보건 포털]
 팀이 시트에서 입력·수정          사이트가 자동으로 읽어 표시·보고서 생성

1단계 · 구글시트 만들기 (양식 파일 사용 — 가장 쉬움)

제공된 KSmate_안전보건_데이터시트.xlsx를 구글 드라이브에 업로드 → 더블클릭 → 구글 스프레드시트로 열기. (탭·열·현재 데이터가 이미 들어 있어, 아래 표대로 만들 필요가 없습니다.)
열리면 파일 → Google Sheets로 저장(또는 자동 변환). 탭 이름(compliance 등)과 첫 줄은 그대로 두세요.

양식 파일 없이 직접 만들려면, 아래 표대로 탭을 만들고 첫 줄에 열 이름을 입력하면 됩니다. (양식 파일을 쓰면 이 과정 불필요)

탭 이름	첫 줄(열 이름) — 그대로 입력
`compliance`	id · 명칭 · 유형 · 주기 · 최근일 · 차기예정일 · 근거 · 담당 · 비고 · 작성일
`accidents`	id · 발생일시 · 발생시각 · 장소 · 사업장 · 본부 · 사고자 · 연령대 · 직무 · 작업내용 · 사고경위 · 재해발생형태 · 상해내용 · 상해정도 · 구분 · 즉시조치 · 추가확인사항 · 재발방지대책 · 휴업일수 · 산재신청여부 · 사망여부 · 보고상태 · 작성일
`ra`	id · 사업장 · 평가일 · 작업 · 유해위험요인 · 재해유형 · 현재안전보건조치 · 빈도 · 강도 · 위험성 · 등급 · 개선대책 · 개선후위험성 · 담당자 · 개선예정일 · 완료여부 · 근거 · 작성일
`training`	id · 대상 · 부서 · 직무 · 교육과정명 · 교육유형 · 요구시간 · 이수시간 · 이수일 · 이수여부 · 차기예정일 · 증빙 · 비고 · 작성일
`events`	cat · title · start · kind · dept · mgr · role · tel · addr · hc · region · tag

💡 빠른 방법: 각 관리 화면에서 [내려받기]한 JSON을 열어 항목을 보면 열 이름을 그대로 옮길 수 있습니다. 날짜 열(차기예정일·최근일 등)은 시트에서 서식 → yyyy-mm-dd로 맞추세요 (확인 필요: 시트 지역설정).

2단계 · Apps Script 붙여넣기

시트 상단 확장 프로그램 → Apps Script 클릭
기본 코드를 지우고 아래 코드를 전부 붙여넣기 → 저장(💾)

// ── KSmate 안전보건 데이터 API ──
function doGet(e){
  var tab = (e.parameter.tab || '').trim();
  var sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(tab);
  if(!sh) return out([]);
  var vals = sh.getDataRange().getDisplayValues();
  if(vals.length < 2) return out([]);
  var head = vals.shift();
  var rows = vals.filter(function(r){ return r.join('') !== ''; }).map(function(r){
    var o = {}; head.forEach(function(h, i){ if(h) o[h] = r[i]; }); return o;
  });
  return out(rows);
}
function doPost(e){                       // (선택) 사이트에서 저장까지 하고 싶을 때
  var body = JSON.parse(e.postData.contents);   // { tab:'compliance', rows:[...] }
  var sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(body.tab);
  if(!sh) return out({ ok:false });
  var rows = body.rows || [];
  var head = rows.length ? Object.keys(rows[0]) : [];
  sh.clearContents();
  if(head.length){
    sh.appendRow(head);
    rows.forEach(function(r){ sh.appendRow(head.map(function(h){ return r[h]; })); });
  }
  return out({ ok:true, count: rows.length });
}
function out(obj){
  return ContentService.createTextOutput(JSON.stringify(obj))
         .setMimeType(ContentService.MimeType.JSON);
}

3단계 · 웹앱으로 배포 → 주소 복사

우측 상단 배포 → 새 배포
유형 웹 앱 선택
실행 계정 나 · 액세스 권한 모든 사용자(Anyone) 선택 → 배포
표시되는 웹 앱 URL을 복사 (예: https://script.google.com/macros/s/AKfy.../exec)

확인 필요 — 최초 배포 시 구글 권한 승인 창이 뜹니다(본인 계정 승인). 회사 보안정책상 "모든 사용자" 공개가 가능한지 확인하세요. 민감정보는 시트에 넣지 마세요(부서·직무 요약).

4단계 · 사이트에 주소 넣기 (한 줄)

사이트 폴더의 data/_localdata.js 파일을 메모장으로 열기
맨 위 이 줄을 찾아, 따옴표 안에 복사한 주소를 붙여넣기:
```
window.KS_DATA_URL = "여기에_웹앱_URL_붙여넣기";
```
저장 → 사이트를 다시 배포(또는 Netlify에 파일 교체). 끝.

이제 사이트의 사고·위험성평가·교육·인증·일정 화면은 구글시트에서 데이터를 읽습니다. 시트에서 값을 고치고 사이트를 새로고침하면 바로 반영됩니다. (docs-index 등 검색용 정적자료는 그대로 사이트 파일 사용)

이제 이렇게 씁니다

하고 싶은 일	방법
데이터 입력·수정	구글시트에서 직접 입력 (다운로드·파일교체 없음)
사이트에서 보기	화면 새로고침 → 시트 최신값 표시
보고서·TBM 생성	기존과 동일 (시트 데이터로 자동 생성)

참고 — 사이트 화면의 [화면에 적용]은 여전히 "화면 임시 반영"입니다. 실제 데이터는 시트에서 관리하세요. 사이트 화면에서 저장까지 하려면 위 doPost를 이용해 각 화면 저장 버튼을 연결해야 하며, 이 작업은 원하시면 별도로 적용해 드립니다. 확인 필요: 구글 웹앱은 브라우저 요청 시 리다이렉트/CORS 이슈가 있을 수 있어, 첫 연동 후 실제 표시 여부를 테스트하세요.