위치 기반 맛집 탐색 앱 — 네이버 지도·경로 조회·다중 사진편집 모듈

React Native 기반 iOS·Android 앱에서 위치 기반 맛집·장소 탐색, 다중 사진 편집과 사진·영상 피드 기능을 구현한 모바일 기능 모듈 프로젝트입니다. 지도·사진 편집·피드 기능을 독립 모듈로 설계해 향후 실제 서비스 API 연동과 기능 확장이 가능한 구조를 구축했습니다.

  • 위치 기반
  • 지도
  • 경로 조회
  • 사진 편집
프로젝트 유형
앱(APP)
개발 기간
2025.07 ~ 2025.08
진행 범위
기획 · 디자인 · 개발
01Overview

프로젝트 소개

프로젝트 배경

1. 문제점

  1. 1위치 기반 맛집·장소 서비스는 현재 위치, 주소 검색, 주변 업체, 거리와 이동 경로를 하나의 흐름으로 제공해야 했습니다.
  2. 2모바일 사용자는 여러 장의 사진을 선택·편집한 뒤 콘텐츠로 바로 활용할 수 있는 간편한 편집 경험을 필요로 했습니다.
  3. 3지도, 사진 편집과 영상 피드 기능은 각각 구현 복잡도가 높아 서비스에 적용 가능한 독립 모듈 형태로 개발할 필요가 있었습니다.
  4. 4이미지·영상 콘텐츠가 많은 서비스는 모바일 화면에서 자연스럽게 탐색하고 소비할 수 있는 피드 경험이 필요했습니다.

2. 프로젝트 목표

  1. 1React Native 기반 iOS·Android 모바일 앱에서 동작하는 위치 기반 지도 기능 구축
  2. 2GPS, 주소·좌표 검색, 주변 업체 조회, 거리와 이동 경로 안내 기능 구현
  3. 3다중 사진 선택과 사진 자르기·모자이크·텍스트·이모티콘 편집 기능 구현
  4. 4사진 슬라이드와 영상 자동 재생을 지원하는 피드형 콘텐츠 경험 구축
  5. 5지도, 사진 편집, 피드 기능을 향후 서비스 API와 연동·확장할 수 있는 모듈 구조로 개발

3. 주안점

  1. 1현재 위치와 주소를 기준으로 주변 업체를 탐색하는 위치 기반 사용자 흐름 설계
  2. 2지도 마커, 거리 계산, 자동차·도보·대중교통 경로 조회 API 연동
  3. 3모바일 터치 환경에 맞춘 드래그 기반 사진 편집 인터랙션 구현
  4. 4여러 장의 사진을 순서대로 편집하고 저장하는 다중 사진 편집 기능 구성
  5. 5스크롤 위치에 따라 동영상이 자동 재생되는 피드 사용자 경험 구현

프로젝트 성과

React Native 기반 모바일 기능 모듈 구축

위치 기반 지도, 사진 편집, 사진·영상 피드 기능을 React Native 기반 iOS·Android 앱 모듈로 구현했습니다.

위치·주소·경로 API 연동

GPS, 도로명 주소, 좌표 변환, 역지오코딩과 자동차·도보·대중교통 경로 조회 기능을 연동했습니다.

다중 사진 편집 기능 구현

여러 장의 사진을 선택해 자르기, 모자이크, 텍스트·이모티콘 삽입 후 순서대로 저장하도록 구현했습니다.

지도 기반 주변 업체 탐색 기능 구현

주변 업체 마커, 거리 계산, 동일 위치 마커 분산과 업체 정보 바텀시트 기능을 구현했습니다.

사진·영상 피드 사용자 경험 구현

사진 슬라이드와 스크롤 영역 진입 시 동영상 자동 재생 기능을 구현했습니다.

핵심 기능

위치 기반 지도·경로 조회

GPS와 주소 검색을 기반으로 주변 업체를 찾고, 지도 마커·거리와 자동차·도보·대중교통 이동 경로를 제공합니다. 동일 위치에 여러 업체가 있는 경우 마커를 분산해 표시하도록 구성했습니다.

다중 사진 편집 모듈

여러 장의 사진을 선택해 사진 자르기, 모자이크, 텍스트·이모티콘 삽입, 드래그 기반 위치·크기·회전 조절을 적용하고 편집 결과를 순서대로 저장할 수 있도록 구현했습니다.

사진·영상 피드 기능

사진 슬라이드와 스크롤 기반 콘텐츠 조회를 제공하고, 사용자가 특정 게시물 영역에 진입하면 동영상이 자동 재생되는 모바일 피드 경험을 구현했습니다.

독립 모듈 기반 기능 확장

지도·사진 편집·피드 기능을 독립 모듈로 구분해 개발했습니다. 향후 실제 서비스 API와 연결하거나 기능별로 확장·재사용할 수 있도록 구성했습니다.


프로젝트 상세

프로젝트 개요

본 프로젝트는 React Native 기반 모바일 앱에 위치 기반 맛집 지도, 다중 사진 편집과 사진·영상 피드 기능을 구축한 프로젝트입니다. 사용자는 현재 위치나 주소를 기준으로 주변 업체를 찾고, 지도에서 거리와 이동 경로를 확인하며, 사진을 편집해 피드 콘텐츠로 활용할 수 있습니다. 프로젝트의 핵심은 지도·사진 편집·피드 기능을 각각 독립적으로 구현하면서도 하나의 모바일 사용자 경험 안에서 자연스럽게 연결하는 것이었습니다. 기능별 모듈 구조를 적용해 향후 실제 서비스 API와 연동하거나 확장할 수 있는 기반을 목표로 했습니다.

담당 업무

  • React Native 기반 iOS·Android 모바일 기능 구조 설계
  • GPS, 주소·좌표, 주변 업체, 거리와 이동 경로 데이터 흐름 설계
  • 위치 기반 지도, 주변 업체 탐색과 마커·바텀시트 UI 개발
  • 도로명 주소 검색, 좌표 변환, 역지오코딩과 경로 조회 API 연동
  • 다중 사진 선택, 자르기, 모자이크, 텍스트·이모티콘 편집 기능 개발
  • 드래그 기반 사진 요소 위치·크기·회전 조절과 편집 결과 저장 기능 구현
  • 사진 슬라이드, 스크롤 기반 콘텐츠 조회와 영상 자동 재생 피드 기능 개발
  • 지도·사진 편집·피드 모듈 QA 및 기능별 소스코드 정리·납품

주요 개발 및 운영 내용

사용자는 GPS 기반 현재 위치 또는 주소 검색을 통해 주변 맛집·장소를 탐색할 수 있습니다. 지도에는 주변 업체 마커와 거리 정보를 표시하고, 업체를 선택하면 바텀시트 형태로 요약 정보를 확인하도록 구성했습니다. 동일 위치에 여러 업체가 있는 경우에는 마커를 분산해 사용자가 각 업체를 선택할 수 있도록 했습니다. 주소·좌표 검색, 역지오코딩과 거리 계산을 연결하고, 선택한 업체까지 자동차·도보·대중교통 경로를 조회할 수 있도록 구현했습니다. 위치 검색부터 주변 탐색, 상세 확인과 이동 경로 안내까지 이어지는 사용자 흐름을 모바일 화면에 맞춰 구성했습니다. 사진 편집 기능은 여러 장의 사진을 선택한 뒤 각 사진을 순서대로 편집·저장하는 방식으로 구현했습니다. 사진 자르기, 모자이크, 이모티콘·텍스트 삽입과 드래그 기반 위치·크기·회전 조절을 제공해 모바일에서 콘텐츠를 빠르게 만들 수 있도록 했습니다. 사진 슬라이드와 영상 피드를 결합해 사용자가 스크롤로 특정 게시물 영역에 진입하면 동영상이 자동 재생되는 피드 경험을 구현했습니다. 지도, 사진 편집과 피드 기능은 독립 모듈로 개발해 향후 서비스 데이터와 연동하거나 기능 범위를 확장할 수 있도록 구성했습니다.

프로젝트 주안점

1. 현재 위치·주소·경로를 연결한 위치 기반 탐색 경험

GPS와 주소 검색을 바탕으로 주변 업체를 찾고, 거리·마커·업체 정보와 이동 경로까지 하나의 흐름으로 연결했습니다.

2. 모바일 터치 환경에 맞춘 다중 사진 편집 모듈

여러 장의 사진을 순서대로 편집하고 저장할 수 있도록 구성했습니다. 자르기, 모자이크, 텍스트·이모티콘과 드래그 조작을 모바일 환경에 맞춰 구현했습니다.

3. 사진·영상 콘텐츠 소비를 고려한 피드 UX

사진 슬라이드와 스크롤 기반 콘텐츠 조회, 화면 진입 시 영상 자동 재생을 적용해 사용자가 자연스럽게 이미지·영상 콘텐츠를 탐색하도록 구성했습니다.

4. 향후 서비스 연동을 고려한 독립 기능 모듈화

지도, 사진 편집, 피드 기능을 독립 모듈로 구분했습니다. 향후 서비스 API 연동과 기능 확장 시에도 재사용 가능한 모바일 기능 기반을 마련했습니다.

02Showcase

프로젝트 화면

위치 기반 맛집 탐색 앱 — 네이버 지도·경로 조회·다중 사진편집 모듈 상세 이미지

Next

이런 프로젝트,
함께 만들어볼까요?

기획·디자인·개발까지, 처음부터 끝까지 함께합니다.

제안서로 돌아가기
전체 보기