바이브 코딩 입문자를 위한 웹 서비스 구조 설명서

프론트엔드, 게임 화면과 조작부 (UI/UX) 사용자의 눈에 보이고 직접 조작

• 게임 속 모습: 화려한 캐릭터, 스킬 이펙트, 체력바(HP), 인벤토리 창, 마우스 클릭과 키보드 입력.

• 웹서비스 모습: 예쁜 웹사이트 디자인, 로그인 버튼, 텍스트 입력창, 부드러운 화면 전환.

• 바이브 코딩 지시 포인트: "눈에 보이는 디자인과 애니메이션, 사용자의 클릭/입력 처리"를 AI에게 요구할 때 다루는 영역입니다.

백엔드, 흔히 말하는 서버, 보이지 않는 곳에서 규칙을 통제하고 계산하는 두뇌

• 게임 속 모습: "플레이어가 스킬을 썼을 때 몬스터에게 1,000의 데미지를 준다", "아이템 복사 버그나 핵을 쓰지 못하게 검증한다"를 결정하는 보이지 않는 심판입니다.

• 웹서비스 모습: 회원가입 시 이메일 형식이 맞는지 검사, 결제 금액 계산, 추천 알고리즘 로직.

• 바이브 코딩 지시 포인트: "데이터를 가공하고, 계산하고, 규칙을 적용하는 눈에 보이지 않는 기능"을 AI에게 요구할 때 다루는 영역입니다.

데이터베이스, 데이터 보관소, 모든 정보가 영구적으로 안전하게 저장되는 금고

• 게임 속 모습: 캐릭터의 현재 레벨, 지갑에 있는 골드, 획득한 전설 아이템 기록. (컴퓨터를 껐다 켜도 데이터가 날아가지 않는 이유입니다.)

• 웹서비스 모습: 회원 정보, 작성된 게시글 본문, 달린 댓글들, '좋아요' 누적 개수.

• 바이브 코딩 지시 포인트: "어떤 정보들을 잃어버리지 않게 기록해 둘 것인가"에 대한 표 구조를 AI에게 짜달라고 할 때 다루는 영역입니다.

API, 프론트엔드와 백엔드가 서로 대화하기 위한 약속된 통신망

• 게임 속 모습: 유저가 키보드 'Q(스킬)'를 누르면 그 신호를 서버(백엔드)로 쏘아 보내고, 서버가 계산한 "몬스터 처치!" 결과를 다시 내 화면(프론트엔드)으로 가져오는 데이터 배달부입니다.

• 웹서비스 모습: 프론트엔드의 '저장' 버튼을 누르면, 백엔드 서버로 작성한 글을 보내주는 연결 다리입니다.

• 바이브 코딩 지시 포인트: 화면(프론트)과 서버(백엔드)를 연결해 실제 데이터가 왔다 갔다 하도록 AI에게 지시할 때 다루는 영역입니다.