NotebookLM으로 API 문서 없이 앱 만들기 (바이브 코딩 실전 가이드)

API 문서를 일일이 읽지 않아도 앱을 만들 수 있다면 얼마나 좋을까요? NotebookLM과 안티그래비티(AntiGravity)를 조합하면 정말 가능합니다. API 문서를 NotebookLM에 넣어두고, AI에게 필요한 정보를 물어보게 하면 바이브 코딩으로 앱이 뚝딱 완성됩니다. 최근 카카오맵 API와 공공데이터를 연동한 약국 찾기 앱을 이 방식으로 만들어봤는데, 문서를 한 줄도 안 읽고 완성했습니다.

바이브 코딩이란?

바이브 코딩은 개발자가 직접 API 문서를 읽지 않고, AI가 문서를 이해해서 코드를 생성하는 방식입니다. 예전엔 공식 문서를 열어서 엔드포인트 찾고, 파라미터 확인하고, 예제 코드 복사하는 게 당연했죠. 하지만 NotebookLM을 쓰면 AI가 문서를 먼저 학습하고, 필요한 부분만 골라서 답변해줍니다.

기존 방식	바이브 코딩
API 문서 수십 페이지 읽기	NotebookLM에 문서 업로드만
필요한 엔드포인트 직접 찾기	AI가 자동으로 질문하고 답변
에러 나면 문서 다시 확인	AI가 에러 보고 수정 제안
코드 예제 복붙 후 수정	프롬프트만 입력하면 완성

NotebookLM의 역할은 API 문서를 이해하고 정리해주는 거예요. 안티그래비티는 실제로 코드를 생성하는 IDE입니다. 둘을 연결하면 AI가 문서를 참고하면서 코드를 작성하기 때문에 환각 현상이 확 줄어듭니다.

NotebookLM에 API 문서 추가하기

첫 번째 단계는 NotebookLM에 API 문서를 소스로 추가하는 겁니다. 카카오맵 API를 예로 들면, 기본 가이드 문서, 마커 사용 샘플, 그리고 전체 레퍼런스 문서를 총 3개 추가했어요. 공공데이터포털에서 받은 심평원 약국 정보 API 가이드도 다운로드해서 함께 넣었습니다.

소스 추가는 정말 간단합니다. NotebookLM 화면에서 '소스 추가' 버튼 누르고, 웹 링크나 PDF 파일을 올리면 끝이에요. 카카오맵 같은 경우는 공식 문서 링크를 복사해서 붙여넣기만 하면 되고, 공공데이터 가이드는 PDF 다운로드 후 업로드했습니다.

추가 팁

API 문서를 추가할 때는 '기본 가이드 + 샘플 예제 + 전체 레퍼런스' 이렇게 3종 세트로 넣는 게 좋아요. 기본 가이드만 넣으면 디테일이 부족하고, 레퍼런스만 넣으면 너무 방대해서 AI가 헤맬 수 있거든요.

안티그래비티와 NotebookLM 연결

문서를 NotebookLM에 넣었으면, 이제 안티그래비티에서 이 노트북을 참고할 수 있게 연결해야 합니다. 여기서 NotebookLM MCP라는 기능을 사용합니다.

먼저 NotebookLM에서 공유 링크를 만듭니다. 노트북 우측 상단에 공유 버튼이 있는데, 거기서 링크를 생성하면 됩니다. 그 링크를 복사해서 안티그래비티 설정으로 가서 NotebookLM MCP 항목에 등록하면 끝이에요. 인증 과정이 한 번 나오는데, 구글 계정으로 로그인하면 바로 연결됩니다.

연결할 때 프롬프트로 추가 지시를 입력할 수 있는데, 여기에 "이 노트북의 API 문서를 참고해서 코드를 작성해줘"라고 적어두면 AI가 알아서 문서를 찾아봅니다.

실전 개발 워크플로우

이제 실제로 앱을 만드는 과정을 보여드릴게요. NotebookLM에서 할 일과 안티그래비티에서 할 일을 나눠서 진행합니다.

NotebookLM에서 할 일

NotebookLM에서는 API의 핵심 기능을 파악하는 질문을 던집니다. 예를 들어 카카오맵 API라면 이런 질문들이에요.

• "지도에 마커를 여러 개 표시하려면 어떤 API를 써야 해?"
• "호출할 때 필요한 URL과 파라미터는 뭐야?"
• "반경 100m 내 장소를 검색하는 방법은?"
• "API 키는 어디서 받고 어떻게 설정해?"

NotebookLM은 문서를 읽고 이런 질문에 정확하게 답변해줍니다. 그리고 마지막으로 "이 정보를 기준으로 안티그래비티에서 쓸 프롬프트를 만들어줘"라고 하면, 개발용 프롬프트를 생성해줍니다.

안티그래비티에서 작업

안티그래비티에서는 오픈 에이전트 매니저를 사용하면 여러 개의 앱을 동시에 작업할 수 있어요. 작업 폴더를 하나 만들고, 프롬프트에 "노트북 참고해서 카카오맵 API로 약국 찾기 앱 만들어줘"라고 입력합니다. NotebookLM에서 만든 프롬프트를 복사해서 넣어도 되고요.

그러면 AI가 MCP를 통해 NotebookLM에 접근해서 필요한 정보를 직접 찾아옵니다. 작업 로그를 보면 AI가 "카카오맵 API 키 설정 방법은?"이라고 질문하고, NotebookLM이 답변하는 과정이 실시간으로 보여요. 정말 신기합니다.

실제 앱 예시

제가 만든 앱은 현재 위치나 주소를 입력하면 반경 100m 내에 있는 약국 정보를 카카오맵에 표시해주는 거예요. 카카오맵 API로 지도를 띄우고, 공공데이터포털의 심평원 API에서 약국 데이터를 받아와서 마커로 찍었습니다. 마커에 마우스를 올리면 약국 이름도 나오게 했고요.

코드를 한 줄도 직접 안 쓰고 프롬프트만으로 완성했습니다. 물론 에러는 몇 번 났어요. F12 눌러서 콘솔 에러 메시지를 복사해서 다시 프롬프트에 넣으면 AI가 수정해줍니다.

개발 팁

API 키 관리는 환경변수로

API 키는 절대 코드에 직접 넣지 마세요. .env 파일에 키를 저장하고, 외부에 절대 유출되지 않게 관리해야 합니다. 카카오맵은 플랫폼 키 설정에서 자바스크립트 키를 선택한 뒤, 도메인을 입력해야 해요. 로컬에서 테스트한다면 React 기반은 포트 3000, Vite 기반은 5174를 등록하면 됩니다.

에러 디버깅 방법

에러가 나면 F12를 눌러서 개발자 도구를 열고, 콘솔 메시지를 확인하세요. 그 에러 메시지를 복사해서 프롬프트에 붙여넣고 "이 에러 수정해줘"라고 하면 AI가 알아서 고칩니다. 이 과정을 몇 번 반복하면 앱이 완성됩니다.

AI 모델 선택 가이드

모델	추천 상황	특징
Gemini	일반적인 작업	기본 모델, 대부분 충분
Sonnet 4.5	문제 발생 시	복잡한 로직 처리에 강함
Opus	중요한 작업만	비싸지만 품질 최고
Gemini 3	가성비 중시	빠르고 저렴, 성능도 괜찮음

대부분의 작업은 Gemini나 Sonnet으로 충분합니다. 저는 약국 찾기 앱도 Gemini로 만들었어요.

결론

NotebookLM에 양질의 정보를 채워 넣으면 최신화된 정보로 작업할 수 있고, AI 환각 현상을 많이 줄일 수 있습니다. 작업 기록을 보면 AI가 필요한 정보를 직접 질문하고 답변 받아서 작업했음을 확인할 수 있어요.

API 문서를 읽는 게 귀찮거나, 여러 API를 동시에 다뤄야 하는 상황이라면 이 방법을 써보세요. 정말 시간이 많이 절약됩니다. 저도 처음엔 반신반의했는데, 한 번 해보니까 이제는 돌아갈 수 없을 것 같아요.

이 글이 도움이 되셨다면 댓글이나 공감 부탁드려요. 궁금한 점 있으시면 편하게 물어보세요!