노트북LM과 안티그래비티 결합

코딩 지식 없이도 API 문서를 읽지 않고 앱을 만드는 기술적인 혁신은 이제 현실이 되었습니다. 오늘 정리해 드릴 내용은 노트북LM과 안티그래비티라는 두 가지 강력한 도구를 결합하여, 복잡한 개발 가이드 문서 대신 인공지능이 직접 정보를 분석하고 코드를 작성하게 만드는 혁신적인 앱 개발 방법론입니다. 특히 카카오맵과 공공 데이터 포털의 약국 정보 API를 연동하여 내 주변의 약국을 찾는 앱을 제작하는 과정을 중심으로 상세히 안내해 드리겠습니다.

학습 가이드 요약 표

단계	주요 활동	핵심 도구 및 소스
준비 단계	API 문서 수집 및 노트북 생성	카카오맵 API, 공공 데이터 포털
분석 단계	핵심 로직 파악 및 프롬프트 생성	노트북 엘엠(NotebookLM)
연결 단계	MCP 연동 및 작업 환경 설정	안티그래비티(Anti-Gravity)
개발 단계	바이브 코딩 및 실시간 디버깅	재미나이(Gemini), 클로드 소넷
검증 단계	기능 테스트 및 최종 최적화	웹 브라우저 콘솔, 지도 마커 확인

노트북 LM과 안티그래비티의 혁신적인 만남

개발의 패러다임이 변하고 있습니다. 과거에는 새로운 기능을 구현하기 위해 수십 페이지에 달하는 개발 가이드 문서를 정독하고, 샘플 코드를 복사하여 수정하는 과정을 거쳐야 했습니다. 하지만 이제는 노트북 엘엠에 해당 문서 링크나 파일을 업로드하는 것만으로 충분합니다. 인공지능이 문서 전체를 학습하여 개발에 필요한 핵심 정보를 추출해 주기 때문입니다. 여기에 안티그래비티의 MCP 기능을 결합하면, 인공지능이 학습된 데이터를 직접 참조하며 코딩을 수행하는 이른바 바이브 코딩이 가능해집니다.

앱 개발 준비를 위한 데이터 소스 확보

약국 위치 조회 앱을 만들기 위해서는 두 가지 핵심 데이터가 필요합니다. 첫 번째는 지도를 화면에 뿌려줄 카카오맵 API이며, 두 번째는 실제 약국의 위치와 정보를 제공하는 건강보험심사평가원의 약국 정보 서비스 API입니다.

카카오 개발자 센터에 접속하여 지도 API의 기본 가이드 문서와 여러 개의 마커를 표시하는 예제 페이지의 링크를 확보합니다. 공공 데이터 포털에서는 약국 정보 서비스의 활용 신청을 마친 뒤, 제공되는 개발 가이드 문서를 내려받습니다. 이렇게 수집된 웹 링크와 PDF 문서들은 노트북 엘엠의 소스로 등록되어 인공지능의 훌륭한 지식 베이스가 됩니다.

데이터 수집 및 설정 단계 정리

구분	상세 내용	비고
지도 서비스	카카오맵 API 가이드 및 샘플 예제	웹 링크 활용
약국 데이터	심평원 약국 정보 서비스 API	PDF 문서 업로드
지식 저장소	노트북 엘엠 신규 노트 생성	소스 통합 관리
주의 사항	API 인증키 보안 유지	환경 변수 설정 권장

인공지능을 통한 로직 분석과 프롬프트 추출

소스를 모두 등록했다면 이제 노트북 엘엠에게 질문을 던질 차례입니다. "현재 위치를 기반으로 반경 100미터 이내의 약국 정보를 가져와서 카카오맵에 마커로 표시하는 로직을 알려줘"라고 질문하면, 인공지능은 두 API를 어떻게 연동해야 하는지, 호출에 필요한 주소는 무엇인지 상세히 답변합니다.

이 답변을 바탕으로 안티그래비티에서 사용할 최적의 프롬프트를 생성합니다. 이때 사용할 기술 스택(예: 리액트, 바이트 등)을 명시하면 더욱 정확한 결과를 얻을 수 있습니다. 노트북 엘엠은 단순히 정보를 요약하는 것에 그치지 않고, 개발 도구가 바로 이해할 수 있는 지시서 역할을 수행하게 됩니다.

안티그래비티를 활용한 실제 코딩 과정

안티그래비티를 실행하고 오픈 에이전트 매니저를 통해 작업 폴더를 생성합니다. 이곳에서 가장 중요한 설정은 앞서 만든 노트북 엘엠을 MCP로 등록하는 것입니다. 프롬프트 창에 "등록한 노트북의 정보를 참고해서 앱을 만들어줘"라고 입력한 뒤, 노트북 엘엠에서 뽑아낸 상세 개발 지시서를 붙여넣습니다.

인공지능은 실시간으로 노트북의 데이터를 조회하며 파일 구조를 잡고 코드를 작성하기 시작합니다. 사용자는 터미널에 나타나는 실행 명령어를 입력하여 로컬 서버를 구동하고, 브라우저를 통해 결과물을 확인하기만 하면 됩니다. 만약 지도가 나타나지 않는다면 카카오 설정에서 도메인 주소가 일치하는지 확인하는 과정이 필요합니다.

실행 및 디버깅 단계 가이드

단계	작업 내용	체크포인트
환경 설정	.env 파일에 API 키 입력	키 유출 주의
서버 구동	터미널 실행 명령어 입력	포트 번호 확인
오류 수정	F12 개발자 도구 에러 확인	에러 메시지 프롬프트 입력
모델 전환	필요시 재미나이에서 소넷으로 변경	복잡한 로직 처리 시

기능 고도화 및 인공지능 환각 현상 극복

기본적인 지도가 나타나고 약국 위치가 표시된다면 추가적인 기능을 요청할 수 있습니다. 예를 들어 "마커를 클릭했을 때 약국 이름이 팝업으로 뜨게 해줘"와 같은 요청입니다. 인공지능은 기존 코드를 분석하여 자연스럽게 기능을 확장합니다.

이 방식의 가장 큰 장점은 인공지능의 환각 현상을 현저히 줄일 수 있다는 점입니다. 인공지능이 자신의 학습 데이터에만 의존하는 것이 아니라, 사용자가 제공한 최신 API 문서를 실시간으로 참조하기 때문에 낡은 방식의 코드를 작성하거나 잘못된 API 주소를 사용하는 실수를 방지할 수 있습니다. 양질의 정보를 노트북 엘엠에 채워 넣을수록 개발의 완성도는 더욱 높아집니다.