바이브코딩으로 만든 앱, 데이터는 어디에 저장할까요?

AI에게 나만의 지출 관리 앱을 만들어달라고 했어요. 오늘 점심값 12,000원을 입력하고 저장 버튼을 누르니 화면에 지출 내역이 나타납니다. 여기까지는 제법 그럴듯해요.

그런데 새로고침했더니 방금 기록한 지출이 사라집니다. 왜 그럴까요? 화면에 내용을 보여주는 것과 그 내용을 계속 보관하는 것은 서로 다른 일이기 때문이에요.

화면에 보인다고 저장을 마친 건 아니에요

처음 만든 앱은 입력한 내용을 지금 열린 화면의 임시 기억에만 들고 있을 수 있어요. 화면을 닫거나 새로고침하면 그 기억도 함께 사라집니다. AI가 기능을 잘못 만든 것이라기보다, 어디에 저장할지 아직 정하지 않은 상태에 가까워요.

브라우저 안에 저장하는 방법도 있어요. localStorage 같은 기능을 쓰면 새로고침해도 내용이 남습니다. 다만 그 브라우저만 기억해요. 다른 기기에서는 같은 데이터를 확인할 수 없고, 브라우저 데이터를 지우면 함께 사라져요.

혼자 한 기기에서 쓰는 간단한 도구라면 이것만으로 충분할 수 있습니다. 하지만 지출 기록을 오래 쌓고, 컴퓨터를 바꾸어도 같은 내역을 확인하고, 월별 합계를 안정적으로 관리하려면 앱 바깥의 별도 저장소가 필요해요. 그 역할을 하는 것이 데이터베이스입니다.

데이터베이스는 앱의 기억 저장소예요

지출 관리 앱에 데이터베이스를 연결하면 흐름이 달라져요.

1. 날짜, 금액, 카테고리를 입력하고 저장 버튼을 누릅니다.
2. 앱이 지출 정보를 데이터베이스로 보냅니다.
3. 데이터베이스가 지출 내역을 보관합니다.
4. 앱을 다시 열면 데이터베이스에서 내역을 불러와 화면에 보여줍니다.

화면은 데이터를 보여주고 입력을 받는 곳이고, 데이터베이스는 앱이 계속 기억해야 할 정보를 보관하는 곳이에요. 둘을 나누면 앱을 닫았다 다시 열어도 기록은 남습니다.

화면과 데이터베이스 사이에서 요청을 처리하는 부분까지 함께 보려면 웹 애플리케이션의 기본 구조를 살펴보세요.

저장만 하는 곳은 아니에요

데이터베이스를 단순한 보관함으로 생각하기 쉽지만, 실제 앱에서는 저장한 데이터를 계속 다뤄요.

• 새로운 지출을 기록합니다.
• 특정 달이나 카테고리의 내역만 찾아서 보여줍니다.
• 금액이나 카테고리를 수정합니다.
• 잘못 기록한 지출을 삭제합니다.
• 최신순이나 금액순으로 정렬합니다.
• 한 달 동안 쓴 금액의 합계를 계산합니다.

지출이 세 건일 때는 큰 차이를 느끼기 어려워요. 하지만 기록이 3,000건으로 늘어나면 이번 달 식비나 지난달 교통비처럼 원하는 내역만 정확히 찾고 정리하는 일이 중요해집니다. 데이터베이스는 이런 요청을 처리하기 좋은 형태로 데이터를 관리해요.

데이터 사이의 관계도 기억할 수 있어요. 식비라는 카테고리에 커피, 점심, 저녁 지출을 묶는 식입니다. 덕분에 관련 정보를 한 덩어리처럼 불러오고 카테고리별 합계도 만들 수 있어요.

모든 앱에 데이터베이스가 필요한 것은 아니에요

정보를 보여주기만 하는 소개 페이지, 입력값으로 결과만 계산하는 간단한 계산기처럼 기억할 데이터가 없는 앱에는 데이터베이스가 없어도 됩니다.

반대로 아래 중 하나라도 해당한다면 데이터베이스를 연결할 때예요.

• 새로고침하거나 다시 접속해도 입력한 내용이 남아야 합니다.
• 지출, 운동, 독서 기록을 계속 쌓아야 합니다.
• 저장한 내용을 검색하거나 수정하고 삭제해야 합니다.
• 다른 기기에서도 같은 데이터를 확인해야 합니다.
• 여러 종류의 데이터를 서로 연결해야 합니다.

핵심은 앱에 화면이 있느냐가 아니라 앱이 무엇인가를 계속 기억해야 하느냐예요.

바이브코딩에서는 무엇을 알아야 할까요?

데이터베이스를 직접 처음부터 구축하는 법을 모두 외울 필요는 없어요. Supabase 같은 서비스를 사용하면 AI가 데이터베이스를 연결하고 필요한 코드를 작성해줄 수 있습니다.

대신 만드는 사람은 앱이 무엇을 기억해야 하는지 정할 수 있어야 해요. 지출 관리 앱이라면 다음과 같은 것들이죠.

• 어떤 데이터를 저장할지: 날짜, 금액, 사용처, 카테고리
• 어떤 기능이 필요한지: 기록, 조회, 수정, 삭제, 검색, 합계
• 언제 데이터를 저장할지: 저장 버튼을 누를 때, 내역을 수정할 때
• 다시 앱을 열었을 때 무엇을 보여줄지: 이번 달 내역, 카테고리별 지출, 월별 합계

이 내용을 정했다면 AI에게 구체적으로 요청할 수 있어요.

지출을 데이터베이스에 저장해줘. 날짜, 금액, 사용처, 카테고리를 함께 저장하고 새로고침해도 남아 있어야 해. 내역을 수정하고 삭제할 수 있게 하고, 월별 합계와 카테고리별 내역도 보여줘.

“지출 관리 기능을 만들어줘”보다 훨씬 분명한 요청입니다. AI는 연결 방법과 코드를 만들고, 우리는 어떤 데이터를 어떤 흐름으로 다룰지 결정하는 거예요.

데이터베이스를 연결할 때 AI가 접속 주소나 키를 환경변수에 넣으라고 안내하기도 해요. 이 부분은 API 키와 .env에서 이어서 볼 수 있어요.

데이터베이스를 연결했는데 제출한 내용이 저장되지 않는다면 필요한 기술 이름부터 맞히려고 하지 마세요. 현재 상태와 원하는 상태를 AI에게 설명해 다음 작업을 찾는 방법으로 이어서 해결할 수 있어요.

정리

• 화면에 데이터가 보인다는 것과 데이터를 저장했다는 것은 다릅니다.
• 브라우저 저장은 간단하지만 한 브라우저와 기기에서만 쓸 수 있습니다.
• 데이터베이스는 앱이 계속 기억해야 할 정보를 앱 바깥에 보관합니다.
• 저장한 데이터를 다시 찾고, 수정하고, 삭제하고, 서로 연결할 수 있습니다.
• 모든 앱에 필요한 것은 아니지만 기록을 쌓고 다시 불러오는 앱에는 필요합니다.
• 바이브코딩에서는 코드를 외우기보다 무엇을 저장하고 어떻게 사용할지 먼저 정하는 것이 중요합니다.

AI로 화면을 만드는 데 성공했다면 이제 다음 질문을 해보세요. 이 앱은 무엇을 기억해야 할까? 답을 정하면 데이터베이스가 필요한 이유도 자연스럽게 이해할 수 있습니다.

데이터를 저장하기로 했다면 다음에는 저장소를 골라야 합니다. 데이터베이스와 구글 스프레드시트 중 무엇이 내 앱에 맞는지 이어서 살펴보세요.

직접 데이터베이스를 연결하고 CRUD 기능을 만들려면 바이브코딩 가이드 8장에서 실습할 수 있어요.