801. 바이브코딩과 AI 에이전트
바이브코딩과 AI 에이전트
- Codex 데스크탑앱이 무엇이고, 일반 ChatGPT와 무엇이 다른지 한 문장으로 설명한다.
- 코드 한 줄 작성 없이 자연어로 투자 보고서 샘플 3종과 고객 페르소나 3종을 생성한다.
- 리서치 + 페르소나를 결합해 고객 맞춤 제안서(마크다운 + HTML)를 만든다.
바이브코딩이란
학습 안내읽기. 본격 실습에 앞서 "바이브코딩이 일반 LLM 사용과 무엇이 다른가"를 아래 다이어그램으로 먼저 잡고 갑니다. 위 패널의 한계 ✕ 다섯 줄이 아래 패널의 능력 카드 다섯 장과 하나씩 짝을 이룹니다 — 그 대응 관계를 찾으며 읽으십시오.
바이브코딩(Vibe Coding)은 코드 문법을 몰라도 자연어 지시만으로 도구·웹앱·대시보드를 만드는 작업 방식입니다. 챗GPT·클로드 같은 LLM을 "대화창에서 묻고 답을 받는" 도구로 쓰는 것과 달리, 바이브코딩은 Codex 같은 코딩 에이전트가 내 PC의 로컬 폴더에서 파일을 직접 읽고·만들고·실행하며 함께 일합니다. 그래서 답을 받는 것을 넘어 여러 파일을 한 번에 다루고, 만든 결과를 스스로 확인·디버깅하고, 기존 작업을 리뷰·개선하는 것까지 가능합니다.
- 언어 이해·생성 — 질문의 의도를 읽고 글·표·요약을 만들어 냄
- 지식·추론 — 방대한 배경지식으로 낯선 주제도 정리해 줌
- 코드 작성 — 요청하면 동작하는 코드를 그 자리에서 써 줌
- 파일을 업로드·다운로드로 왕복 — 내 폴더를 직접 보지 못함
- 써 준 코드를 실행하지 못함 — 돌려 보는 것은 사용자 몫
- 자기 결과물이 맞는지 스스로 확인·수정하지 못함
- 첨부한 몇 개 파일이 상한 — 수십 개 파일 작업은 불가
- 대화창이 제공하는 기능 밖의 도구를 쓰지 못함
내 PC 폴더의 파일을 그 자리에서 직접 읽고, 만든 결과도 파일로 바로 저장합니다. 업로드·다운로드가 필요 없습니다.
작성한 코드를 내 PC에서 직접 실행합니다. 프로그램 설치·명령 실행까지, 내 PC의 실행력을 모두 사용합니다.
파일을 읽는 눈(01)과 코드를 실행하는 손(02)이 모두 있으니, 자기가 코딩한 파일을 직접 실행해 점검하고 개선하는 일을 혼자 반복합니다. 스스로 일하는 에이전트가 가능해지는 이유입니다.
폴더 안 수십 개 파일도 필요할 때마다 필요한 파일을 골라 읽으며 작업합니다. 파일 개수 제한에서 자유롭습니다.
웹크롤링 스크립트, 음성 변환(STT·TTS), 이미지 생성·가공 — 없는 기능은 그 자리에서 도구를 만들어 해결합니다.
바이브코딩과 에이전트
학습 안내읽기. 앞의 다이어그램으로 일반 챗과의 차이를 이해한 뒤, 역할 분담 표에서 “사람의 역할” 열만 한 번 더 읽으십시오 — 에이전트 시대에 사람이 무엇을 하는가가 이 장의 핵심 질문입니다.
Codex 데스크탑앱 — 로컬 폴더 위에서 동작하는 에이전트
Codex 데스크탑앱은 ChatGPT의 코드 작성·실행·파일 조작 능력을 로컬 폴더 위에서 직접 동작하도록 만든 OpenAI의 클라이언트 도구입니다. 대화창에서 자연어로 "이 폴더에 ~을 만들어줘"라고 말하면, 실제 파일이 PC에 생성됩니다. 민감 데이터를 클라우드에 올리지 않고 로컬에서 처리할 수 있다는 점이 가장 큰 차별점입니다.
사람은 무엇을, AI는 무엇을 분담하는가
에이전트형 작업이 보여주는 것은 단순히 "AI가 코드를 잘 짠다"가 아닙니다. 한 번의 자연어 지시로 폴더 구조 설계 → 다중 파일 작성 → 파일 간 참조 → 디자인 결정 → 후속 검증이 한 흐름으로 이어집니다. 그 흐름 안에서 역할 분담은 다음과 같습니다.
| 작업 단계 | 사람의 역할 | AI 에이전트의 역할 |
|---|---|---|
| 리서치 주제 선정 | 주제·범위·고객 정의 | — |
| 샘플 자료 생성 | 구조와 제약 명시 | 다중 파일 일괄 작성, 일관된 톤 유지 |
| 맞춤 리포트 작성 | 고객·리서치 결합 방식 지시 | 파일 간 참조, 적용 포인트 도출 |
| HTML 디자인 | 톤·컬러·구조 결정 | HTML·CSS 작성, 인쇄 미디어쿼리 적용 |
| 검증·승인 | 표현 점검, 컴플라이언스 확인 | 유효성 검증, 누락 항목 탐지 |
대화 3턴으로 14개 파일
금융 · 증권학습 안내읽기 또는 실행(설치 시간 별도). Codex 데스크탑앱이 있으면 대화 1만 실제로 실행해 보고, 없으면 스크린샷 3장과 프롬프트를 대조해 읽으십시오. 각 프롬프트에 Ch1의 3층 구조(역할·지시·형식·제약)가 어떻게 들어가 있는지 찾아보는 것이 읽기 포인트입니다.
증권사 PB 관점에서 다음 세 가지를 Codex 데스크탑앱 안에서 자연어 대화 3번으로 만듭니다. 각 단계에서 만들어지는 파일은 실습 자료 assets/files/801-바이브코딩-Codex/에 미리 들어 있으니 비교하며 확인하십시오.
대화 1 — 투자 보고서 샘플 3종 + 고객 페르소나 3종 일괄 생성
대화 2 — 04번 고객을 위한 맞춤 리포트
대화 3 — 고객별 HTML 리포트 + 공통 스타일시트 + 인덱스
Codex 3턴 생성 실습
금융 · 증권학습 안내산출. 대화 3턴을 그대로 실행합니다. AI가 파일을 만드는 동안 기다리지 말고 만들어진 파일을 열어 내용을 검토하십시오 — 검토가 사람의 역할입니다. 완료 기준: html_reports/index.html이 브라우저에서 열리고 3개 리포트로 이동되면 통과. 제공된 완성본과 차이를 비교하는 것까지가 실습입니다.
완성 후 폴더와 인덱스 페이지의 모습입니다. 실습 자료의 완성본과 비교해 보십시오 — 완성본 index.html 열어보기
권장 비중 조정안 포함
월 현금흐름 시나리오
리밸런싱 체크리스트
실습 순서
- Codex 데스크탑앱을 실행하고 작업 폴더를 새로 만든다.
- 대화 1 프롬프트 입력 → samples/ 폴더에 7개 파일 생성 확인.
- 대화 2 프롬프트 입력 → 07번 맞춤 리포트 .md 생성 확인.
- 대화 3 프롬프트 입력 → html_reports/ 안에 5개 파일(HTML 4 + CSS 1) 생성 확인.
- 실습 자료의 동일 이름 파일과 비교하여 차이점을 확인한다 — 동일하지 않습니다. AI는 매번 약간 다르게 만듭니다.
AI Studio 웹앱 바이브코딩
사업개발 · 종합상사학습 안내직접 실행(무료). Google AI Studio는 구글 계정만 있으면 무료입니다 — 아래 프롬프트를 Build 모드에 그대로 넣고 결과를 보십시오. 프롬프트가 레이아웃·디자인·데이터를 섹션으로 나눠 지정하는 방식(Ch1의 출력 형식 지정과 동일한 원리)에 주목하십시오.
비즈니스 상황 — 종합상사의 시장 모니터링 화면
사업개발 담당자가 10개국·5개 산업의 뉴스와 감성 지표를 한 화면에서 모니터링하는 대시보드가 필요합니다. 외주 견적 대신, Google AI Studio(Gemini)의 Build 기능에 화면 설계를 자연어로 지시해 단일 HTML 웹앱을 만듭니다. Codex(사례 A)가 로컬 폴더·다중 파일에 강하다면, AI Studio는 브라우저에서 즉시 동작하는 단일 화면 앱에 가장 빠른 도구입니다.
따라해 보기 — 내 회사 버전 대시보드
- aistudio.google.com에 구글 계정으로 로그인하고 Build 모드를 연다.
- 위 프롬프트에서 [데이터]의 국가·산업 필터와 강조 색상만 본인 회사 기준으로 바꿔 실행한다.
- 결과 화면을 보고 한 가지씩 추가 지시로 다듬는다 — "뉴스 타임라인을 날짜별 카드로", "감성 추이 차트에 산업 필터 연동" 등. 완성 예시: case 2 · case 3
구글시트 연동 뉴스 대시보드
사업개발 · n8n 연계학습 안내읽기 또는 실행. Ch7 실습(n8n → Google Sheets)을 완료했다면 그 시트에 그대로 연결해 보십시오. 핵심은 프롬프트가 백엔드(Apps Script JSON API)와 프론트엔드(HTML)를 한 번에 요구하면서, 배포 URL을 어디에 넣을지까지 묻는다는 점입니다.
비즈니스 상황 — 쌓이는 뉴스 DB를 보는 화면이 없다
Ch7의 n8n 워크플로우가 매일 뉴스를 Google Sheets에 쌓고 있지만, 시트를 직접 열어 보는 것은 불편합니다. 이 사례는 구글시트(DB) → Apps Script 웹앱(JSON API) → 로컬 HTML(프론트엔드)의 3층 구조를 바이브코딩으로 만들어, 시트에 새 행이 쌓이면 새로고침만으로 대시보드에 반영되게 합니다. 자동화(Ch7)와 바이브코딩(Ch8)이 만나는 지점입니다.
실시간 협업 노트앱
공통 · 협업도구학습 안내읽기(실행은 선택). 프롬프트가 함수 단위(doGet·getNotes·saveNoteToSheet)로 요구사항을 나누는 방식을 보십시오 — 바이브코딩이 깊어질수록 "무엇을"만이 아니라 "어떤 구조로"를 지시하게 됩니다.
비즈니스 상황 — 별도 서버 없이 팀 메모보드
포스트잇처럼 메모를 만들고 드래그로 옮기면 자동 저장되고, 같은 URL을 쓰는 동료 화면에 몇 초 안에 반영되는 협업 노트앱 — 이것을 서버·DB 없이 Google Sheets(저장소) + Apps Script(서버·화면)만으로 만듭니다. 사내 IT 인프라 없이도 부서 단위 도구를 직접 만들 수 있다는 것을 보여주는 사례입니다.
가볍게 시작하는 Codex
공통 · 입문학습 안내가벼운 실행. 업무 사례(A~C)가 무겁게 느껴지면 이 미니 사례로 시작하십시오. 글·이미지·HTML 조판이 한 번의 지시로 통합되는 에이전트 경험을 가장 빠르게 맛볼 수 있습니다.
MINI 1홈페이지 리디자인 시안 4종
회사(또는 임의의) 홈페이지 URL을 주고 "콘셉트를 정의한 뒤 리디자인 시안 4종을 HTML로 일괄 생성"을 지시합니다. 외주 1차 시안(수백만 원·2~4주) 수준의 비교 시안이 한 번의 프롬프트로 나옵니다.
MINI 2동화책 한 권 창작
이야기 재창작 → 삽화 생성 → 본문 배치 → 책 형태 HTML 조판까지 한 지시로. 텍스트·이미지·코드가 결합되는 에이전트 작업의 압축판입니다.
부록 · 더 해보기
학습 안내선택. 미션 1이 가장 가치 있습니다 — 구조를 유지한 채 내 업무로 치환하는 순간, 이 교재의 내용이 회사 자산이 됩니다.
MISSION 1내 업무 버전으로 재구성
"리서치 3건 + 대상 3건 → 맞춤 산출물"의 구조를 본인 업무로 치환해 보십시오. 예: 제품 자료 3건 + 고객사 프로필 3건 → 고객사별 제안 요약 / 정책 문서 3건 + 부서 현황 3건 → 부서별 적용 가이드. 대화 1~3 프롬프트의 구조를 유지한 채 내용만 바꾸는 것이 포인트입니다.
MISSION 2사내 적용 3단계 설계
다음 3단계 중 본인이 시작할 1번을 정하고, 첫 자동화 대상 업무 1건과 필요한 데이터·보안 점검 항목을 메모로 정리하십시오.
- STEP 1 개인 — 반복 작업 자동화: 월간 보고서 템플릿, 회의록 정리, 동일 양식의 메일 초안.
- STEP 2 팀 — 공유 자료 생성기: "리서치 + 페르소나 → 맞춤 리포트" 같은 결합 작업을 팀 공통 폴더에서 동일 프롬프트로.
- STEP 3 부서 — 표준 에이전트: 회사 데이터 가이드라인을 반영한 사내 표준 프롬프트 라이브러리.
MISSION 3Ch3과 연결 — 보고서 파이프라인 완성
Ch2~3에서 만든 리서치 노트와 보고서 본문을 Codex 작업 폴더에 넣고, "이 본문을 발표 슬라이드형 HTML 10장으로 변환하고 인쇄용 CSS까지 포함하라"고 지시해 보십시오. 리서치(Ch2) → 보고서(Ch3) → 에이전트 변환(Ch8)으로 이어지는 전체 파이프라인이 완성됩니다.
과정 정리
- Codex 데스크탑앱과 일반 ChatGPT의 차이를 한 문장으로 설명할 수 있다
- 3턴의 자연어 대화로 9개 마크다운 + 5개 HTML 파일을 만들었다
- 리서치·페르소나·맞춤 리포트의 결합 방식을 재현할 수 있다
- 에이전트형 작업에서 사람과 AI의 역할 분담을 한 표로 정리할 수 있다
- 사내 적용 3단계(개인 → 팀 → 부서)에서 본인이 시작할 1번을 정했다