VC 바이브코딩 첫 수업 AI 앱 구조 한 바퀴

비개발자를 위한 바이브코딩 기초

바이브코딩,
앱의 구조부터 이해한다.

AI에게 앱을 만들어 달라고 말하기 전에 화면, 서버, AI, DB가 어떻게 이어지는지 알아야 한다. 토큰부터 RAG까지 핵심 개념 7개를 직접 눌러보며 익힌다.

색으로 구분하기

같은 색은 항상 같은 역할을 뜻한다.

  • 자료 · 문서
  • AI · LLM
  • 저장 · DB
  • 도구 · 외부 연결
AI 앱 구성도 각 부품을 눌러보세요
화면 (Frontend)

손님이 보는 매장이다. 버튼과 결과만 보이고, 실제 요리는 뒤에서 벌어진다. 이 사이트의 지금 이 화면도 Frontend다.

0교시

오늘 배울 7개 단어 지도

외울 필요 없다. “이 부품은 무슨 역할인가” 한 줄씩만 잡고 출발한다.

1교시

토큰: AI는 글을 조각으로 세고, 조각만큼 돈을 받는다

끝나면 이렇게 말할 수 있다 — “토큰은 글의 레고 조각이자 요금 단위다.”

토큰 미터기 요청 문장을 골라보세요
입력 토큰 9
예상 영수증
모델
gemini-2.5-flash-lite
입력 토큰
9
출력 토큰(예상)
150
예상 비용
$0.00006

짧은 요청은 커피 한 잔의 10만분의 1 수준이다.

토큰 경계는 모델마다 조금씩 다르다. 여기서는 감을 잡기 위한 대략적인 조각이다.

바이브코딩에 써먹기

“유료 AI를 호출할 때마다 모델명, 입력/출력 토큰, 예상 비용을 DB에 기록하는 코드도 같이 만들어줘.”

30초 체크

회의록 전체를 매번 AI에게 통째로 붙이면 어떤 일이 생길까?

2교시

LLM: 지금까지의 글을 보고, 다음 조각을 고른다

끝나면 이렇게 말할 수 있다 — “LLM은 생각하는 사람이 아니라, 다음 토큰을 계속 고르는 엔진이다.”

다음 토큰 예측기 AI가 문장을 만드는 실제 방식
지금까지의 글

사장님 보고 한 줄 요약: 신제품 출시일은

다음 토큰 후보와 확률

버튼을 누르면 확률이 가장 높은 조각이 문장 뒤에 붙는다.

그럼 AI는 뭘 보고 답할까? — 책상(컨텍스트 창)에 올라온 것만 본다

컨텍스트 창 = AI의 책상이다. 책상에 올라온 종이만 읽을 수 있고, 책상 크기(토큰 한도)는 정해져 있다. 버튼을 순서대로 눌러 책상이 채워지는 과정을 보자.

먼저 “어떤 방식으로 일해야 하는지” 기본 규칙 종이가 책상에 올라간다.
AI의 책상 · Context 책상 18% 사용
기본 규칙

한국어로 쉽게 설명해. 전문 용어에는 비유를 붙여.

내 질문

RAG가 뭔지 초보자에게 설명해줘.

참고자료

문서 조각, 검색 결과, 회의록처럼 밖에서 찾아온 자료.

AI의 답

RAG는 필요한 자료를 찾아 책상 위에 올려주는 방식입니다.

다음 질문

그럼 임베딩은 RAG에서 어떤 역할이야?

책상이 차면 오래된 종이를 치우거나 요약해야 한다. 이게 “컨텍스트 관리”다.

바이브코딩에 써먹기

“대화가 길어지면 오래된 내용은 요약해서 컨텍스트를 관리해줘. 중요한 결정사항은 따로 저장해줘.”

30초 체크

LLM이 어제 회의 내용을 “기억해서” 답할 수 있을까?

3교시

임베딩: 문장을 “의미 지도” 위의 위치로 바꾼다

끝나면 이렇게 말할 수 있다 — “검색은 키워드 맞추기가 아니라, 지도에서 가까운 점 찾기다.”

3차원 의미 공간 질문을 바꾸면 검색 위치가 이동합니다
강아지가 귀엽다 고양이가 예쁘다 맛있는 아이스크림은 00가게에 판다 회의 음성을 텍스트로 변환한다 질문: 반려동물 칭찬

그래프를 좌우로 움직여 세 축과 문장을 확인하세요.

바이브코딩에 써먹기

“검색 기능은 키워드 검색 말고 임베딩 기반 의미 검색으로 만들어줘. 비슷한 뜻이면 단어가 달라도 찾게.”

30초 체크

“멍멍이 최고”라고 검색하면 이 지도에서 어떤 문장이 먼저 나올까?

4교시

RAG: 자료를 잘라 두고, 필요한 조각만 찾아 책상에 올린다

끝나면 이렇게 말할 수 있다 — “RAG는 AI를 다시 가르치는 게 아니라, 참고자료를 펼쳐주는 방식이다.”

회의록
30쪽
자르기
조각1조각2조각3
미리 잘라 둔다

긴 문서를 작은 조각(청크)으로 나눈다.

조각1좌표조각2좌표조각3좌표
지도에 등록한다

조각마다 임베딩 좌표를 붙여 DB에 저장한다.

사용자 질문
조각1조각2조각3
가까운 조각을 찾는다

질문과 의미가 가까운 조각만 골라낸다.

조각2LLM
책상에 올리고 답한다

찾은 조각을 컨텍스트에 넣어 근거 있는 답을 만든다.

직접 잘라 보기 — 자르는 방식에 따라 검색 품질이 달라진다

같은 문서라도 “어떻게 자르냐”가 RAG 품질을 좌우한다. 두 방식을 비교해 보자.

예시 문서회의록 업로드 기능 설명서
# 회의록 업로드 기능

## 1. 오디오 업로드
사용자는 회의 녹음 파일을 업로드한다.
앱은 파일 형식과 용량을 먼저 확인한다.
업로드가 끝나면 서버는 처리 대기열에 작업을 넣는다.

## 2. STT 변환
서버는 STT API로 음성을 텍스트로 바꾼다.
긴 회의는 10분 단위로 나눠 변환한다.
변환 결과에는 발화 시간과 화자 후보를 함께 저장한다.

## 3. 저장, 검색, 비용 기록
긴 회의록은 주제별 챕터로 나누어 저장한다.
각 챕터는 임베딩되어 검색용 DB에 들어간다.
모든 STT와 LLM 호출은 사용량 로그에 기록한다.
자르는 방식 선택

청킹 = 긴 문서를 AI가 다루기 좋은 조각으로 자르는 일.

길이 기준은 일정한 분량으로 자르고, 앞뒤 문장을 조금 겹쳐 맥락이 끊기지 않게 한다. 노란 부분이 겹친 문장이다.
조각 1

사용자는 회의 녹음 파일을 업로드한다. 앱은 파일 형식과 용량을 먼저 확인한다. 업로드가 끝나면 서버는 처리 대기열에 작업을 넣는다.

조각 2 ← 검색됨

업로드가 끝나면 서버는 처리 대기열에 작업을 넣는다. 서버는 STT API로 음성을 텍스트로 바꾼다. 긴 회의는 10분 단위로 나눠 변환한다.

조각 3

긴 회의는 10분 단위로 나눠 변환한다. 변환 결과에는 발화 시간과 화자 후보를 함께 저장한다. 긴 회의록은 주제별 챕터로 나누어 저장한다.

질문“회의 음성은 어떻게 텍스트가 되나요?”
질문을 좌표로
거리 비교
가까운 조각 선택
책상에 올리기
조각 2가 질문과 가장 가깝다. 겹쳐 둔 문장 덕분에 “업로드 직후 → STT 변환” 흐름이 끊기지 않고 읽힌다.
바이브코딩에 써먹기

“사내 문서 질문 기능은 RAG로 만들어줘. 문서를 제목 단위로 자르고, 질문과 가까운 조각 3개만 컨텍스트에 넣어줘.”

30초 체크

RAG를 도입하면 AI 모델 자체가 우리 회사 문서를 학습하게 될까?

5교시

API와 MCP: 남의 기능을 빌려 쓰는 두 가지 창구

끝나면 이렇게 말할 수 있다 — “API는 서비스별 주문 창구, MCP는 AI 도구용 공용 플러그다.”

API 주문 창구 주문 → 처리 → 응답 → 기록
내 앱의 부탁 회의 파일을 텍스트로 바꿔줘
주문서를 보내면 처리 과정이 한 줄씩 나타난다.

MCP — 도구마다 어댑터를 만들지 말고, 공용 플러그로 꽂는다

AI에게 파일함, 캘린더, DB를 쓰게 하려면 원래는 도구마다 연결 코드를 따로 만들어야 했다. MCP는 그 연결을 하나의 표준 규격으로 통일한 약속이다. 도구를 눌러 AI에 꽂아보자.

LLM AI MCP 플러그 지원
도구를 누르면 AI가 그 도구를 쓰는 과정이 표시된다.
바이브코딩에 써먹기

“캘린더 연동은 직접 구현하지 말고 공식 API를 써줘. 실패했을 때의 에러 처리와 로그도 같이 만들어줘.”

30초 체크

내 앱에 “음성을 글자로 바꾸는 기능”을 넣고 싶다. 가장 현실적인 방법은?

6교시

DB: 한 장짜리 엑셀을 장부 여러 권으로 나눈다

끝나면 이렇게 말할 수 있다 — “같은 정보가 여러 줄에 반복되면, 장부를 나눌 때가 된 것이다.”

정리 전: 한 장에 다 넣은 엑셀어디서 많이 본 모양
사번이름이메일법인부서직책매니저FTE 1월FTE 2월
26001429김민수[email protected]KR01HRHR Manager이서연1.00.8
26001429김민수[email protected]KR01PeoplePeople Lead이서연1.00.8
26001802박지훈[email protected]KR01OperationsOps Specialist김민수1.01.0

문제 김민수가 두 줄에 반복되고, 월이 바뀔 때마다 칸이 옆으로 늘어난다. 수정할 곳이 많아져 실수가 생기기 쉽다.

장부 정리

버튼을 누르면 엑셀 한 장이 사람 장부 자리 장부 근무기록 장부 세 권으로 나뉜다.

person · 사람 장부

사람 자체의 신원 카드. 부서를 옮겨도 안 바뀌는 값만 둔다.

person_idemployee_idnamework_emaillegal_entity
P00126001429김민수[email protected]KR01
P00226001802박지훈[email protected]KR01
position · 자리 장부

조직 안의 의자. 사람이 나가도 의자는 남는다.

position_codeorg_codetitlefunctionmanager_position
KR01_HR_L4_001KR01_HR_1000HR ManagerHRKR01_HR_L5_001
KR01_OPS_L2_014KR01_OPS_1200Ops SpecialistOperationsKR01_HR_L4_001
assignment_fte_period · 근무기록 장부

누가 어느 의자에 언제 얼마나 앉았는지 적는 연결 장부.

person_idposition_codeperiodactual_ftesource
P001KR01_HR_L4_0012026-011.0LOCAL_HR
P001KR01_HR_L4_0012026-020.8LOCAL_HR
P002KR01_OPS_L2_0142026-021.0GLOBAL_HR
한 사람 따라가 보기

버튼을 누르면 세 장부에서 같은 사람의 기록이 형광펜으로 이어진다.

AI 앱의 필수 장부 — 비용 영수증철

유료 AI를 쓰는 앱이라면 장부가 하나 더 필요하다. 호출할 때마다 “무슨 모델을, 어떤 기능에서, 얼마나 썼는지”를 남기는 사용량 로그다. 이 장부가 없으면 어느 기능에서 돈이 새는지 아무도 모른다.

  • 모델명 무엇을 시켰나
  • input / output 토큰 얼마나 읽고 썼나
  • 예상 비용 얼마가 나갔나
  • operation_type 어느 기능이 썼나
  • timestamp 언제 썼나
llm_usage_log 한 줄 = 영수증 한 장
model
gemini-2.5-flash-lite
operation_type
meeting_summary
input_tokens
1,240
output_tokens
210
estimated_cost_usd
$0.000208
created_at
2026-07-11 09:30
바이브코딩에 써먹기

“엑셀처럼 한 장에 다 넣지 말고, 사람·자리·기록처럼 역할별 장부로 나눠서 DB를 설계해줘.”

30초 체크

3월이 되면 이 데이터는 어떻게 기록될까?

7교시

실전: 오늘 배운 부품이 실제 앱에서 이어지는 모습

전부 비개발자가 바이브코딩으로 만든 실제 프로젝트다. 파이프라인의 색을 읽어보자.

종례

바이브코딩 치트시트 — 복사해서 바로 쓰는 문장들

오늘 배운 개념은 결국 “AI에게 어떻게 시키느냐”로 완성된다. 필요할 때 복사해서 쓰자.

비용

“유료 AI를 호출하는 모든 코드에는 모델명, 토큰 수, 예상 비용을 DB에 기록하는 로직을 같이 넣어줘.”

RAG

“문서 검색 기능은 RAG로 만들어줘. 문서를 조각내고 임베딩해서, 질문과 가까운 조각만 컨텍스트에 넣어줘.”

DB

“DB는 엑셀처럼 한 장에 다 넣지 말고 역할별 장부로 나눠 설계해줘. 각 장부의 역할을 한 줄씩 설명해줘.”

안전

“AI가 DB 원본을 직접 고치지 않게 해줘. 초안을 만들면 사람이 승인한 뒤에만 반영되게 하고, 감사 로그를 남겨줘.”

API

“외부 기능은 공식 API로 연결해줘. 실패했을 때의 에러 처리, 재시도, 로그까지 같이 만들어줘.”

설명 요청

“지금 만든 구조를 비개발자에게 설명하듯 그림과 비유로 설명해줘. 내가 이해 못 하면 다시 쉽게.”

오늘의 한 문장

“AI 앱을 만든다는 건, AI의 책상에 무엇을 올릴지 정하고 장부를 남기는 일이다.”

복사했습니다