프론트엔드·백엔드·DB 언제 필요할까? 고객관리 앱 3단계로 이해하기

바이브 코딩으로 앱을 만들다 보면 AI가 갑자기 묻습니다. "Postgres를 쓸까요, Supabase를 연결할까요?" "React로 할까요, Next.js로 할까요?" 개발자가 아니라면 어떤 기술을 골라야 할지부터 막막하죠. 이번 바이브랩스 영상에서는 가상의 고객관리 엑셀 파일 한 장에서 출발해 웹앱을 세 단계로 발전시키며, 프론트엔드·백엔드·데이터베이스가 각각 언제, 왜 필요해지는지 직접 보여드립니다. 코드를 한 줄씩 설명하지 않고, 어떤 상황에서 어떤 기술이 필요해지는지 이해하는 데 집중했어요. AI에게 코딩을 맡기지만 기술 선택 앞에서 자주 멈추는 분들께 특히 도움이 될 거예요. ■ 영상에서 다루는 내용 1) 엑셀 한 장의 구조 — 고객 61명, 거래 220건, 접촉 이력 150건. 고객 ID 하나로 여러 시트가 연결되는 방식은 관계형 데이터베이스 설계로 그대로 이어집니다. 공백, 표기 불일치, 중복, 날짜 형식처럼 실무 데이터에서 흔히 보이는 품질 문제도 함께 살펴봅니다. 2) 혼자 쓰는 앱 — React + TypeScript로 화면을 만들고 IndexedDB에 브라우저 안에 저장합니다. Orca에서 Claude Code(Sonnet 5.5)로 앱을 만들고, 다른 브라우저에서 열면 수정한 데이터가 보이지 않는 이유도 확인해요. 3) 여러 직원이 함께 쓰는 앱 — Aside 브라우저를 Claude Code에 연결하고, Cloudflare Wrangler를 설치한 뒤 D1 데이터베이스와 Workers API로 데이터를 공유합니다. 한 브라우저에서 고친 내용이 다른 브라우저에도 그대로 나타나요. 4) 로그인과 권한 관리 — 인증과 인가의 차이, 관리자·일반 직원·조회 전용 역할을 나누는 방법, 권한 검사를 반드시 백엔드에서 해야 하는 이유를 설명합니다. Cloudflare Access(Zero Trust)가 결제 정보를 요구해서 자체 로그인 방식으로 바꾼 과정도 그대로 담았어요. 5) 운영 배포 — workers.dev 주소로 배포하고, 임시 비밀번호로 로그인해 비밀번호를 바꾼 뒤, 실제 외부에서 접속되는지 확인합니다. 6) 세 앱 비교와 다른 선택지 — LocalStorage, IndexedDB, SQLite, PostgreSQL, Supabase, DuckDB, Vue, Svelte, Next.js까지 각 기술이 어떤 문제를 풀기 위해 있는지 정리합니다. 핵심은 하나예요. 기술이 먼저 오는 게 아니라, 요구사항이 바뀌면서 필요한 기술이 하나씩 등장한다는 것. 누가 쓰는지, 데이터를 어디에 저장하는지, 누가 어떤 정보를 볼 수 있어야 하는지를 설명할 수 있으면 AI에게 훨씬 구체적으로 지시할 수 있습니다. ■ 타임라인 00:00 — 기술 이름의 홍수, 무엇을 써야 할까 02:15 — 엑셀 한 장에 담긴 데이터 구조 04:26 — 혼자 쓰는 앱: React와 IndexedDB 09:20 — 다른 브라우저 실험, 데이터가 안 보인다 10:39 — 공유가 필요해졌다: Aside 브라우저 연결 14:42 — Cloudflare 개발 환경과 Wrangler 설치 18:10 — D1과 Workers로 데이터 공유하기 24:21 — 인증과 인가, 역할별 권한 관리 29:37 — 운영 배포와 로그인 확인 33:00 — 세 앱 비교와 기술 선택 기준 여러분이 만들고 싶은 앱은 혼자 쓰는 작은 도구인가요, 동료와 함께 쓰는 업무용 프로그램인가요? 그 질문부터 시작해 보세요. 도움이 되셨다면 바이브랩스 구독과 좋아요로 응원해 주세요! 작가 제안하기 : futurewave@gmail.com [작가 오픈톡방] https://open.kakao.com/o/gfYQfFPh [이게 되네? AI 실무 올인원 미친 활용법 71제] https://www.yes24.com/product/goods/1... [AI 생존 지도 질문 자본가의 시대] https://www.yes24.com/product/goods/1... [실무에 바로 쓰는 일잘러의 챗GPT 프롬프트 74가지] https://www.yes24.com/product/goods/1... [바이브 코딩 커서 AI와 클로드 코드로 누구나!] https://www.yes24.com/product/goods/1... [챗GPT, 글쓰기 코치가 되어 줘 : 교양부분 세종우수도서] https://www.yes24.com/product/goods/1...