구글 스크립트 웹 앱 배포 및 워드프레스 완벽 연동 가이드
서론: 완성된 툴을 내 웹사이트에 띄우기 백엔드 로직과 프론트엔드 UI가 모두 완성되었으니, 이제 이 툴을 내 워드프레스 사이트 방문자들이 자유롭게 쓸 수 있도록 올려야 합니다. 구글 앱스 스크립트(GAS)는 doGet() 함수를 통해 HTML을 웹페이지(웹 앱) 형태로 배포할 수 있는 훌륭한 기능을 제공합니다.
트러블슈팅 1: 외부 사이트 삽입 차단(X-Frame-Options) 해제 보안상의 이유로 구글 스크립트의 결과물은 다른 사이트의 <iframe> 안에 들어가는 것을 기본적으로 거부합니다. 이를 워드프레스에 문제없이 띄우려면 백엔드 초기화 함수에서 ALLOWALL 권한을 부여해야 합니다.
💡 핵심 구현 코드 (권한 허용 및 배포 함수)
JavaScript
function doGet() {
return HtmlService.createTemplateFromFile(‘Index’)
.evaluate()
.setTitle(‘주식 탈출을 위한 기울기 분석기’)
// 타 사이트(워드프레스 등) iframe 삽입을 허용하는 핵심 설정
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
return HtmlService.createTemplateFromFile(‘Index’)
.evaluate()
.setTitle(‘주식 탈출을 위한 기울기 분석기’)
// 타 사이트(워드프레스 등) iframe 삽입을 허용하는 핵심 설정
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
트러블슈팅 2: 워드프레스 클래식 에디터에 안전하게 삽입하기 구글에서 발급받은 ‘웹 앱 URL’을 워드프레스에 넣을 때, 구형 테마나 클래식 에디터를 쓴다면 시각적인 에디터 화면(비주얼 탭)에 그대로 코드를 넣으면 글씨로만 출력됩니다. 반드시 [텍스트] 또는 [코드] 탭으로 전환한 뒤 아래의 <iframe> 태그를 삽입해야 훌륭한 UI가 잘리지 않고 출력됩니다.
HTML
<iframe src="여기에_구글_웹앱_주소_입력"
width="100%"
height="1150px"
style="border: none; border-radius: 12px;"
allowfullscreen>
</iframe>
이로써 단단한 설계부터 워드프레스 배포까지, 세상에 하나뿐인 나만의 퀀트 보조지표 툴 구축이 완료되었습니다!
구축된건 다음 페이지에 업로드 됩니다!
