컨텐츠 생성 자동화 ⚙️

작성: 2024년 02월 06일읽기: 약 20분

개요

블로그 포스트, SNS 피드, 커뮤니티 게시글, 유튜브 영상 등 다양한 컨테츠가 인터넷의 주요 자원으로 자리를 잡음에 따라 양질의 많은 컨텐츠를 보유하면 이는 곳 자원을 보유한 것이 됩니다. 창작의 영역에서 무에서 컨텐츠를 제작하는 것보다 이미 존재하는 컨텐츠들을 취합하여 새로운 것을 생성하는 것이 일반적으로 되었습니다. 생성형 AI와 자동화 툴의 대중화로 컨텐츠를 생성하는 과정을 자동화할 수 있게 되었습니다. 그러므로 이러한 과정을 통하여 컨텐츠 생성을 자동화하는 프로세스를 정리해 보았습니다.

물론, 어떠한 컨텐츠를 생성할지에 따라 프로세스가 달라질 수 있기 때문에 지금의 과정에서는 단기간에 MVP로 다음과 같은 도메인을 지정하여 정리하였습니다.

IT
개발
기술

데이터 수집

우선, 어떠한 과정을 통해서 컨테츠를 생성하든지 간에 다양한 출처로부터 컨텐츠를 생성하는데 기반이 되는 데이터를 수집하여야 합니다. 이는 크게 네 가지로 나눠볼 수 있습니다.

검색엔진 API를 통한 트렌드 데이터 수집

검색엔진에서 제공하는 트렌드 데이터를 수집하여 최근 컨텐츠 동향을 살펴보고 생성할 컨텐츠의 방향을 잡는데 사용할 데이터를 수집합니다.

오픈 API를 통한 데이터 수집

플랫폼에서 데이터를 제공하는 오픈 API를 활용하여 컨텐츠 생성에 필요한 컨텐츠 데이터를 수집합니다.
- Y Combinator 해커뉴스의 최신 트렌드를 제공하는 해커뉴스 오픈 API를 사용하여 데이터를 수집합니다.
- dev.to의 포스트 정보를 제공하는 API를 사용하여 포스트 데이터를 수집합니다. (참조 포스트), (소스 코드)
- stackoverflow는 개발 관련 질의 응답 커뮤니티로 제공되는 데이터 탐색기와 오픈 API를 사용하여 데이터를 수집합니다.

RSS를 사용한 포스트 데이터 수집

뉴스/블로그 사이트에서 제공되는 RSS를 통하여 데이터를 수집합니다.
- CSS Tricks는 CSS 관련 팁 정보 등 포스트가 공유되는 플랫폼입니다.
- Medium은 개인 블로그 플랫폼으로, RSS가 제공됩니다. (참조 포스트)

크롤링을 통한 데이터 수집

IT/개발/기술 관련 플랫폼들을 크롤링하여 필요한 데이터를 수집합니다.

크롤링 방법

HTML / XML 파싱 라이브러리 사용 정적인 웹사이트의 경우 HTML 파싱으로 충분한 데이터를 수집할 수 있습니다.
- cheerio - Node.js XML/HTML 파싱 라이브러리
- BeautifulSoup4 - 파이썬 XML/HTML 파싱 라이브러리
웹 자동화 (Web Automation) 도구 사용 리액트 등 SPA 라이브러리 기반의 웹 사이트의 경우 웹 자동화 툴을 사용하여 크롤링합니다.
- Selenium - 웹 드라이버를 사용한 브라우저 자동화 도구
- Puppeteer - Node.js 기반 크로미움 기반 브라우저 자동화 라이브러리
- Playwright - 브라우저 E2E 테스팅 도구로, 자동화에도 사용 가능
웹 자동화에 유용한 유틸리티 라이브러리
- vim GPT - vimium 컨트롤로 웹 자동화 봇이 LLM기반으로 작동되도록 도와주는 라이브러리

다음은 puppeteer 라이브러리를 사용한 Hackernews에서 300개의 게시글을 추출하는 예제 코드입니다.

import { writeFile } from "fs/promises";
import { setTimeout } from "timers/promises";
import puppeteer from "puppeteer";

const HACKER_NEWS_URL = "https://news.ycombinator.com/";
const PAGE_SIZE = 10;
const TIMEOUT_MS = 1000;

/**
 * Generate paginated Hackernews URL
 */
const getHackernewsUrl = (page = 1) => {
    if (page < 1) throw new Error("Page size should be at least 1");
    return `${HACKER_NEWS_URL}?p=${page}`;
};

/**
 * Init
 */
(async () => {
    /**
     * 결과값  저장  오브젝트
     * @type Array<{ id: string; title: string; link: string }>
     */
    const RESULTS = [];

    // 브라우저 실행
    const browser = await puppeteer.launch({ headless: "new" });
    // 새탭 열기
    const page = await browser.newPage();

    for (let i = 0; i < PAGE_SIZE; i++) {
        const pageNo = i + 1;
        // Load page
        console.log(
            `페이지 읽기 중: ${pageNo} / ${PAGE_SIZE} -- (총 게시글 수: ${
                pageNo * 30
            })`
        );
        // 페이지 이동
        await page.goto(getHackernewsUrl(pageNo));

        // 메인 컨텐츠 로딩 대기
        await page.waitForSelector("#hnmain");

        // 포스트 추출
        const posts = await page.$$("tr.athing");

        for (const post of posts) {
            // ID 추출
            const id = await post.evaluate((el) => el.id);
            // Title 추출
            const title = await post.$eval(
                "td.title > span.titleline",
                (el) => {
                    // Escape Comma
                    if (el.innerText.includes(",")) {
                        return `"${el.innerText}"`;
                    }
                    return el.innerText;
                }
            );
            // 링크 추출
            const link = await post.$eval(
                "td.title > span.titleline > a",
                (el) => {
                    // Escape Comma
                    if (el.href.includes(",")) {
                        return `"${el.href}"`;
                    }
                    return el.href;
                }
            );

            // 결과값 Push
            RESULTS.push({
                id,
                title,
                link,
            });
        }

        // 로봇 방지 대기
        await setTimeout(TIMEOUT_MS);
    }

    console.log("CSV 생성 시작");
    // CSV 생성
    const columnNames = Object.keys(RESULTS.at(0)).join(",");
    const rows = RESULTS.map((row) => Object.values(row).join(","));
    const CSV = [columnNames, ...rows].join("\n");

    // CSV 쓰기
    const currentTime = new Date().getTime();
    const filename = `result_${currentTime}.csv`;
    await writeFile(filename, CSV, { encoding: "utf-8" });

    // 브라우저 종료
    await browser.close();
    console.log(`CSV 파일 쓰기 완료! -- ${filename}`);
})();

위 코드를 사용하여 정기적으로 해커뉴스의 인기있는 300개 포스트를 크롤링하여 해당 파일과 같은 CSV 파일을 추출할 수 있습니다.

수집된 데이터의 저장

MongoDB

1차적으로 수집된 로우 데이터(Raw Data)는 원본의 형태를 유지하면서 파일 시스템 또는 클라우드(AWS S3등)에 저장합니다. 웹 사이트 데이터 경우 HTML 형식의 웹 데이터이기 때문에 HTML 형식을 유지하여 저장하고, API 또는 RSS로 부터 제공받은 데이터는 JSON, XML 형식을 유지하여 저장합니다.

수집된 데이터 추적에 용이하도록 클라우드, 파일 시스템에 저장된 파일들에 대한 메타데이터 정보를 별도의 RDBMS 또는 NoSQL 데이터베이스에서 관리합니다.

추가적으로 데이터 정제에 용이하도록 필요에 따라 HTML, XML, JSON 등의 데이터에서 평문 텍스트 데이터를 추출하여 별도로 함께 저장합니다. 평문 데이터 추출에는 정규식(RegEx) 또는 Node.js의 DOM, JSON 파서 등을 활용합니다.

또한 태그 데이터를 제공하는 데이터의 경우 태그 데이터 또한 함께 저장하여 추후 활용합니다.

미디어 추출 및 저장

AWS S3

웹 기반 컨텐츠에는 이미지, 영상, 사운드 등의 컨텐츠가 존재할 수 있습니다. 이러한 데이터를 별도로 추출하여 저장합니다.

이미지 및 영상
- 영상 및 이미지를 URL로부터 File Stream 형태로 전달받아 클라우드에 저장합니다.
- 로우 데이터와 마찬가지로 추출한 미디어에 대한 메타데이터를 별도의 데이터베이스에서 관리합니다.
사운드 - 현재로서는 유용한 사운드의 활용 예제가 없기 때문에 사운드 데이터 URL에 대한 메타데이터 정보만 저장합니다.

데이터베이스 (NoSQL 모델링)

erDiagram
    Platform {
    	ObjectId _id
        string type
        string name
    }
    RawData {
    	ObjectId _id
        string title
        string rawData
        string plainText
        string originalLink
    }
    ParsedData {
    	ObjectId _id
    }
    Result {
    	ObjectId _id
    }

데이터 정제

로우 데이터(Raw Data) 자체로서는 활용도가 떨어지기 때문에 컨텐츠를 생성함에 있어서 유효한 데이터를 추출하고 정제합니다. 한국어가 아닌 컨텐츠의 경우 번역이 필요하기 때문에 번역을 해야합니다. 언어에 따라 적합한 라이브러리, API가 다를 수 있습니다. 예를 들어 영어를 한국어로 번역하는 경우에는 구글 번역기보다 네이버 파파고 또는 deepL 번역이 조금 더 자연스러운 번역을 도와줍니다. 번역은 다음과 같은 API를 사용하여 진행합니다.

영문과 다르게 한국어는 word 보다형태소 단위로 나누어서 분석해야 자주 반복되는 명사와 태그 등을 추출하기 더 용이합니다.

형태소

① 뜻을 가진 가장 작은 말의 단위. '이야기책'의 '이야기', '책' 따위이다. ② 문법적 또는 관계적인 뜻만을 나타내는 단어나 단어 성분.

그렇기 때문에 한국어 형태소 분석기를 활용하여 한국어 평문 텍스트의 형태소를 분리하고 이를 기반으로 키워드를 추출합니다. (NLP 활용법) 형태소 분석기 라이브러리는 다음과 같습니다. (형태소 분석기 비교)

코모란 (Komoran) - Java
키위 (Kiwi) - C++
노리 (nori) - Elasticsearch
Open Korean Text - Scala
꼬꼬마 (Kokoma) - Java
은전한닢 (mecab) - Python, C++

컨텐츠를 생성하는데 한국어보다 영어가 적합하기 때문에 한국어 컨텐츠들은 태그 분석 후 영문으로 번역합니다.

컨텐츠 생성

텍스트 컨텐츠

텍스트 컨텐츠 생성은 오픈소스 또는 API 형태로 제공되는 생성형 AI 도구들을 활용하여 생성합니다. LLM AI 모델들은 텍스트 프롬프트를 통해 새로운 텍스트를 생성합니다. 정리된 IT/기술/개발 뉴스들에 대한 양질의 컨텐츠 생성하기 위해서는 프롬프트 엔지니어링을 통해 고도화해 나갑니다.

프롬프트 엔지니어링 가이드 정리 Git의 문서들을 참조하여 정리하였습니다. 또한 프롬트 엔지니어링 가이드 사이트를 참조하였습니다.

프롬프트 엔지니어링에 도움이 되는 유틸리티 도구 목록입니다:

Vercel AI SDK - Vercel에서 제작한 다양한 모델들로 프롬프트 테스트가 가능한 웹 애플리케이션
OpenAI Playground - Open AI에서 제공하는 GPT들에 대한 프롬프트 테스트가 가능한 웹 애플리케이션
Prompt Engineering Guide - 프롬프트 엔지니어링 가이드 문서
- AWS Prompt Engineering Guide - AWS 가이드

텍스트 컨텐츠 생성에 사용될 수 있는 LLM 모델 목록입니다:

Open AI
- gpt-3.5
- gpt-4
Meta
- Llama-2

프롬프트 예제입니다:

Vercel AI SDK를 사용하여 gpt-3.5-turbo 모델을 사용하여 프롬프트를 테스트하였습니다. 예제에 사용한 블로그 포스트는 Github 블로그 글을 사용하였습니다.

===== 전체 블로그 포스트 전문 =====

Above is a IT related blog posted from "Github", summarize the above article briefly in 2-3 paragraphs based on the hint.

// 위 내용은 "Github"에 작성된 IT와 연관된 블로그 글입니다. 위 글을 아래 힌트들을 기준으로 2-3 문단으로 요약하세요.

Hint: AI, developer experience, GitHub Copilot, GitHub Universe, Security

// 힌트: AI, 개발자, 경험, Github Copilot, Github Universe, 보안

위 프롬프트에 대한 답변입니다:

GitHub has announced the expansion and evolution of its AI-powered developer platform, GitHub Copilot. The platform, which aims to infuse AI into every step of the developer lifecycle, now includes a new feature called Copilot Chat. This feature allows developers to write and understand code using natural language as their programming language. Copilot Chat uses OpenAI's GPT-4 model for more accurate code suggestions and explanations.

In addition to Copilot Chat, GitHub is also introducing slash commands, inline chat capabilities within the code editor, and smart actions that offer shortcuts for various workflows. Furthermore, Copilot Chat will be available on JetBrains IDEs in preview mode. The integration of Copilot Chat into github.com and the mobile app will provide developers with suggestions, summaries, analysis, answers to coding questions directly within these platforms.

GitHub is also launching GitHub Copilot Enterprise for organizations that want personalized AI assistance tailored to their specific codebase. This enterprise version allows teams to quickly get up-to-speed on their codebase by providing search capabilities through internal repositories and documentation.

Lastly,GitHub is expanding its ecosystem by integrating third-party tools through the GitHub Copilot Partner Program. Over 25 partners have already joined this program. Furthermore,GitHub Advanced Security now includes new AI-powered security features such as vulnerability prevention systems based on LLM models and autofixes using CodeQL for JavaScript and TypeScript.

The next development from GitHub's research team at Next is the introduction of GitHub Copilot Workspace where developers can generate plans for implementing changes based on issues raised in a repository. Overall,the aim is to create a holistic AI-powered developer platform that enhances productivity throughout all stages of software development while maintaining security measures.

위 내용을 deepL 번역기를 사용하여 한국어로 번역하였습니다.

GitHub은 인공지능 기반 개발자 플랫폼인 GitHub Copilot의 확장 및 진화를 발표했습니다. 개발자 라이프사이클의 모든 단계에 AI를 도입하는 것을 목표로 하는 이 플랫폼에는 이제 Copilot Chat이라는 새로운 기능이 포함됩니다. 이 기능을 통해 개발자는 자연어를 프로그래밍 언어로 사용하여 코드를 작성하고 이해할 수 있습니다. Copilot Chat은 보다 정확한 코드 제안과 설명을 위해 OpenAI의 GPT-4 모델을 사용합니다.

GitHub는 Copilot Chat 외에도 슬래시 명령, 코드 에디터 내 인라인 채팅 기능, 다양한 워크플로우에 대한 단축키를 제공하는 스마트 액션도 도입합니다. 또한 Copilot Chat은 JetBrains IDE에서 미리보기 모드로 사용할 수 있습니다. Copilot Chat이 github.com 및 모바일 앱에 통합되면 개발자는 이러한 플랫폼 내에서 직접 코딩 질문에 대한 제안, 요약, 분석, 답변을 얻을 수 있습니다.

또한 특정 코드베이스에 맞게 맞춤화된 AI 지원을 원하는 조직을 위해 GitHub Copilot Enterprise를 출시합니다. 이 엔터프라이즈 버전은 내부 리포지토리 및 문서를 통한 검색 기능을 제공하여 팀이 코드베이스에 대한 최신 정보를 빠르게 파악할 수 있도록 지원합니다.

마지막으로, GitHub는 GitHub Copilot 파트너 프로그램을 통해 타사 도구를 통합하여 에코시스템을 확장하고 있습니다. 이미 25개 이상의 파트너가 이 프로그램에 참여했습니다. 또한, GitHub 고급 보안에는 이제 LLM 모델에 기반한 취약성 방지 시스템과 JavaScript 및 TypeScript용 CodeQL을 사용한 자동 수정과 같은 새로운 AI 기반 보안 기능이 포함되어 있습니다.

다음 개발은 개발자가 리포지토리에서 제기된 이슈를 기반으로 변경 사항을 구현하기 위한 계획을 생성할 수 있는 GitHub Copilot 워크스페이스의 도입입니다. 전반적으로, 보안 조치를 유지하면서 소프트웨어 개발의 모든 단계에서 생산성을 향상시키는 총체적인 AI 기반 개발자 플랫폼을 만드는 것이 목표입니다.

미디어 컨텐츠

미디어 컨텐츠는 추출된 태그 데이터를 기준으로 text-to-image AI 모델을 사용하여 아래와 같은 프롬프트로 생성 가능합니다. 예제는 위와 마찬가지로 Github에서 발표한 블로그 포스트의 태그들을(AI, developer experience, GitHub Copilot, GitHub Universe, Security) 기준으로 생성하였습니다.

미디어 컨텐츠 생성 예제는 Bing DallE Image Create를 사용하였습니다.

Create a blog article thumbnail image based on following tags: AI, developer experience, GitHub Copilot, GitHub Universe, Security. The image should be simple digital art.

// 다음과 같은 태그와 연관된 블로그 기사 썸네일 이미지를 생성해주세요: AI, 개발자, 경험, Github Copilot, Github Universe, 보안. 이미지는 단순하고, 디지털 아트여야합니다.

아래는 프롬프트로 생성된 결과값입니다:

컨텐츠 제공

Meta Graph API - 페이스북 / 인스타그램 읽기/쓰기 API

instagram
facebook

자동화 + Scheduler

await nestjs scheduler