랜딩페이지 배포를 통해 마케팅 리드 생성(채용페이지 TEST버젼)

소개
기업의 소개, 제품 등을 소개하는 원페이지 랜딩페이지를 만들고 고객정보를 수집할 수 있는 구글 폼을 넣어 구글쉬트에 고객정보를 수집함고 동시에 고객에게 반응하는 메일 및 발송하여 고객의 기억속에 잊혀지지 않는 각인을 시켜 마케팅 리드를 생성하고자 함.

이번에는 반응형 채용페이지로 TEST함

개요
이 번 사례는 각 산출물의 충실도 보다
작성--> 배포-->피드백--> 고개 정보 수집이라는 프로세스를 경험하고자 함

진행 방법

  1. 클로드로 랜딩페이지 HTML로 작성
    단점은 이미지를 직접 삽입하는 등의 작성은 안됨

  2. 랜딩페이지에 구글 폼 삽입

  3. 구글폼과 연동된 구글쉬트 생성

  4. 고객 반응형 앱스립트 작성함

    1) ChatGPT와 연동하여 작성자의 이름, 지원동기를 소재로 따뜻한 반송메일 작성
    2) 반송메일을 확인후 발송

  5. GitHub에 코드 게시 https://github.com/

  6. https://www.netlify.com/를 를 통해 웹에 배포

진행 상세 프로세스

  1. 먼저 claude에 예시 페이지를 주고 원하는 커스터 마이징할 내용을 프롬프트 하고 작성 요청

  1. 클로드가 기획안을 만들어줌

    이 안을 수정하며 우선 거칠게 마나 랜딩페이지 완성
    https://claude.ai/share/8be55884-40c6-4b7e-a7f1-e6d438b4d1a2

  2. 구글 폼 작성후 랜딩페이지에 삽입

  1. 구글폼 결과페이지 구글시트 작성

  2. 구글 시트

  3. 앱 스크립트 작성
    1) 비슷한 유형의 다른사람이 작성한 앱스립트를 복사하여 분석을 통해 프롬프트 방향 설정

2) 이렇게 분석한 것을 토대로 기본적인 프롬프트안을 작성(앱스크립트 난생 처음임)
3) 코드는 ChatGPT- o1이라는 말을 들어 o1으로 진행

한국 문자 메시지의 스크린 샷

4) 코드예제

/*************************************************************
 * 시트 구조(예시)
 *  A열: 타임스탬프(폼 자동)
 *  B열: 이름
 *  C열: 이메일
 *  D열: 전화번호
 *  E열: 지원동기
 *  F열: ChatGPT 생성 메시지
 *  G열: 체크박스(체크 시 이메일 발송)
 *  H열: 발송 결과
 *
 * 시트 이름: "설문지 응답 시트1"
 * 기존 데이터(과거 행들도) 자동 생성, 신규 폼응답은 onFormSubmit로 자동 생성
 *************************************************************/

/**
 * 1) 고정 발신 이메일 (스크립트 수정으로만 변경)
 * 2) ChatGPT API 키 (실제 사용 시 반드시 유효한 값으로 교체)
 */
const FROM_EMAIL = "[email protected]";
const OPENAI_API_KEY = "여기에 api key";

/**
 * 스프레드시트를 열 때마다 실행된다.
 * 1) 기존 행들(2행~마지막)에 대해 ChatGPT 메시지가 없는 경우 자동생성
 * 2) G열에 체크박스가 없으면 생성
 */
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu("메일 설정")
    .addItem("기존 데이터 메시지/체크박스 생성(수동)", "updateExistingData")  
    .addItem("트리거 확인: onFormSubmit / onEdit", "showInfo")
    .addToUi();

  // 스크립트가 실행되는 시점에 자동으로 기존 데이터 업데이트
  // => 만약 시트 데이터가 많아 시간이 오래 걸릴 경우,
  //    아래 주석을 해제하지 않고, 메뉴에서 직접 "기존 데이터 메시지/체크박스 생성"을 실행하도록 조정해도 됨.
  updateExistingData();
}


/**
 * 기존 데이터(2행~마지막행)에 대해:
 * - F열(메시지)이 비어 있으면 ChatGPT 호출하여 메시지 생성
 * - G열 체크박스가 없으면 생성(전체 범위)
 */
function updateExistingData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("설문지 응답 시트1");
  const lastRow = sheet.getLastRow();
  if (lastRow < 2) {
    SpreadsheetApp.getUi().alert("처리할 기존 데이터가 없습니다.");
    return;
  }

  // 1) G열 전체 체크박스 설정 (2행부터~)
  const checkboxRange = sheet.getRange(2, 7, lastRow - 1, 1);
  const rule = SpreadsheetApp.newDataValidation().requireCheckbox().build();
  checkboxRange.setDataValidation(rule);

  // 2) F열(메시지) 없는 행에 대해서만 ChatGPT 생성
  for (let row = 2; row <= lastRow; row++) {
    const name = sheet.getRange(row, 2).getValue();
    const email = sheet.getRange(row, 3).getValue();
    const phone = sheet.getRange(row, 4).getValue();
    const motivation = sheet.getRange(row, 5).getValue();
    const currentMessage = sheet.getRange(row, 6).getValue();

    // 이름/이메일/지원동기 중 하나라도 없으면 스킵
    if (!name || !email || !motivation) {
      continue;
    }

    // 이미 메시지가 있으면 덮어쓰지 않음
    if (currentMessage) {
      continue;
    }

    generateChatGptMessage(sheet, row, name, phone, motivation);
  }

  SpreadsheetApp.getUi().alert("기존 데이터에 대한 ChatGPT 메시지 생성 및 체크박스 설정이 완료되었습니다.");
}


/**
 * onFormSubmit(e):
 * - 구글 폼을 통해 새로운 응답이 들어왔을 때 자동으로 실행됨.
 * - 새로 추가된 행에 대해 ChatGPT 메시지를 생성, 체크박스 생성
 */
function onFormSubmit(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("설문지 응답 시트1");
  const row = sheet.getLastRow(); // 신규 응답은 항상 마지막 행

  const name = sheet.getRange(row, 2).getValue();
  const email = sheet.getRange(row, 3).getValue();
  const phone = sheet.getRange(row, 4).getValue();
  const motivation = sheet.getRange(row, 5).getValue();

  // 필수값 없으면 스킵
  if (!name || !email || !motivation) {
    return;
  }

  // 메시지 생성
  generateChatGptMessage(sheet, row, name, phone, motivation);

  // 체크박스 생성
  const checkboxCell = sheet.getRange(row, 7);
  const rule = SpreadsheetApp.newDataValidation().requireCheckbox().build();
  checkboxCell.setDataValidation(rule);
}


/**
 * onEdit(e):
 * - 시트 편집 시 실행
 * - G열을 체크하면 해당 행의 이메일(C열)로 메시지(F열) 발송
 */
function onEdit(e) {
  const sheet = e.range.getSheet();
  if (sheet.getName() !== "설문지 응답 시트1") return;

  const row = e.range.getRow();
  const col = e.range.getColumn();

  // G열 체크박스가 TRUE인지 확인
  if (col === 7 && row >= 2 && e.range.getValue() === true) {
    sendMail(row);
  }
}


/**
 * 주어진 row에 대해 ChatGPT 메시지(F열)를 생성.
 * 전화번호(D열)를 포함한 안내 문구까지 붙인다.
 */
function generateChatGptMessage(sheet, row, name, phone, motivation) {
  const apiUrl = "https://api.openai.com/v1/chat/completions";

  // ChatGPT에 전달할 메시지
  const messages = [
    {
      role: "system",
      content: "당신은 친절한 작가입니다. 사용자에게 도움이 되는 에피소드를 짧고 자연스럽게 작성해 주세요."
    },
    {
      role: "user",
      content:
        `다음 정보를 바탕으로 간단하고 따뜻한 에피소드를 작성해주세요.
         사람 이름: ${name}
         지원동기: ${motivation}
         - ${name}님을 존중해서 불러주고, 밝고 친절한 어투로 작성해주세요.
         - 300자 이내로 작성해주세요.`
    }
  ];

  const options = {
    method: "post",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + OPENAI_API_KEY,
    },
    payload: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: messages,
      max_tokens: 300,
      temperature: 0.7
    }),
    muteHttpExceptions: true
  };

  try {
    const response = UrlFetchApp.fetch(apiUrl, options);
    const result = JSON.parse(response.getContentText());

    if (result.error) {
      const errMsg = `ChatGPT 생성 오류: ${result.error.message}`;
      sheet.getRange(row, 6).setValue(errMsg);
      Logger.log(errMsg);
    } else {
      // 정상 응답
      let content = result.choices[0].message.content.trim();

      // 전화번호 안내 문구 덧붙이기
      content += "\n\n(당사가 추가 문의할 사항 있으면 ";
      if (phone) {
        content += `전화번호(${phone})로 직접 전화 드릴 수 있음을 `;
      } else {
        content += "작성해 주신 전화번호로 직접 전화 드릴 수 있음을 ";
      }
      content += "양해해 주시기 바랍니다.)";

      // 메시지(F열)에 저장
      sheet.getRange(row, 6).setValue(content);
    }
  } catch (error) {
    const errMsg = `ChatGPT API 호출 오류: ${error}`;
    sheet.getRange(row, 6).setValue(errMsg);
    Logger.log(errMsg);
  }
}


/**
 * 해당 row의 C열(이메일)로 F열(메시지)을 발송,
 * 성공 시 H열=발송완료, 실패 시 오류 메시지+체크박스 해제.
 */
function sendMail(row) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("설문지 응답 시트1");
  const recipient = sheet.getRange(row, 3).getValue();
  const name = sheet.getRange(row, 2).getValue();
  const message = sheet.getRange(row, 6).getValue();

  if (!recipient || !message) {
    sheet.getRange(row, 8).setValue("이메일 또는 메시지 누락");
    // 체크박스 해제
    sheet.getRange(row, 7).setValue(false);
    return;
  }

  try {
    MailApp.sendEmail({
      to: recipient,
      subject: `[안내] ${name}님께 드리는 메시지`,
      body: message,
      name: "지원 안내봇",
      // from: FROM_EMAIL, // 일반 Gmail 계정이면 무시될 수 있음
    });
    sheet.getRange(row, 8).setValue("발송완료");
  } catch (error) {
    const errMsg = `메일 발송 실패: ${error.message}`;
    sheet.getRange(row, 8).setValue(errMsg);
    // 체크박스 해제
    sheet.getRange(row, 7).setValue(false);
    Logger.log(errMsg);
  }
}


/**
 * 단순 안내 함수: 메뉴에서 “트리거 확인”을 눌렀을 때
 * onFormSubmit/onEdit가 어떤 역할을 하는지 알려주는 Alert
 */
function showInfo() {
  const msg = 
    `현재 스크립트 동작:\n\n` +
    `1) onOpen() -> 시트 열 때, 기존 데이터도 자동 처리 (메시지 생성, 체크박스)\n` +
    `2) onFormSubmit(e) -> 구글폼 새 응답시 마지막 행 메시지 생성 + 체크박스\n` +
    `3) onEdit(e) -> G열 체크 시 메일 발송`;
  SpreadsheetApp.getUi().alert(msg);
}

(작동여부는 각자 알아서 수정하세요)

5. GutHub에 HTML 코드 올리기
1) 대시보드에 프로젝트 생성

2) 프로젝트 안에 INDEX.HTML 생성

왜 그런지는 모르지만 HTML 코드는 INDEX.HTML 네임으로 생성하는 규칙이라 해서 이름을 그렇게 함

  1. https://www.netlify.com 로 들어가서 GitHub로 로그인 함

    컴퓨터 화면에서 로그인 페이지의 스크린 샷
  2. 그런데 에러가 남( GitHub와 이메일 정보가 일치하지 않아 에러가 남

  3. 그래서 등록된 이메일로 로그인함

  4. 그리고 프로필 정보에가서 프로필 이메일을 다시 확인

  1. 다시 GitHub에 다시 와서 프로필 셋팅 수정


여기가 비어 있음. 그래서 netlify의 정보가 일치않았던 것임

확인 표시가있는 페이지의 스크린 샷

이렇게 하면 일치된 정보로 로딩됨
그 다음 GitHub의 정보을 로딩해서 배포함


화면이 두번 정도 똑같은 화면이 나옴,. 내렸다 다시 들어가면 아래 화면이 나오고 프로젝트 있는 곳을 클릭하여 해당 코드 연결하면 화면전환이 되고 조금 있다 배포가 완료됨니다.


여기에 사이트 네임 넣어서 배포하면 완료됨



결과와 배운 점

1. AI와 대화시 결과를 좋게 하는 강력한 프롬프트
(너의 결과는 20점이야. 그원인을 분석하고 개선방안을 브리핑해
)

  1. 코드의 작성과 배포의 전과정을 학습해봤음

  2. 클로드 챗gpt에서는 코드 작성시 이미지 삽입등의 직접적인 기능은 지원하지 않아 기본코드 작성후 별도의 코드 작성기에서 이미지 첨부 작성을 완료해야 함.

도움 받은 글 (옵션)

랜딩페이지를 작성해주는 서비스 사이트가 있음.
무료는 용량이 적고 챗gpt나 클로드가 잘 못하는 이미지 첨부기능까지 함께 갖추고 있어 작성이 편리함
https://readdy.ai/ 참고해보세요

5
7개의 답글

👉 이 게시글도 읽어보세요