ChatGPT 활용하여 홈페이지 만들기

 

AI 챗봇을 활용한 '입코딩(Mouth Code)' 방식

1. ChatGPT 활용 HTML/CSS 코드 생성

준비물

• 사이트 화면 캡처 이미지 (예: PNG, JPG)
• ChatGPT 또는 Claude 계정
• 간단한 명령어 (Prompt)

사용 방법

1. 원하는 웹사이트나 앱의 UI 화면을 캡처해 이미지로 저장
2. 이미지를 업로드하고 다음과 같이 프롬프트 작성

   이 이미지를 참고해서 HTML과 CSS로 똑같이 구성해줘. 반응형으로 만들어줘.

3. 코드를 복사해서 HTML 파일로 저장하고 브라우저에서 확인

2. Google Sheets 연동 및 실습자료를 카드 형태로 출력

목표

Google Sheets의 데이터를 카드 형태로 웹사이트에 표시하기

방법

1. Google Sheets에 데이터 입력
2. 파일 공유 설정에서 "링크 있는 모든 사용자에게 보기 가능" 설정
3. 아래 URL 패턴 사용

   https://opensheet.elk.sh/스프레드시트ID/시트이름

4. HTML/JS 코드 작성

   <div id="cards"></div>
   <script>
   fetch("https://opensheet.elk.sh/1abcD...xyz/Sheet1")
     .then(res => res.json())
     .then(data => {
       const container = document.getElementById("cards");
       data.forEach(item => {
         const card = document.createElement("div");
         card.innerHTML = `
           <div style="border:1px solid #ccc; padding:10px; margin:10px;">
             <h3>${item.이름}</h3>
             <p>나이: ${item.나이}</p>
             <p>${item.설명}</p>
           </div>
         `;
         container.appendChild(card);
       });
     });
   </script>
   

3. App Script 활용하여 DB 연결 및 자동화

목표

Google Sheets를 백엔드 DB처럼 사용하고 자동화된 기능 만들기

방법

1. Google Sheets > 확장 프로그램 > Apps Script 열기
2. 스크립트 작성

   function doPost(e) {
     const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
     const data = JSON.parse(e.postData.contents);
     sheet.appendRow([data.name, data.age, data.memo]);
     return ContentService.createTextOutput("Success");
   }

3. 웹앱으로 배포 > 유형: 웹 앱 > "누구나 접근 가능" 설정 후 URL 복사
4. 웹에서 POST 요청 보내기

   fetch("https://script.google.com/macros/s/AKfycb.../exec", {
     method: "POST",
     body: JSON.stringify({
       name: "홍길동",
       age: 24,
       memo: "테스트 메모"
     }),
     headers: {
       "Content-Type": "application/json"
     }
   })
   .then(res => res.text())
   .then(data => console.log(data));

전체 워크플로우 요약

1. 이미지나 말로 설명 → ChatGPT/Claude가 HTML/CSS 생성
2. Google Sheets 데이터를 카드 형태로 시각화
3. App Script로 자동화 및 DB처럼 활용
4. 실시간으로 수정하며 입코딩 진행