사례
스팟인SpotIn
스포츠·레저를 처음 시작하는 사람을 위한 입문 가이드와 초보 환영 팀 찾기 서비스. 운동 하나 시작하는 데 검색을 스무 번 하지 않도록, 종목마다 비용·장비·배우는 법·첫날 준비를 한 화면으로 줄였습니다.
- 50개
- 종목
- 214곳
- 갈 수 있는 장소
- 17곳
- 지역
- 291개
- 검색 노출 페이지
문제
운동을 시작하려는 사람에게 부족한 건 의지가 아니라 정보입니다. 얼마가 드는지, 뭘 사야 하는지, 처음 가면 뭘 하는지를 알려면 검색을 스무 번 해야 하고, 그마저 광고이거나 이미 하는 사람들끼리의 이야기입니다. 소모임·프립 같은 서비스는 이미 뭘 할지 정한 사람에게 맞춰져 있습니다.
접근
그 앞 단계, 아직 시작하지 않은 사람을 위한 서비스로 잡았습니다. 종목마다 비용·장비·배우는 법·첫날 준비를 한 화면으로 줄이고, 실제로 갈 수 있는 장소와 초보를 받는 팀을 붙였습니다. 사진은 한국저작권위원회 공유마당의 국내 사진을 써서 화면이 작위적으로 보이지 않게 했습니다.
만든 방법
Next.js와 PostgreSQL로 만들고 Vercel에 배포했습니다. 지도는 OpenStreetMap, 날씨는 Open-Meteo, 주소 변환은 Nominatim을 써서 유료 API 키 없이 운영됩니다. 등록에서 수정·삭제·지도 로드까지 33개 자동 테스트가 배포 전에 돌고, 데스크톱·모바일과 밝은·어두운 화면 네 조합의 화면을 전수 검수했습니다.
담긴 것
여섯 가지를 한 서비스에
종목 입문 가이드 50종
처음 드는 돈과 매달 드는 돈, 지금 사야 할 장비와 나중에 사도 되는 장비, 배우는 방법별 가격, 첫날 챙길 것을 종목마다 한 화면에 정리했습니다. 조건을 고르면 실제 금액이 계산됩니다.
계절·날씨에 따라 달라지는 첫 화면
이번 달에 시작하기 좋은 종목을 앞에 두고, 지역별 7일 예보를 받아 "오늘은 비라 실내가 낫습니다"처럼 결론부터 말합니다. 첫 화면의 색과 문장도 계절에 맞춰 바뀝니다.
실제로 갈 수 있는 장소 214곳
지자체·시설 공식 페이지에서 운영 여부를 확인한 곳만 넣었습니다. 17개 지역과 34개 종목의 조합 176개를 각각의 페이지로 만들어 "서울 등산"처럼 검색으로 들어올 수 있게 했습니다.
초보를 받는 팀·강습과 커뮤니티
동호회와 강습을 나눠 보고, 팀을 운영하면 일정과 회비를 관리할 수 있습니다. 커뮤니티는 사진·영상·대댓글·좋아요를 지원하고, 예시 글은 예시라고 화면에 표시합니다.
설치형 앱, 어두운 화면, 소셜 로그인
홈 화면에 설치되는 웹앱으로 만들고, 어두운 화면 모드와 카카오·네이버·구글 로그인을 붙였습니다. 내 운동 화면에서 관심 종목의 장비·장소·첫날 준비를 단계별로 챙깁니다.
검색 노출과 성능
홈·종목·지역 페이지마다 구조화 데이터를 심고 사이트맵 291개 페이지를 등록했습니다. 글꼴을 직접 배포하고 이미지를 최적화해 모바일 성능 점수를 60점대에서 90점대로 올렸고, 접근성은 전 페이지 100점입니다.
화면
데스크톱과 모바일, 밝은 화면과 어두운 화면
네 조합을 전부 검수했습니다. 아래는 운영 중인 서비스를 그대로 찍은 것입니다.
쓴 기술
유료 API 키 없이 돌아갑니다
지도·날씨·주소 변환을 전부 공개 서비스로 구성해 운영비를 줄였습니다.
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- PostgreSQL (Neon)
- Drizzle ORM
- Auth.js
- Leaflet + OpenStreetMap
- Open-Meteo
- Playwright
- Vercel
- provoucher.co
- provoucher.co
- provoucher.co
- provoucher.co
- provoucher.co
- provoucher.co
- provoucher.co
- provoucher.co