포켓몬고 처럼, GPS 기반 AI 챗봇과 이야기하고 수집하기

소개

회사 동료와 함께 진행한 프로젝트로, “포켓몬고 처럼 AI 챗봇을 만들어볼까?” 에서 시작하였습니다. 사실 우리가 포켓몬고 하면 떠오르는 것은 내 위치 중심으로 다양한 포켓몬 들이 있고, 이를 잡기도 하고 레이드도 하는 등 다양한 이벤트를 “위치 기반”의 게이밍입니다.

녹색 필드 앞의 포켓몬 문자 그룹

사람들의 추억과 향수 그리고 “수집욕” 과 모바일 기기에서 할 수 있는 “간소화된 경쟁” 시스템, “수집형 RPG” 시스템 등으로 누구나 1번 쯤은 해봤을 겁니다. AI 챗봇을 GPS 기반으로 포켓몬 고 처럼 떠다니게 해서 사람들이 다양하게 이용해보면 어떨까? 그리고 이쯤에서 생각드는 것은 바로,

❓챗봇이라는게 무엇일까?

이러한 배경은 기존 목적 지향성이 강한 "챗봇" 이라는 개념 때문입니다. 기존의 우리가 챗봇 서비스를 이용하는데 있어서, "목적"에 알맞은 "답변"을 얻는다는 취지에 부합하기 때문입니다. 하지만 역설적 "챗봇"을 이용하는데 있어서 역으로 제안해줄 수 있는 방법이 없을까? 하며 생각한 결과로,

GPS 기반으로 주변 상점, 관광지, 먹거리 등에 대한 정보를 얻을 수 있게 챗봇 형태로 구현하자

였습니다.

🗺️ 뭔가 거창해보이지만, 사실 AI + TMAP 조합 입니다.

검은 색 배경에 로고를 AMAP 로고

단순하게 생각하면 현재 내 위치 정보(GPS)에 AI 챗봇을 보여주면 됩니다. 하지만 임의의 챗봇을 만들기에는 너무 재미가 없었습니다. 따라서 현재 내 위치 기반으로 주변 상권(음식점, 숙박시설, 카페, 놀거리, 박물관, 공원 등) 정보 기반으로 한 AI 챗봇을 만들고 이와 대화를 할 수 있게 하는 것 입니다.

Agent 구조화 하기 - Agent

백엔드 구성은 위 레이어 구조를 보면 됩니다.

백엔드는 준비되었는데, 프론트는???

네 저는 순도 97.5% 백엔드 개발자입니다. 따라서 할 줄아는 프론트는 HTML5 가 전부입니다. 이럴 때 도와줄 친구들을 호출합니다.

Help me - Google Stitch

Google I/O 를 통해서 공개된 Stitch 를 통해 기획안 토대로 UI를 요청해보았습니다. 기획안 토대는 “GPT” 를 통해서 작성했습니다. 그대로 기획안 원고를 던지고 그에 맞는 UI 화면을 구성해달라 요청했습니다.

하지만 이렇게 디자인이 나와도 저는 프론트 영역은 전혀(?) 모르는게 함정입니다. 대신 구글 스티치를 통해서 대략적인 UX에 대한 감 정도는 체크하는 것으로 생각했습니다.

Half-바이브 코딩 (인간 지능을 곁들인)

황인준 님과 함께 GPT가 작성한 기획안을 토대로 기능을 하나씩 구현하고 구체화합니다.

v0.0.1 기본 기능 구현

  1. 지도: 현재 위치 기반으로 AI 챗봇 리스트 노출

  2. 캐릭터: 챗봇 생성 및 대화 리스트 노출

v0.0.1 이후 Todo:

  • 대화 내역 저장 및 챗봇 추가 기능 필요

  • GPS 기반 위/경도 필터링(반경 500m)

  • 간단 회원가입 및 로그인 기능

프론트 - v0 기반 딸깍하는 바이브코딩

v0.0.2 GPS 기능

  1. v0.0.1 Todo 기능 추가

  2. 채팅 히스토리 초기화 기능 추가

  3. 채팅 목록 조회

Todo:

  • 업적 리스트 생성 및 검증 로직 구현

  • 스트리밍 응답 처리 개선(비동기 메서드 기반 업적 검증 로직)

v0.0.3 기능 개선 및 간편 자동화

  1. v0.0.2 Todo 기능 추가

  2. 현 위치 기반, 챗봇이 없을 경우 Google Places API 기반 주변 상권 정보로 챗봇 Agent 자동 추가

  3. 웹푸시 알림 VAPID 검증 로직 구현

최종 UX/UI 및 기능 구현 정리

현재 내 위치 기반으로 AI 캐릭터 위치 노출됩니다. 채팅 목록에는 지난 채팅 리스트입니다.
챗봇과 대화하며 얻을 수 있는 업적을 볼 수 있는 버튼도 생겼습니다.

물론 비즈니스적인 요소를 고려해서 "특정 좌표"에 나만의 캐릭터를 심어둔다는 기능을 고려해 커스터마이징 기능도 구현했습니다. 나만의 AI 캐릭터가 특정 GPS에 있다? 약간의 메타버스적인 조미료를 첨부했다고 보면 됩니다.

🥕 최초 당근마켓 빌런과 네고 하기

삼성 갤럭시 S7과 삼성 갤럭시 S7 에지 삼성 갤럭시 S7 엣지

“당근마켓 네고 빌런” 챗봇과의 대화입니다. 프롬프트 기반으로 컨셉을 유지합니다.

당근마켓 네고 빌런과의 대화를 통해 “네고 성공” 이라는 업적을 얻을 수 있습니다.

“네고 성공” 이라는 업적은 Agent 가 업적을 알아서 만든 부분입니다.

일반 챗봇의 모델은 gpt-4.1-mini 이지만, 창의적이며 추론해야하는 업적 달성에 대한 로직으로 인해, 업적 달성 여부 판단에 대한 Agent 모델은 gpt-4o-mini 를 사용했습니다.

황인준 님의 도움을 받아 "당근마켓 네고 빌런" 컨셉의 챗봇의 Role에 대한 프롬프트 초안을 작성했습니다.

  • 프롬프트 내용이 길어 기존에 별도 작성한 "노션 회고록" 페이지에서 확인하실 수 있습니다.

🏅채팅하면 업적이 쌓여요!

단순 채팅만 해서는 사용자 리탠션이나 흥미 유도가 어렵습니다.

포켓몬 x y y y y y y y y y y y y y y y

따라서 맨 처음 컨셉이었던 "포켓몬고" 처럼, 포켓몬고에서 잡은 포켓몬 마다 능력치가 상이합니다. 그리고 외형까지도 조금씩 다른 특징을 가지고 있습니다. AMAP의 챗봇은 단일적 특성을 가진 Agent 기반 챗봇이기 때문에, 추가 특성인 “업적 시스템”이 필요했습니다.

물론 맨처음에는 하드코딩형식으로 챗봇 마다 만들어줘야했지만, Agent 기반으로 판단하게 하여 자동으로 업적을 추가하고 성공하게 만들어줬습니다.

업적 처리를 위한 Agent 워크플로우 살펴보기

프로세스 흐름도의 예

워크플로우 단계가 길어보이지만 하나씩 살펴보면 다음과 같습니다.

업적을 미리 만들어두자

  1. Agent 별 업적 생성 시나리오 요청

    1. 대화형 페르소나 Test Agent 생성

    2. Agent와 Test Agent 끼리 대화 시작

      1. 대화 품질 체크(LLM-as-Judgement; Agent)

      2. 업적 판단 체크(LLM-as-Judgement; Agent)

    3. 괜찮은 업적 리스트 적재 처리

실제 사용자와의 대화

  1. 사용자 Agent 대화 시작

  2. 대화 진행 중, 업적 판단 Agent 호출

    1. 대화 내용 분석을 통한 업적 달성 조건 여부 체크

      1. 달성: 업적 저장

      2. 미달성: 대화 지속 요청

    2. 또는 업적 판단 Agent에서 자체적으로 생성

🤔 AI 챗봇 컨셉도 만들기 귀찮은데...

남자와 책상에 앉아있는 여자의 만화

어떻게 하면 "딸깍" 느낌을 줄까 하다, Google Place API를 찾게되었습니다.

특정 좌표를 기준으로 검색 조건을 추가하면 구글 지도에 기반으로 "음식점", "호텔", "관광지" 등 에 대한 기본 정보와 좌표를 얻을 수 있습니다.

async def search_nearby_places(
        self, latitude: float, longitude: float
    ) -> List[dict]:
        """
        Google Places API를 사용해서 주변 장소를 검색합니다.
        """
        try:
            api_key = os.getenv("GOOGLE_PLACES_API_KEY")
            if not api_key:
                logger.error("GOOGLE_PLACES_API_KEY가 설정되지 않았습니다.")
                return []

            logger.info(f"Google Places API 키 확인: {api_key[:10]}...")

            url = "https://places.googleapis.com/v1/places:searchNearby"
            headers = {
                "Content-Type": "application/json",
                "X-Goog-Api-Key": api_key,
                "X-Goog-FieldMask": "places.displayName,places.types,places.location",
            }

            payload = {
                "includedTypes": [
                    "restaurant",
                    "cafe",
                    "bar",
                    "hotel",
                    "museum",
                    "park",
                    "shopping_mall",
                    "zoo",
                    "library",
                    "hospital",
                    "school",
                    "university",
                    "bank",
                    "post_office",
                    "fire_station",
                ],
                "languageCode": "ko",
                "maxResultCount": 5,
                "locationRestriction": {
                    "circle": {
                        "center": {
                            "latitude": float(latitude),
                            "longitude": float(longitude),
                        },
                        "radius": 500.0,
                    }
                },
            }

이제 사용자 GPS 정보만 알면 주변 상권, 상가, 음식점 등에 대한 다양한 위치 정보를 기반으로 Agent를 자동 구축하게 만들었습니다.

  • 최초 GPS 진입 시 없다면 5개 정도를 동적으로 생성하고 재사용하게 하였습니다.

Agent 라고 완벽하고 똑똑하지는 않아요?

검은 전화에 문자 메시지의 두 스크린 샷

컨셉을 어떻게 자동으로 잡혔는지 모르지만, 방이 있는지 물어봅니다.

하지만 처음 받은 예약 링크는 "모로코"에 위치한 호텔 예약 링크였습니다. (gpt-4.1의 한계)

사이드프로젝트를 종료하며

사실 이러한 사이드프로젝트는 최대 14일 짧게는 3일만에 마무리 해야한다고 생각합니다. 실제 Github 커밋 내역을 보면 ,

총 17번의 commit 과 5월 29일 ~ 6월18일 중 총 9일 커밋 흔적이 있습니다. 일반적인 프로젝트였다면 정말 아주 오랜 시간이 걸렸겠지만, 제가 사용한 AI 툴들을 통해 빠르게 기능을 구현하고 더 재미있게 해본 경험이었습니다.

  • 기획안 작성

    • ChatGPT Plus: GPT 4.5

  • 개발

    • IDE: Cursor Agent

  • 디자인 UX/UI

    • Google Stitch

이 중에서 BE API 구성을 위해 가장 많이 이용한 것은 Cursor 입니다.

[Special Thanks to]

슈퍼 FE 개발자 황인준 님에게 감사의 말씀과 함께 함께 진행하며 너무 좋았습니다!

[FastAPI Repo]

[노션 회고록]

6
2개의 답글

뉴스레터 무료 구독