HtmlService 앱은 껍데기 먼저: 비동기 로드와 모바일 뒤로가기

HtmlService 템플릿에서 데이터를 통째로 불러오지 마라. 스크립틀릿(<?= ?>)에서 오래 걸리는 로드를 하면 사용자는 빈 화면을 보며 기다린다. 껍데기를 먼저 그리고, 데이터는 google.script.run으로 비동기로 가져온다.

왜 중요한가

모바일에서 첫 화면이 2~3초 늦으면 사용자는 “안 켜진다”고 느낀다. 또 google.script.run은 실패할 수 있는데, 핸들러를 안 붙이면 실패가 조용히 삼켜져 화면이 멈춘 것처럼 보인다.

모든 호출에 실패 핸들러: Promise 래퍼로

function gasRun(fn, ...args) {
  return new Promise((resolve, reject) => {
    google.script.run
      .withSuccessHandler(resolve)
      .withFailureHandler(reject)   // 강제: 실패를 삼키지 마라
      [fn](...args);
  });
}

// 사용
try {
  const data = await gasRun("getItems", filter);
  render(data);
} catch (err) {
  showError(err); // dead overlay 금지, 재시도 경로 제공
}

raw google.script.run 직접 호출은 리뷰에서 막고, 위 래퍼만 쓰게 한다.

모바일 뒤로가기

멀티 화면 앱은 폰의 뒤로가기 버튼을 지원해야 한다. google.script.history로 상태를 push/replace 하면, 화면 전환이 브라우저 히스토리에 들어가 뒤로가기가 자연스럽게 동작한다.

잊지 말 것

• <base target="_top">: iframe 안에서 링크가 부모를 바꾸게.
• <meta viewport> + doGet().addMetaTag('viewport', ...) 둘 다: 한쪽만으론 모바일 폭이 깨진다.
• 자바스크립트는 문서 하단에서 로드해 첫 렌더를 막지 않는다.

핵심 한 줄: 껍데기 먼저 → 비동기 로드(실패 핸들러 필수) → history로 뒤로가기.