← Projects

Trecord (트레코드)

일본 소도시 여행자를 위한 여행 기록 앱. 다녀온 도시를 지도에 색칠하고, 지역별 진입 난이도 가이드·여행 사진 기록·익명 한 줄평까지 통합한 나만의 여행 지도.

Role
기획 · 디자인 · 풀스택 개발 · 마케팅 (Solo)
Period
2026.05 – 진행 중
Stack
React 19, TypeScript, Vite 8, Tailwind CSS, Zustand, react-i18next, MapLibre GL, Supabase, Capacitor 8, PWA, Sentry, Vercel, GitHub Actions
Links
App StoreGoogle Play

배경

일본을 여러 번 여행하며 방문한 소도시를 시각적으로 기록하고 싶었지만, 기존 앱은 주요 관광지 중심이어서 시정촌(市町村) 단위까지 다루는 도구가 없었다. 또 일본은 지역·구역별로 언어·결제 환경 편차가 커서 "이 지역이 나한테 편한가"를 사전에 판단하기 어려웠다.

이 두 문제 — 정밀한 색칠 지도와 지역별 진입 난이도 큐레이션 — 을 하나의 앱에 담았다.

주요 기능

  • 시정촌 단위 지도 색칠 — 도쿄 23구부터 홋카이도 오지 왓카나이·네무로까지 정밀 기록. 오프라인에서도 색칠 가능.
  • 지역 난이도 가이드 — 언어·결제·오더링·크라우드 4축으로 56개 도시·지구를 Lv1(관광 인프라 완비) ~ Lv3(로컬)로 등급화.
  • 여행별 사진 기록 — 트립 생성, 방문 시정촌 자동 첨부, 다중 사진 업로드, 라이트박스 뷰.
  • 익명 커뮤니티 — 도시별 한 줄평 옵트인 공개, 신고 3회 자동 필터, 작성자 차단.
  • 친구·공개 프로필 — 친구 지도 겹쳐 보기, /u/닉네임 공개 프로필 링크, 리퍼럴 링크.
  • 네이티브 앱 — iOS App Store · Google Play 동시 출시.
  • 다국어 — 한국어 · 영어 · 일본어 지원.

설계 결정

  • 오픈소스 지도 스택: 상용 Mapbox 대신 MapLibre GL CSP-friendly 빌드를 쓰면서 워터마크·API 비용 없이 완전 백지 지도를 구현. Vite 8 rolldown 호환 이슈를 해결한 게 결정적이었다.
  • RLS + SECURITY DEFINER: 익명 한 줄평·공개 프로필처럼 "제3자에게 노출되지만 개인 정보는 안 새야 하는" 케이스를 RPC 하나로 안전하게 격리. 서버 코드 없이 인증·권한을 SQL 안에서 해결.
  • 웹 → 네이티브 재사용: React 코드 그대로 Capacitor 패키징. WebKit LocalStorage 세션 주입, plist 자동화, idb 기반 시뮬레이터 자체 검증 파이프라인까지 자체 구축.
  • 콘텐츠도 코드처럼: 가이드 56지역을 JSON 파일로 관리, 시드 스크립트가 스키마 검증 + 레벨 자동 계산 + Supabase upsert. 콘텐츠 리비전이 git 커밋으로 흐르니 변경 이력·롤백이 그냥 된다.

회고

1인 개발에서 기술 선택은 "미래 확장성"보다 "지금 배포까지 걸리는 시간"이 우선이었다. Supabase 결정이 특히 크게 남는데, 인증·DB·스토리지·리얼타임을 한 벤더로 묶으니 서버 코드 없이 앱을 완성할 수 있었다. 반면 MapLibre CSP 이슈로 이틀 태운 경험을 통해 "새 도구는 프로덕션 직전 마지막 순간엔 안 바꾼다"는 원칙이 생겼다.

현재는 유튜버·인플루언서 마케팅으로 초기 사용자 확보 단계. 이 트래픽에서 얻은 데이터를 다음 프로젝트에 적용할 계획이다.