saveme는 사용자의 위치를 기반으로 빠르게 주변 화장실 정보를 제공하는 웹 서비스입니다. Naver Map API와 서울 열린데이터 광장의 공공화장실 데이터를 활용하여 가장 가까운 화장실을 안내합니다.
- 현재 내 위치를 확인한 후, 가장 가까운 화장실들을 안내해주며 각 화장실까지의 거리도 함께 확인할 수 있습니다.
- 내 위치가 아닌 다른 장소 주변의 화장실이 필요할 땐, 주소를 검색해 해당 위치 주변의 화장실 정보를 확인할 수 있습니다.
- 일반 지도뿐 아니라 지형도나 위성 지도로 전환하여 볼 수 있으며, 파노라마 기능을 통해 화장실 주변 환경도 미리 확인할 수 있습니다.
- 추가 기능 개발 및 성능 개선: 2025. 02 ~ 2025. 03
- MVP 개발: 2023. 05 ~ 2023. 06
- Naver Map API와 공공데이터 API를 활용해 지도 기능 및 데이터 통신을 구현하면서, 정적 타입 체크를 통해 API 응답과 지도 객체들의 구조를 명확하게 정의함으로써 런타임 오류를 예방하고 안정적인 데이터 처리를 보장할 수 있었습니다.
-
Next.js를 선택한 첫 번째 이유는 프로젝트에서 사용한 공공데이터 API가 HTTP 프로토콜만 지원되어 HTTPS 환경의 브라우저에서 직접 호출 시 보안상의 Mixed Content 에러를 발생시키는 문제가 있었습니다. 이를 해결하기 위해 Next.js의 서버 컴포넌트를 활용하여 서버 측에서 API를 호출하고, 그 결과를 HTTPS를 통해 클라이언트로 전달하는 방식을 채택했습니다. 이를 통해 브라우저 환경의 보안 제약을 우회하고, 안정적으로 데이터를 호출하고자 했습니다.
-
두 번째 이유는 성능 개선입니다. 공공데이터가 약 5천 개에 달해 브라우저 렌더링 후 클라이언트 측에서 매번 API를 호출하면 지도 위의 마커를 표시하는 데 시간이 오래 걸렸습니다. 이를 개선하기 위해 ISR(Incremental Static Regeneration)을 활용해 서버에서 데이터를 미리 가져와 정적 페이지로 생성하고, 일정 주기마다만 데이터를 갱신하도록 하여 빠른 렌더링과 효율적인 캐싱을 구현하고자 했습니다. 특히 공공데이터는 자주 변경되지 않는 특성을 가지고 있어 ISR이 적합한 해결책이라고 판단했습니다.
- Tailwind CSS는 Next.js 환경에서 복잡한 추가 설정 없이 바로 사용할 수 있기 때문에 선택했습니다. styled components는 SSR 환경에서 사용하기 위해 컴파일러 설정과 전역 스타일 레지스트리 구성 등 초기 설정이 필요한 반면, Tailwind는 런타임에 스타일시트를 생성하지 않고 빌드 타임에 스타일시트를 가져오는 방식으로 작동하기 때문에, SSR 환경에서도 안정적으로 동작한다는 장점이 있습니다.
- shadcn UI를 선택한 이유는 컴포넌트의 코드를 직접 가져와 사용하는 방식 덕분에 원하는 대로 자유롭게 커스터마이징할 수 있기 때문입니다. 이전에 사용했던 MUI의 경우 세부적인 스타일 변경이 쉽지 않아 불편했는데, shadcn UI는 이러한 제약 없이 자유로운 조정이 가능하다는 점이 큰 장점이었습니다. 또한 Tailwind를 사용하는 점도 개발 과정에서 효율성과 편리성을 높여주었습니다.