📝 아이패드로 공부하는 사람 집중 - n8n, appscript, 굿노트 자동화

🗣️ 영어공부 하실분 한번 해보세요~ https://english.huhsame.com

소개

공부하고 싶은 영어 유튜브나, 영어 기사 URL를 가지고 영어 학습 자료를 만들어, 아이패드에서 바로 공부할 수 있게 자동화를 하였습니다.

평소에 토익 토플책으로 공부하기는 싫고, 차라리 관심있는 분야의 영상이나 기사로 공부하자 싶었지만, 아무래도 책이 아니다보니 단어나 표현 정리가 안되어있어 한계가 있더라구요. Claude에게 매번 물어가며하다 이번 스터디를 통해 자동화를 완성하였습니다.

진행 방법

n8n 와 google Apps Script 혼합 사용

n8n: AI agent기능으로 기사원문이나 유튜브스크립트에서 유용한 표현 추출 및 예문 생성
Apps Script: 데이터를 HTML 템플릿에 적용 후 pdf파일 생성 및 굿노트 전달

[n8n]

URL 분류 후 분기
- 유튜브인지 웹페이지인지
제목과 원문 추출
- 유튜브
  - 커뮤니티노드 youtube transcript 사용
- 웹페이지
  - 커뮤니티노드 webpage content extracter 사용

문장 별 표현 추출

AI Agent

Claude Sonnet 3.7
문장 별로 유용한 표현들 추출

출력포맷 JSON

sentences에 문장들이 리스트로 나옴

{
  "sentences": [
    {
      "original_sentence": "원문에 있는 한 문장",
      "original_meaning": "원문 문장 해석",
      "expressions": "원문 문장에 있는 유용한 표현들 (여러개일 경우 리스트 대신 구분자를 넣고 하나의 문자열로)"
    }
  ]
}

데이터 분할 및 전송
- 한 문장 씩 나누어 다음 워크플로우로 요청
- 요청은 5분마다 5개씩 배치
- POST https://n8n.huhsame.com/webhook/sentence
- body
  - title, url, original_sentence. original_meaning, expressions

표현 별 예문 생성

웹훅으로 1문장씩 요청 받음

AI Agent

Claude Sonnet 3.7
문장에서 추출한 표현들 마다 나의 맞춤형 상황별 예문 4개씩 생성

출력 포맷 JSON

{
  "expressions": [{
    "expression": "유용한 표현",
    "meaning": "유용한 표현 한국어 뜻",
    "situation_description": "이 표현하는 상황 설명",
    "original_sentence": "원문에 있던 문장",
    "original_meaning": "원문 문장 해석",
    "example1": "AI나 자동화에 관련된 상황 예문",
    "example2": "강의나 네트워킹에 관련된 상황 예문",
    "example3": "일상, 취미에 관련된 상황 예문",
    "example4": "여행, 미래에 관련된 상황 예문"
  }]
}

데이터 저장
- Google Sheets

Apps Script 호출
- 문장별 워크플로우가 다 진행 될 때 까지 대기 (약 1시간)
- Apps Script 웹훅
  - POST https://script.google.com/macros/s/AKfycbyKL-HrFJs69ngy4M9ABjIfd86Xwv-TvxTCP29F4iuc52zQg5UE9WJb1158CL6q24o/exec
  - body
    - url

[Apps Script]

영어 표현 데이터 읽어오기

webhook으로 받은 URL 추출

구글시트에서 해당 URL의 영어 표현 데이터들 읽어오기

// JSON 데이터에서 URL 파라미터 추출 (표현 학습 데이터가 있는 영상/문서 URL)
  const data = JSON.parse(e.postData.contents || '{}');
  const inputUrl = data.url;
  if (!inputUrl) return ContentService.createTextOutput('No URL received.');

  // '표현공부시트' 스프레드시트 열기 - 영어 표현과 예문이 저장된 시트
  const sheet = SpreadsheetApp.openById('데이터 저장된 구글시트 아이디')
                .getSheetByName('표현공부시트');
  // 모든 표현 데이터 가져오기
  const rows = sheet.getDataRange().getValues();
  // 입력된 URL과 일치하는 영어 표현 데이터 찾기 (2번째 열[인덱스 1]에 원본 URL 저장)
  const matched = rows.filter((row, i) => i > 0 && row[1] === inputUrl);

  // 해당 URL에 관련된 영어 표현이 없으면 메시지 반환
  if (matched.length === 0) {
    return ContentService.createTextOutput('No matching rows.');
  }

HTML 템플릿 적용

Claude로 HTML 구성

아이패드에서 필기하기 위해 필기공간 추가


// ===================================================================
// buildStyledHtml 함수: 영어 표현 학습 카드 HTML 생성
// ===================================================================
function buildStyledHtml(rows) {
  // 영어 표현 학습 카드의 HTML 구조와 스타일 정의
  let html = `
  <!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8">
  <title>영어 표현 학습 카드</title>
  <style>
  @font-face {
    font-family: 'Pretendard';
    src: url(data:font/ttf;base64,${FONT_REGULAR}) format('truetype');
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: 'Pretendard';
    src: url(data:font/ttf;base64,${FONT_BOLD}) format('truetype');
    font-weight: 700;
    font-style: normal;
  }

    * { box-sizing: border-box; margin: 0; padding: 0; }
  @page {
    size: A4 portrait;
    margin: 40px 80px 20px 20px; /* top right bottom left */
  }
    body {
      font-family: 'Noto Sans KR', sans-serif;
      background-color: white;
      color: #333;
      line-height: 1.6;
      padding: 0px;
    }

  .container {
    width: 500px;            /* A4 - 여백 고려한 너비 */
    margin-left: 0;          /* 왼쪽 정렬 */
    margin-right: auto;      /* 오른쪽 여백 확보 */
  }
    .expression-card {
      background-color: white;
      padding: 30px;
      margin-bottom: 60px;
      page-break-after: always;  /* 각 표현 카드마다 페이지 나눔 */
    }

    .expression-header {
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
      line-height: 1.2;

    }

    .expression-original-meaning,
    .expression-meaning,
    .expression-situation {
      font-family: 'Pretendard', sans-serif;
    }
    .expression-title {
      font-size: 24px;
      font-weight: 700;
      color: #4f46e5;
      margin-bottom: 8x;

    }

    .expression-meaning {
      font-size: 18px;
      font-weight: 700;
      color: #4b5563;
      padding: 8px 0px;
    }

    .expression-situation {
      background-color: #f3f4f6;
      padding: 5px;
      border-radius: 8px;
      margin: 8px 0px;
      font-size: 15px;
      color: #4b5563;
    }

    .expression-original {
      font-style: italic;
      color: #6366f1;
      font-weight: 400;
      padding: 4px 0px;
    }

    .expression-original-meaning {
      font-weight: 400;
      font-size: 8px
      padding: 4px 0px;
      margin-bottom: 10px;
    }

    .examples-section { margin-top: 30px; }

    .examples-section h3 {
      font-size: 16px;
      margin-bottom: 15px;
      color: #4b5563;
    }

    .example-item {
      background-color: #f9fafb;
      padding: 0px 12px;
      border-radius: 8px;
      margin-bottom: 30px;
      border-left: 3px solid #a5b4fc;
      font-size: 15px;
      line-height: 2;
    }

    .highlight {
      font-weight: 700;
      background: none;
    }
  </style>
  </head><body><div class="container">
  `;

  // 각 영어 표현마다 학습 카드 생성
  rows.forEach(row => {
    // 스프레드시트 데이터 구조 분해 할당
    // [제목, URL, 표현, 의미, 사용상황, 원문, 원문의미, 예문1, 예문2, 예문3, 예문4]
    const [ , , expression, meaning, situation, original, original_meaning, ex1, ex2, ex3, ex4 ] = row;

    // 영어 표현 학습 카드 HTML 구조 생성
    html += `
    <div class="expression-card">
      <div class="expression-header">
        <h2 class="expression-title">${expression}</h2>
        <div class="expression-meaning">${meaning}</div>

      </div>
      <div class="expression-situation">${situation}</div>
      <div class="expression-original">${highlight(expression, original)}</div>
      <div class="expression-original-meaning">${original_meaning}</div>

      <div class="examples-section">
        ${[ex1, ex2, ex3, ex4].filter(Boolean).map(e =>
          `<div class="example-item">${highlight(expression, e)}</div>`).join('')}
      </div>
    </div>`;
  });

  // HTML 마무리 태그 추가
  html += `</div></body></html>`;
  return html;
}

PDF 파일 생성 및 구글 드라이브 저장

// 영어 표현 학습 자료를 저장할 구글 드라이브 폴더에 PDF 파일 저장
  const folder = DriveApp.getFolderById('1DTJFVOAnrq5mS1l3nQwcWfw5rVazEc1b');
  const file = folder.createFile(blob.setName(filename));

아이패드 Goodnotes 앱에 추가

자동화 전용 이메일로 발송

앱에 pdf파일 자동 임포트

// 생성된 PDF 학습 자료를 GoodNotes로 가져오기 위해 이메일로 발송
  GmailApp.sendEmail(
    "[email protected]",  // GoodNotes 자동 가져오기용 이메일 주소
    `📘 학습자료 완성: ${title}`,      // 학습 자료 제목
    "첨부된 PDF를 확인해주세요.",  // 이메일 본문
    {
      attachments: [file.getAs(MimeType.PDF)],  // 학습 자료 PDF 첨부
      cc: "[email protected]",  // 참조 수신자 (완료 알림용)
      name: "허세임AI"         // 발신자 이름
    }
  );

결과

트러블슈팅

n8n의 execution data 크기가 큰 경우 한 노드씩 실행 불가 ➡️ data를 pin 해두고 전체 플로우 실행
n8n의 output parser는 생각보다 에러가 많이 남 ➡️ 그냥 OpenAI JSON모드로 뒤에 한번 거치는 것이 간단
한번에 모든 문장에 대한 표현과 예문들을 다 응답받기엔 최대 토큰량이 모자람 ➡️ 한 문장마다 따로 OpenAI 콜
30문장의 경우 동시에 30개의 OpenAI 요청으로 TPM(Token Per Minute) 초과 ➡️ 5분마다 5개 요청씩 나누어 시행
Google Apps Script에서 PDF 변환시 HTML에 적용한 이쁜효과들 사라짐 ➡️ 배경색대신 굵기, 글씨색으로 조정
Google Apps Script에서 PDF 변환시 CSS에 import한 폰트 무시 ➡️ 직접 base64로 넣음 (기본 내장 폰트는 한글이 참을 수 없이 못생김)

느낀점

생각보다 오래걸렸다.
특히 나에게 맞는 표현 추출, 그리고 나에게 맞는 예문 생성해주는 프롬프트 고도화에 시간을 많이 썼다.
향후 더 하고싶은 것
- 아이폰 단축어, 공유하기, 크롬확장프로그램
- 웹서비스 배포
  - 프론트엔드 작업 필요
  - 맞춤 예문 생성을 위한 사용자 정보 입력 단계 필요
~~귀찮아서 그냥 나만 쓰고 끝낼수도 있다.~~ ➡️ sonnet 4 테스트겸 cursor로 만들어봤는데 똑똑합니다!
MyZample https://english.huhsame.com

소스코드

n8n workflow: https://drive.google.com/file/d/1w3C5YEptkOnG49GeDbmIM-FsWkGHpM3B/view?usp=drive_link

google app script: https://drive.google.com/file/d/1_jQMyW39pxOhzL-5r4xwnCrlVcAGnfhu/view?usp=drive_link

⏰ AI스터디 17기 사전 모집 START (7월 시작 예정) | 빠르게 합류하세요 🚀