공연으로 이해하는 Frontend / Backend — 비전공자를 위한 Vibe 코딩 입문

🎭 쉬운 비유: 웹 서비스 = 한 편의 공연

오늘부터 시작하는 Vibe 코딩 시리즈는 "AI에게 의도를 말로 설명해서 직접 서비스를 만드는" 방법을 다뤄요. 그런데 AI에게 "이런 거 만들어줘"라고 시키려면, 먼저 "이런 거"가 어떻게 구성되어 있는지는 알고 있어야 해요.

오늘은 그 첫 단추로, 비전공자도 손에 잡을 수 있는 공연 비유로 시작해 볼게요.

🎟️ 뮤지컬 한 편을 떠올려봐요

뮤지컬을 본 적 있죠? 표를 끊고 객석에 앉으면, 무대 위에서 화려한 일들이 벌어져요. 배우가 노래하고, 조명이 바뀌고, 무대 세트가 회전하고, 안개가 깔리죠.

하지만 그게 전부는 아니에요. 무대 뒤편 백스테이지에서는 더 많은 일이 일어나고 있어요. 음향 엔지니어가 콘솔을 만지고, 의상 담당이 다음 장면 옷을 챙기고, 무대 감독이 헤드셋으로 큐를 보내고, 소품 담당이 창고에서 필요한 물건을 꺼내 오고요.

이 둘이 완벽하게 호흡을 맞춰야 한 편의 공연이 완성돼요. 무대만 있어도 안 되고, 백스테이지만 있어도 안 돼요.

🌐 웹/앱 서비스도 정확히 똑같이 생겼어요

웹사이트나 앱은 한 편의 공연과 구조가 완전히 같아요.

   🎤 무대 (Frontend / FE) ─── 관객(사용자)이 보고 만지는 모든 것
   ┌──────────────────────────────────────────────┐
   │   화면·버튼·메뉴·애니메이션·텍스트·이미지       │
   │   "내가 클릭하고 입력하는 그것"                │
   └──────────────────────────────────────────────┘
                      ↑  📻 무전기 / 큐 사인
                      │     (= API 요청·응답)
                      ↓
   🎬 백스테이지 (Backend / BE) ─── 보이지 않는 모든 것
   ┌──────────────────────────────────────────────┐
   │   서버·데이터베이스·로직·인증·계산             │
   │   "관객은 모르지만 공연을 가능하게 하는 것"     │
   └──────────────────────────────────────────────┘
          

🎭 한 줄 비유: 웹 서비스 = 한 편의 공연. 관객이 보는 무대(FE)와 보이지 않는 백스테이지(BE)가 무전기(API)로 끊임없이 신호를 주고받으며 하나의 공연을 만들어요.

이번 자료에서 다룰 모든 내용은 이 비유 위에 쌓여요. 헷갈리면 언제든 이 그림으로 돌아오면 돼요.

🎬 Vibe 코딩이란? — AI가 코드를 대신 짜주는 시대

Vibe 코딩(Vibe Coding)은 2024년 후반부터 본격적으로 퍼지기 시작한 새로운 개발 방식이에요. 한 줄로 정리하면 이래요.

💡 Vibe 코딩 = 개발자가 코드를 한 줄씩 직접 쓰는 게 아니라, "이런 거 만들어줘"라고 AI에게 말로 설명하면 AI가 코드를 대신 짜주는 방식. 사람은 큰 그림·의도·검수에 집중하고, 디테일은 AI가 채워요.

🤔 왜 지금 Vibe 코딩을 알아야 하나요?

세 가지 변화가 동시에 일어나고 있어요.

1. 속도가 5~10배 빨라졌어요 — 같은 기능을 만드는 데 예전엔 1주일 걸리던 게 1~2일로 줄어요. 회사가 새 도구를 빨리 시험할 수 있다는 뜻.
2. 비전공자도 직접 만들 수 있게 됐어요 — 코드를 외울 필요 없이, 한국어로 설명만 정확히 하면 작동하는 서비스가 나와요. 리서치·기획·디자인 직군도 "프로토타입은 직접" 시대.
3. AX팀 업무의 다음 단계 — Week 5~7에서 배운 n8n 자동화는 "이미 만들어진 도구들을 잇는" 단계였어요. Vibe 코딩은 거기서 한 발 더 나가, 도구 자체를 직접 만드는 단계예요.

🛠️ 어떤 도구를 쓰나요? (이름만 미리)

오늘은 이름만 살짝 보고, 자세한 사용법은 다음 주(시리즈 ②)부터 직접 만져볼 거예요.

• Cursor — 가장 대표적인 Vibe 코딩 IDE
• Claude Code — 터미널에서 대화하며 코드를 만드는 도구

그리고 도구는 아니지만 함께 알아두면 좋은 한 가지가 있어요.

• Streamlit — 🐍 무대와 백스테이지를 한 파일에 합쳐주는 Python 라이브러리 (도구가 아니라 "부품"). Cursor 같은 도구가 만드는 결과물 중 비전공자에게 가장 친숙한 형태.

🌉 그런데 AI에게 정확히 시키려면…

여기서 중요한 깨달음 하나. AI는 무엇이든 만들 수 있는 마법 도구처럼 보이지만, 여러분이 "무엇을 만들지" 정확히 말해줘야 작동해요. "예쁘게 만들어줘" 같은 두루뭉술한 말로는 안 돼요.

예를 들어 "회사 행사 신청 페이지 만들어줘"라고 했을 때, AI가 잘 작동하게 하려면 이렇게 분리해서 말할 줄 알아야 해요.

• 👀 화면(무대 / FE)에는 — 행사 제목, 신청 폼, 제출 버튼, 완료 메시지가 보였으면 좋겠어
• 🔐 뒤(백스테이지 / BE)에서는 — 제출한 신청 정보를 데이터베이스에 저장하고, 관리자에게 이메일을 보내줘

이게 안 되면 AI는 "예쁜 폼"만 만들고 끝나거나, 반대로 "데이터만 저장하고 화면이 없는" 결과를 내놓을 수 있어요. 그래서 FE/BE를 분리해서 사고할 줄 아는 게 Vibe 코딩의 첫 번째 기술이에요.

이게 오늘 자료의 핵심 메시지예요. 이제 FE와 BE 각각을 자세히 들여다볼 시간이에요.

🎤 Frontend = 무대 위에서 일어나는 모든 것

Frontend(프론트엔드, FE)는 관객(사용자)이 직접 보고, 듣고, 만지는 모든 것이에요. 공연으로 치면 무대 위에서 벌어지는 모든 일이죠.

🎬 무대 위에는 무엇이 있나요?

🛠️ 무대를 만드는 세 가지 도구

비전공자도 이 세 이름은 한 번씩 들어봤을 거예요. 외울 필요는 없고, 무엇을 담당하는지만 비유로 잡아두면 충분해요.

• HTML 📜 — 대본. "여기엔 제목, 아래엔 버튼, 그 아래엔 입력칸"이라고 무대 구성을 적은 문서.
• CSS 🎨 — 의상과 조명. 같은 대본이라도 의상·조명·세트 색이 바뀌면 분위기가 완전히 달라지죠. 색·폰트·간격·테두리를 모두 CSS가 결정해요.
• JavaScript 🎭 — 배우의 즉흥 연기. 관객이 무언가 하면 그에 반응해서 무대 위 무언가가 바뀌어요. "버튼 누르면 메뉴 펼치기"가 대표 예시.

Vibe 코딩 도구를 쓰면 이 셋을 직접 손으로 쓸 필요가 없어요. "헤더에 검색창 하나 넣어줘"라고 한국어로 말하면 AI가 알아서 HTML+CSS+JavaScript를 짜요. 우리가 알아야 할 건 "무엇을 어디에 둘지"예요.

🎤 Frontend 한 줄 요약: 무대 위에서 관객이 보고 만지는 모든 것 = 화면. "눈에 보이면 다 FE다"가 가장 빠른 기준이에요.

🎬 Backend = 백스테이지에서 일어나는 모든 것

Backend(백엔드, BE)는 관객은 못 보지만 공연을 가능하게 만드는 모든 것이에요. 무대 뒤편 백스테이지에서 일어나는 일이 BE예요.

🎬 백스테이지에는 누가, 무엇이 있나요?

📦 데이터베이스 = "공연이 끝나도 남는 소품 창고"

BE 중에서 가장 자주 듣게 될 단어가 데이터베이스(Database, DB)예요. 별것 아니에요. "공연이 끝나고 다음 날에도 그대로 남아 있는 소품 창고"라고 생각하면 돼요.

• 회원이 가입한 정보 → 내일도 모레도 그대로 있어야 함 → 창고에 보관
• 주문한 내역 → 1년 뒤에도 조회할 수 있어야 함 → 창고에 보관
• 오늘 클릭 한 번 → 페이지 닫으면 사라져도 됨 → 창고 보관 X

이름을 종종 듣는 MySQL · PostgreSQL · MongoDB · Supabase · Firebase 같은 단어들은 모두 "소품 창고 브랜드"라고 보면 돼요. 종류는 많지만 하는 일은 같아요 — 오래 남겨야 할 데이터를 안전하게 보관.

🌐 백스테이지 직원들이 쓰는 언어 (= 서버 언어)

FE에 HTML·CSS·JavaScript가 있다면, BE에는 서버를 움직이는 프로그래밍 언어가 있어요. 이름만 알아두면 충분해요.

• Node.js (JavaScript의 서버 버전)
• Python (AI·데이터 분야에서 압도적)
• Java · Go · Ruby (대형 서비스에서 자주)

이것도 외울 필요 없어요. Vibe 코딩 도구가 "어떤 언어로 만들까요?"라고 물어보면, 잘 모를 땐 Python이나 Node.js를 고르면 대체로 안전해요. 다음 주에 실제로 다뤄볼 거예요.

🎬 Backend 한 줄 요약: 백스테이지에서 일어나는 모든 일 = 데이터 저장 + 계산 + 보안. "눈에 안 보이는데 꼭 필요한 건 다 BE다"가 빠른 기준이에요.

📡 FE ↔ BE 통신 = 무전기와 큐 사인

무대와 백스테이지는 따로 있지만, 끊임없이 서로 신호를 주고받아야 공연이 굴러가요. 음향 큐, 조명 큐, 의상 교체 신호… 모두 헤드셋·무전기로 오가죠.

웹/앱에서도 똑같아요. FE와 BE도 끊임없이 무전을 보내는데, 그 무전 시스템 이름이 바로 API예요. Week 3에서 식당 웨이터 비유로 한 번 다룬 그 API 맞아요.

📻 실제로 어떤 신호가 오가는지 (한 장면)

여러분이 인스타그램에서 어떤 게시물에 ❤️ 좋아요를 눌렀다고 해볼게요. 그 1초 동안 무전기로는 이런 대화가 오가요.

   🎤 무대 (FE / 내 핸드폰 화면)
   ──────────────────────────────
   "방금 사용자가 게시물 12345에 ❤️ 좋아요를 눌렀다.
    백스테이지! 이거 처리해줘!"
                                       📻 무전 송신 (Request)
                                       ↓
   🎬 백스테이지 (BE / 인스타 서버)
   ────────────────────────────────────────
   1. 인터컴(API)으로 요청 수신
   2. 보안 요원이 "정말 이 사용자가 맞나?" 확인
   3. 소품 창고(DB)에 "사용자 X가 게시물 12345에 좋아요 눌렀음" 기록
   4. 게시물의 좋아요 카운트를 +1
   5. 결과를 다시 무대로 전송
                                       📻 무전 응답 (Response)
                                       ↓
   🎤 무대 (FE / 내 핸드폰 화면)
   ─────────────────────────────
   "OK, 받았다." → ❤️ 아이콘이 빨갛게 칠해지고
                  좋아요 숫자가 +1로 표시
          

📡 무전 약속어 = JSON

무전기로 막말로 떠들면 알아듣지 못해요. 미리 약속된 형식으로만 말해야 해요. 그 약속 형식의 이름이 JSON(제이슨)이에요.

외울 필요는 없어요. AI에게 코드를 시킬 때 "이 요청은 JSON으로 받게 해줘" 같은 한 문장만 자연스럽게 등장한다는 정도만 알아두세요. AI가 알아서 약속어로 번역해줘요.

📡 FE ↔ BE 통신 한 줄 요약: 무대와 백스테이지가 무전기(API)로 끊임없이 신호를 주고받음. 신호 양식은 JSON이라는 약속어. Week 3 "식당 웨이터" 비유와 같은 이야기.

🏠 우리 학습 노트 사이트 뜯어보기

지금 보고 있는 이 사이트가 어떻게 만들어졌는지 무대-백스테이지로 분해해 볼게요. 가장 좋은 예시는 가까이 있는 거잖아요.

🎤 이 사이트의 무대 (FE)

🎬 이 사이트의 백스테이지 (BE)

놀랍게도 이 사이트는 백스테이지가 거의 없어요. Vercel이라는 호스팅 서비스가 정적 파일들을 그대로 전 세계에 뿌려주는 구조라서, 별도의 서버 로직이나 데이터베이스가 없어요.

• ❌ 회원 가입 없음 → 인증 BE 필요 없음
• ❌ 댓글 없음 → 댓글 저장 DB 필요 없음
• ❌ 검색 없음 → 검색 서버 필요 없음
• ✅ HTML/CSS/JS 파일 + 데이터 파일만 있으면 끝

"댓글 기능을 넣자"가 되는 순간 BE가 필요해지고(댓글을 어딘가 저장해야 하니까), "로그인을 넣자"가 되면 BE가 더 무거워지죠. 시작은 가볍게, 필요해지면 BE를 키워간다가 핵심 전략이에요.

🛠️ Vibe 코딩 도구 2종 미리보기 (Cursor · Claude Code)

오늘은 이름과 느낌만 잡고 가요. 다음 주(시리즈 ②)부터 직접 만져볼 거예요. 그리고 한 가지 짚고 갈 점 — 이 두 가지는 모두 "AI에게 말로 시켜 코드를 받는" 코딩 도구예요. 어떤 언어/프레임워크로 만들지는 별개 선택이에요(다음 섹션의 Streamlit이 그 예시).

📊 두 도구 한눈에 비교

🎯 도구 선택 한 줄 가이드: "코드 화면을 직접 보면서 안심하고 진행하고 싶다" → Cursor. "큰 단위로 한 번에 시키고, 터미널이 어색하지 않다" → Claude Code. 둘 다 무료 체험이 있어서 한 번씩 만져보고 본인에게 맞는 쪽을 고르는 게 답이에요.

🐍 보너스: Streamlit — FE/BE 합쳐주는 Python 라이브러리

여기서 한 가지 짚고 갈 게 있어요. 위 두 도구(Cursor·Claude Code)와는 완전히 다른 카테고리의, 그러나 비전공자에게 정말 친숙한 존재가 있어요. 이름은 Streamlit이에요.

🎭 왜 굳이 Streamlit이 특별한가요?

앞에서 우리는 "FE와 BE를 분리해서 사고하라"고 배웠어요. 그런데 Streamlit은 이 분리를 자동으로 합쳐주는 라이브러리예요. Python 파일 하나에 코드를 쓰면, Streamlit이 알아서 무대(웹 화면)와 백스테이지(데이터 처리)를 동시에 만들어 줘요.

비유로 말하면 "1인 극단 키트"예요. 배우·연출·소품 담당이 모두 한 사람이어도 작은 공연을 무대에 올릴 수 있게 해주는 휴대용 무대 세트 같은 거죠.

실제 코드가 얼마나 짧은지 보세요 (외울 필요 없어요, 짧다는 사실만 인지하면 충분).

   import streamlit as st

   st.title("내 분석 도구")
        

이 딱 2줄이 곧 "무대에 제목 띄움 + 백스테이지에서 웹 화면을 그려 사용자에게 전달"을 동시에 처리해요. 같은 일을 일반 방식(HTML + CSS + 서버 코드)으로 하려면 코드량이 5~10배로 늘어요.

🛠️ Streamlit은 언제 쓰면 잘 맞나요?

• 데이터 시각화 도구 — 엑셀로는 부족한 인터랙티브 대시보드를 빠르게
• AI 데모 — 챗봇·이미지 분석·요약기 같은 AI 결과를 사용자에게 보여주는 화면
• 회사 내부 도구 — 마케팅·리서치 팀이 자체적으로 쓰는 보조 도구

🔗 Vibe 코딩 도구 ↔ Streamlit이 만나는 흐름

이번 자료에서 가장 강조하고 싶은 그림이에요. 비전공자가 빠르게 결과물을 보는 길은 보통 이 조합이에요.

   🖥️ Cursor (Vibe 코딩 도구)
          ↓  "Streamlit으로 매출 대시보드 만들어줘"
   🐍 Streamlit 라이브러리를 쓰는 Python 코드 자동 생성
          ↓  한 줄 실행 (streamlit run app.py)
   🌐 웹 브라우저에서 작동하는 도구 완성
        

즉 "Cursor에게 Streamlit으로 만들어달라고 시키기"가 비전공자 최단 경로예요. 도구(Cursor·Claude Code)는 "어떻게 만들지"를 담당하고, 라이브러리(Streamlit)는 "결과물의 형태"를 담당해요.

🤔 왜 이 시점에 Streamlit을 보여줬을까요?

앞에서 "FE와 BE를 분리해서 사고하라"를 가르친 직후에 "합쳐주는 라이브러리"를 보면 혼란스러울 수 있어요. 하지만 순서가 중요해요. 분리하는 이유를 먼저 알고 나서, 합쳐주는 라이브러리를 보면 "아, 이 라이브러리는 작은 공연을 자동으로 합쳐서 빨리 올릴 수 있게 도와주는 거구나"가 명확해져요. 큰 공연(여러 사용자·복잡한 기능)을 만들 땐 다시 FE·BE 분리가 필요해진다는 한계도 자연스럽게 이해되고요.

💡 비전공자가 알아야 할 5가지 마인드셋

다음 주부터 직접 도구를 만지기 전에, 마인드셋 5가지를 미리 깔아두면 헤매는 시간이 확 줄어요.

① 모든 걸 다 이해할 필요는 없다

AI가 만들어준 코드를 한 줄씩 다 이해하려 들면 시작도 못해요. "이 부분은 무엇을 하는지" 큰 그림만 이해하면 충분. 디테일은 AI가 책임져요. 자동차 정비 원리를 다 몰라도 운전은 하잖아요? 같아요.

② 무엇을 만들지를 그림으로 그릴 줄 알면 됨

가장 강력한 기술은 종이에 화면을 그려보는 능력이에요. "여기 헤더, 그 아래 검색창, 그 아래 결과 목록…" 그림 한 장이 1시간짜리 AI 대화보다 정확해요. 그림 → 한국어 설명 → AI에게 전달, 이 순서.

③ 화면(FE)과 데이터(BE)를 분리해서 생각하기

오늘 자료의 핵심. AI에게 시킬 때 항상 "화면에는 ___이 보이고, 뒤에서는 ___을 처리한다"를 분리해서 설명하세요. 이거 하나로 결과물 품질이 2~3배 좋아져요.

④ 처음엔 작게 — "버튼 하나 + 데이터 1개 저장"부터

욕심 부리면 망해요. "클릭하면 시간이 기록되는 버튼 하나"가 시작점으로 적당해요. 이게 되면 "기록 목록 보기"를 추가하고, 그게 되면 "로그인"을 추가하는 식. 한 번에 한 기능만.

⑤ AI가 만든 결과를 눈으로 확인할 줄 알기

AI가 "다 만들었습니다!"라고 해도 그대로 믿지 마세요. 실제로 실행해서 동작하는지 확인하는 게 비전공자의 가장 중요한 기술. 안 되면 그 결과(에러 메시지·이상한 화면)를 다시 AI에게 보여주면 돼요.

❓ FAQ

Q1. 코딩을 정말 안 배워도 되나요?

✅ 대부분의 경우 Yes. 단, "AI가 만들어준 결과가 맞는지 읽고 판단하는" 수준의 코드 리터러시는 점점 더 필요해져요. 그건 "처음부터 코딩을 배운다"와는 다른, "AI와 함께 일하는 법"에 가까워요. 오늘 자료가 그 시작점.

Q2. 그럼 개발자는 필요 없나요?

❌ 아니에요. 작은 프로토타입·내부 도구·MVP는 비전공자가 만들 수 있게 됐지만, 대규모 서비스·보안·성능·데이터 무결성이 중요해지면 여전히 개발자가 필요해요. 비유하면, 우리가 만드는 건 "동네 학예회 무대"고, 개발자가 만드는 건 "라이센싱 공연"이에요. 둘 다 가치 있어요.

Q3. AI가 만든 코드, 보안은 괜찮나요?

⚠️ 주의해야 해요. AI는 자주 "동작하긴 하지만 보안 구멍이 있는" 코드를 만들어요. 특히 로그인·결제·민감 데이터가 들어가는 서비스는 반드시 보안 검토를 받아야 해요. "외부에 공개하지 않는 내부 도구"로 시작하는 게 가장 안전한 입문 방법이에요.

Q4. FE만 만들고 BE 없이 서비스 운영 가능한가요?

✅ 가능해요. 의외로 자주 그래요. 이 학습 노트 사이트가 그 예. 데이터를 저장·조회할 필요가 없고, 단순히 보여주기만 하면 되는 사이트는 BE 없이 가능. 회사 소개·블로그·포트폴리오·이번 사이트처럼 정보 페이지가 대표적이에요. "댓글·회원·검색"이 필요해지는 순간 BE가 등장해요.

Q5. 내 PC에 뭘 설치해야 시작할 수 있나요?

도구와 라이브러리는 설치 방법이 달라요. 도구 = "프로그램 자체를 PC에 깔기" / 라이브러리 = "Python 안에 부품 추가하기". 다음 주에 자세히 다루지만 미리 알아두면 좋아요.

• Cursor (도구): cursor.com에서 다운로드 → 설치 (약 5분)
• Claude Code (도구): 터미널에서 한 줄 명령어로 설치 (Node.js 필요)
• Streamlit (라이브러리): Python이 깔린 PC에서 pip install streamlit 한 줄로 추가. 또는 설치 없이 웹에서 쓸 수 있는 Streamlit Cloud도 있음 — 비전공자에겐 이쪽 추천

Q6. Streamlit이 그렇게 쉽다면, 왜 모든 서비스가 Streamlit으로 안 만들어지나요?

좋은 질문이에요. Streamlit 라이브러리가 압도적으로 빠른 대신 3가지 한계가 있어요.

• 디자인 자유도가 낮아요 — 위에서 아래로 흐르는 단순한 화면만 가능. 인스타그램·노션처럼 복잡한 화면은 못 만들어요.
• 동시 사용자 수가 적어요 — 수십~수백 명이 동시에 들어오면 느려져요. 수만 명이 쓰는 서비스에는 부적합.
• 검색 노출(SEO)이 약해요 — 구글 검색에 잘 안 잡혀요. 마케팅용 사이트로는 부적합.

그래서 "내부 도구·데이터 대시보드·AI 데모"에 가장 적합하고, 일반 사용자용 상용 서비스를 만들 땐 Cursor·Claude Code 같은 도구로 다른 라이브러리(React·Next.js 등)를 쓰게 하는 게 일반적이에요.

🎓 핵심 요약

오늘 자료를 한 장으로 정리하면 이래요.

• 웹 서비스 = 한 편의 공연. 무대(FE)와 백스테이지(BE)가 무전기(API)로 신호를 주고받으며 하나의 공연을 만들어요.
• Frontend = 무대 = "눈에 보이면 다 FE". HTML(대본) + CSS(조명·의상) + JavaScript(즉흥 연기).
• Backend = 백스테이지 = "보이지 않지만 꼭 필요한 것". 서버 로직 + 데이터베이스(소품 창고) + 인증 + 계산.
• FE ↔ BE 통신 = API. Week 3 식당 웨이터 비유와 같음. JSON이라는 약속어로 무전을 주고받아요.
• Vibe 코딩 = AI에게 말로 시켜 코드를 만드는 방식. FE/BE 분리 사고가 정확한 지시의 핵심.
• Vibe 코딩 도구 2종 — Cursor(IDE 화이트보드) · Claude Code(터미널 대화). 둘 다 "AI에게 말로 시키는 도구".
• 보너스 라이브러리: Streamlit — Python으로 FE/BE를 한 파일에 합쳐주는 부품. 도구가 아니라 "도구가 만들어내는 결과물의 형태" 중 하나. 비전공자 최단 경로 = Cursor에게 Streamlit으로 만들어달라고 시키기.
• 비전공자 마인드셋 5 — ① 다 이해할 필요 없음 ② 그림으로 그리기 ③ FE/BE 분리 사고 ④ 작게 시작 ⑤ 눈으로 확인.

🎭 한 줄 마무리: 오늘은 Vibe 코딩의 "공연 구조"를 이해한 날이에요. 무대와 백스테이지를 분리해 사고할 수 있게 됐다면, 이제 다음 무대를 깔 준비가 된 거예요.

이번 자료는 Vibe 코딩 시리즈 ①편이에요. 앞으로 ②편부터는 직접 Cursor · Claude Code(도구)와 Streamlit(라이브러리)을 만져보면서, 오늘 배운 무대-백스테이지 구조 위에 실제 작동하는 서비스를 한 줄씩 깔아볼 거예요. 시리즈가 끝날 때쯤이면, 비전공자도 "내 업무에 필요한 작은 도구는 직접 만들 수 있다"가 손에 잡혀 있을 거예요.

🎭 수고하셨습니다!
다음 주, 첫 무대를 함께 깔러 가볼까요?