Photalks

개요

Photalks는 현재 위치 주변의 포토부스를 지도에서 찾고, 이용 후 리뷰를 남기는 모바일 앱입니다. DND 7기 프로젝트에서 디자이너, 백엔드 개발자와 협업했고, 저는 React Native 앱의 프론트엔드 구현을 맡았습니다. 부스를 발견하는 과정부터 별점과 사진을 담은 리뷰를 등록하는 흐름까지 이어지도록 만들었습니다.

주요 기능

• 지도에서 부스 찾기: 현재 위치 주변의 포토부스를 확인하고 브랜드별로 결과를 좁힙니다.
• 원하는 지역 다시 검색: 지도를 옮긴 뒤 사용자가 직접 재검색을 눌러 해당 지역의 부스를 불러옵니다.
• 부스 선택과 리뷰: 지도 마커와 목록에서 부스를 선택하고, 별점과 태그, 사진을 담아 리뷰를 작성합니다.

구현과 개선

1. 지도 이동과 검색 시점을 분리했습니다

   지도를 움직일 때마다 결과를 다시 불러오면 탐색 중에 목록이 계속 바뀔 수 있습니다. 화면을 옮기면 이 지역 재검색 버튼을 보여주고, 사용자가 눌렀을 때 새 중심 좌표로 부스를 조회하도록 했습니다. 현재 위치와 브랜드 필터도 검색 조건에 연결했습니다.

2. 선택한 마커와 하단 목록을 함께 갱신했습니다

   마커를 누르면 해당 부스를 선택 상태로 두고, 하단 목록에서도 그 부스를 맨 위에 보여주도록 연결했습니다. 부스 선택을 바꾼 뒤 선택 항목이 목록에서 사라지던 문제도 수정했습니다.

3. 리뷰 입력을 단계별로 나누고 사진을 등록 전에 줄였습니다

   먼저 별점과 매장 특징을 고르고, 다음 단계에서 사진 결과 태그와 직접 입력한 태그를 선택한 뒤, 사진과 설명을 등록하도록 구성했습니다. 사진은 최대 4장까지 선택할 수 있고, 업로드 전에 한 변이 600px을 넘지 않도록 줄여 리뷰 데이터에 담았습니다.

사용 기술

결과와 현재 상태

현재 위치 주변의 부스를 찾고 브랜드로 좁힌 다음, 지도를 옮겨 원하는 지역을 다시 검색할 수 있습니다. 선택한 마커와 목록을 따라 부스를 확인하고, 별점과 태그, 사진을 담은 리뷰를 작성하는 사용자 흐름을 구현했습니다. 앱 업데이트에는 CodePush를 적용했고 TestFlight v4 빌드 작업도 진행했습니다.

• DND 프로젝트 소개
• Photalks 프론트엔드 저장소
• 프로젝트 회고