AI가 만든 웹사이트가 '텅 빈 모델하우스'에 불과했던 이유

안녕하세요! 여러분의 아이디어를 '진짜' 살아있는 서비스로 함께 만들어가는 바이브랩스입니다. AI에게 "나만의 포트폴리오 웹사이트 만들어줘"라고 요청하면, 불과 몇 초 만에 그럴싸한 '모델하우스'가 눈앞에 펼쳐집니다. 하지만 이내 깨닫게 되죠. 그곳은 아무도 살지 않는, 가구가 하나도 없는 텅 빈 공간이라는 것을요. 이건 '내 이야기'가 담긴 집이 아닙니다. 우리가 진짜 원했던 것은 '모델하우스'가 아니라, 언제든 신선한 재료(데이터)를 꺼내 요리(보여주기)할 수 있는 '살아있는 식료품 저장고'가 있는 집이었습니다. 이 영상은 AI가 만들어준 텅 빈 껍데기(HTML)에 '데이터베이스(DB)'라는 심장을 이식하는 과정을 담았습니다. ✅ AI 코딩으로 만든 웹사이트가 왜 '공허하게' 느껴지는지 ✅ '살아있는 식료품 저장고', 즉 데이터베이스(DB)의 진짜 의미 ✅ 거대한 MySQL 대신 가벼운 '작은 화분' 같은 SQLite를 선택한 이유 ✅ AI에게 Node.js와 SQLite로 '저장고'와 '저장고 관리 도구'를 만들어달라고 요청하는 방법 ✅ 코딩 없이 '관리자 페이지'를 만들고, 데이터를 실시간으로 추가/수정/삭제하는 마법 ✅ DB Browser로 AI가 만든 데이터베이스의 속을 직접 들여다보는 법 이제는 AI와 함께 내 서비스의 '엔진'과 '두뇌'를 설계해 보세요. 바이브랩스가 그 여정을 함께합니다. 🚀 작가 및 창작자 협업 제안: 자신만의 '살아있는' 포트폴리오나 서비스를 구축하고 싶으신 분, 혹은 협업 아이디어가 있으신 분은 언제든지 아래 이메일로 연락 주세요. 제안하기: futurewave@gmail.com ⏰ 타임라인 `00:00` 인트로: AI가 만든 '텅 빈 모델하우스' `00:46` 첫 번째 함정: 알맹이 없는 그럴듯함 `00:54` AI로 포트폴리오 웹사이트 만들기 (일반적인 요청) `02:05` 진짜 문제의 시작: '내 이야기'가 아닌 껍데기 `03:39` 우리가 진짜 원했던 것: '살아있는 식료품 저장고' `03:52` 데이터베이스(DB)란 무엇인가? (feat. SQLite) `04:06` [실전 1단계] AI에게 '저장고(DB)'와 '관리 도구' 요청하기 `04:15` 프롬프트 설정: Node.js, Express, SQLite로 백엔드 구축 `04:44` AI가 자동으로 생성한 6단계 개발 계획 (To-dos) `05:02` [실전 2단계] AI와 함께 백엔드 서버 및 DB 구축하기 `05:24` Node.js 서버 실행 및 포트폴리오 페이지 접속 `05:37` AI가 만든 프로젝트 구조 설명 (HTML vs Node.js 서버) `06:02` [실전 3단계] AI가 만든 '관리자 페이지' 접속 및 테스트 `07:00` '/admin' 페이지 접속 및 새 프로젝트 추가 시연 `07:27` 홈 화면에서 새로 추가된 프로젝트 실시간 확인 `07:50` AI 코딩 결과물에 대한 고찰 (껍데기 vs 살아있는 서비스) `08:01` SQLite와 Node.js의 역할 (요리사와 저장고) `09:24` 새로운 요구사항: "프로젝트 카드를 클릭하면 상세 내용 보여줘" `10:30` 정적 HTML에서 '살아 움직이는 생명'으로의 변신 `10:47` [실전 4단계] DB Browser로 '저장고' 내부 확인하기 `10:58` 'DB Browser for SQLite' 설치 가이드 `11:58` DB 파일 열기 및 테이블 구조('Projects') 확인 `12:37` 'Browse Data' 탭에서 실제 데이터 확인 (엑셀과 비교) `12:58` DB Browser에서 직접 데이터 수정 및 저장하기 (Apply) `13:58` [실전 5단계] DB 수정사항이 웹에 실시간 반영되는지 확인 `14:11` AI가 어떻게 이 모든 것을 구현했을까? (Node.js와 SQLite의 연동) `14:40` 결론: 데이터가 있을 곳에 정확히 존재하는 것 `15:00` 아웃트로