안녕하세요. 칼퇴하는 예린입니다.
AI로 메모 앱을 만든다고 해볼게요. 입력창과 버튼은 생겼는데, AI가 다음 작업으로 “백엔드를 연결하겠습니다”라고 합니다. 화면이 이미 있는데 또 무엇을 만드는 걸까요?
바이브코딩에서 프론트엔드와 백엔드를 알아두면 겉으로 보이는 화면이 완성된 것인지, 실제 기능까지 완성된 것인지 구분하기 쉬워집니다. 메모 앱의 저장 버튼 하나를 따라가 보겠습니다.
1. 프론트엔드는 내가 보고 만지는 화면이에요
메모 입력창, 저장 버튼, 메모 목록, “저장 중”이라는 안내가 프론트엔드에 해당합니다. 사용자의 입력을 받아 필요한 요청을 보내고, 돌아온 결과를 화면에 보여주는 역할도 합니다.
“버튼을 크게 해줘”, “휴대폰에서도 목록이 잘 보이게 해줘”, “저장하는 동안 버튼을 두 번 누르지 못하게 해줘”처럼 사용자가 경험하는 동작과 모양을 AI에게 설명하면 됩니다. 프론트엔드는 그림만 그리는 일이 아니라 화면에서 일어나는 상호작용까지 포함합니다.
2. 백엔드는 화면 뒤의 요청을 처리해요
계정별로 메모를 보관하는 앱이라면 서버에서 누가 요청했는지 확인하고, 그 사람의 메모를 저장하거나 불러오는 처리가 필요합니다. 이 서버 쪽 처리를 백엔드라고 합니다.
백엔드와 DB는 같은 말이 아닙니다. DB가 데이터를 보관하고 찾는 곳이라면, 백엔드는 요청을 받아 어떤 데이터를 읽거나 바꿀지 처리하는 쪽입니다. 외부 AI 서비스의 비밀 API 키로 요청을 보내는 일을 백엔드에서 맡기도 합니다.
3. 저장 버튼 뒤에서는 이런 흐름이 이어져요
계정별 메모 앱을 예로 들면 흐름은 이렇습니다. 사용자가 화면에 메모를 입력합니다. 프론트엔드가 저장 요청을 보냅니다. 백엔드가 요청을 확인하고 DB에 기록합니다. 처리 결과가 돌아오면 프론트엔드가 저장된 내용을 보여줍니다.
여기서 API는 프론트엔드와 백엔드가 요청과 결과를 주고받는 접점으로 쓰일 수 있습니다. 화면 → 요청 → 처리·저장 → 결과 표시라는 흐름을 잡으면 앞에서 읽은 API와 DB가 어디에 들어가는지도 보입니다.
4. 모든 앱에 별도 백엔드가 필요한 건 아니에요
브라우저에서 계산만 하는 도구나 같은 기기 안에 기록하는 간단한 메모장이라면 별도 백엔드 없이 만들 수도 있습니다. 반면 계정별 데이터를 여러 기기에서 쓰거나, 서버에서 비밀 설정을 사용해 외부 기능을 호출하려면 서버 쪽 처리가 필요할 수 있습니다.
따라서 AI에게 “백엔드도 만들어줘”라고 덧붙이기 전에, 원하는 사용 방식부터 설명하세요. “다른 기기에서도 내 메모를 보고 싶어”처럼 결과를 말하면 AI가 필요한 구조를 설명할 수 있습니다. 프론트엔드와 백엔드를 모두 다루는 작업을 풀스택이라고 부르기도 합니다.
5. “화면 완성” 다음에는 실제 동작을 확인하세요
저장 버튼을 눌렀을 때 목록에 글이 추가되어도 실제 저장이 끝났다고 단정할 수는 없습니다. 새로고침한 뒤에도 글이 남는지 확인해야 합니다. 로그인 기능이라면 계정에 따라 다른 내용이 보이는지도 확인합니다.
잘되지 않을 때는 “백엔드가 이상해”보다 “저장 버튼을 누르면 목록에는 보이는데 새로고침하면 사라져”처럼 행동과 결과를 전달하세요. AI가 화면 표시 문제인지, 요청이나 저장 문제인지 확인할 근거가 생깁니다.
설명에 참고한 공식 자료
다음 6편에서는 AI가 API 키를 .env에 넣으라고 할 때, 그 말이 어떤 설정을 뜻하는지 알아봅니다.