프론트엔드, 백엔드, API를 역할로 나누기
AI에게 기능을 요청할 때 화면 문제인지 서버 문제인지 구분하지 못하면 답변이 너무 넓어집니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
프론트엔드는 사용자가 만지는 부분입니다
프론트엔드는 화면입니다. 사용자가 보는 글자, 입력칸, 버튼, 목록, 화면 전환이 여기에 가깝습니다. HTML, CSS, JavaScript를 배운 이유도 결국 프론트엔드에서 무엇이 일어나는지 이해하기 위해서입니다.
AI에게 프론트엔드 작업을 시킬 때는 보이는 결과를 말하면 좋습니다. '저장 버튼을 누르면 목록에 카드가 하나 추가되게 해줘'처럼 사용자의 행동과 화면 변화를 함께 쓰면 요청이 분명해집니다.
백엔드는 저장과 비밀 작업을 맡습니다
백엔드는 사용자가 직접 보지 않는 뒤쪽입니다. 데이터베이스에 저장하거나, 로그인 상태를 확인하거나, API 키처럼 공개되면 안 되는 값을 사용해 외부 서비스와 통신하는 일이 여기에 가깝습니다.
초보자의 첫 프로젝트에서는 백엔드를 미루는 것도 좋은 선택입니다. 브라우저 저장으로 충분한지 먼저 확인하고, 여러 기기 동기화나 로그인처럼 정말 필요한 순간에 백엔드를 붙이면 됩니다.
API는 화면과 서버 사이의 약속입니다
API는 프론트엔드와 백엔드가 데이터를 주고받는 약속입니다. 예를 들어 화면이 새 메모를 서버에 저장하려면 어떤 주소로, 어떤 데이터 모양으로 보낼지 정해야 합니다.
AI에게 API를 요청할 때는 데이터 모양과 행동을 같이 알려주세요. '메모를 저장할 때 제목과 내용을 보내고, 성공하면 저장된 메모를 돌려주는 API를 설계해줘'처럼 쓰면 됩니다.
화면, API, 서버, DB 역할 나누기
공부 기록 앱에 저장 기능을 붙일 때 각 영역이 맡는 일을 구분합니다.
- 01 프론트엔드
입력창, 버튼, 목록처럼 보이는 부분입니다.
기록 저장 요청 - 02 API
화면과 서버가 주고받는 약속입니다.
서버가 요청 처리 - 03 백엔드
저장 요청을 처리하고 규칙을 확인합니다.
DB에 저장하거나 불러오기 - 04 DB
공부 기록 데이터를 보관합니다.
핵심 정리
프론트엔드는 사용자가 보는 화면, 백엔드는 데이터 저장과 비밀 작업, API는 둘 사이의 약속입니다. 초보자는 코드 이름보다 역할로 구분하면 됩니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "프론트엔드, 백엔드, API를 역할로 나누기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 AI에게 기능을 요청할 때 화면 문제인지 서버 문제인지 구분하지 못하면 답변이 너무 넓어집니다.
내 앱 기능 목록을 프론트엔드, 백엔드, API로 나눠줘. 첫 버전에서 백엔드 없이 가능한 기능과 나중에 서버가 필요한 기능도 구분해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 화면에서 끝나는 기능을 프론트엔드로 표시합니다., 데이터 저장이나 비밀키가 필요한 기능을 백엔드로 표시합니다., 화면과 서버가 주고받을 내용을 API로 적습니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 화면에서 끝나는 기능을 프론트엔드로 표시합니다.
- 데이터 저장이나 비밀키가 필요한 기능을 백엔드로 표시합니다.
- 화면과 서버가 주고받을 내용을 API로 적습니다.
실습
내 앱 기능 5개를 적고, 각 기능 옆에 프론트엔드/백엔드/API 중 하나를 붙여보세요.
- 사용자가 보는 화면 기능을 먼저 표시합니다.
- 저장, 로그인, 결제처럼 서버가 필요한 기능을 따로 표시합니다.
- 화면이 서버에 요청할 데이터 이름을 적습니다.
예시: 메모 입력창은 프론트엔드, 메모 저장은 백엔드, `POST /memos`는 API입니다. 첫 버전은 브라우저 저장으로 시작하면 API 없이도 만들 수 있습니다.
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 프론트엔드: 입력창, 저장 버튼, 기록 목록
- 공부 기록 앱 첫 버전 저장: 브라우저 저장이라 백엔드 없음
- 공부 기록 앱 나중 API 후보: `POST /records`, `GET /records`
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.