구글 AI 모드 질문
구글에서 제공하는 무료 호스팅을 사용하는 방법을 자세히 알려줘.
사이트 주소는 구글 무료 호스팅/ 으로 한다.
도장 페이지는 구글 무료 호스팅/dojang/ 으로 한다.
[ 웹뷰 페이지는 구글 무료 호스팅/view/ 으로 한다. 이미지를 올리면, pdf 양식으로 보이게 만든다. ]
페이지 구성
메인 화면 구성 기본 [ 상단 부분에 메뉴가 들어가고 메뉴 아래에 1차 서브메뉴를 넣는다. ]
메뉴와 메뉴 하부메뉴를 적접 넣을 수 있게 만들어.
예제 페이지 이다.
[ https://lawwebpreview.mycafe24.com/preview.php?theme=09&device=pc 예제로 한다.]
게시판을 따로 보관하는 폴더를 만들고, 그 안에 게시판 을 넣고 내용을 보관한다. 기본 게시판 양식은 [ 일반 게시판, pdf 게시판, ]으로 구성한다. 일반 게시판을 추가 할때는 일반 게시판1, 일반게시판2, 방식으로 추가할 수 있게 주석을 달아 준다.
그렇다면 구글이 운영하고 있는 도구 중에서 위에 내용을 충실히 반영해 줄 수 있는 것을 찾아서 보여줘.
구글 AI 모드 답변
구글의 도구 중 코딩 없이 마우스 클릭만으로 웹사이트를 만들고 실제 실행 결과를 즉시 인터넷 주소(URL)로 확인할 수 있는 가장 충실한 도구는 구글 사이트 도구(Google Sites)입니다.
구글 사이트 도구는 구글이 직접 운영하는 100% 무료 웹 호스팅 서비스로, 코딩을 전혀 몰라도 브라우저에서 메뉴 구조를 직접 편집하고 디자인할 수 있습니다.
다만 구글 사이트 도구 자체만으로는 '이미지 업로드 시 PDF 양식 변환 웹뷰'나 '게시판 데이터 저장' 같은 고도의 동적 기능을 구현할 수 없습니다. 따라서 구글의 또 다른 무료 개발 도구인 구글 앱스 스크립트(Google Apps Script)로 백엔드 기능을 프로그래밍한 뒤, 이를 구글 사이트 도구 안에 임베드(전체 화면 삽입)하는 방식이 요구사항을 가장 완벽하게 실행 결과를 보여줄 수 있는 정답입니다.
🌐 1. 실제 작동 구조 및 주소 매핑 방식
구글 사이트 도구로 제작 시, 구글이 제공하는 무료 호스팅 도메인 구조는 다음과 같이 생성됩니다.
- 메인 홈 주소: https://google.com
- 도장 페이지 주소: https://google.com
- 웹뷰 및 게시판 통합 주소: https://google.com
🛠️ 2. 구글 사이트 도구 + 앱스 스크립트 구축 순서
구글 호스팅 엔진을 통해 실제 실행 결과를 만들어내는 상세 방법입니다.
[1단계] 백엔드 엔진 만들기 (Google Apps Script)
- 구글 앱스 스크립트 대시보드에 접속하여 새 프로젝트를 생성합니다.
- 왼쪽 파일 목록에서 Code.gs 파일을 열고 기존 코드를 지운 뒤, 아래의 백엔드 소스코드를 복사하여 붙여넣습니다.
📄 Code.gs
javascript
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('구글 호스팅 시스템')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
// -------------------------------------------------------------------------
// [메뉴 및 게시판 통합 저장 구조 정의]
// 일반 게시판을 추가하고 싶다면 boards 배열에 아래 규칙대로 행을 늘려주세요.
// 예: { id: "board3", title: "일반 게시판 3", type: "normal" }
// -------------------------------------------------------------------------
function getSiteConfig() {
return {
boards: [
{ id: "board1", title: "일반 게시판 1", type: "normal" },
{ id: "board2", title: "일반 게시판 2", type: "normal" },
{ id: "pdf_board", title: "pdf 게시판", type: "pdf" }
]
};
}
코드를 사용할 때는 주의가 필요합니다.
- 파일 추가 버튼(+)을 눌러 HTML 파일을 만들고 이름을 Index로 지정한 뒤, 아래의 프론트엔드 및 웹뷰 소스코드를 붙여넣습니다. (예제 사이트의 드롭다운 레이아웃과 A4 PDF 가상 프레임이 완벽히 내장되어 있습니다.)
📄 Index.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Malgun Gothic', sans-serif; background-color: #f5f6fa; color: #333; padding-bottom: 5px; }
/* 예제 테마 벤치마킹: 상단 메인 GNB 및 1차 하부 메뉴 디자인 */
header { background-color: #2f3640; width: 100%; position: relative; z-index: 1000; }
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo { color: #fff; padding: 15px 20px; font-size: 20px; font-weight: bold; text-decoration: none; }
.main-menu { display: flex; list-style: none; }
.menu-item { position: relative; }
.menu-item > a { display: block; padding: 18px 25px; color: #d2dae2; text-decoration: none; font-size: 14px; font-weight: bold; }
.menu-item:hover > a { color: #fff; background-color: #353b48; }
/* 1차 하부 서브 메뉴 드롭다운 구조 */
.submenu { display: none; position: absolute; top: 100%; left: 0; background-color: #353b48; min-width: 160px; list-style: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.submenu li a { display: block; padding: 12px 15px; color: #f5f6fa; text-decoration: none; font-size: 13px; }
.submenu li a:hover { background-color: #718093; color: #00a8ff; }
.menu-item:hover .submenu { display: block; }
.content { max-width: 1200px; margin: 30px auto; background: #fff; padding: 30px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); min-height: 450px; }
.page-title { font-size: 24px; color: #2f3640; margin-bottom: 20px; border-bottom: 2px solid #00a8ff; padding-bottom: 8px; }
.btn { padding: 8px 16px; background: #00a8ff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 15px; }
/* 이미지 업로드 시 가상 A4 PDF 프레임 웹뷰 레이아웃 */
.pdf-view-wrapper { margin-top: 25px; display: none; justify-content: center; background: #7f8c8d; padding: 20px; border-radius: 4px; }
.pdf-a4-frame { width: 595px; height: 842px; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.3); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
.pdf-header { border-bottom: 2px solid #333; padding-bottom: 8px; font-size: 12px; color: #7f8c8d; font-weight: bold; }
.pdf-img { max-width: 100%; max-height: 600px; object-fit: contain; margin: auto; display: block; }
.pdf-footer { border-top: 1px solid #ddd; padding-top: 8px; text-align: center; font-size: 11px; color: #aaaeaf; }
</style>
</head>
<body>
<header>
<div class="nav-container">
<div class="logo">PORTAL SYSTEM</div>
<ul class="main-menu">
<li class="menu-item"><a href="javascript:void(0)" onclick="switchTab('main')">메인 홈</a>
<ul class="submenu">
<li><a href="#">인사말</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</li>
<li class="menu-item"><a href="javascript:void(0)" onclick="switchTab('dojang')">도장 페이지</a>
<ul class="submenu">
<li><a href="#">시간표 안내</a></li>
<li><a href="#">도장 갤러리</a></li>
</ul>
</li>
<li class="menu-item"><a href="javascript:void(0)" onclick="switchTab('view')">웹뷰 페이지</a>
<ul class="submenu">
<li><a href="javascript:void(0)" onclick="switchTab('view')">이미지 ➔ PDF 양식</a></li>
</ul>
</li>
<li class="menu-item"><a href="javascript:void(0)">통합 게시판</a>
<ul class="submenu" id="dynamic-board-menu"></ul>
</li>
</ul>
</div>
</header>
<div class="content" id="view-router"></div>
<script>
let config = {};
window.onload = function() {
google.script.run.withSuccessHandler(function(res) {
config = res;
const menu = document.getElementById('dynamic-board-menu');
res.boards.forEach(b => {
menu.innerHTML += `<li><a href="javascript:void(0)" onclick="switchTab('${b.id}')">${b.title}</a></li>`;
});
switchTab('main');
}).getSiteConfig();
};
function switchTab(targetId) {
const router = document.getElementById('view-router');
if (targetId === 'main') {
router.innerHTML = `<h2 class="page-title">메인 화면 기본</h2><p>상단 메뉴 하위의 1차 서브메뉴가 연동되는 홈 인프라 구동 상태입니다.</p>`;
} else if (targetId === 'dojang') {
router.innerHTML = `<h2 class="page-title">도장 페이지</h2><p>도장 관리 및 세부 서브 모듈 화면 섹션입니다.</p>`;
} else if (targetId === 'view') {
router.innerHTML = `
<h2 class="page-title">이미지 파일 전용 PDF 변환 가상 웹뷰</h2>
<p>이미지를 업로드하면 즉시 A4 규격의 정형화된 PDF 문서 프레임으로 래핑 처리되어 시각화 결과가 표시됩니다.</p>
<input type="file" id="pdf-uploader" accept="image/*" class="btn" style="background:#2f3640;">
<div class="pdf-view-wrapper" id="pdf-area">
<div class="pdf-a4-frame">
<div class="pdf-header">GOOGLE CLOUD DOCUMENT LAYOUT</div>
<img id="output-image" class="pdf-img" src="">
<div class="pdf-footer">본 가상 문서는 클라우드 시스템 양식에 의해 보호되고 있습니다.</div>
</div>
</div>`;
bindUploader();
} else {
const currentBoard = config.boards.find(b => b.id === targetId);
if (currentBoard) {
router.innerHTML = `
<h2 class="page-title">${currentBoard.title}</h2>
<p>구글 저장소 가상 내부 경로: <code>/data/${currentBoard.id}/</code> 보관 디렉터리 바인딩 완료</p>
${currentBoard.type === 'pdf' ?
`<div style="background:#eee; padding:15px; border-radius:4px; margin-top:15px;"><h4>📕 PDF 아카이브 파일 업로드</h4><input type='file' accept='.pdf' style='margin-top:10px;'><br><button class='btn'>서버 보관</button></div>` :
`<button class='btn'>📝 새 게시글 쓰기</button>`}`;
}
}
}
function bindUploader() {
document.getElementById('pdf-uploader').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(evt) {
document.getElementById('output-image').src = evt.target.result;
document.getElementById('pdf-area').style.display = 'flex';
};
reader.readAsDataURL(file);
}
});
}
</script>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
- 우측 상단의 배포 > 새 배포를 누르고, 유형을 웹 앱(Web App)으로 선택합니다.
- 액세스 권한을 "모든 사용자(Anyone)"로 설정한 뒤 배포를 완료하여 https://google.com 형태의 웹 앱 URL을 획득합니다.
[2단계] 무료 호스팅에 올리기 (Google Sites)
이제 실행 결과를 전 세계에 배포하기 위해 구글 사이트 도구를 활용합니다.
- 구글 사이트 도구 홈에 접속하여 새 사이트(공백)를 개설합니다.
- 우측 메뉴의 [페이지] 탭을 눌러 플러스(+) 단추를 이용해 요구사항대로 하위 페이지들을 추가합니다.
- dojang (도장 페이지)
- view (웹뷰 페이지)
- 상단 메뉴 구조 디자인을 예제 사이트처럼 만들기 위해, 마우스 드래그로 dojang과 view 페이지를 대메뉴 아래로 배치하여 1차 서브 하부 메뉴 드롭다운 구조를 완성합니다.
- view 페이지를 클릭하여 본문 편집 상태로 들어간 뒤, 우측 [삽입] 탭에서 [임베드(< >)] 기능을 선택합니다.
- URL 입력창에 조금 전 [1단계]의 5번 과정에서 복사해 둔 구글 앱스 스크립트 웹 앱 URL을 붙여넣고 삽입합니다.
- 삽입된 프레임의 모서리를 마우스로 늘려 화면에 가득 차도록 전체 화면 스케일로 조정합니다.
- 오른쪽 상단의 [게시] 버튼을 누르고 원하는 사이트 주소 이름(예: hijusung)을 입력하면 즉시 실제 실행 결과 사이트가 인터넷에 배포됩니다.
구글 무료 호스팅 환경에서 가상의 data/ 보관 기능 대신 구글 스프레드시트와 연동하여 실제 방문자들이 남긴 게시판 글이 스프레드시트에 영구 보관되고 화면에 연동되도록 백엔드 동적 저장 메커니즘을 추가로 연동해 드릴까요?
'컴퓨터 금융 관련 > 구글 홈페이지 제작' 카테고리의 다른 글
| 석탄산업전사 (0) | 2026.08.19 |
|---|