화면, 에러, 그다음
지금까지 두 개를 만들었다. 화면을 정확히 말하는 UI 용어 75, 에러를 정확히 말하는 에러 디버깅 프롬프트 변환기. 둘 다 결국 "AI한테 정확한 말로 부탁하기"였다.
그다음에 막히는 곳은 정해져 있었다. 저장, 로그인, 배포다. 화면은 그럴듯하게 나왔는데 새로고침하면 데이터가 사라지고, 로그인을 붙였더니 남의 글까지 보이고, 내 컴퓨터에선 되던 게 배포하면 안 된다.
백엔드는 눈에 안 보인다
화면은 틀리면 바로 보인다. 백엔드는 그렇지 않다. 데이터가 어디에 저장되는지, 누가 볼 수 있는지, 비밀 키가 어디에 있는지는 화면만 봐서는 모른다. 그래서 요청도 막연해진다. "저장되게 해줘", "로그인 붙여줘", "올려줘".
AI는 이런 말로도 어떻게든 만들어 준다. 문제는 그 '어떻게든'이 내가 원한 방식이 아닐 수 있다는 것이다. 데이터는 화면 상태에만 있고, RLS는 꺼져 있고, 비밀 키는 프론트엔드 코드에 들어가 있다. 돌아가긴 하는데 위험한 상태다.
| 이렇게 말하던 것 | 이렇게 바꿔 말하기 |
|---|---|
| 저장되게 해줘 | Supabase에 todos 테이블을 만들고 내용, 완료 여부, 작성자, 작성일을 저장해 주세요. |
| 새로고침하면 사라져요 | 지금은 화면 상태(state)에만 있어서 그런 것 같아요. DB에 저장하고 페이지를 열 때 불러와 주세요. |
| 다른 사람은 못 보게 | RLS를 켜고, user_id가 로그인한 사람과 같은 행만 읽고 쓸 수 있게 해 주세요. |
| 올려줘 | Vercel에 배포하고, 등록해야 할 환경변수 목록을 알려 주세요. |
| 결제 되게 | 결제 완료 웹훅을 받으면 주문 상태를 paid로 바꿔 주세요. 비밀 키는 서버에만 둬 주세요. |
그래서 정리한 것: 바이브 코딩 백엔드·배포 용어 60
바이브 코딩 백엔드·배포 용어 60 — mifplus.com/tools/backend-terms
UI 용어 75와 같은 방식이다. 보고, 눌러 보고, 담아서 요청문을 만든다. 다른 점은 맨 위의 웹앱 지도다. 백엔드 용어는 이름보다 "어디에 있는 것인지"를 먼저 알아야 덜 헷갈린다. 브라우저, 서버, 데이터베이스, 배포·운영, 외부 서비스 다섯 자리에 용어를 나눠 두고, 상자를 누르면 그 자리 용어만 모아 보여 준다.
| 분류 | 개수 | 들어 있는 것 (일부) |
|---|---|---|
| 기본 구조 | 8 | 프론트엔드, 백엔드, API, 엔드포인트, 요청과 응답, JSON |
| 렌더링 | 3 | CSR, SSR, SSG |
| 통신 | 8 | HTTP 메서드, 상태 코드, 헤더, CORS, 웹훅, 실시간(웹소켓) |
| 데이터 | 10 | 테이블, 기본키, 관계(외래키), CRUD, 쿼리, 마이그레이션, 파일 스토리지 |
| 인증·보안 | 9 | 인증, 인가, 세션, 토큰(JWT), 소셜 로그인(OAuth), RLS, API 키 |
| 환경·설정 | 6 | 환경변수, .env 파일, 공개 키와 비밀 키, 로컬·개발·운영 환경 |
| 배포·운영 | 10 | 빌드, 배포, 도메인, DNS, HTTPS, CDN, 서버리스 함수, 롤백 |
| 외부 연동 | 6 | BaaS, 결제 연동, 이메일 발송, 예약 작업(크론), 캐시, 요청 제한 |
눈에 안 보이니까, 직접 눌러 보게
설명을 읽는 것보다 한 번 눌러 보는 게 빠르다. 그래서 데모를 7개 넣었다.
- 요청과 응답이 오가는 길 — 브라우저가 보낸 주문서가 서버에 갔다가 JSON으로 돌아오는 모습
- 메서드로 표 다루기 — GET·POST·PATCH·DELETE를 누를 때마다 같은 일을 하는 SQL과 표가 같이 바뀐다
- 상태 코드별로 사용자가 보는 화면 — 401, 403, 429, 500이 사용자에게는 어떻게 보이는지
- 출입증과 열쇠 — 인증은 "누구인가", 인가는 "이 방에 들어가도 되는가". 회원이어도 관리자 페이지는 403이다
- RLS 스위치 — RLS가 꺼져 있으면 민지 화면에 준호의 비공개 일기가 보인다. 켜면 내 행만 남는다
- 비밀 키는 어디에 둘까 —
NEXT_PUBLIC_을 붙인 결제 키가 페이지 소스에 그대로 보이는 걸 직접 확인한다 - 내 컴퓨터에선 되는데 배포하면 안 될 때 — 배포 설정에 환경변수를 등록하고, 다시 배포까지 해야 반영되는 흐름
특히 RLS와 비밀 키는 돌아가긴 해서 문제가 있는지조차 모르고 넘어가기 쉬운 부분이다. 그래서 글로 설명하기보다 눈으로 보게 했다.
용어 카드: 비유, 할 말, 자주 하는 실수
카드마다 한 줄 정의와 비유가 있다. API는 식당의 주문서 양식, RLS는 아파트 우편함, 환경변수는 금고 비밀번호를 코드 밖 서랍에 보관하는 것. AI에게 할 말을 열면 그대로 붙여 넣을 문장과 자주 하는 실수가 나온다.
관련 에러가 있는 용어는 에러 디버깅 프롬프트 변환기의 에러 카드로 바로 이어진다. RLS 카드에서 "관련 에러 #26"을 누르면 new row violates row-level security policy 설명으로 넘어가는 식이다. 용어를 몰라서 막히든 에러가 나서 막히든, 같은 자리에서 만나게 했다.
담아서 조립하기
필요한 용어를 + 담기로 모으면 요청문 조립대의 알맞은 칸에 들어간다. 칸은 다섯 개다. [기능] + [데이터] + [권한] + [연동] + [환경·배포]. UI 용어 75의 레이아웃 + 컴포넌트 + 상태 + 스타일 + 효과와 같은 역할이다.
예를 들어 테이블, 기본키, 소셜 로그인, RLS, 파일 스토리지, 환경변수를 담고 만들 기능을 한 줄 쓰면 이렇게 나온다.
[만들 기능]
회원이 읽은 책을 기록하고 내 목록으로 볼 수 있게 해 주세요.
[데이터]
- books 테이블: title(text), rating(int, 1~5), memo(text), cover_url(text), created_at(timestamp)
- 필요한 테이블과 열을 표로 정리한 뒤 만들어 주세요.
- id는 uuid 기본키로 자동 생성되게 해 주세요.
[권한]
- 구글 소셜 로그인을 붙이고, 로그인 후 /dashboard로 보내 주세요.
- 모든 테이블에 RLS를 켜고, user_id가 로그인한 사람과 같은 행만 읽고 쓰게 해 주세요.
[연동]
- 이미지는 스토리지에 올리고 테이블에는 URL만 저장해 주세요. 5MB 이하만 받아 주세요.
[환경·배포]
- Vercel에 배포할 거예요.
- 주소와 키는 모두 환경변수로 빼고, 필요한 변수 목록을 정리해 주세요.
[진행 방식]
- 만들기 전에 바꿀 파일 목록과 순서를 먼저 보여 주세요.
- 정해지지 않은 부분은 추측하지 말고 먼저 질문해 주세요.
마지막 [진행 방식] 두 줄은 항상 붙는다. 만들기 전에 바꿀 파일부터 보여 달라는 것, 정해지지 않은 건 추측하지 말고 물어보라는 것. 백엔드는 한 번 잘못 만들면 데이터까지 꼬이니까, 시작 전에 한 번 멈추게 하는 편이 낫다.
아래쪽에는 "저장되게 해줘" 같은 말을 바꿔 주는 모호한 말 사전 12개, HTTP 메서드·상태 코드·데이터 타입·환경변수 이름 규칙·테이블 설계 예시·배포 전 보안 점검을 묶은 실전 사전, 요청 전 체크리스트 7개를 붙였다.
정리하며
이렇게 세 개가 됐다. 무엇을 만들지는 UI 용어 75, 무엇이 잘못됐는지는 에러 디버깅 프롬프트 변환기, 눈에 안 보이는 뒤쪽은 백엔드·배포 용어 60. 셋 다 같은 이야기를 한다. AI는 정확하게 말할수록 정확하게 만든다.
저장이나 로그인을 붙이기 전에, 또는 배포 버튼을 누르기 전에 한 번 열어 보면 좋겠다.
바이브 코딩 백엔드·배포 용어 60: https://mifplus.com/tools/backend-terms
에러 디버깅 프롬프트 변환기: https://mifplus.com/tools/debug-prompt
바이브 코딩 UI 필수 용어 75: https://mifplus.com/tools/vibe-ui
지난 글: AI한테 "또 안 돼"만 반복하던 날들 — 에러를 디버깅 요청문으로 바꾸는 도구