에이전트부터 SSL까지, 비유 한 줄로 평생 안 헷갈리게
완성하면 생기는 것
바이브코딩·에이전트·MCP·DB·BYO·배포·DNS·SSL 같은 핵심 용어 26개를 비유와 함께 내 말로 설명할 수 있게 됩니다.
바이브캠퍼스 계정필수
퀴즈 정답 보상(Vibes)을 받으려면 로그인이 필요합니다. 가입은 무료입니다.
첫 15분 코스선택
필수는 아니지만, 스튜디오 화면을 한 번 본 뒤에 오면 용어가 훨씬 빨리 붙습니다.
새로운 분야가 어렵게 느껴지는 이유의 절반은 내용이 아니라 단어입니다. '내 Supabase를 BYO로 직결'이라는 문장도, 단어 세 개만 알면 '내 데이터 창고를 내 명의로 연결한다'는 아주 상식적인 얘기가 됩니다.
이 코스의 방식은 단순합니다. 용어 카드를 탭해서 열면 비유 한 줄이 먼저 나오고, 그 아래 정의와 '왜 필요한지'가 이어집니다. 외우려 하지 말고 비유를 머릿속에 그려 보세요. 블록마다 퀴즈가 있는데, 틀려도 잃는 것은 없습니다. 해설을 읽으면 오히려 더 오래 기억에 남습니다.
팁
카드를 읽다가 '이거 우리 동네 가게로 치면 뭐지?'라고 스스로 비유를 바꿔 보세요. 자기 비유로 옮긴 용어는 절대 안 잊힙니다.
첫 블록은 이 플랫폼 전체를 떠받치는 다섯 단어입니다. 바이브코딩, 프롬프트, AI 모델, 토큰, API. 이 다섯 개만 잡으면 '내가 문장을 쓰면 왜 사이트가 나오는지'의 원리가 통째로 이해됩니다.
아래 카드를 하나씩 탭해서 열어 보세요. 다섯 장이 한 문장으로 연결됩니다. 여러분이 프롬프트를 쓰면, API라는 창구를 지나, AI 모델이 토큰 단위로 읽고 생각해서, 결과물을 만들어 주는 것. 이게 바이브코딩의 전부입니다.
이렇게 나오면 성공
카드 다섯 장을 모두 열어 본 뒤, 위의 한 문장 요약이 자연스럽게 읽히면 이 블록은 통과입니다.
용어 카드 · 탭해서 열기
요리를 직접 하는 대신, 최고의 셰프에게 원하는 맛을 설명해서 받아내는 방식입니다.
코드를 한 줄씩 타이핑하는 대신 AI에게 말로 요청해 소프트웨어를 만드는 방식입니다. 만들고 싶은 그림이 선명할수록 결과가 좋아지며, 바이브캠퍼스 스튜디오가 바로 이 방식으로 웹사이트·앱·게임을 만들어 냅니다.
셰프에게 건네는 주문서입니다. '알아서 맛있게'보다 '맵기는 중간, 면은 꼬들'이 원하는 음식을 받습니다.
AI에게 보내는 요청문입니다. 누구를 위한 것인지, 무엇이 필요한지, 어떤 분위기인지가 담길수록 결과가 정확해집니다. 스튜디오 입력창에 쓰는 모든 문장이 프롬프트이고, 이걸 다듬는 기술은 별도 코스로 있을 만큼 중요합니다.
주문서를 읽고 실제로 요리하는 셰프 본인입니다.
실제로 생각하고 답을 만들어 내는 AI의 두뇌입니다. Claude, GPT, Gemini 같은 이름이 전부 모델 이름이며, 어떤 모델이 일하느냐에 따라 결과의 품질과 속도가 달라집니다. 스튜디오는 작업 성격에 맞는 모델을 골라 씁니다.
요리에 들어가는 재료의 양입니다. 주문이 길고 복잡할수록 재료가 많이 듭니다.
AI가 글을 읽고 쓸 때 세는 글자 묶음 단위입니다. AI의 작업량이 토큰 수로 계산되기 때문에, 같은 내용이라면 짧고 명확하게 쓰는 쪽이 효율적입니다. 긴 글을 넣으면 그만큼 토큰이 늘어난다는 감각만 있으면 충분합니다.
주방과 홀 사이의 주문 창구입니다. 손님이 주방에 직접 들어가지 않아도 음식이 나옵니다.
프로그램끼리 데이터와 기능을 주고받는 표준 창구입니다. 내가 만든 앱이 날씨, 지도, AI 같은 외부 기능을 빌려 쓸 때 전부 API를 통합니다. 세상의 서비스들이 서로 손잡는 방법이 바로 이것입니다.
토큰(token)을 가장 잘 설명한 것은 무엇인가요?
두 번째 블록은 '어떻게 문장 하나로 저렇게 복잡한 걸 만들지?'에 답하는 다섯 단어입니다. 에이전트, 오케스트레이션, MCP, 훅, 스킬. 스튜디오의 빌드 게이지 뒤에서 실제로 벌어지는 일들의 이름입니다.
이 카드들을 알면 스튜디오가 마술 상자가 아니라 잘 짜인 작업장으로 보이기 시작합니다. 그리고 작업장이 보이는 사람은 요청도 잘하게 됩니다. 어디에 무엇을 부탁해야 하는지 아니까요.
용어 카드 · 탭해서 열기
'다 되면 보고드릴게요'라고 말하고 알아서 움직이는 유능한 직원입니다.
한 번의 지시로 계획을 세우고, 도구를 쓰고, 결과를 점검하며 여러 단계를 스스로 해내는 AI입니다. 빌드 게이지가 도는 동안 설계대로 코드를 쓰고 확인까지 이어 가는 것이 에이전트의 일입니다. 단순 문답 AI와의 결정적 차이는 이 '스스로 해낸다'에 있습니다.
여러 연주자를 한 곡으로 묶어 내는 지휘자입니다.
여러 AI와 도구에게 각자 잘하는 일을 나눠 맡기고 순서를 조율하는 것입니다. 글은 이 모델, 이미지는 저 모델, 검증은 또 다른 도구처럼 역할을 나누면 품질과 안정성이 함께 올라갑니다. 스튜디오의 결과물 하나에도 여러 연주자가 참여합니다.
어떤 기기든 꽂으면 통하는 USB 같은 연결 표준입니다.
AI에게 외부 도구와 데이터를 연결해 주는 표준 규격(Model Context Protocol)입니다. 규격이 통일되어 있으면 AI가 캘린더, DB, 검색 같은 도구를 안전하게 골라 쓸 수 있습니다. 결제 수단이 아니라 연결 방식이라는 점이 가장 흔한 오해 포인트입니다.
'문이 열리면 종이 울린다'처럼 정해진 순간에 자동으로 실행되는 장치입니다.
특정 사건이 일어나는 순간 미리 정해 둔 동작을 자동으로 실행하는 연결 고리입니다. 저장할 때마다 점검을 돌리거나 배포가 끝나면 알림을 보내는 식의 자동화가 훅으로 만들어집니다. 사람이 잊어도 시스템은 잊지 않게 하는 장치입니다.
요리사의 검증된 레시피 카드입니다. 꺼내 쓰면 실패가 확 줄어듭니다.
3D 연출, 차트, 패럴랙스 스크롤처럼 검증된 기법을 묶어 둔 패키지입니다. 스튜디오의 스킬 라이브러리에서 검색해 빌드에 넣을 수 있고, 직접 고르지 않아도 프롬프트에 맞는 스킬을 자동으로 골라 조합해 줍니다.
주의
MCP를 결제 수단이나 요금제 이름으로 오해하는 분이 많습니다. MCP는 돈과 무관한 연결 규격입니다. 카드에서 확인하세요.
MCP(Model Context Protocol)의 정체는 무엇인가요?
세 번째 블록은 돈과 데이터가 걸린 단어들입니다. DB, Supabase, BYO, API 키, 환경변수. 예약을 받고 회원을 관리하는 진짜 서비스를 만들려면 반드시 넘어야 하는 다섯 개입니다.
핵심 정신은 하나입니다. 여러분의 서비스가 만들어 내는 데이터는 여러분의 소유여야 한다는 것. 바이브캠퍼스가 내 Supabase 직결(BYO)을 지원하는 이유이고, 이 블록의 카드들이 전부 그 정신을 설명합니다.
용어 카드 · 탭해서 열기
칸칸이 정리된 큰 냉장고입니다. 넣어 둔 것을 다음에 열어도 그대로 꺼낼 수 있습니다.
고객, 예약, 글 같은 정보를 구조적으로 보관하는 저장소입니다. 화면의 내용은 껐다 켜면 사라지지만 DB에 넣은 데이터는 남습니다. 예약을 받거나 회원을 관리하는 모든 서비스의 심장이 여기입니다.
냉장고에 잠금장치와 배달 창구까지 갖춰서 통째로 빌려주는 완성형 창고 서비스입니다.
DB에 로그인, 파일 저장 같은 부가 기능까지 묶어 제공하는 서비스입니다. 바이브캠퍼스에서는 내 Supabase 계정을 스튜디오에 직접 연결해서, 내 서비스의 데이터를 처음부터 내 소유로 관리할 수 있습니다.
단골 식당에 내 와인을 가져가는 것입니다. 내 것을 쓰니 내용물도 계산도 전부 내 관리입니다.
Bring Your Own, 내 계정과 키를 가져와 연결하는 방식입니다. 데이터와 사용량이 전부 내 명의가 되기 때문에 서비스가 커져도 플랫폼에 묶이지 않고, 언제든 통째로 들고 이사할 수 있습니다.
주문 창구에서 나임을 증명하는 회원 카드입니다. 남이 쓰면 내 앞으로 계산됩니다.
API를 쓸 때 이 요청이 내 계정의 것임을 증명하는 비밀 문자열입니다. 이 키를 기준으로 사용량이 계산되므로 비밀번호처럼 다뤄야 하고, 절대 화면이나 공개 코드에 노출해서는 안 됩니다.
무대 뒤의 금고입니다. 배우는 무대에서 연기만 하고, 귀중품은 금고에 둡니다.
API 키 같은 비밀값을 코드 바깥에 따로 보관하는 설정 공간입니다. 코드를 공유하거나 공개해도 비밀이 새지 않고, 서비스 환경이 바뀔 때 코드는 그대로 두고 값만 갈아 끼우면 됩니다.
주의
API 키는 비밀번호와 같습니다. 화면 캡처, 커뮤니티 글, 코드 어디에도 노출하면 안 됩니다. 노출됐다면 그 키는 버리고 새로 발급받는 것이 원칙입니다.
API 키를 코드에 직접 적지 않고 환경변수에 보관하는 가장 큰 이유는 무엇인가요?
네 번째 블록은 완성한 것을 세상에 내놓을 때 만나는 단어들입니다. 깃허브와 버전 관리, 배포, 도메인, DNS, SSL, 호스팅. 여섯 장이지만 사실 하나의 이야기입니다. 내 코드를 안전하게 보관하고, 인터넷에 올리고, 이름을 달고, 자물쇠를 채우는 순서니까요.
이 단어들은 나중에 웹사이트 마스터와 출시 코스에서 실제 버튼으로 다시 만납니다. 지금 비유로 잡아 두면 그때 손이 망설이지 않습니다.
이렇게 나오면 성공
여섯 장을 다 열었다면 '내 사이트가 손님에게 열리기까지'의 순서를 말로 재구성해 보세요. 보관, 오픈, 간판, 자물쇠 순으로 이어지면 통과입니다.
용어 카드 · 탭해서 열기
게임의 세이브 포인트입니다. 언제든 이전 저장 지점으로 돌아갈 수 있습니다.
코드의 변경 이력을 기록(버전 관리)하고 온라인에 보관하는 서비스입니다. 실수해도 어제의 코드로 되돌릴 수 있고, 여럿이 함께 만들 때 서로의 작업이 섞여 깨지지 않게 지켜 줍니다. 세상 대부분의 소프트웨어가 여기 살고 있습니다.
가게 오픈입니다. 만들어 둔 것을 손님이 들어올 수 있게 여는 순간입니다.
완성한 결과물을 인터넷에 올려 누구나 접속할 수 있게 만드는 일입니다. 바이브캠퍼스에서는 클릭 한 번으로 끝나고, 배포 즉시 공유할 수 있는 주소가 생깁니다. 배포 전의 빌드는 아직 내 작업실에만 있는 시제품입니다.
가게 간판이자 명함에 적는 주소입니다.
사람들이 내 사이트를 찾아올 때 입력하는 이름입니다(예: mysite.com). 기억하기 쉬운 내 도메인이 있어야 브랜드가 되며, 바이브캠퍼스의 도메인 검색에서 원하는 이름을 찾아 바로 연결할 수 있습니다.
간판 이름을 실제 건물 위치로 바꿔 주는 인터넷 전화번호부입니다.
도메인 이름을 서버의 실제 주소(IP)로 변환해 주는 시스템입니다. 도메인을 연결한다는 것은 결국 DNS에 '이 이름으로 오는 손님은 이 서버로 안내'라고 기록하는 일입니다. 기록이 퍼지는 데 시간이 조금 걸리기도 합니다.
편지를 밀봉 봉투에 넣어 보내는 것입니다. 배달 중에는 아무도 못 읽습니다.
사이트와 방문자 사이의 통신을 암호화하는 보안 장치입니다. 주소창의 자물쇠 표시가 SSL이 켜져 있다는 뜻이고, 없으면 브라우저가 안전하지 않다고 경고해 방문자가 발길을 돌립니다. 요즘은 선택이 아니라 기본입니다.
가게가 입주한 건물입니다. 24시간 불이 꺼지지 않습니다.
내 사이트를 밤낮없이 돌려 주는 서버 공간을 빌리는 것입니다. 바이브캠퍼스가 배포와 함께 호스팅까지 처리하므로 따로 서버를 사거나 관리할 필요가 없습니다. 여러분은 만들고, 건물 관리는 맡기면 됩니다.
팁
여섯 장을 '보관(깃허브) → 오픈(배포·호스팅) → 간판(도메인·DNS) → 자물쇠(SSL)'라는 개업 순서로 기억해 보세요.
주의
주소창에 자물쇠(SSL)가 없는 사이트는 브라우저가 안전하지 않다고 경고를 띄웁니다. 손님이 그 경고를 보면 대부분 돌아섭니다. 출시 코스에서 배포할 때 꼭 확인하세요.
DNS가 하는 일을 가장 잘 설명한 것은 무엇인가요?
마지막 블록은 알고 나면 세상 서비스들의 구조가 통째로 보이는 단어들입니다. 프론트엔드, 백엔드, SaaS, 샌드박스, 임베드. 여기까지 오면 개발자와의 대화에서 통역이 필요 없어집니다.
특히 프론트엔드와 백엔드의 구분은 이후 앱 만들기 코스의 뼈대가 됩니다. 가게의 홀과 주방이라는 그림 하나만 기억하세요. 손님이 보는 곳과 일이 처리되는 곳입니다.
이렇게 나오면 성공
다섯 장을 모두 열었다면, 즐겨 쓰는 서비스 하나를 골라 '홀(프론트)은 이거, 주방(백엔드)은 이거'라고 나눠 보세요. 나눠지면 이 블록은 통과입니다.
용어 카드 · 탭해서 열기
가게의 인테리어와 진열장입니다. 손님이 보고 만지는 전부입니다.
화면 배치, 버튼, 색, 글자처럼 사용자에게 보이는 부분입니다. '더 고급스럽게, 버튼은 크게' 같은 요청이 다듬는 영역이 바로 여기이고, 클릭 편집으로 직접 만질 수 있는 영역이기도 합니다.
주방과 창고입니다. 손님 눈에 안 보여도 가게는 여기서 돌아갑니다.
데이터 저장, 로그인, 결제처럼 화면 뒤에서 도는 처리입니다. 폼 제출이 실제로 저장되고 로그인이 진짜로 작동하는 것은 백엔드가 있어서입니다. 데이터가 살아 있는 앱을 만들려면 반드시 필요한 반쪽입니다.
정수기를 사지 않고 렌털하는 것입니다. 설치, 관리, 필터 교체까지 맡깁니다.
설치 없이 인터넷으로 구독해 쓰는 소프트웨어(Software as a Service)입니다. 노션, 넷플릭스가 대표적이고, 여러분이 만들어 팔게 될 구독형 서비스도 SaaS입니다. 한 번 팔고 끝이 아니라 매달 관계가 이어지는 사업 모델입니다.
아이들이 그 안에서만 노는 모래놀이터입니다. 밖은 어질러지지 않습니다.
코드를 실제 서비스와 격리된 공간에서 실행해 보는 안전 장치입니다. 신뢰성 검증이 코드를 E2B 샌드박스에서 실제로 돌려 보는 것도, 무슨 일이 생겨도 본 서비스에는 영향이 없기 때문입니다.
완성된 액자를 어느 벽에나 옮겨 걸 수 있는 것입니다.
만든 결과물을 코드 몇 줄로 다른 사이트나 블로그 안에 끼워 넣는 방식입니다. 스튜디오의 임베드 기능이 복사해 붙이기만 하면 되는 코드를 만들어 주므로, 이미 운영 중인 홈페이지에도 내 빌드를 바로 올릴 수 있습니다.
샌드박스(sandbox)를 가장 잘 설명한 것은 무엇인가요?
26장의 카드를 전부 넘겼습니다. 이제 스튜디오의 설정 화면도, 개발자의 이야기도, 다른 코스의 본문도 낯선 단어 때문에 멈추는 일은 없을 겁니다. 용어는 지식이 아니라 지도입니다. 지도가 생겼으니 어디든 갈 수 있습니다.
마지막으로 굳히기 한 판 어떨까요. 아래 직접 해보기 버튼으로 용어 매치 게임에 도전해 보세요. 오늘 배운 단어들을 짝지어 맞추는 게임인데, 하루 한 번 첫 클리어에는 Vibes 보상도 있습니다. 외운 것은 잊혀도 갖고 논 것은 남습니다.
팁
게임은 매일 다시 도전할 수 있습니다. 새 코스를 시작하기 전에 한 판씩 돌리면 용어가 장기 기억으로 넘어갑니다.