1. 자전거 대여점 표시
2인승 자전거 대여점 위치를 표시하는 서비스 제공
프로젝트: 이인거(Twicycle)
이인승 자전거 위치 찾기
- 기간2024.08 ~ 2024.08
- 규모1인 개발
프로젝트 기획 동기
저와 친구들은 2인승 자전거를 타는 것을 좋아합니다. 그러나 따릉이나 전동 킥보드와 달리, 2인승 자전거를 대여할 수 있는 장소를 찾는 것이 쉽지 않았습니다. 그 이유는 네이버 지도, 구글 지도, 카카오맵 등 주요 지도 서비스에 대여소 정보가 등록되어 있지 않기 때문입니다. 결국, 네이버 블로그 등 개인 게시글을 참고해야 했으며, 이 과정이 상당히 번거롭게 느껴졌습니다. 이러한 불편함을 해소하기 위해, 2인승 자전거 대여소 위치를 공유하는 페이지를 직접 개발하기로 결정했습니다.
사용한 기술
node.js 기반의 풀스택 프레임워크
기능 소개
2. 대여소 등록 요청 기능
전국의 모든 대여소를 직접 방문하여 등록하는 것은 현실적으로 어렵다고 판단하였습니다. 따라서, 사용자가 새로운 대여소 정보를 제보하면, 이를 검토하여 등록할 수 있도록 하는 기능을 구현하였습니다.
사용자는 제보 페이지에서 위치 및 관련 정보를 입력하여 제출할 수 있으며, 이때 Resend 라이브러리를 활용하여 제출된 내용이 제 이메일로 전송되도록 구성하였습니다. 이러한 방식으로, 보다 효율적으로 대여소 정보를 수집하고 관리할 수 있도록 하였습니다.
어려웠던 점
SEO 최적화
사용자들에게 더 가까이 다가가기 위해서는 검색엔진 최적화(SEO)가 필요하다고 생각하여, 다양한 방법을 적용하였습니다.
1. 서버사이드 렌더링 및 시맨틱 태그 활용
각 요소의 역할에 맞는 시맨틱 태그를 적극 활용하였으며, SSR(Server-Side Rendering) 방식을 적용하여 검색 엔진이 콘텐츠를 효과적으로 크롤링할 수 있도록 설정하였습니다.
2. 메타데이터 생성
Next.js의 generateMetadata 기능을 활용하여 각 자전거 대여소별 맞춤형 메타데이터를 생성하였습니다. 이를 통해 공유 시 더 효과적인 미리보기(OG 태그)가 제공되며, 검색 엔진이 사이트의 내용을 쉽게 파악할 수 있도록 최적화하였습니다.
3. robots.txt 및 사이트맵 구성
robots.txt를 설정하여 모든 검색 엔진 크롤러가 사이트를 수집할 수 있도록 허용하였습니다. 또한, 검색 엔진이 사이트 구조를 보다 명확하게 이해할 수 있도록 사이트맵(Sitemap.xml) 을 작성하였습니다.
4. naver 및 google에 등록
네이버와 구글의 웹마스터 도구(Search Console & Webmaster Tools) 를 활용하여 웹사이트를 등록하였습니다. 이를 통해 검색 엔진이 빠르게 인덱싱할 수 있도록 유도하였습니다. 위와 같은 최적화 작업을 통해 검색 노출을 극대화하고, 사용자와 검색 엔진 모두에게 친화적인 웹사이트를 구축하였습니다.
이미지
