diff --git a/StuDoc/vibe-coding-cli-advantages.pdf b/StuDoc/vibe-coding-cli-advantages.pdf new file mode 100644 index 0000000..fd315cf Binary files /dev/null and b/StuDoc/vibe-coding-cli-advantages.pdf differ diff --git a/StuDoc/vibe-coding-cli-advantages.pptx b/StuDoc/vibe-coding-cli-advantages.pptx new file mode 100644 index 0000000..f69cab3 Binary files /dev/null and b/StuDoc/vibe-coding-cli-advantages.pptx differ diff --git a/StuDoc/사업일지-비개발자의 바이브코딩 성공기.html b/StuDoc/사업일지-비개발자의 바이브코딩 성공기.html new file mode 100644 index 0000000..f5c0815 --- /dev/null +++ b/StuDoc/사업일지-비개발자의 바이브코딩 성공기.html @@ -0,0 +1,3347 @@ + + + + + + + + + +비개발자의 바이브코딩 성공기 + + + + + + + + + + + +
+
바이브코딩 케이스 스터디
코딩 한 줄 몰라도, +이틀이면 만든다
비개발자가 Claude로 만든 지도 퀴즈 게임이 +월 4만 달러 서비스가 되기까지
출처: AI 사업일지 유튜브(2026.10) · Starter Story 인터뷰 · Sportico 기사(2026.05)
+
결론부터
숫자 네 개로 보는 이야기
8시간
첫날 작업 시간
친구 결혼식에서 돌아온 일요일 하루
2일
공개 가능한 첫 버전
월요일 일정까지 비우고 완성
100만
한 달 안의 순 이용자
이메일 캠페인도, 광고비도 없이
$40K
현재 월 매출
출시 약 3개월 시점, 본인 인터뷰 기준
출처: Starter Story 인터뷰(2026.09), Sportico(2026.05) · 숫자는 출처에 나온 그대로이며 수익을 보장하지 않습니다
+
주인공
그는 개발자가 아니었다
Frank Michael Smith
  • 2020년부터 활동한 스포츠 숏폼 크리에이터
  • 본인 표현으로 “기술자도 아니고 코딩도 모른다”
  • 지도와 지구본, 매일 하는 게임을 좋아함
그 전의 시도들
  • 2020년부터 게임을 여러 번 출시
  • 첫 게임은 약 11만 명이 했지만 니치에 머묾
  • 2024년 게임 스튜디오 설립, 큰 히트는 없었음
첫 히트는 계획한 게임이 아니라, 주말의 바이브코딩 실험에서 나왔다
출처: Starter Story 인터뷰(2026.09), Sportico(2026.05)
+
아이디어
형이 보여 준 게임 하나에서 시작
01 · 발견
MapTap
형이 알려 준 매일 하는 지도 게임. 퀴즈 요소는 없었다
02 · 질문
스포츠 버전이면?
친구 결혼식에서 돌아오는 차 안에서 떠오른 생각
03 · 리믹스
GeoSports
스포츠 퀴즈의 정답 장소를 지구본에서 탭하는 게임
새로울 필요는 없다. 좋아하는 것 × 좋아하는 것이면 충분하다
출처: Starter Story 인터뷰(2026.09) · 원조 게임 maptap.gg / geosports.app
+
만드는 과정
코드가 아니라 스펙과 질문으로 만들었다
1
일반 Claude 채팅에 게임 구상을 자세히 쏟아 놓고, 원조 게임 조사를 맡김
2
Claude와 함께 스펙(명세서)을 작성. 이후 모든 작업의 기준점이 됨
3
막힐 때마다 Claude에게 묻고, 스펙으로 돌아가 다시 확인
4
배포·도메인 설정은 화면을 스크린샷으로 찍어 “이거 맞아?”를 반복
투입한 시간
일요일 8시간
+ 월요일 일정 전부 취소 +→ 친구들에게 보낼 수 있는 버전
Claude가 늘 맞진 않았지만, 대부분은 맞았다고 회고
출처: Starter Story 인터뷰(2026.09)
+
사용한 도구
서버 없이 굴러가는 ‘린 스택’
역할
도구
비개발자 관점에서
AI 개발 파트너
Claude Max (20x 플랜)
코드 작성과 디버깅을 전담
호스팅·도메인
Vercel Pro
도메인 구매부터 배포까지 한 곳에서
지구본 지도
MapLibre
오픈소스 지도 라이브러리
리더보드·통계
Upstash Redis
관리할 서버가 없는 데이터 저장소
문제 관리
Google Sheets
퀴즈는 스프레드시트에서 편집
유료 구독
Stripe
Pro 구독 결제
문제 출제는 끝까지 사람이 했다. AI는 스포츠 팬의 감각까지는 모른다는 이유로
출처: Starter Story 인터뷰(2026.09), Sportico(2026.05) · 오른쪽 열은 강의용 설명
+
터진 순간
답글 하나가 판을 바꿨다
STEP 1
가족과 친구 몇 명에게만 조용히 공유
STEP 2
그들이 알아서 퍼뜨리는 걸 보고 인스타 스토리에 공개
STEP 3
NBA 이야기를 하던 자기 트윗에 “이 게임 제가 만들었어요” 답글
STEP 4
그 답글이 폭발, 그날 약 4만 명이 플레이
150,000
다음 날 하루 플레이어 수. +게임이 나온 지 고작 5일째, 리텐션 준비는 전혀 없었다
출처: Starter Story 인터뷰(2026.09) · Sportico는 첫 주 최고치를 일 15만 명으로 보도
+
왜 퍼졌나
단톡방에 보내고 싶게 만들었다
53%
유기적 공유율
하루 10만 명이 플레이하면 5만 3천 명이 점수를 공유한다. 트래픽의 약 98%가 입소문
마찰 제로
앱 설치 없는 웹. X 안에서 발견하고, 플레이하고, 공유까지
설명이 필요 없다
“일어난 곳을 탭하라”, 5문제. 사용법을 가르친 적이 없다
매일 같은 문제
모두가 같은 문제를 풀고, 공유용 결과 포맷이 자동으로 만들어진다
오늘의 호스트
스포츠 인플루언서가 그날 5문제를 출제하고 리트윗하면 새 관객이 들어온다
출처: Starter Story 인터뷰(2026.09), Sportico(2026.05)
+
숫자 뒤에
월 4만 달러의 정체
70만
월간 활성 이용자
스포츠·역사·축구 등 같은 게임의 스핀오프 묶음 기준
$30~35K
광고 수익 (월)
매출의 대부분은 프로그래매틱 광고
1,800명
Pro 구독자
“하루 한 판으론 부족해” 요청에 월 $5 구독 출시
AI가 다 한 건 아니다
성장 후 개발은 4인 팀으로 넘겼고, 문제 출제는 창업자가 직접 맡는다
돈보다 제품을 먼저
베팅·판타지 업체의 스폰서 제안은 거절. 게임을 ‘순수하게’ 지키는 쪽을 택했다
출처: Starter Story 인터뷰(2026.09), Sportico(2026.05) · 매출·이용자 숫자는 본인 발표 기준이며 수익을 보장하지 않습니다
+
우리가 베낄 수 있는 것
따라 할 수 있는 공식 4가지
01
웹부터 만든다
설치가 필요 없는 링크 하나. 마찰이 0에 가까워야 퍼진다
02
공유되게 설계한다
당연해 보여도 당연하지 않다. 결과 화면 자체를 광고로
03
8시간을 통째로 비운다
시작이 제일 어렵다. 방해받지 않는 블록 하나가 기회를 만든다
04
막히면 LLM에게 묻는다
스크린샷을 찍어 “이거 맞아?” 그리고 멈추지 말고 계속 만든다
출처: Starter Story 인터뷰(2026.09)의 창업자 조언을 강의용으로 정리
+
판을 떠나지 않은 사람
이틀 만의 성공은 +19년 위에 서 있었다
영상 크리에이터
2007 → 2020 · 13년
중학생 때 시작한 유튜브가 주목받기까지
게임 제작자
2020 → 2026 · 6년
첫 게임부터 첫 히트까지, 그 사이의 실패들
AI가 만드는 시간은 줄여 줬다. 계속 시도하는 건 여전히 우리 몫이다. +이번 주, 여러분의 8시간은 언제입니까?
출처: Starter Story 인터뷰(2026.09)
+
+ + + diff --git a/StuDoc/사업일지-비개발자의 바이브코딩 성공기.pdf b/StuDoc/사업일지-비개발자의 바이브코딩 성공기.pdf new file mode 100644 index 0000000..63aed18 Binary files /dev/null and b/StuDoc/사업일지-비개발자의 바이브코딩 성공기.pdf differ diff --git a/StuDoc/주간 AI 뉴스 정리 (10월 4주).html b/StuDoc/주간 AI 뉴스 정리 (10월 4주).html new file mode 100644 index 0000000..14ce921 --- /dev/null +++ b/StuDoc/주간 AI 뉴스 정리 (10월 4주).html @@ -0,0 +1,3356 @@ + + + + + + + + + +주간 AI 뉴스 정리 (10월 4주) + + + + + + + + + + + + + + + +
+
WEEKLY AI NEWS · 2026년 10월 넷째 주
한 주를 정리하는 +AI 뉴스
OpenAI × 구글 클라우드 · 메타 Muse Spark Open · Fable 5.5 흔적 +주간 뉴스 TOP 10 · 깃허브 트렌딩 TOP 5
유튜브 ‘문외인 Layperson’ 주간 AI 뉴스 영상(17분 35초) 요약
+
이번 주 구성
세 파트로 본 한 주의 AI
01
핵심 이슈 5
0:20 – 8:52
OpenAI × 구글 클라우드, 메타 Muse Spark Open, 딥시크 V4.1, Anthropic 안전 법안, Fable 5.5 후속
02
주간 뉴스 TOP 10
8:52 – 14:15
새 모델 포착부터 AI 기기, 메모리 시장, 기업의 AI 비용 통제까지
03
깃허브 트렌딩 TOP 5
14:15 – 16:52
에이전트 스킬, 멀티 AI 협업, 공식 플러그인, 앱 분석 도구
주간 AI 뉴스 · 2026년 10월 넷째 주
02
+
핵심 이슈 1 · 0:20
OpenAI 모델이 구글 클라우드에 들어간다
구글 클라우드 모델 가든에 들어가는 3종
GPT-6 Astra
GPT-6.1 Sol
GPT-6 Luna
  • 10월 22일 양사 블로그 동시 발표 — 현재 일부 기업 대상 비공개 프리뷰, 정식 출시는 몇 주 내
  • 구글 클라우드 마켓플레이스에서 구매, 구글 청구서 한 장·기존 클라우드 약정에서 차감
  • Codex CLI·데스크톱 앱을 구글 Gemini 플랫폼에 직접 연결, 곧 Antigravity·Gemini 에이전트에서도 선택 가능
  • OpenAI는 “마이크로소프트가 여전히 주 클라우드 파트너”라고 명시
영상의 해석
MS를 주 파트너로 두면서 구글 약정에 묶인 기업까지 고객으로 끌어오려는 포석. 구글도 자사 모델만으로는 기존 고객을 지키기 어렵다.
주간 AI 뉴스 · 2026년 10월 넷째 주
03
+
핵심 이슈 2 · 2:19
메타 Muse Spark Open, 책상 위에서 돈다
8,160억
전체 매개변수
420억
작동 시 사용 매개변수
100만
한 번에 처리하는 토큰
39점
AA 지능 지수 · 미국 오픈 가중치 1위
어떻게 개인 책상에서 돌리나
  • 애플 MLX에 최적화 — M5 Ultra 맥 스튜디오 2대 연결
  • 대당 통합 메모리 최대 512GB → 모델 전체를 메모리에
  • 글·이미지·영상·음성 입력, 오픈 가중치(별도 Muse 라이선스)
  • 데모: 로컬에서 오픈소스 앱 버그 수정, DaVinci Resolve로 세로 영상 편집
영상의 해석
세계 전체로 보면 중국의 GLM 5.3(45점)·Kimi K3(44점)이 여전히 위. 메타는 점수 경쟁보다 개인 장비에서 큰 에이전트를 돌리는 흐름을 먼저 잡으려는 것으로 보인다.
주간 AI 뉴스 · 2026년 10월 넷째 주
04
+
핵심 이슈 3 · 4:20
딥시크 V4.1 Flash 1017과 미국의 퇴출 명령
10/17 · 새 모델 공개
31.2 → 42.3
Terminal-Bench 점수(명령줄 코딩·시스템 작업)
  • 점수↑ 속도↑ 답변 길이↓ — 성능은 올리고 비용은 낮춤
  • 강화 학습으로 게임·3D 모델링 완성도 향상
  • 입력 100만 토큰, 모델 완전 개방
10/20 · 미국 정부의 조치
  • 국토안보부 장관, 연방 관보로 연방 민간기관 IT에서 딥시크 제품 퇴출 명령
  • 배경: 앞선 모델의 답을 교본 삼는 ‘증류’ 학습 의혹
  • 중국은 의혹을 부인하며 단호한 대응 경고
  • 화웨이와 칩 개발 중이라는 외신 보도도
자체 웹 검색 개방 · API는 10/31까지 무료
영상의 해석
퇴출 압박 속에서 코딩 성능과 자체 검색을 앞세워 독자적 개발 기반을 굳히려는 행보.
주간 AI 뉴스 · 2026년 10월 넷째 주
05
+
핵심 이슈 4 · 6:28
Anthropic의 연방 AI 안전 법안 초안 논란
무엇이 나왔나
회사의 안전 구상을 법안 문구로 옮긴 초안을 소수 의원실과 공유. 연방정책 담당 앤서니 치미노가 X에서 실재를 확인
쟁점 ① 주법 대체
캘리포니아 등 주별 AI 안전법을 연방 기준으로 대체. 시험 결과 공개·사고 보고는 연방 공통, 아동 보호 등만 주 권한
쟁점 ② 출시 차단 기준
상무부가 법원에 모델 차단을 요청할 문턱: 재정 피해 10억 달러 또는 10명 이상 사망·중상 가능성 — “너무 높다”는 비판
반응과 해석
다리오 아모데이는 초안 공유 등 3가지는 더 잘할 수 있었다고 인정, 치미노도 문구 수정을 약속. 법안 소식은 ‘규제를 만든다’보다 정부 개입 기준이 현실적인지를 먼저 볼 것.
주간 AI 뉴스 · 2026년 10월 넷째 주
06
+
핵심 이슈 5 · 지난주 후속 · 8:33
Fable 5.5, +아직 공식 확인은 없다
10/15
X 익명글: 파트너사가 이미 접근했다는 소문, 새 코드명 여러 개 포착
10/20
“오늘 나온다”는 주장 글이 조회수 21만 회를 넘김
현재
Anthropic은 아무것도 확인하지 않음 — 소문 단계
주간 AI 뉴스 · 2026년 10월 넷째 주
07
+
주간 AI 뉴스 · 8:52
TOP 10 – 6
순위
소식
핵심 내용
TOP 10
GPT-6.1 Terra 포착
MS 깃허브 코드에서 채점용 기본 모델을 GPT-5.6 → GPT-6.1 Terra로 일괄 변경(파일 18개). 미공개 차기 모델로 추정
TOP 9
엔비디아 Nemotron 3.5 Super VL
1,200억 매개변수 공개 모델. 에이전트 작업에서 동급 대비 5배 빠르고 정확도 최고. 4GB 초소형 모델도 예고
TOP 8
아마존 AI 기기 Bee 2종
대화를 요약·할 일로 정리. 손목형 Frontier $74.99(배터리 7일), 폰 부착형 Eclipse $99.99(21일 이상)
TOP 7
Reflection AI 공개 모델 Beam
Apache 2.0, 256개 전문가 MoE로 230억급 속도. 실전 코딩 시험 81.6%, 연산 3~4배 절약
TOP 6
ChatGPT GPT-6 Pro 업데이트
여러 에이전트가 한 작업을 나눠 동시 처리, 진행 과정을 대화창에서 추적. Pro 사용자부터 순차 적용
주간 AI 뉴스 · 2026년 10월 넷째 주
08
+
주간 AI 뉴스 · 11:22
TOP 5 – 1
순위
소식
핵심 내용
TOP 5
삼성전자 메모리 장기계약 추정
KB증권: 내년 메모리 물량 약 80% 장기계약 추정(HBM4 전량). 회사 공시 아님, 메모리 가격 부담 확대 전망
TOP 4
액센추어 Claude 한도 소문
직원 1인당 Claude 사용료를 월 29달러로 제한했다는 보도. 기업들의 토큰 비용 통제 흐름
TOP 3
Gemini 4 Argon, 마인크래프트 클리어
에이전트 4개가 화면 없이 코드만으로 27시간 동안 프로그램 2,783개를 짜서 엔더 드래곤 처치
TOP 2
GPT-Live 1.1 한국어 새 목소리
ChatGPT·Codex 음성에 적용, 한국어 포함 6개 언어 새 목소리. API에는 새 목소리 9개 추가
TOP 1
Anthropic 지분 5% 공익펀드로
주주 승인 조건. 기업가치가 기준보다 50% 오를 때마다 2%씩 추가. 창업자·직원 기부 약정 포함 약 20%
주간 AI 뉴스 · 2026년 10월 넷째 주
09
+
깃허브 트렌딩 · 14:15
개발을 돕는 오픈소스 TOP 5
순위
저장소
무엇을 하나
언어
누적 별
5
scientific-agent-skills
AI에 생물·화학·신약 개발 도구를 쥐여 연구원처럼
Python
53,767
4
android/skills
AI가 안드로이드 앱을 능숙하게 만들게 돕는 작업 기술
Kotlin
9,192
3
ruflo
여러 AI가 기억을 나누며 한 팀처럼 협업
TypeScript
78,329
2
claude-plugins-official
Anthropic이 직접 고른 공식 Claude 플러그인
Python
43,760
1
rea
기존 앱의 작동 원리를 AI가 밑바닥까지 분석
TypeScript
362,144
rea는 2주 연속 1위 — 한 주에 별 129,417개, 10월 16일 하루에만 32,282개
주간 AI 뉴스 · 2026년 10월 넷째 주
10
+
정리
이번 주를 관통한 세 가지 흐름
경쟁사끼리 +손을 잡는다
OpenAI 모델이 구글 클라우드로. 점수 싸움에서 유통·고객 확보 싸움으로
거대 모델이 +책상 위로
Muse Spark Open, Beam, Nemotron — 개인·자체 서버에서 돌리는 공개 모델 경쟁
비용과 규제가 +현실이 된다
액센추어의 Claude 한도, 안전 법안 기준 논쟁, 미국의 딥시크 퇴출
주간 AI 뉴스 · 2026년 10월 넷째 주
11
+
바로 해볼 것 · 16:52
이번 주, 직접 확인해 볼 세 가지
1
ChatGPT 설정에서 한국어 새 목소리 골라 억양 들어보기
2
딥시크 API 웹 검색 기능 — 10월 31일까지 무료
3
관심 가는 깃허브 저장소 하나 골라 직접 설치해 보기
원문 영상: youtu.be/EO5hHaH_uXE · 모든 소식의 원문 링크는 영상 설명란에 순서대로 정리돼 있음
12
+
+ + + diff --git a/StuDoc/주간 AI 뉴스 정리 (10월 4주).pdf b/StuDoc/주간 AI 뉴스 정리 (10월 4주).pdf new file mode 100644 index 0000000..3367b3e Binary files /dev/null and b/StuDoc/주간 AI 뉴스 정리 (10월 4주).pdf differ diff --git a/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.html b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.html new file mode 100644 index 0000000..f126bfb --- /dev/null +++ b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.html @@ -0,0 +1,3639 @@ + + + + + + + + + +프런트엔드 · 백엔드 · 저장소 구성 + + + + + + + + + + + + + + + +
+
바이브 코딩 실전 아키텍처
프런트엔드 · 백엔드 · 저장소
왜 나누었고, 무엇으로 만들고, 어떻게 한 번에 띄우는가
Streamlit
TypeScript
FastAPI
Go
n8n
PostgreSQL
InfluxDB
MongoDB
Prometheus
Grafana
Docker Compose
AI 애플리케이션 개발 과정 · 보충 강의
+
오늘의 흐름
다섯 단계로 따라가는 서비스 구조
01
배경과 역사
한 덩어리였던 웹은 왜 둘로 나뉘었나
02
구성도
Presentation · Domain Logic · Storage, 세 층의 책임
03
구성 환경
Streamlit · TypeScript / FastAPI · Go · n8n / PostgreSQL · InfluxDB · MongoDB
04
모니터링
Prometheus · InfluxDB · Grafana로 메트릭 수집과 시각화
05
배포
Docker Compose 한 파일로 전체 서비스 띄우기
06
협업
계약 · 규칙 파일 · Git 흐름으로 여럿이 함께 바이브 코딩
프런트엔드 · 백엔드 구성
02 / 27
+
01 · 배경과 역사
분리 이전: 한 파일에 모든 것이 섞여 있던 시대
서버가 HTML을 통째로 생성 +CGI · PHP · ASP · JSP — 1990년대 ~ 2000년대 초
화면 · 규칙 · DB 접근이 한 파일에 +디자이너와 개발자가 같은 파일을 고치며 충돌
클릭 한 번 = 페이지 전체 새로고침 +작은 변화에도 HTML 전체를 다시 받아 그림
새 클라이언트 = 로직 재작성 +모바일 앱이 생기면 같은 규칙을 또 구현
전형적인 PHP 페이지 (요약)
<?php +$db = mysqli_connect("localhost", "root", "pw"); +$rows = mysqli_query($db, +  "SELECT * FROM orders WHERE user=" . $_GET['u']); +?> +<table> +<?php while ($r = mysqli_fetch_assoc($rows)) { ?> +  <tr><td><?= $r['item'] ?></td> +      <td><?= $r['price'] * 1.1 ?></td></tr> +<?php } ?> +</table>
주황 = DB 접근 · 청록 = 업무 규칙(부가세 10%) · 나머지 = 화면 +문자열을 이어 붙인 쿼리는 SQL 인젝션 위험까지 안고 있다
프런트엔드 · 백엔드 구성
03 / 27
+
01 · 배경과 역사
전환점: 무엇이 분리를 이끌었나
2000
REST
로이 필딩의 박사 논문 — 자원은 URL로, 동작은 HTTP 메서드로
2005
AJAX
페이지 이동 없이 데이터만 주고받는 방식에 이름이 붙음
2007
스마트폰
브라우저 밖 클라이언트 폭증 — 앱도 같은 데이터를 요청
2009
Node.js
JavaScript로 서버 작성 — JSON API가 표준처럼 확산
2010–14
SPA 프레임워크
AngularJS · React · Vue — 화면은 브라우저가 직접 그림
2013–14
Docker · Compose
층마다 컨테이너로 묶어 함께 실행하는 길이 열림
결과: 화면을 그리는 쪽(프런트엔드)과 데이터 · 규칙을 다루는 쪽(백엔드)이 HTTP + JSON이라는 계약(API)으로만 대화하게 되었다.
프런트엔드 · 백엔드 구성
04 / 27
+
01 · 배경과 역사
분리 이후: 무엇이 나아졌나
역할 분리
화면 담당과 로직 담당이 API 명세만 합의하고 동시에 개발
클라이언트 재사용
웹 · 모바일 · n8n · 다른 서버가 같은 API를 호출
독립 배포
화면 문구만 바꿔도 백엔드는 그대로 — 배포 단위가 작아짐
독립 확장
요청이 몰리는 백엔드만 컨테이너를 늘림
기술 선택의 자유
화면은 TypeScript, AI 로직은 Python, 수집기는 Go
대가도 있다
네트워크 왕복 · CORS · API 버전 관리 · 배포 대상 증가
그래서 구성도(누가 무엇을 하나)와 배포 도구(어떻게 함께 띄우나)가 필요해졌다.
프런트엔드 · 백엔드 구성
05 / 27
+
02 · 구성도
세 개의 층, 두 개의 계약
Presentation Layer
프런트엔드
  • 화면 그리기 · 입력 받기
  • 입력 형식 1차 검사
  • 결과 · 로딩 · 오류 표시
예: Streamlit, React(TS)
HTTP +JSON
Domain Logic
백엔드
  • 업무 규칙 · 계산 · 권한
  • 입력 재검증 · 트랜잭션
  • LLM · 외부 API 호출
예: FastAPI, Go, n8n
SQL +드라이버
Storage
저장소
  • 데이터 영속화
  • 데이터 모양별 DB 선택
  • 백업 · 보존 정책
예: PostgreSQL, InfluxDB, MongoDB
규칙 하나: 프런트엔드는 DB를 직접 만지지 않는다. 모든 데이터는 백엔드 API를 지난다.
프런트엔드 · 백엔드 구성
06 / 27
+
02 · 구성도
층별 책임: 해야 할 일과 하지 말아야 할 일
층
해야 할 일
하지 말아야 할 일
AI에게 줄 한 줄
프런트엔드
화면 상태 관리, 입력 형식 검사, 로딩 · 오류 표시
DB 접속 정보 보관, 가격 · 권한 계산, API 키 노출
“DB에는 접근하지 말고 백엔드 API만 호출해”
백엔드
업무 규칙, 권한 확인, 입력 재검증, 트랜잭션, LLM 호출
화면 문구 · 레이아웃 결정, 프런트엔드 검증만 믿기
“엔드포인트별 요청 · 응답 스키마를 Pydantic으로 먼저 정의해”
저장소
제약조건으로 정합성 보장, 인덱스, 백업
업무 로직을 저장 프로시저에 몰아넣기, 비밀번호 평문 저장
“스키마와 마이그레이션 파일을 분리하고 초기 데이터를 넣어줘”
프런트엔드 · 백엔드 구성
07 / 27
+
03 · 구성 환경 — 프런트엔드
Python Streamlit, 또는 TypeScript
Streamlit · Python
  • Python 한 언어로 화면까지 — 백엔드 개발자가 바로 UI 작성
  • 상호작용마다 스크립트를 위에서 아래로 다시 실행하는 단순한 모델
  • 적합: 사내 대시보드 · AI 데모 · PoC / 한계: 세밀한 UI, 대규모 공개 서비스
import requests +import streamlit as st + +q = st.text_input("질문") +if st.button("보내기"): +    r = requests.post(f"{API}/ask", json={"q": q}) +    st.write(r.json()["answer"])
React · Next.js · TypeScript
  • React + Vite(SPA) 또는 Next.js(서버 렌더링 포함)
  • 컴포넌트 · 상태로 복잡한 화면을 쪼개고, 타입으로 API 응답 구조를 검사
  • 적합: 대외 서비스 · 복잡한 UI / 한계: 빌드 도구 · 학습량
const res = await fetch(`${API}/ask`, { +  method: "POST", +  headers: { "Content-Type": "application/json" }, +  body: JSON.stringify({ q }), +}); +const { answer } = await res.json(); +setAnswer(answer);
프런트엔드 · 백엔드 구성
08 / 27
+
03 · 구성 환경 — 백엔드
백엔드: 로직을 무엇으로 만들까
FastAPI
Python
강점 타입 힌트 → Pydantic 자동 검증, /docs에 OpenAPI 문서 자동 생성, async 지원
적합 AI · RAG · 데이터 처리 API — LangChain, LiteLLM 등 Python 생태계와 직결
주의 CPU를 오래 쓰는 작업은 워커 · 큐로 분리
Go
Gin · Echo · 표준 net/http
강점 단일 실행 파일 배포, 고루틴 기반 높은 동시성, 적은 메모리
적합 API 게이트웨이, 센서 · 로그 수집기, 트래픽 많은 API
주의 AI 라이브러리는 Python보다 적음 → AI 처리는 Python 서비스에 맡기기
n8n
AI 워크플로우
강점 노드 연결로 LLM · RAG · SaaS 연동, Webhook 노드로 API처럼 호출
적합 자주 바뀌는 AI 흐름, 알림 · 연동 자동화, 비개발자와 협업
주의 권한 · 결제 같은 핵심 로직은 코드 백엔드에 두기
조합이 일반적이다: FastAPI가 관문이 되고, 자주 바뀌는 AI 흐름은 n8n에, 고성능 수집은 Go에 맡긴다.
프런트엔드 · 백엔드 구성
09 / 27
+
03 · 구성 환경 — 백엔드
백엔드 로직 안에서 n8n AI 워크플로우 쓰기
① 프런트엔드 · POST /ask 요청
② FastAPI · 인증 · 입력 검증 · 비용 한도
③ n8n Webhook 노드 · 요청 수신
④ AI Agent 노드 · LLM + RAG + 도구
⑤ Respond to Webhook → FastAPI 저장 · 응답
@app.post("/ask") +async def ask(req: AskReq, user=Depends(auth)): +    async with httpx.AsyncClient(timeout=60) as c: +        r = await c.post(f"{N8N_URL}/webhook/ask", +            json={"q": req.q, "user": user.id}) +    r.raise_for_status() +    result = r.json() +    await save_log(user.id, req.q, result) +    return result
왜 백엔드를 거칠까? n8n 주소와 LLM 키를 숨기고, 권한 · 비용 한도 · 로그를 한 곳에서 관리하기 위해서.
참고: 편집기 테스트 주소는 /webhook-test/…, 운영 주소 /webhook/…는 워크플로우를 활성화해야 동작
프런트엔드 · 백엔드 구성
10 / 27
+
03 · 구성 환경 — 저장소
데이터의 모양과 쓰임이 다르면, +맞는 저장소도 다르다
DB 하나로 모든 것을 해결하려 하면 어딘가에서 성능이나 유연성을 잃는다 — 이를 폴리글랏 퍼시스턴스(Polyglot Persistence)라 부른다.
구조가 고정된 레코드
RDB · PostgreSQL
회원 · 설비 · 주문처럼 관계가 있고, 정확한 수정(CRUD)과 트랜잭션이 중요
시간 + 숫자
시계열 DB · InfluxDB
센서 · 메트릭처럼 초 단위로 계속 쌓이고, 기간별 평균 · 최대로 조회
자주 바뀌는 구조
NoSQL 문서 · MongoDB
설정 · 메타데이터처럼 키가 수시로 추가 · 변경되는 JSON 문서
프런트엔드 · 백엔드 구성
11 / 27
+
03 · 구성 환경 — 저장소
세 저장소 비교: 무엇을, 왜
구분
PostgreSQL · RDB
InfluxDB · 시계열
MongoDB · 문서 NoSQL
데이터 모양
고정 스키마 테이블 + 관계(외래 키)
시간 + 태그 + 정수 · 실수 필드
JSON 문서, 문서마다 키가 달라도 됨
주된 작업
레코드 CRUD · JOIN · 트랜잭션
계속 추가(append) · 기간 집계
문서 단위 읽기 · 쓰기, 중첩 구조 저장
왜 이 DB인가
ACID 트랜잭션 · 제약조건으로 정합성
시간순 압축, 보존 정책으로 자동 삭제
ALTER 없이 새 키를 바로 추가
예시
설비 마스터 · 사용자 · 작업 지시
센서 온도 · 진동, API 응답 시간
장비별 임계값, 프롬프트 템플릿
주의
초당 수천 건 시계열 적재엔 부담
행 수정 · JOIN 같은 관계 연산에 약함
스키마 검증 책임이 앱으로 이동
프런트엔드 · 백엔드 구성
12 / 27
+
03 · 구성 환경 — 들여다보기
설비 “press-01”을 세 저장소에 담으면
PostgreSQL · 설비 마스터
CREATE TABLE equipment ( +  id   SERIAL PRIMARY KEY, +  name TEXT NOT NULL, +  line TEXT NOT NULL +); +INSERT INTO equipment +  (name, line) +VALUES ('press-01', 'A');
스키마가 먼저 — 규칙에 어긋난 값은 DB가 거절한다(NOT NULL)
InfluxDB · 센서 값 (Line Protocol)
# 측정이름,태그 필드 [타임스탬프] +machine,eq=press-01 temp=71.3,vib=0.42 +machine,eq=press-01 temp=71.9,vib=0.45 +machine,eq=press-01 temp=72.4,vib=0.51 + +# 최근 1시간, 5분 평균 (Flux 일부) +|> range(start: -1h) +|> aggregateWindow(every: 5m, fn: mean)
한 줄 = 한 시점의 측정값. 타임스탬프를 생략하면 서버 수신 시각이 들어간다
MongoDB · 장비 설정
db.config.insertOne({ +  eq: "press-01", +  threshold: { temp: 85 }, +  model: "lstm-v3", +  alerts: ["slack", "sms"] +}) + + 
문서마다 구조가 달라도 됨 — 새 키(alerts)는 그냥 넣으면 끝
프런트엔드 · 백엔드 구성
13 / 27
+
04 · 모니터링
수집 → 저장 → 시각화
FastAPI 백엔드
/metrics · 요청 수 · 응답 시간
Go 수집 서비스
/metrics · 처리량 · 큐 길이
node_exporter
서버 CPU · 메모리 · 디스크
센서 게이트웨이 · Telegraf
설비 온도 · 진동 값
Pull
Push
Prometheus
설정한 주기(예: 15초)마다 대상의 /metrics를 가져감
서비스 · 시스템 메트릭, 보존 기간 짧게(기본 15일)
InfluxDB
앱 · Telegraf가 직접 써 넣음
센서 · 비즈니스 시계열, 보존 정책으로 장기 보관
PromQL +Flux/SQL
Grafana
  • 두 저장소를 데이터 소스로 연결
  • 대시보드 · 패널 구성
  • 임계값 알림 → Slack · 메일
Prometheus는 “서버가 아픈가”, InfluxDB는 “설비가 아픈가”를 본다 — Grafana는 둘을 한 화면에.
프런트엔드 · 백엔드 구성
14 / 27
+
04 · 모니터링
어떤 메트릭을 구할까: RED와 USE
RED · 서비스(API) 관점
Rate — 초당 요청 수 +Errors — 오류 비율 +Duration — 응답 시간(p95 · p99)
USE · 자원(서버) 관점
Utilization — CPU · 메모리 사용률 +Saturation — 포화(대기열 · 부하) +Errors — 디스크 · 네트워크 오류
# 초당 요청 수 (최근 5분 기준) +sum(rate(http_requests_total[5m])) + +# 5xx 오류 비율 +sum(rate(http_requests_total{status=~"5.."}[5m])) +  / sum(rate(http_requests_total[5m])) + +# p95 응답 시간(초) +histogram_quantile(0.95, sum by (le) +  (rate(http_request_duration_seconds_bucket[5m])))
FastAPI에 prometheus-fastapi-instrumentator를 붙이면 /metrics가 열리고 위 지표들이 자동으로 생긴다.
프런트엔드 · 백엔드 구성
15 / 27
+
05 · 배포
왜 Docker Compose인가
직접 하나씩 실행하면
  • 서비스 8개를 각각 설치 · 실행
  • 포트 · 환경변수 · 버전을 사람이 기억
  • “내 PC에선 되는데 서버에선 안 돼요”
compose.yaml 하나로
  • 서비스 · 네트워크 · 볼륨을 한 파일에 선언
  • 노트북 · 사내 서버 어디서나 같은 결과
  • 서비스 이름으로 서로 통신(내부 DNS)
docker compose up -d
전체를 백그라운드로 기동
docker compose ps
상태 · 헬스체크 확인
docker compose logs -f backend
백엔드 로그 따라가기
docker compose up -d --build backend
코드 수정 후 백엔드만 다시 빌드
docker compose down
중지 · 삭제 (볼륨 데이터는 유지)
docker compose down -v
주의: 볼륨까지 삭제 — 데이터 소멸
프런트엔드 · 백엔드 구성
16 / 27
+
05 · 배포 — compose.yaml ①
앱 서비스: 프런트엔드 · 백엔드 · n8n
services: +  frontend: +    build: ./frontend          # Streamlit +    ports: ["8501:8501"] +    environment: +      API_URL: http://backend:8000 +    depends_on: [backend] +  backend: +    build: ./backend           # FastAPI +    env_file: .env +    environment: +      N8N_URL: http://n8n:5678 +    depends_on: +      postgres: { condition: service_healthy } +  n8n: +    image: n8nio/n8n +    ports: ["5678:5678"] +    volumes: [n8ndata:/home/node/.n8n]
① 서비스 이름 = 주소
컨테이너끼리는 localhost가 아니라 http://backend:8000처럼 이름으로 호출
② build와 image
내가 만든 코드는 build(Dockerfile), 남이 만든 소프트웨어는 image
③ depends_on + condition
DB 헬스체크가 통과한 뒤에야 백엔드가 시작
④ ports = 외부 공개
브라우저가 직접 들어오는 Streamlit · n8n 편집기만 연다
프런트엔드 · 백엔드 구성
17 / 27
+
05 · 배포 — compose.yaml ②
저장소와 모니터링 서비스
  postgres: +    image: postgres:17 +    environment: { POSTGRES_PASSWORD: "${PG_PASSWORD}" } +    volumes: [pgdata:/var/lib/postgresql/data] +    healthcheck: +      test: ["CMD-SHELL", "pg_isready -U postgres"] +      interval: 5s +  mongo:    { image: mongo:8, volumes: [mongodata:/data/db] } +  influxdb: +    image: influxdb:2 +    volumes: [influxdata:/var/lib/influxdb2] +  prometheus: +    image: prom/prometheus +    volumes: [./prometheus.yml:/etc/prometheus/prometheus.yml] +  grafana: +    image: grafana/grafana +    ports: ["3000:3000"] +volumes: {pgdata: {}, mongodata: {}, influxdata: {}, n8ndata: {}}
named volume
컨테이너를 지워도 데이터 유지 — down -v는 볼륨까지 삭제
${PG_PASSWORD}
값은 .env 파일에, .env는 .gitignore에
healthcheck
pg_isready 성공 = “DB 준비 완료” 신호
# prometheus.yml +scrape_configs: +  - job_name: backend +    static_configs: +      - targets: ["backend:8000"]
프런트엔드 · 백엔드 구성
18 / 27
+
05 · 배포
바이브 코딩에서 자주 막히는 지점
증상
원인
해결
프런트엔드 → 백엔드 연결 거부
컨테이너 안의 localhost는 자기 자신
서비스 이름 사용: http://backend:8000
React 화면에서만 backend:8000 실패
브라우저는 도커 내부 이름을 모름
공개 포트 또는 리버스 프록시 주소 사용
백엔드가 뜨자마자 DB 연결 실패
DB가 준비되기 전에 백엔드 시작
healthcheck + service_healthy, 재시도
재시작했더니 데이터가 사라짐
볼륨 미선언, 또는 down -v 실행
named volume 선언, -v는 신중하게
브라우저 콘솔에 CORS 오류
다른 출처(포트)의 API 호출
FastAPI CORSMiddleware에 허용 출처 명시
API 키가 Git에 올라감
compose.yaml에 비밀값 직접 작성
.env로 분리 + .gitignore 등록
프런트엔드 · 백엔드 구성
19 / 27
+
06 · 여럿이 함께 바이브 코딩
각자 AI에게 시키면 생기는 일
이름 불일치
프런트엔드는 userName, 백엔드는 user_name을 주고받는다
테이블 중복
같은 개념인데 users와 members 테이블이 따로 생긴다
환경 불일치
포트 8000과 8080, requests와 httpx가 섞인다
남의 파일 수정
AI가 “고치는 김에” 다른 사람 폴더까지 바꾼다
AI는 빠르지만, 각자 다른 방향으로 빠르다.
해법은 하나 — 코드보다 계약을 먼저 합의하고, 모든 팀원의 AI가 같은 규칙과 같은 계약을 읽게 한다.
프런트엔드 · 백엔드 구성
20 / 27
+
06 · 여럿이 함께 바이브 코딩
역할은 층을 따라, 소유는 폴더 단위로
역할
소유 폴더
책임
지키는 계약
프런트엔드
frontend/
Streamlit 화면, API 연동, 오류 표시
openapi.yaml (사용하는 쪽)
백엔드
backend/
FastAPI 엔드포인트, 업무 규칙, 권한
openapi.yaml (만드는 쪽)
데이터 · 인프라
contracts/db/, monitoring/, compose.yaml
스키마 · 마이그레이션, 배포, 대시보드
DB 스키마, compose.yaml
AI 워크플로우
workflows/
n8n 흐름, 프롬프트, RAG 문서
Webhook 입출력 JSON
통합 담당(팀장)
계약 변경 승인과 main 머지를 책임진다. 역할과 겸해도 된다.
1인 개발이라면
네 개의 모자를 순서대로 쓴다 — AI 세션도 역할별로 나눈다.
프런트엔드 · 백엔드 구성
21 / 27
+
06 · 여럿이 함께 바이브 코딩
계약 우선: 하나의 저장소, 하나의 진실
project/ +├─ AGENTS.md          # AI 공통 규칙 +├─ docs/ +│  ├─ architecture.md  # 오늘의 구성도 +│  └─ adr/             # 결정 기록 +├─ contracts/ +│  ├─ openapi.yaml     # FE ↔ BE +│  └─ db/migrations/   # BE ↔ DB +├─ frontend/          # Streamlit +├─ backend/           # FastAPI +├─ workflows/         # n8n JSON export +├─ monitoring/        # prometheus.yml +├─ compose.yaml +└─ .env.example       # 키 이름만, 값은 X
openapi.yaml — 화면과 로직의 계약
엔드포인트와 요청 · 응답 필드. FastAPI가 만든 /openapi.json을 내보내 커밋해도 된다
db/migrations — 로직과 저장소의 계약
테이블 변경은 Alembic 같은 마이그레이션 파일로만
compose.yaml + .env.example
서비스 이름 · 포트 · 환경변수 키의 단일 기준
docs/adr — 왜 그렇게 정했나
짧은 결정 기록은 사람에게도, AI에게도 맥락이 된다
프런트엔드 · 백엔드 구성
22 / 27
+
06 · 여럿이 함께 바이브 코딩
모든 팀원의 AI가 같은 규칙을 읽게
# AGENTS.md — 모든 AI 공통 규칙 + +## 구조 +- frontend는 backend API만 호출한다 (DB 접근 금지) +- API를 바꾸려면 contracts/openapi.yaml부터 수정 +- DB 변경은 마이그레이션 파일로만 +## 저장소 +- 마스터 PostgreSQL · 센서 InfluxDB · 설정 MongoDB +## 금지 +- 비밀값 하드코딩 금지 → .env에서 읽기 +- 작업 범위로 지정된 폴더 밖 파일 수정 금지 +## 완료 조건 +- docker compose up 후 /health 200 +- 테스트 통과, 변경한 계약은 PR 본문에 명시
원본은 하나
도구마다 읽는 파일이 다르다. Codex는 AGENTS.md, Claude Code는 CLAUDE.md — CLAUDE.md에 @AGENTS.md 한 줄로 원본을 불러온다
실수는 규칙으로 쌓는다
AI가 같은 실수를 반복하면(예: 화면 코드에서 또 DB 직접 접속) 프롬프트로 매번 말하지 말고 AGENTS.md에 금지 규칙을 한 줄 적는다. 팀 전체 AI가 읽는 파일이므로 혼자 고치지 않고 PR로 올려 함께 확인한다
첫 프롬프트 습관
“AGENTS.md와 contracts/를 먼저 읽고, backend/ 안에서만 작업해”
프런트엔드 · 백엔드 구성
23 / 27
+
06 · 여럿이 함께 바이브 코딩
작업 한 건의 흐름: 이슈에서 머지까지
① 이슈
작업 단위 하나
② 브랜치
feat/be-ask
③ AI 구현
규칙 · 계약 참조
④ 로컬 검증
compose up · 테스트
⑤ PR
템플릿 작성
⑥ 리뷰 · CI
사람 1명 + AI
⑦ 머지
main은 보호
PR 템플릿 예시
## 무엇을 +- /ask 엔드포인트에 사용자별 비용 한도 추가 +## 계약 변경 +- [x] openapi.yaml  [ ] DB  [ ] compose +## AI 사용 +- 도구 · 핵심 프롬프트 요약 +## 확인 +- [x] compose up 후 /health 200 +- [x] pytest 통과
main 직접 push 금지 — 브랜치 보호 규칙으로 막는다
PR은 작게 — 하루 안에 리뷰할 수 있는 크기
설명할 수 있어야 머지 — AI가 쓴 코드도 작성자가 리뷰어에게 설명
CI 자동 실행 — PR마다 compose 빌드 + 테스트
프런트엔드 · 백엔드 구성
24 / 27
+
06 · 여럿이 함께 바이브 코딩
CI/CD: 검사와 배포는 사람 대신 기계가
① PR 생성
push하면 시작
② CI
빌드 · 테스트
③ 머지
통과 + 리뷰 후
④ CD
서버에 배포
⑤ 관측
Grafana · 롤백
CI — PR마다 자동 검사 (GitHub Actions 예시)
# .github/workflows/ci.yml +on: [pull_request] +jobs: +  test: +    runs-on: ubuntu-latest +    steps: +      - uses: actions/checkout@v4 +      - run: echo "PG_PASSWORD=${{ secrets.PG_PASSWORD }}" > .env +      - run: docker compose up -d --build --wait +      - run: docker compose exec -T backend pytest +      - run: docker compose down -v
CD — main에 들어가면 배포
이미지를 빌드해 레지스트리에 올리고(태그 = 커밋 해시), 서버에서 compose pull 후 up -d
배포 뒤엔 관측
Grafana에서 오류율 · p95 확인, 이상하면 이전 태그로 롤백
시작은 CI부터
자동 테스트 없는 자동 배포는 위험하다. 사내 Gitea Actions도 거의 같은 문법
프런트엔드 · 백엔드 구성
25 / 27
+
06 · 여럿이 함께 바이브 코딩
계약이 있으면 기다리지 않고 동시에 만든다
역할
Day 0 · 함께
구현 · 각자 병렬
매일 통합
프런트엔드
화면 목록, 필요한 API 정리
mock 서버로 화면 개발
실제 백엔드 주소로 전환
백엔드
openapi.yaml 초안
엔드포인트 구현, 계약 테스트
main 머지, /docs 확인
데이터 · 인프라
스키마, compose 골격
마이그레이션, 시드 데이터, 대시보드
compose up 통합 점검
AI 워크플로우
Webhook 입출력 정의
n8n 흐름, 프롬프트, RAG 문서
워크플로우 JSON export 커밋
백엔드 없이 화면부터 — mock 서버
npx @stoplight/prism-cli mock contracts/openapi.yaml
계약 변경 절차
제안 PR → 영향 담당자 승인 → 계약 먼저 머지 → 각자 구현 수정
프런트엔드 · 백엔드 구성
26 / 27
+
정리
AI에게 구조를 먼저 말하면, 코드가 덜 흔들린다
1
층을 나눈다 +화면 · 규칙 · 저장을 섞지 않는다
2
데이터 모양으로 저장소를 고른다 +레코드 · 시계열 · 문서
3
처음부터 관측하고, 한 파일로 띄운다 +/metrics + compose.yaml
프롬프트 예시
“프런트엔드는 Streamlit, 백엔드는 FastAPI로 분리해 줘. 프런트엔드는 백엔드 API만 호출한다. 설비 정보는 PostgreSQL, 센서 값은 InfluxDB, 장비 설정은 MongoDB에 저장한다. 백엔드는 /metrics를 노출하고, Prometheus · Grafana까지 포함한 compose.yaml을 만들어 줘. 비밀값은 .env로 분리해 줘.”
프런트엔드 · 백엔드 구성
27 / 27
+
+ + + diff --git a/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pdf b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pdf new file mode 100644 index 0000000..1aece0e Binary files /dev/null and b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pdf differ diff --git a/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pptx b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pptx new file mode 100644 index 0000000..0eb7fd2 Binary files /dev/null and b/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.pptx differ