러버블과 함께한 MVP 도전기: 지도와 언어 문제를 AI로 해결하다! 🍜🗺️

안녕하세요. 벨라입니다!


최근 4월.5월 날씨가 좋아서 외국인 친구들이 한국에 많이 놀어왔어요.

역시 한국에 놀러와서 늘 저한테 묻습니다. “한국에서 뭐 먹어야 해?”, “어디 가면 좋아?” 혼자 먹으러 가면 좀 그렇네요. 혹시 나랑 같이 가줄 수 있어?라고

이 질문에 대답하다 보니, 문득 이런 생각이 들었어요:

👉 "차라리 이런 앱을 내가 직접 만들어보자!" ㅎㅎ

게다가 학술제와 관광 API 공모전에서 예선을 통과하면서, 이 아이디어를 MVP로 구체화해 보기로 했습니다. 단순한 추천 앱이 아니라, 외국 친구들이 한국에서 쉽게 맛집을 찾고 사람들 만나고 즐길 수 있도록 도와주는 서비스를 만들고자 했어요.

진행 방법

🔧 사용한 도구들

  • 러버블: MVP 정리 및 리마인드, 설계 반복

  • 옵시디언: 고객 여정, 워크플로우, 개발 흐름 기록 및 PRD 구성

  • 커서 + 클로드(MCP 설치 추천) : AI와 대화하며 문제 해결, 번역 API 선택, 프롬프트 개발

  • LibreTranslate: 무료 번역 API 직접 설치

  • 카카오맵 API: 서울 맛집 데이터 수집

🗺️ 지도 기능 구현: 카카오맵 API

  • API 키 발급 후, Python 스크립트를 활용해 서울 주요 지역 맛집 데이터 수집

  • 주의점: 카카오 API는 평점 정보는 직접 제공하지 않음 → 후처리 필요

🌍 언어 문제 해결: LibreTranslate

const translations = {
  "ko": { "restaurant": "음식점", "review": "리뷰" },
  "zh-TW": { "restaurant": "餐廳", "review": "評論" }
}

🧠 고객 여정 정리 + 브랜딩

  • 옵시디언에 사용자의 흐름을 따라 직접 journey map 작성

  • 그 과정에서 "왜 개발이 어려운지" 체험함 😅

  • 브랜드 컬러도 정의:

    • 메인: 오렌지 #f27141

    • 보조: 화이트 #ffffff,

    • 액센트: 민트 #3BCEAC, 코랄 #FF6B6B,

📄 MVP 문서화 흐름

  1. 러버블과 대화하면서 문제 정의 → 해결 아이디어 기록

  2. 옵시디언에서 정리 → PRD 문서 기록 

  3. 커서/클로드 통해 문제 재해결 , 예 번역 기능/프롬프트 조율

  4. 페이지 구성 플로우 및 프론트/백엔드 정리

✅ 전체 개발 플로우 (개요)

  1. 아이디어 도출 → 사용자 페르소나 정리 (외국인 관광객)

  2. 문제 정의 → MVP 정의 → 핵심 기능 설정

  3. 지도 기능 구현 (카카오 API) + 번역 기능 구축 (LibreTranslate)

  4. 도구 통합: 옵시디언 + 러버블로 반복 설계/수정

  5. PRD 문서 작성 → 고객 여정과 워크플로우 구성

  6. 기본 UI 설계 → 개발 시작

  7. 테스트 및 사용자 피드백 수집 → 개선 반영

결과와 배운 점

  • 처음엔 어려웠지만, 기록과 리마인드 중심의 개발 방식 덕분에 구조가 생김

  • AI 도구들(Cursor/Claude)을 교차 사용하면서 생각이 정리되고, 구현의 단서가 많아졌음

  • 고객의 입장에서 여정을 그려보는 것이 기능 설계에 큰 도움이 됨

  • 번역과 지도 문제는 적절한 오픈소스 조합으로도 충분히 해결 가능!

  • 1차 MVP는 완성이 아니라 출발점이라는 것을 체감함 💡

#핵심공유


참고 내용

  • 번역 API 추천 (무료 또는 오픈소스)

    1. LibreTranslate

    • 완전 오픈소스 번역 API

    • 자체 서버에 설치 가능

    1. DeepL API Free

    • 월 50만자 무료

    • 정확도가 매우 높음

    1. Lingva Translate API

    • 오픈소스 Google 번역 대체제

    • 무료, 서버 구축 필요

    1. i18next + 정적 JSON 파일

    • 앱 내 정적 번역에 최적화

    • 서버 요청 없이 작동

    • 음식점 관련 전문 용어에 정확한 번역 가능

      중국어 텍스트가있는 검은 색 화면

    • Google Translate API분석 참고 (혹시 더 좋은 피드백이 있으면 공유해주세용~)

      Google 번역 API


      Google 번역 한국 -


      --------------------------------------------------------

      # 회사 이름을 지우려고 클로드와 상의하는 예시


      중국어 텍스트가있는 웹 사이트 스크린 샷


    • 설치된 MCP 툴 / 커서

      광고 차단기 설정 페이지의 스크린 샷

    • 설치된 MCP 툴 / 클로드

      한국 검색 페이지의 스크린 샷



💬 기록을 기반으로 리마인드하며 개발하는 습관, 생각보다 강력합니다.
😀 저처럼 MVP 처음 도전하신다면, 러버블 + 옵시디언 조합 강추 드려요!

아직 작업중인데 현재 작업된 상황은 시연 영상 한번 참고해 주세용! ㅎㅎ

6
3개의 답글

👉 이 게시글도 읽어보세요