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` 아웃트로