무엇을 저장할지 먼저 정하기
DB를 먼저 붙이면 복잡해지고, 저장할 데이터가 불분명하면 앱 구조도 흔들립니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
데이터 설계는 DB 선택보다 먼저입니다
DB를 무엇으로 쓸지 고민하기 전에 무엇을 저장할지 정해야 합니다. 공부 기록 앱이라면 제목, 내용, 날짜, 완료 여부처럼 실제 값이 들어갈 항목을 먼저 적습니다. 이 목록이 데이터 설계의 시작입니다.
항목마다 예시 값을 붙이면 더 분명해집니다. 제목은 '자바스크립트 복습', 날짜는 '2026-06-28', 완료 여부는 true 또는 false처럼 적을 수 있습니다. 예시 값이 있으면 AI도 더 정확한 구조를 제안합니다.
브라우저 저장과 DB를 구분합니다
혼자 쓰는 작은 앱은 브라우저 저장으로 시작할 수 있습니다. 같은 기기에서만 기록을 보면 되는 체크리스트나 메모는 localStorage 같은 브라우저 저장으로도 첫 버전을 만들 수 있습니다.
반대로 여러 기기에서 같은 데이터를 보거나, 로그인한 사용자별로 데이터를 나누거나, 다른 사람과 공유해야 한다면 DB와 서버가 필요해질 가능성이 큽니다. 첫 버전에서는 이 차이를 이해하는 것만으로도 충분합니다.
개인정보와 비밀값은 따로 표시합니다
데이터 항목 중 이메일, 이름, 전화번호, 위치 정보처럼 사람을 식별할 수 있는 값은 개인정보입니다. 이런 값은 왜 필요한지, 공개되면 문제가 없는지 먼저 생각해야 합니다.
API 키나 비밀번호 같은 비밀값은 사용자가 보는 데이터와 다릅니다. 코드나 GitHub에 직접 넣으면 안 됩니다. 데이터 설계를 할 때부터 개인정보와 비밀값을 표시하면 보안 단계에서 훨씬 덜 흔들립니다.
저장할 데이터와 위치를 먼저 나눕니다
공부 기록 앱의 제목, 내용, 날짜 같은 항목을 정한 뒤 브라우저 저장, DB, 개인정보 여부를 구분합니다.
- 01 데이터 항목
제목, 내용, 날짜, 완료 여부처럼 작게 나눕니다.
항목을 적습니다 - 02 브라우저 저장
혼자 쓰는 첫 버전은 로컬 저장으로 시작할 수 있습니다.
저장 위치를 고릅니다 - 03 DB
여러 기기나 계정 동기화가 필요하면 검토합니다.
위험 정보를 표시합니다 - 04 개인정보
공개하거나 저장하면 위험한 정보가 있는지 표시합니다.
핵심 정리
데이터 설계는 DB 제품을 고르기 전에 무엇을 저장할지 정하는 일입니다. 제목, 내용, 날짜, 완료 여부처럼 작은 항목으로 나누면 DB가 필요한지 브라우저 저장으로 충분한지 판단하기 쉬워집니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "무엇을 저장할지 먼저 정하기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 DB를 먼저 붙이면 복잡해지고, 저장할 데이터가 불분명하면 앱 구조도 흔들립니다.
내 앱에서 저장해야 할 데이터를 표로 정리해줘. 각 항목의 이름, 예시 값, 꼭 필요한지, 브라우저 저장으로 충분한지 DB가 필요한지 나눠줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 저장할 항목을 이름과 예시 값으로 적습니다., 개인정보가 들어가는 항목을 표시합니다., 브라우저 저장, DB, 서버 중 어디가 필요한지 구분합니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 저장할 항목을 이름과 예시 값으로 적습니다.
- 개인정보가 들어가는 항목을 표시합니다.
- 브라우저 저장, DB, 서버 중 어디가 필요한지 구분합니다.
실습
내 앱에서 저장할 데이터 항목을 5개 이하로 적고, 각 항목에 예시 값을 붙여보세요.
- `제목: 오늘 공부`처럼 예시 값을 함께 적습니다.
- 개인정보나 비밀값이 있는지 표시합니다.
- 혼자 쓰는 데이터인지 여러 기기에서 공유할 데이터인지 표시합니다.
예시: 공부 기록 앱은 제목, 내용, 날짜, 완료 여부를 저장합니다. 혼자 쓰는 첫 버전이면 브라우저 저장으로 시작하고, 계정 동기화가 필요해질 때 DB를 붙입니다.
- title: `자바스크립트 복습`
- content: `배열 map과 filter를 연습했다`
- date: `2026-06-28`, completed: `true/false`
- 첫 버전 저장 위치: 브라우저 저장. 여러 기기 동기화가 필요하면 DB 검토
- tripName: `제주도 2박 3일`
- itemName: `충전기`, packed: `true/false`
- createdAt: `추가한 날짜`
- 첫 버전 저장 위치: 브라우저 저장. 친구와 공유하려면 서버/DB 검토
- meetingTitle: `주간 회의`
- memo: `이번 주 배포 일정 확인`
- tasks: `디자인 수정, 배포 확인`
- 주의: 참석자 이메일을 저장하면 개인정보가 되므로 첫 버전에서는 빼도 됨
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 title: `자바스크립트 복습`
- 공부 기록 앱 content: `배열 map과 filter를 연습했다`
- 공부 기록 앱 date: `2026-06-28`, completed: `true/false`
- 공부 기록 앱 첫 저장 위치: 브라우저 저장
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.