꾸준한준
꾸준한준
🌿 뉴비 파트너
🚀 SNS 챌린지 달성자

세 가지 AI 도구를 활용한 브랜딩 및 자동화 도전기: 나노바나나, 러버블, 앱스스크립트

AI 3종 세트로 대표 이미지부터 홈페이지 구축, 자동 회신까지!

안녕하세요, 액티브파트너스대표 꾸준한준입니다. 늘 새로운 도전을 즐기고 AI 분야에 관심이 많은 제가 최근 배운 나노바나나, 러버블, 앱스스크립트를 활용하여 저희 회사의 온라인 기반을 다진 실제 사례를 공유하고자 합니다.

소개: 왜 이 도구들을 배우고 적용했는가?

액티브파트너스의 대표로서, 고객들에게 회사를 더 효과적으로 알리고 내부 업무 효율을 높일 방법은 늘 고민거리였습니다. 전문 개발자나 디자이너의 도움 없이, 최신 AI 기술을 활용해 빠르고 직관적으로 결과물을 만들어보고 싶었습니다. 회사의 얼굴이 될 대표 이미지 제작, 고객과의 첫 만남인 홈페이지 구축, 그리고 문의에 신속하게 응대하는 자동화 시스템까지, 이 세 가지 목표를 달성하기 위해 도전을 시작했습니다.

진행 방법: 어떤 도구를 어떻게 활용했나?

각 목표에 맞춰 최적의 툴을 사용하고 연계했습니다.

1. 나노바나나 (Nanobanana) → 액티브파트너스 대표 이미지 제작

  • 사용한 도구: 나노바나나

  • 활용 방법: 복잡한 디자인 툴 없이도 전문가 수준의 결과물을 만들 수 있는 나노바나나를 활용했습니다. 회사의 정체성과 비전을 담은 키워드를 중심으로 여러 시안을 쉽고 빠르게 제작하고, 그중 가장 만족스러운 디자인을 선택해 액티브파트너스의 새로운 대표 이미지로 완성했습니다.

[첫번째 샘플]

프롬프트:

Create a 1/7 scale commercialized figurine of the characters in the picture, in a realistic style, in a real environment. The figurine is placed on a computer desk. The figurine has a round transparent acrylic base, with no text on the base. The content on the computer screen is a 3D modelingprocess of this figurine. Next to the computer screen is a toy packaging box, designed in a style reminiscent of high-quality collectible figures, printed with original artwork. The packaging features two-dimensional flat illustrations.

[2번째 샘플]

프롬프트:

Create a 1/7 scale commercialized figurine of the characters in the picture, in a realistic style, in a real environment. The figurine is placed on a computer desk. The figurine has a round transparent acrylic base, with no text on the base. The content on the computer screen is a 3D modelingprocess of this figurine. Next to the computer screen is a toy packaging box, designed in a style reminiscent of high-quality collectible figures, printed with original artwork. The packaging features two-dimensional flat illustrations.

[3번째 샘플]

Vibe Coding 홍보 이미지 생성기

제미나이 프롬프트: 사용자가 사진을 올리면 나노바나나를 활용해서 해당 사진을 'Vibe Coding'강의 홍보 사진으로 변환하는 웹 서비스를 제작해주세요.

[최종 Vibe Coding 이미지]

구글 AI Studio 사진 합성

https://aistudio.google.com/apps/drive/13SrC64GwvHy4KotlA2A-P1GdJALLJPGw?showAssistant=true&showPreview=true&resourceKey=

AI 사진 블렌더 AI 사진 블렌더 AI 사진 블렌더 AI 사진 블렌더 AI 사진 블렌더 AI 사진 블렌더

단, 코드 오류시에는 오류수정 누르고 조금 기다리면 바로 수정되어 잘 나오게 됨

2. 러버블 (Lovable.dev) → AI 기반 홈페이지 구축

  • 사용한 도구: Lovable.dev

  • 활용 방법: "고객 솔루션 전문 기업 액티브파트너스의 공식 홈페이지를 만들어줘" 와 같은 간단한 명령어로 홈페이지의 기본 구조를 AI가 순식간에 만들어주었습니다. 여기에 나노바나나로 제작한 대표 이미지를 삽입하고, 회사 소개, 서비스 내용 등을 추가하여 단시간에 완성도 높은 홈페이지를 구축할 수 있었습니다.

  • 단, 무료는 5회만 가능

호랑이 이미지가 포함 된 한국 웹 사이트 스크린 샷

러버블 프롬프팅:

나의 교육 페르소나 열정 호랑이 쌤 재미있는 이야기와 비유로 딱딱한 개념을 술술 풀어내는 열정적인 교사. 목표를 향해 거침없이 나아가는 호랑이처럼, 학생들의 성장을 끊임없이 독려하며 꾸준히 이끌어준다. 법인 설립, 해외 주식, 은퇴 설계, 세무 정보 등 전문가 수준의 지식을 쉽고 명확하게 전달하여 학생들의 긍정적인 성장을 돕는 든든한 멘토이다. 나의 슬로건 "열정으로 통하는 수업, 꾸준함으로 이끄는 성장!" 나의 강점 딱딱한 개념을 쉽고 재미있게 설명하는 스토리텔링 능력 전문적인 법인 설립, 해외 주식, 은퇴 설계, 세무 지식 학생들의 성장을 끊임없이 독려하는 열정적인 멘토링 성장 포인트 브랜딩 전문성 강화 및 쉬운 적용 현재 보유하신 뛰어난 전문성과 열정을 바탕으로, 학생들에게 보다 매력적이고 기억에 남는 방식으로 다가갈 수 있도록 브랜딩 전략을 구체화하는 것이 중요합니다. 개인 브랜드의 핵심 메시지를 명확히 하고, 이를 시각적으로 표현하거나 수업 콘텐츠에 녹여내는 방법을 고민하여, '쉽게 진행하기 위한 브랜딩'이라는 목표를 달성해나가시길 바랍니다.

위 사진과 텍스트를 이용하여 셀프 브랜딩 사이트를 만들어주세요.

https://passion-tiger-mentor.lovable.app/

개인 액티브프파트너스 홈피가 금방 제작 되었다.

3. 앱스스크립트 (Apps Script) → 자동 회신 기능 구현

  • 사용한 도구: Google Apps Script

  • 활용 방법: 홈페이지에 추가한 '문의하기' 구글 폼(Google Form)과 연동하여 앱스스크립트를 작성했습니다. 고객이 문의를 남기면, 스크립트가 이를 감지하여 "문의해주셔서 감사합니다. 빠른 시일 내에 담당자가 연락드리겠습니다." 와 같은 자동 회신 메일을 즉시 발송하도록 설정했습니다. 이를 통해 고객의 기다림을 줄이고 신뢰도를 높일 수 있었습니다.

[강의 만족도 조사 샘플]

보라색 배경이있는 양식의 스크린 샷

/**
 * @fileoverview 강의 만족도 조사 제출 시 자동으로 감사 이메일을 발송하는 스크립트입니다.
 * @version 2.2
 * @last_modified 2025-09-06
 */

/**
 * 이 스크립트를 처음 설정할 때 한 번만 실행하여
 * 설문지 제출 시 onFormSubmit 함수가 자동으로 실행되도록 트리거를 생성합니다.
 */
function createSpreadsheetSubmitTrigger() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  ScriptApp.newTrigger('onFormSubmit')
    .forSpreadsheet(ss)
    .onFormSubmit()
    .create();
}

/**
 * 구글 설문지가 제출될 때마다 자동으로 실행되는 메인 함수입니다.
 * @param {Object} e - 폼 제출 이벤트 객체
 */
function onFormSubmit(e) {
  // 폼 응답 데이터를 질문을 key로 하는 객체 형태로 가져옵니다.
  const response = e.namedValues;
  
  // '이메일 주소'와 '성함' 데이터를 가져옵니다. (시트의 질문과 일치해야 함)
  const emailAddress = response['이메일 주소'][0];
  const userName = response['성함'][0];
  
  // 이메일 주소가 유효한지 확인합니다.
  if (emailAddress && emailAddress.includes('@')) {
    // 확인 이메일 발송
    sendConfirmationEmail(emailAddress, userName);
    
    // 로그 기록 (스크립트 실행 기록 확인용)
    console.log(`피드백 감사 이메일 발송 완료: ${emailAddress}, 성함: ${userName}`);
  } else {
    console.log(`유효하지 않은 이메일 주소로 발송 실패: ${emailAddress}`);
  }
}

/**
 * 피드백 제출 감사 이메일을 발송하는 함수입니다.
 * @param {string} email - 수신자 이메일 주소
 * @param {string} name - 수신자 이름
 */
function sendConfirmationEmail(email, name) {
  const subject = '강의에 대한 소중한 의견 감사합니다!';
  const senderName = "테크권"; // 발신자 이름
  const senderEmail = "[email protected]"; // 회신받을 이메일 주소
  
  // 이메일 본문을 HTML 형식으로 작성합니다.
  const htmlBody = `
  <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;">

    
    <p style="font-size: 16px;">안녕하세요, <strong>${name}</strong>님!</p>
    
    <p>강의에 참여하고 소중한 의견을 남겨주셔서 진심으로 감사합니다.</p>
    
    <p>보내주신 피드백은 향후 더 유익하고 만족도 높은 강의를 준비하는 데 큰 도움이 될 것입니다.</p>
    
    <p>강의와 관련하여 더 많은 자료나 제 활동이 궁금하시다면 아래 프로필 사이트를 방문해주세요.</p>

    <p style="text-align: center; margin: 25px 0;">
      <a href="https://story-tree-learn.lovable.app/" style="background-color: #00a86b; color: white; padding: 12px 22px; text-decoration: none; border-radius: 5px; font-weight: bold;">
        테크권 프로필 사이트
      </a>
    </p>
    
    <p>문의사항이 있으시면 언제든지 아래 이메일로 연락 주세요.</p>
    <p><strong>테크권</strong>: <a href="[email protected]">[email protected]</a></p>
    
    <p style="margin-top: 30px; color: #666;">감사합니다.<br>테크권 드림</p>
    
    <p style="font-size: 13px; color: #777; margin-top: 30px; border-top: 1px solid #eee; padding-top: 15px;">
      ※ 본 메일이 스팸함에 있다면 '스팸 아님'으로 표시해 주시고, 발신자(${senderEmail})를 주소록에 추가해 주세요.
    </p>
  </div>
  `;
  
  // HTML을 지원하지 않는 이메일 클라이언트를 위한 일반 텍스트 본문
  const plainBody = `안녕하세요, ${name}님!

강의에 참여하고 소중한 의견을 남겨주셔서 진심으로 감사합니다.

보내주신 피드백은 향후 더 유익하고 만족도 높은 강의를 준비하는 데 큰 도움이 될 것입니다.

강의와 관련하여 더 많은 자료나 제 활동이 궁금하시다면 아래 프로필 사이트를 방문해주세요.
테크권 프로필 사이트: https://story-tree-learn.lovable.app/

문의사항이 있으시면 언제든지 아래 이메일로 연락 주세요.
테크권: [email protected]

감사합니다.
테크권 드림

※ 본 메일이 스팸함에 있다면 '스팸 아님'으로 표시해 주시고, 발신자(${senderEmail})를 주소록에 추가해 주세요.`;

  // MailApp 서비스를 사용하여 이메일을 발송합니다.
  MailApp.sendEmail({
    to: email,
    subject: subject,
    htmlBody: htmlBody,
    body: plainBody,
    name: senderName,     // 발신자 이름 (Gmail에서 '보낸사람'으로 표시됨)
    replyTo: senderEmail  // 답장 주소
  });
}


// --- 아래는 테스트 및 일괄 처리용 보조 함수입니다 ---

/**
 * 가장 최근에 제출된 응답 1건에 대해 이메일을 다시 발송합니다.
 * (트리거가 실패했거나 특정 응답을 테스트할 때 사용)
 */
function processLatestSubmission() {
  // 활성화된 스프레드시트 및 시트를 가져옵니다.
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("설문지 응답 시트1"); // 응답이 저장되는 시트 이름으로 변경하세요.
  
  // 시트의 마지막 행 데이터 가져오기
  const lastRow = sheet.getLastRow();
  if (lastRow < 2) {
    console.log("처리할 데이터가 없습니다.");
    return;
  }
  const dataRange = sheet.getRange(lastRow, 1, 1, sheet.getLastColumn());
  const data = dataRange.getValues()[0];
  
  // 시트 구조에 따른 열 인덱스 (A=0, B=1, C=2, ...)
  // 타임스탬프 | 성함 | 이메일 주소 | ...
  const nameIndex = 1;  // '성함'이 B열(1)에 있다고 가정
  const emailIndex = 2; // '이메일 주소'가 C열(2)에 있다고 가정
  
  const email = data[emailIndex];
  const name = data[nameIndex];
  
  if (email && email.includes('@')) {
    sendConfirmationEmail(email, name);
    console.log(`최근 제출자에게 이메일 재발송 완료: ${email}, 성함: ${name}`);
  } else {
    console.log("최근 제출자의 이메일 주소가 유효하지 않습니다.");
  }
}

/**
 * 시트에 있는 모든 응답에 대해 이메일을 일괄 발송합니다.
 * (스크립트 적용 이전에 쌓인 데이터 처리용)
 */
function processAllSubmissions() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("설문지 응답 시트1"); // 응답이 저장되는 시트 이름으로 변경하세요.
  
  // 시트의 모든 데이터를 가져옵니다.
  const data = sheet.getDataRange().getValues();
  
  // 첫 번째 행(헤더)을 가져와서 데이터에서 분리합니다.
  const headers = data.shift();
  
  // 헤더 이름을 기반으로 '이메일 주소'와 '성함' 열의 인덱스를 찾습니다.
  const emailColIndex = headers.indexOf("이메일 주소");
  const nameColIndex = headers.indexOf("성함");
  
  // 필요한 열을 찾지 못하면 오류 메시지를 출력하고 함수를 종료합니다.
  if (emailColIndex === -1 || nameColIndex === -1) {
    console.error("시트에서 '이메일 주소' 또는 '성함' 열을 찾을 수 없습니다. 헤더 이름을 확인해주세요.");
    return;
  }
  
  let sentCount = 0;
  // 헤더를 제외한 실제 응답 데이터를 순회합니다.
  data.forEach((row, index) => {
    const email = row[emailColIndex];
    const name = row[nameColIndex];
    
    if (email && email.includes('@')) {
      sendConfirmationEmail(email, name);
      sentCount++;
      console.log(`[${index + 1}/${data.length}] ${name} (${email})에게 이메일 발송 완료`);
      
      // Gmail의 일일 발송 한도를 초과하지 않도록 중간에 잠시 멈춥니다.
      // 50건마다 1분씩 대기합니다. (필요에 따라 조정)
      if (sentCount % 50 === 0) {
        console.log("50건 발송 후 1분 대기합니다...");
        Utilities.sleep(1000 * 60); // 1분 대기
      }
    }
  });
  
  console.log(`총 ${sentCount}건의 이메일 발송 완료`);
}

[자동 발신된 메일]

결과와 배운 점

이번 프로젝트를 통해 다음과 같은 값진 결과와 교훈을 얻을 수 있었습니다.

  • 결과:

    • 전문적이고 세련된 회사 대표 이미지 확보

    • 개발 지식 없이도 빠르게 제작한 공식 홈페이지

    • 고객 문의에 24시간 응대 가능한 자동화된 소통 시스템 구축

  • 나만의 꿀팁 및 배운 점:

    • 명확한 목표 설정이 중요합니다. '홈페이지를 만든다'가 아니라 '어떤 내용을 담은 홈페이지를 만들겠다'처럼 구체적인 목표가 있어야 AI 도구를 더 효과적으로 활용할 수 있습니다.

    • 두려워 말고 일단 시도해보세요. 코딩이나 디자인을 몰라도 괜찮습니다. AI 도구들은 사용자가 쉽게 적응할 수 있도록 직관적으로 설계되어 있어, 몇 번의 클릭과 간단한 명령어만으로도 놀라운 결과물을 만들어 낼 수 있습니다.

    • 각 도구의 장점을 연결하면 시너지가 폭발합니다. 디자인(나노바나나), 웹 개발(러버블), 자동화(앱스스크립트) 각기 다른 툴을 마치 레고 블록처럼 조합하니 훨씬 더 강력하고 완성도 높은 결과가 나왔습니다.

  • 앞으로의 계획: 이번 성공을 바탕으로, 앞으로는 앱스스크립트를 더 깊이 있게 활용하여 내부 업무 프로세스 자동화를 확장하고, 러버블로 만든 홈페이지에 블로그 기능을 추가하여 AI 관련 콘텐츠를 발행하며 고객과 더 활발히 소통해 나갈 계획입니다.

#AI활용사례 #업무자동화 #홈페이지제작 #나노바나나 #러버블 #앱스스크립트 #액티브파트너스 #1인기업 #디지털전환

6
4개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요