회의 개요
Session 06AI 코딩 경험과 직접 만든 프로젝트를 공유하며, 앞으로의 스터디 운영 방식을 가볍게 재정렬했습니다.
| 일시 | 2026년 5월 16일 토요일 22:00-24:00 KST |
|---|---|
| 형식 | 온라인 미팅 |
| 주제 | AI 코딩, 바이브코딩 경험 공유, Codex/Claude/Manus/OpenClaw 활용 사례, 웹사이트 벤치마킹, 자동화 아이디어 |
| 핵심 목적 | 도구 소개를 넘어 실제로 만든 프로젝트와 실험 결과를 공유하고, 다음 운영 방식을 정리하기 |
한 줄 결론: AI 코딩은 “잘 물어보기”에서 끝나지 않고, 기획 문서와 실행 파일을 쌓아 실제 배포까지 가보는 경험에서 실력이 생깁니다.
JP님의 AI 금융 대시보드 프로젝트
Member Demo이번 회의에서 가장 선명했던 사례는 직접 구현 중인 개인 금융/자산관리 대시보드였습니다.
JP님은 만들고 싶은 사이트의 방향을 ChatGPT, Claude, Perplexity에 입력해 기획안을 비교하고,
Claude가 정리한 기획을 Codex에 넘겨 실제 프로젝트 문서와 화면 구현으로 이어갔습니다.
Codex는 plan.md, research.md, 프롬프트 문서, 작업 지시서를 만들고,
프론트엔드 화면과 일부 실제 주가 API 연결까지 진행했습니다.
| 기획 | ChatGPT, Claude, Perplexity로 사이트 방향과 기능 구상 비교 |
|---|---|
| 문서화 | Claude 기획안을 Codex에 전달해 plan/research/작업지시 문서 생성 |
| 구현 | 프론트엔드 화면 제작 후 백엔드와 금융 데이터 연결 진행 |
| 배포 | Railway와 Vercel로 배포한 뒤 본인 스타일로 커스터마이징 예정 |
참석자들은 짧은 기간 안에 기획, 문서화, 화면 구현, 데이터 연결까지 직접 진행한 점을 가장 긍정적으로 봤습니다. “AI로 만들었다”보다 중요한 것은, 필요한 문서와 파일 구조를 만들고 실제 서비스에 가까운 형태까지 밀어붙였다는 점이었습니다.
금융 대시보드처럼 실제 사용자에게 보일 서비스를 만들 때, 메시지와 사용 장면을 어떻게 전달할지 보는 참고 영상입니다.
GitHub, Notion, MD 문서 활용 방식
Project Memory이번 회의에서는 프로젝트를 기억시키는 방식으로 md 문서와 저장소 관리가 중요하게 다뤄졌습니다.
plan.md: 프로젝트 목표, 기능 범위, 작업 순서를 정리합니다.research.md: 조사 내용, 레퍼런스, 데이터 소스, 의사결정 근거를 남깁니다.- 작업 지시 md: 프론트엔드/백엔드/배포 작업을 Codex가 이어받기 좋은 단위로 쪼갭니다.
- GitHub: 핵심 파일과 코드의 버전 관리, 백업, 협업 흐름을 담당합니다.
- Notion: 회의록, 공지, 운영 문서처럼 사람이 다시 읽을 정리 문서를 축적합니다.
다만 GitHub는 일반 윈도우 폴더처럼 직관적으로 보이지 않아 초보자에게 어렵다는 의견도 나왔습니다. 폴더 삭제나 구조 변경이 단순 파일 탐색기와 다르게 느껴지는 이유는 GitHub가 저장 공간이 아니라 오픈소스 개발 흐름과 버전 관리에 맞춰 설계된 도구이기 때문입니다.
웹사이트 벤치마킹과 Google Stitch
Reverse Engineering좋은 웹사이트를 참고할 때는 단순 스크린샷보다 전체 페이지 구조를 읽는 방식이 유리합니다.
JP님은 전체 페이지 캡처와 개발자도구(F12)를 활용해 참고 사이트의 폰트, 색상, UI 구조를 확인하고, 그 자료를 Codex에 전달해 비슷한 형태의 화면을 구현하는 흐름을 공유했습니다. 일반 이미지 캡처보다 PDF나 긴 페이지 캡처가 유리하고, Google Stitch와 MCP를 연결하면 캡처 이미지를 더 정교하게 재구성하는 방식까지 가능하다는 논의가 이어졌습니다.
| 캡처 | 전체 페이지 캡처 또는 PDF 저장으로 레이아웃 전체를 확보합니다. |
|---|---|
| 분석 | 개발자도구로 폰트, 여백, 색상, 컴포넌트 구조를 확인합니다. |
| 재구성 | Codex나 Claude에 레퍼런스를 전달해 유사한 구조로 구현합니다. |
| 고도화 | Google Stitch, MCP를 연결해 이미지 기반 UI 재현과 코드 작업을 더 촘촘하게 이어갑니다. |
좋은 레퍼런스를 보고 구조를 해석한 뒤, AI 코딩 도구로 재구성하는 감각을 잡기 위한 참고 영상입니다.
PRD와 AI 개발 문서
Product Spec최근 AI 개발 흐름에서는 막연한 기획안보다 PRD 형태의 제품 요구사항 문서가 점점 중요해지고 있습니다.
PRD(Product Requirements Document)는 제품 목적, 사용자 문제, 핵심 기능, UI 구조, 데이터 흐름, 우선순위, 성공 기준을 정리하는 문서입니다. 회의에서는 Claude가 PRD 작성에 강하고, Codex는 이렇게 정리된 문서를 실제 파일과 코드 변경으로 옮기는 데 유리하다는 의견이 공유되었습니다.
PRD
product goal
user problem
core features
ui structure
data flow
priority
success criteria
핵심은 AI에게 “만들어줘”라고 던지는 것이 아니라, 제품의 목적과 판단 기준을 먼저 문서로 고정하는 것입니다. 문서가 좋아질수록 Codex나 Claude가 이어서 처리할 수 있는 작업의 품질도 높아집니다.
AI 선거 예측 시뮬레이션 아이디어
Persona Simulation합성 인구 데이터와 AI 에이전트를 이용해 여론 변화를 시뮬레이션하는 프로젝트도 공유되었습니다.
한 참석자는 가상의 인구 데이터를 만들고, 연령, 직업, 지역, 정치 성향을 부여한 뒤, 각 인물이 뉴스와 이슈, 여론조사 변화에 반응하도록 만드는 선거 예측 시뮬레이션 아이디어를 공유했습니다. 단순 통계 모델이 아니라 AI 기반 페르소나 시뮬레이션으로 접근한다는 점이 특징이었습니다.
- 가상의 인구 데이터를 생성하고 성향을 부여합니다.
- 뉴스, 이슈, 여론조사 변화에 따라 각 페르소나가 반응합니다.
- 과거 선거 결과와 비교하며 오차를 조정합니다.
- Polymarket 스타일 예측 플랫폼이나 게임 요소를 붙이면 대중적 소비 포맷으로 확장할 수 있습니다.
다만 계산량과 비용이 크고, 오차를 줄이기 어렵고, 결과가 왜 그렇게 나왔는지 설명하기 어렵다는 한계도 함께 논의되었습니다. 그래서 학술적 완성도만큼이나 사람들이 재미를 느끼는 포맷과 내러티브가 중요할 수 있다는 결론이 나왔습니다.
페르소나와 에이전트를 이용해 복잡한 사회 현상을 실험하는 감각을 이어가기 위한 참고 영상입니다.
Claude, Codex, Manus, OpenClaw 비교
Tool Roles여러 AI 코딩 도구가 언급됐지만, 결론은 각 도구가 잘하는 역할이 다르다는 점이었습니다.
| Claude | 기획, 문서 작성, PRD 구성, 코드 이해에 강점이 있다는 평가가 많았습니다. |
|---|---|
| Codex | 실제 프로젝트 파일 수정, GitHub 기반 작업 흐름, 구현과 검증에 유리합니다. |
| Manus | 클라우드 컴퓨터를 원격 조작하는 느낌에 가깝고, GitHub나 외부 서비스 연결 가능성이 있지만 비용과 토큰 소모가 큽니다. |
| Claude Code | 개발자들 사이에서 강력한 평가를 받고 있으며, 실제 코드 작업 표면으로 자리 잡고 있다는 의견이 있었습니다. |
| OpenClaw | Slack 연동형 에이전트 자동화 가능성이 있지만, 아직은 GitHub, 웹앱 제작, 배포 경험을 먼저 쌓는 것이 더 중요하다고 보았습니다. |
도구를 많이 아는 것보다 중요한 것은 어느 단계에서 어떤 도구를 쓸지 구분하는 능력입니다. Claude로 제품 문서를 정리하고, Codex로 실제 파일을 고치고, Manus나 OpenClaw는 반복 작업 자동화가 명확해진 뒤 붙이는 방식이 더 현실적인 흐름으로 정리되었습니다.
웹툰과 콘텐츠 자동화 아이디어
Content LoopAI를 활용한 짧은 콘텐츠, 캐릭터 시트, 카드뉴스, SNS 자동 업로드 아이디어도 논의되었습니다.
귀여운 캐릭터 기반 짧은 웹툰이나 카드뉴스는 반복 제작이 가능하고, 인스타그램이나 Threads에 자동 업로드하는 흐름까지 연결할 수 있다는 의견이 나왔습니다. 핵심은 한 번만 만드는 것이 아니라 캐릭터 설정, 말투, 장면 구조, 업로드 루틴을 정해 계속 찍어낼 수 있는 콘텐츠 시스템으로 만드는 것입니다.
- 캐릭터 시트와 세계관을 먼저 고정합니다.
- 짧은 웹툰, 카드뉴스, 릴스용 스크립트로 포맷을 나눕니다.
- 이미지 생성, 편집, 캡션, 업로드 루틴을 자동화 후보로 분리합니다.
- 콘텐츠가 쌓이면 반응 데이터를 보고 다음 소재를 고릅니다.
AI 기반 콘텐츠 제작과 반복 운영 아이디어를 실제 실행 흐름으로 옮겨보기 위한 참고 영상입니다.
업무 자동화와 실제 현장 활용
Work Automation반복 업무를 자동화하려면 먼저 반복 패턴이 명확해야 한다는 점이 다시 확인되었습니다.
중국 무역/컨설팅 업무에서 ChatGPT를 활용하는 사례도 공유되었습니다. 제품 이미지 분석, 공장 커뮤니케이션, 카탈로그 정리, 광고 초안 작성, 제품 특징 비교처럼 이미 실무에서 AI가 보조할 수 있는 영역이 많았습니다.
다만 자동화는 도구를 붙인다고 바로 완성되지 않습니다. 매일 반복되는 정보 수집, 정리 방식, 검수 기준, 결과물 포맷이 명확할수록 AI가 맡을 수 있는 부분도 선명해집니다. “업무 시작 전에 필요한 정보가 이미 정리되어 있는 구조”를 만드는 것이 좋은 자동화의 출발점입니다.
향후 스터디 운영 방향
Operating Rhythm앞으로는 장시간 빡빡한 진행보다, 짧고 가볍게 서로의 실험 결과를 공유하는 방향이 제안되었습니다.
- 주 1회 정도 짧게 모여 각자 만든 프로젝트나 실험 결과를 공유합니다.
- AI 뉴스나 새로운 도구 정보는 가볍게 공유합니다.
- 준비된 사람이 있으면 발표하고, 없으면 짧게 종료합니다.
- 완벽한 결과물보다 실제로 해본 경험을 더 중요하게 봅니다.
- 고급 자동화는 웹앱 제작, GitHub 흐름, 배포 경험 이후 접근합니다.
이번 세션의 분위기는 “강의 듣기”보다 “서로의 실험을 읽기”에 가까웠습니다. 각자 작게라도 만든 결과물이 생기면, 다음 대화의 밀도는 훨씬 높아집니다.
액션 아이템
Next Steps다음 단계는 거창한 새 목표보다, 각자의 실험을 작게 이어가는 것입니다.
| 담당 | 내용 |
|---|---|
| JP님 | 금융 대시보드 Railway/Vercel 배포 진행 |
| JP님 | 배포 후 본인 스타일로 커스터마이징 진행 |
| 전체 | 각자 만든 프로젝트나 실험 결과 지속 공유 |
| 전체 | Google Stitch + MCP 활용 테스트 |
| 전체 | PRD 기반 기획 연습 |
| 전체 | 주 1회 가벼운 정보 공유 형태 운영 검토 |
- AI 코딩은 코딩보다 기획과 문서화가 중요합니다.
- Claude는 PRD와 기획 단계에서, Codex는 실제 구현과 수정 흐름에서 강점이 큽니다.
- GitHub는 단순 백업 도구가 아니라 개발 흐름 관리 도구입니다.
- 웹사이트 벤치마킹은 캡처, 개발자도구, Google Stitch 조합이 강력합니다.
- 자동화는 도구보다 반복 업무 구조를 먼저 이해해야 효과가 큽니다.
리프레시 영상
Break Clip회의록 마지막에는 언제나처럼 강걸우 MV를 쉬어가기 자료로 남깁니다.
AI 대시보드, PRD, MCP, 선거 시뮬레이션, 자동화까지 머리가 바쁘게 달렸으니 마지막은 가볍게 리프레시합니다.