바이브 코딩/Cursor AI

카카오맵 MCP로 점심 메뉴 추천 앱 만들기

· 코딩마이데이

01 카카오 API 키를 받아야 카카오맵 MCP를 활용할 수 있습니다. 카카오디벨로퍼스 홈페이지에 접속해서 카카오 계정으로 [로그인]합니다. 그런 다음 [앱 -> + 앱 생성]을 누릅니다. 카카오 API 키는 앱을 생성해야 받을 수 있습니다.

 

카카오디벨로퍼스 홈페이지 : https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

02 필수값을 입력하고 [저장]을 눌러 앱을 생성합니다.

 

03 앱이 생성되면 [앱 -> 일반]에 있는 앱 키를 찾습니다. 그러면 4가지 키가 보이는데 그 중에서 REST API키를 복사하면 됩니다. 이 값을 스미러리 Kakao Map MCP에 입력하고 [Update]를 누르면 됩니다.

 

04 입력 후 [One-click Install]을 누르고 [Cursor로 열기]를 클릭하면 커서에 Kakao Map MCP가 설치됩니다. 커서에서 설치한 카카오맵 MCP가 잘 연결되어 있는지 확인합니다.

 

05 이제 새 체팅을 열고 다음과 같이 요청하여 주변 식당을 추천받겠습니다. 카카오맵 MCP는 한 번에 15개의 결과만 가져오므로, 커서에게 15개의 식당 리스트를 부탁하겠습니다.

현재 홍대입구 4번 출구에 있는데, 근처 식당 15개만 리스트업하고, 리스트업한 식당의 이름만 정리해줘.

 

06 받은 식당의 정보를 식당 메뉴 룰렛 앱을 만들어볼 겁니다. 커서에게 Sequential Thinking MCP를 이용하여 가장 간단한 방법으로 앱을 개발하고 실행해달로 요청하겠습니다.

Sequential Thinking MCP으로 받은 식당 리스트를 바탕으로 식당 메뉴 룰렛 앱을 만드는 방법을 고민하고 앱을 만들어줘. 개발에 대한  지식이 아예 없어서 개발 단계를 전혀 모르는데 가장 간단한 방법으로 구현해줘.

 

07 그러면 Sequential Thinking MCP가 가장 쉬운 방법으로 앱을 만드는 계획을 세우기 시작합니다. 잠시 기다리면 HTNL 파일을 하나 만들어주는 데 [Keep]을 눌러서 파일을 생성합니다.

 

생성된 파일을 실행하면 깔끔한 식당 메뉴 룰렛이 만들어진 것을 확인할 수 있습니다.

 

08 하지만 이렇게만 완성하기에는 이쉽습니다. 디자인도 단순하고, 룰렛다은 애니메이션 효과도 없습니다. 그런 기능을 추가해달라고 요청하면 충분히 해줄 것입니다. 커서에게 요청해봅시다.

디자인을 애플리케이션답게 만들고, [돌리기]를 누르면 룰렛이 회전하는 애니메이션이 있었으면 좋겠어.

 

그러면 디자인이 개선된 룰렛이 나옵니다.

 

09 이 외에도 추가적인 아이디어가 있으면 자유롭게 수정합니다. 메뉴를 선택한 다음 '이번 점심은 OOO과 같은 메시지를 출력하면 더 좋겠죠? 그리고 화면 아래의 불필요한 설명은 제거하는 게 좋겠습니다.

메뉴가 선택되면 '이번 점심은 OOO'과 같은 메시지가 보였으면 좋겠고, [돌리기] 버튼 아래에 있는 설명은 지워줘.

 

커서가 가시 코드를 수정해줍니다. 수정된 코드를 바탕으로 프로그램을 실행해보면 식당 메뉴 선택 후 메시지로 결과를 알려줍니다.