비플페이 앱 내 네이버맵 보완 & 추가
[회의 내용]
1.
맵 내 현재위치 기능 추가 (AOS)
2.
현재위치 버튼 눌렀을 때, 해당 가맹점 마커만 보이도록 수정 (Both)
3.
주소복사 기능 추가 (Both)
4.
네이버 지도를 호출한다면 주소 기반으로 호출 (Both)
5.
나침반 기능 추가 (Both)
6.
마커 눌렀을 때 해당 가맹점 마커 2배로 늘려 식별 가능하도록 수정 & 여백 터치시 다시 원상복귀 (Both)
7.
마커 눌렀을 때 해당 가맹점이 3곳 이상일 경우, 2단계로 끌어올릴 수 있도록 변경 (1단계: 중간 쯤까지, 2단계: 끝까지) (Both)
2. 현재위치 버튼 눌렀을 때, 해당 가맹점 마커만 보이도록 수정
더보기
•
MORE_000001.jct
가맹점찾기
•
zero_srch_aflt.act
전체가맹점
•
zero_srch_aflt_srch.act
전체가맹점 사용처
•
NAVER_MAP_API
지도로 찾기
•
SRCH_000001.jct
문제점
•
현재 앱 상에서는 해당 가맹점을 선택한 상황에서 현재위치 버튼을 누르면 모든 가맹점이 다 나타나는 문제가 있다.
해결방안
•
해당 가맹점을 선택한 상황에서 현재위치 버튼을 누르면, 현재위치만 나오도록 개선
일단 iOS에서 현재 내 위치를 알려면 CoreLocation 라이브러리를 import 해야하고,
또한 CLLocationDelegate에 대해서 정의해주어야 한다.
func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) {
if CLLocationManager.locationServicesEnabled() {
if status == .notDetermined {
isNotDetermined = true
} else if status == .authorizedAlways || status == .authorizedWhenInUse {
guard let currentLocaiton = locationManager?.location else { return }
latitute = currentLocaiton.coordinate.latitude
longtiute = currentLocaiton.coordinate.longitude
self.fetchMarkerData(isFirstLoadMap: false)
Swift
복사
수정 전 코드
func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) {
if CLLocationManager.locationServicesEnabled() {
if status == .notDetermined {
isNotDetermined = true
} else if status == .authorizedAlways || status == .authorizedWhenInUse {
guard let currentLocaiton = locationManager?.location else { return }
latitute = currentLocaiton.coordinate.latitude
longtiute = currentLocaiton.coordinate.longitude
//self.fetchMarkerData(isFirstLoadMap: false)
Swift
복사
수정 후 코드
그래서 이 현재위치 버튼을 누르게 되면 이 로직을 통과하게 되는데,
여기서 마커를 바인딩하고 세팅하는 함수인 fetchMarkerData()를 주석처리 해주니 정상적으로 문제가 해결되었다.
3. 주소 복사 기능 추가
•
가맹점 주소를 통해 지도 앱에서 길찾기 기능을 사용하거나, 가맹점 상세 정보를 볼 수 있다.
•
주소 복사 기능을 추가하여 사용자가 가맹점 주소를 보다 편리하게 활용할 수 있도록 개선
4. 네이버 지도를 주소 기반으로 호출
•
사용자가 네이버 지도 앱을 통해 가맹점 상세 정보를 파악할 수 있고, 길 찾기 기능을 사용할 수 있게 된다.
•
사용자는 네이버 지도 앱에 직접 검색할 필요없이, 버튼을 클릭하면 가맹점 정보를 편리하게 볼 수 있다.
•
가맹점명을 이용하여 검색하게 될 경우, 비플페이 내 서버에 저장된 가맹점명과 네이버에 저장된 가맹점명이 다른 경우가 있어, 주소 기반으로 호출해야 한다.
•
비플페이 앱 내에 매장 정보 기능이 활성화 되어 있지 않아 사용자들이 알고 싶어하는 가맹점 정보를 네이버 지도 앱을 통해 제공하고자 한다.
5. 나침반 기능 추가
•
현재 앱에서는 맵을 여러 방향으로 튀틀어도, 원상복귀 하려면 수동으로 하는 방법 밖에 없다.
•
그래서 네이버맵에서 제공하는 나침반 기능을 사용하여 나침반 버튼을 터치시 다시 원래의 동서남북 방향으로 되돌아가도록 개선
이 기능 구현은 네이버맵 개발자 문서에서
이렇게 나와 있어서
///Init map setting
private func naverMapSetting() {
mapView.touchDelegate = self
mapView.addCameraDelegate(delegate: self)
mapView.isAccessibilityElement = true
mapView.accessibilityLabel = "지도 영역"
mapView.moveCamera(NMFCameraUpdate(position: DEFAULT_CAMERA_POSITION))
naverMapView.showScaleBar = true
//naverMapView.showZoomControls = true
naverMapView.showLocationButton = false
mapView.contentInset = UIEdgeInsets(top: 0, left: 8, bottom: bottomPaddingMap, right: 0)
}
Swift
복사
여기서 naverMapView.showCompass = true 여기만 추가해주었다.
하지만 여기서 간과했던게
///Init map setting
private func naverMapSetting() {
mapView.touchDelegate = self
mapView.addCameraDelegate(delegate: self)
mapView.isAccessibilityElement = true
mapView.accessibilityLabel = "지도 영역"
mapView.moveCamera(NMFCameraUpdate(position: DEFAULT_CAMERA_POSITION))
naverMapView.showScaleBar = true
//naverMapView.showZoomControls = true
naverMapView.showLocationButton = false
naverMapView.showCompass = true
mapView.contentInset = UIEdgeInsets(top: 0, left: 8, bottom: bottomPaddingMap, right: 0)
}
Swift
복사
오른쪽 지도에서는 필터가 없어서 잘 보이지만, 왼쪽 지도에서는 필터가 있어서 가려지는게 보인다,,,!!
이러한 문제점으로 인해서 위에서 했던 방식 말고 다른 방식으로 진행하기로 했다.
여기 네이버맵 예제 코드를 참고하였다.
네이버 맵 뷰위에 imageView를 두고, class를 NMFCompassView로 설정한다.
그후에
@IBOutlet weak var naverMapView: NMFNaverMapView!
@IBOutlet weak var compassView: NMFCompassView!
naverMapView.showCompass = false
compassView.mapView = mapView
Swift
복사
기존에 보여주던 showCompass는 false로 설정해주고, 새롭게 compassView를 연결해준다. 이렇게 하면
이렇게 나침반이 나오게 된다!
6. 마커 눌렀을 때 해당 가맹점 마커 2배로 늘려 식별 가능하도록 수정 & 여백 터치시 다시 원상복귀
•
현재 앱에서는 여러 가맹점들 사이에서, 하나의 가맹점 마커를 터치 했을 때 선택한 가맹점을 육안으로 식별하지 못하는 문제가 있었다.
•
개선사항으로 선택한 가맹점 마커 사이즈를 두 배로 늘리는 방안이 있다.
◦
장점 - 개발단 내에서 빠르게 작업 처리가 가능
◦
단점 - 가뱅점이 많아 확실히 식별하기 애매한 부분이 있다.
▪
이 해결책으로 특정 몇개의 마커만 보여주고 맵을 확대할 시 더 많은 마커가 보이도록 하는것도 또하나의 방법이 될 수 있다.
•
또다른 개선사항으로 마커 색깔을 반전 시키거나, 새로운 디자인 마커 이미지를 받는 방법도 있다.
◦
장점 - 확실히 구분 가능
◦
단점 - 외부의 도움이 필요하여 개발기간이 늘어남
7. 마커 눌렀을 때 해당 가맹점이 3곳 이상일 경우, 2단계로 끌어올릴 수 있도록 변경
•
기존 앱에서는 제한된 영역 안에서 여러 가맹점들을 조회 해야하는 불편함이 있었다.
•
그래서 선택한 영역의 가맹점이 3곳 이상일 경우에는 터치로 끌어올릴 수 있는 바텀 시트를 추가하여 개선하는 방안을 마련하였다.
8. 상세보기 터치 영역 확대
•
현재 상세보기 화면으로 넘어가기 위해 상세보기 텍스트 버튼을 클릭해야 넘어갈 수 있다.
•
사용자는 상세보기 화면으로 넘어가기 위해 상세보기 텍스트가 아닌 가맹점 정보 레이아웃을 누를 확률이 높다.
•
그러므로 상세보기 터치 영역을 확대하며, 전화 걸기 버튼은 활성화 상태를 유지한다.
이 부분에 대한 나의 생각은 셀 자체를 누르면 이동하게 구현하면 된다 생각하였다. 그래서
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let cell = tableView.cellForRow(at: indexPath) as? MerchantShopCustomCell {
if self.ac_code == "5005" {
cell.detailCallback?()
}
else { // self.ac_code == "5006" 일때
tableView.deselectRow(at: indexPath, animated: false)
}
}
}
Swift
복사
이렇게 didSelectRowAt 테이블뷰 메서드를 사용하여 셀 자체에서도 이동할 수 있도록 해주었다.
그리고 가맹점 상세보기에서 들어간 지도에서는 셀을 눌러도 이동되지 않게 구문처리를 해주었다.