Gemini 와 Antigravity 를 활용하여 효과적인 길 찾기 웹 서비스 만들기(SK open API 도 활용한)

게으른 뚜벅이를 위한, 나만의 MaaS 웹서비스 실험기 🚕🚌

소개

현재 사용 중인 카카오 맵이나 네이버 지도에서 제공하는 길찾기 서비스는 대부분 대중교통만을 기준으로 한 경로를 안내해줍니다. 이 점에서 늘 아쉬움이 있었습니다.

즉, 지금 있는 곳에서 택시를 타고 어느 역 혹은 어느 버스 정류장까지 이동하거나, 여러 번 환승하는 것 때문에 약속시간에 늦을 것 같을 때 도착지까지 마냥 택시를 타기 보다는 어느 역까지만 택시를 타고 지하철을 타는 방식.
혹은, 늦은 시간 귀가할 때, 택시를 타고 이동하기에는 비용이 많이 나올 때, 심야버스와 택시의 조합으로 귀가를 하는 방식.

하지만 이런 조합을 자연스럽게 제안해주는 서비스는 보지 못했습니다. 그래서 문득 이런 생각이 들었습니다.

“이런 서비스, 내가 직접 만들어보면 어떨까?”

이 질문이 이번 MaaS 실험의 출발점이었습니다.

진행 방법

✔️ 서비스 아이디어 조사

가장 먼저 한 일은 이미 존재하는 서비스인지 확인하는 것이었습니다.

Gemini에게 ‘택시 + 대중교통 조합 경로 서비스’가 있는지 질문
해외에서는 MaaS(Mobility as a Service) 개념으로 유사한 서비스가 활용되고 있음을 확인
국내에서는 카카오 T처럼 여러 모빌리티를 제공하는 앱은 있지만, 버스 + 택시 경로를 하나의 흐름으로 추천해주는 서비스는 없다는 점을 Gemini를 통해 다시 확인했습니다.

이 단계에서 “시도해볼 가치가 있다”는 확신이 생겼습니다.

✔️ 서비스 컨셉 구체화

다음 단계는 서비스 컨셉을 정리하는 일이었습니다.

낮 모드: 대중교통을 기본으로 사용하되, 일부 구간에서 택시를 이용해 시간을 절약
밤 모드: 택시를 기본으로 이용하되, 심야버스가 있다면 이를 활용해 비용을 절약

사용자의 상황(시간대)에 따라 목적과 니즈가 다르다고 판단했고, 이를 기준으로 전체 기능 구조를 설계했습니다.

✔️ Gemini × Antigravity 협업 과정

컨셉이 정리된 후에는, 이 내용을 바탕으로 Antigravity에서 웹 서비스를 구현하기 위한 프롬프트가 필요했습니다.

Gemini에게 서비스 컨셉을 설명
Antigravity에 입력할 프롬프트 형태로 정리해달라고 요청
Antigravity는 해당 프롬프트를 기반으로 전체 코드를 생성

특히 기억에 남는 부분은 낮/밤 모드(다크모드) 구현 과정이었습니다.

처음에는 다크모드를 적용해도 바깥 영역만 바뀌고, 화면 중심 배경은 계속 밝게 유지되는 문제가 반복됐습니다. 여러 번 시도한 끝에 Gemini와의 대화로 아래와 같은 핵심 로직을 도출할 수 있었습니다.

app/page.tsx

// 1. 상태값 추가
const [isNight, setIsNight] = useState(false);

// 2. 화면 전체 배경을 강제로 전환하는 로직
return (
  <div className={`min-h-screen transition-colors duration-300 ${isNight ? 'bg-black text-white' : 'bg-white text-black'}`}>
    <header className="flex justify-between p-4">
      <h1 className="text-2xl font-bold text-indigo-600">WaitStop.</h1>
      <button onClick={() => setIsNight(!isNight)}>
        {isNight ? <SunIcon /> : <MoonIcon />}
      </button>
    </header>

    {/* 나머지 콘텐츠 */}
  </div>
);

Gemini가 강조했던 말은 아직도 기억에 남습니다.

“이 로직을 **가장 중요한 방식으로 Antigravity 코드에 강제로 적용해보세요.”

원리를 완벽히 이해하지는 못했지만, 결과적으로는 원하는 UI를 구현할 수 있었습니다 😆

✔️ 사용한 기술 / 도구

Gemini: 아이디어 정리, 서비스 조사, 프롬프트 설계
Antigravity: 웹 서비스 코드 자동 생성
SK Open API: 택시 요금 기준 정보 연동 (API Key 발급 및 연결)
Github + Vercel: 프로젝트 관리 및 배포

결과와 배운 점

이번 실험을 통해 얻은 가장 큰 인사이트는 다음과 같습니다.

Gemini를 활용하면 개발자가 아니어도 기획 → 프롬프트 → 구현 흐름을 만들어낼 수 있다는 점
Antigravity는 아이디어를 빠르게 실제 서비스 형태로 확인할 수 있는 매우 강력한 도구라는 점
시간대(낮/밤)에 따라 사용 목적이 달라지므로, UX 역시 상황 중심으로 설계해야 한다는 깨달음

완성된 결과물보다도, 생각을 실제로 구현해보는 과정 자체가 가장 큰 수확이었습니다.

서비스 링크

현재 구현한 서비스
- 초기 컨셉 버전: https://waitstop.vercel.app/
- 위치 정보 + 택시 요금 연동 버전: https://waitstop-v2.vercel.app/

👏 거창하게 시작하지 않았지만, 작은 불편함에서 출발해 하나의 서비스 형태로 만들어가는 것이 정말 재미있었습니다.

현재는 가능성을 검증하는 단계에 가깝지만, 다음 단계로는 대중교통 경로 API를 연동해 실제 추천이 가능한 MaaS 서비스로 확장해볼 계획입니다 ✨

🔔 21기 AI 스터디 모집이 시작되면 가장 먼저 알려드릴게요 !