바이브코딩이 기능 10개쯤에서 자꾸 멈추는 이유, 화면 지도(IA) 먼저 만드는 법
바이브코딩이 기능 10개쯤에서 멈추는 이유는 AI가 못해서가 아니에요. 서비스의 화면과 연결을 적어 둔 화면 지도(IA)가 없어서예요.
AI에게 말만 해서 서비스를 만드는 바이브코딩, 처음엔 정말 빨라요. 로그인이 되고, 목록이 뜨고, 버튼이 눌려요.
그런데 기능이 열 개쯤 쌓이면 분위기가 바뀌어요. 하나를 고치면 다른 화면이 깨지고, AI가 방금 만든 걸 모른 척하기 시작해요.
이 글은 왜 그 지점에서 멈추는지, 그리고 시작하기 전에 무엇을 한 장 만들어 두면 덜 멈추는지를 정리했어요.
사람 개발자도 지도 없이 열 번째 기능을 붙이면 같은 일을 겪어요
바이브코딩은 왜 기능 10개쯤에서 멈추나요?
AI는 지금 대화에 보이는 내용을 기준으로 코드를 짜요. 서비스가 작을 때는 전체가 한눈에 들어와요.
기능이 늘면 전체 그림은 대화 어딘가로 밀려나요. 그러면 AI는 눈앞의 요청만 보고 가장 그럴듯한 코드를 만들어요.
- 같은 기능이 이름만 다르게 두 번 만들어진다
- 새 화면이 기존 화면과 연결되지 않고 혼자 떠 있다
- 한 곳을 고쳤더니 다른 화면의 버튼이 사라진다
- 무엇이 이미 있는지 사람도 헷갈린다
공통점은 하나예요. 이 서비스에 화면이 몇 장 있고 어떻게 이어지는지를 적어 둔 곳이 없어요.
바이브코딩은 그 일이 더 빨리 올 뿐이에요.
화면 지도(IA)란 무엇인가요?
IA(정보구조)는 어려운 말이지만 하는 일은 단순해요. 우리 서비스에 어떤 화면이 있고, 어느 화면에서 어느 화면으로 가는지를 한 장에 그린 지도예요.
지하철 노선도와 비슷해요. 역 이름과 환승 관계만 있고, 역사 내부 인테리어는 없어요.
| 구분 | 지도 없이 시작 | 지도를 먼저 만들고 시작 |
|---|---|---|
| AI에게 하는 말 | 「예약 기능 만들어줘」 | 「화면 목록 3번 예약 확인을 만들어줘」 |
| 화면 이름 | 매번 AI가 새로 정함 | 지도의 이름 그대로 사용 |
| 빠진 화면 발견 | 써 보다가 우연히 | 지도를 볼 때 바로 |
| 고친 뒤 확인 | 눈에 띄는 곳만 | 지도의 연결선을 따라 |
화면 지도는 어떻게 만드나요?
종이 한 장이나 메모장이면 충분해요. 도구보다 순서가 중요해요.
- 사람이 하는 일을 먼저 적어요. 「손님이 가게를 찾는다 → 시간을 고른다 → 예약한다 → 확인 문자를 받는다」처럼 사용자 한 명의 하루를 문장으로 적어요. 기능 이름이 아니라 행동이에요.
- 행동마다 화면 하나를 붙여요. 위 문장이 곧 화면 목록이 돼요. 검색, 가게 상세, 시간 선택, 예약 확인처럼 이름을 붙이고 번호를 매겨요.
- 화면 사이의 연결을 화살표로 그어요. 뒤로 가는 길, 실패했을 때 가는 곳도 적어요. 막다른 화면이 보이면 그게 빠진 화면이에요.
- 이번에 만들 화면에만 동그라미를 쳐요. 나머지는 다음 버전으로 미뤄요. 지도 전체를 한 번에 시키지 않고 동그라미 친 곳만 한 장씩 AI에게 시켜요.
이렇게 하면 AI에게 줄 말이 달라져요. 「예쁘게 만들어줘」가 아니라 「지도의 4번 화면, 3번에서 들어오고 5번으로 나가는 화면」이라고 말할 수 있어요.
같은 요청이라도 AI가 추측해야 할 부분이 줄어들어요.
지도는 만들고 끝이 아니라 계속 꺼내 봐요
지도는 AI와 대화를 시작할 때마다 첫머리에 붙여 넣는 용도로 써요. 기능을 추가할 때도 코드보다 지도를 먼저 고쳐요.
새 화면이 필요하면 지도에 번호를 하나 더하고, 그다음에 만들어 달라고 해요. 이 습관 하나로 「이미 있는 걸 또 만드는」 일이 눈에 띄게 줄어요.
지도는 길을 잃지 않게 해 주는 도구이지, 운전을 대신해 주지는 않아요
다만 지도가 있다고 모든 문제가 사라지지는 않아요. 버그는 여전히 생기고, 세부 동작은 따로 적어야 해요.
자주 묻는 질문
화면 지도(IA)는 기획서와 어떻게 달라요?
기획서는 무엇을 왜 만드는지 설명하고, 화면 지도는 어떤 화면이 있고 어디로 이어지는지만 그려요.
지도에는 화면 이름과 연결선만 있으면 돼요. 역 이름과 환승 관계만 있는 지하철 노선도와 비슷해요.
화면 지도는 종이에 그려도 되나요?
네, 종이 한 장이나 메모장이면 충분해요. 도구보다 순서가 중요해요.
사용자의 행동을 먼저 적고, 행동마다 화면을 붙이고, 연결을 화살표로 그은 다음, 이번에 만들 화면에만 동그라미를 치면 돼요.
화면 지도가 있으면 바이브코딩이 멈추지 않나요?
모든 문제가 사라지지는 않아요. 버그는 여전히 생기고 세부 동작은 따로 적어야 해요.
다만 AI가 추측해야 할 부분이 줄어서 이미 있는 걸 또 만드는 일이 눈에 띄게 줄어요.
화면 지도는 언제 다시 고치나요?
기능을 추가할 때 코드보다 지도를 먼저 고쳐요. 새 화면이 필요하면 번호를 하나 더하고 그다음에 만들어 달라고 해요.
AI와 대화를 새로 시작할 때는 지도를 첫머리에 붙여 넣어요. 지도를 처음부터 만들기 막막하다면 25년차 기획자가 만든 AI 기획 도구인 플랜디가 메뉴 구조(IA)를 정리해 줘요.
오늘 내용 정리
- 바이브코딩이 기능 10개쯤에서 멈추는 이유는 화면 지도가 없어서예요.
- 화면 지도는 화면 이름과 연결선만 있으면 돼요.
- 기능을 추가할 때는 코드보다 지도를 먼저 고쳐요.
지도를 직접 그리기 막막하다면
혼자 적다 보면 어디까지 화면으로 봐야 할지 막막할 수 있어요. 플랜디는 25년차 기획자가 만든 AI 기획 도구예요.
플랜디의 AI 인터뷰는 아이디어를 한 줄 적고 질문에 답하면 기획서와 화면 목록, 메뉴 구조(IA)를 정리해 줘요.
