위치 정보 앱을 만드는 방법은 무엇인가요?

오늘날에는 위치 기반 애플리케이션이 점점 더 대중화되고 있습니다. 거의 모든 인기 앱이 어느 정도 위치 기반 기능을 통합하고 있습니다. 일부는 사용자 경험을 향상시키고 보다 개인화된 경험을 제공하기 위해 위치 기반 기능을 사용하는 반면, 다른 앱은 위치 기반 기능을 중심으로 구축됩니다.

이 도움말에서는 지리적 위치 앱에 대해 알아야 할 모든 것을 알려드립니다. 주요 기능, 위치 정보 앱의 유형에 대해 이야기하고 비즈니스 관점에서 위치 정보 앱을 만드는 과정을 설명합니다. 또한 Back4app과 React Native를 사용하여 위치 정보 앱을 개발하는 과정을 안내합니다.

위치 정보 앱이란 무엇인가요?

지리적 위치 또는 위치 기반 앱은 사용자 디바이스의 위치를 추적하는 모든 모바일 또는 웹 애플리케이션입니다. 앱은 이를 통해 사용자 경험을 개인화 및 개선하고, 마케팅 목적, 정보 제공 등을 위해 위치 기반 서비스를 제공합니다.

지리적 위치 앱은 다음과 같은 다양한 기술을 사용하여 사용자의 위치를 파악합니다:

• 위성 위치 확인 시스템(GPS)
• 보조 글로벌 포지셔닝 시스템(A-GPS)
• 실내 위치 정보 기술
• 기지국 또는 WiFi

언급된 각 기술에는 장단점이 있습니다. 어떤 기술은 더 빠르고 어떤 기술은 더 정확하고 안정적입니다. 하지만 너무 걱정하지 마세요. 위치는 일반적으로 디바이스 자체에서 파악합니다.

위치 기반 앱의 주요 기능

지리적 위치 앱의 기능은 매우 다양하지만 대부분의 앱에는 이러한 지리적 위치 기능이 포함되어 있습니다:

• 지도 보기: 지도 보기: 지도 보기는 위치 정보 앱의 핵심 기능입니다. 지도 보기는 사용자에게 현재 위치와 관심 지점을 시각적으로 보여줍니다. 사용자는 지도 보기를 통해 지역을 탐색하고, 길 찾기를 하고, 지리 공간 쿼리를 수행할 수 있습니다.
• 위치 추적: 지리적 위치 앱은 종종 실시간 위치 추적 기능을 제공하여 사용자가 자신의 위치를 다른 사람들과 공유하거나 이동 경로를 추적할 수 있도록 합니다.
• 개인화: 위치 정보 앱은 즐겨 찾는 위치 저장, 경로 유형(예: 도보, 운전)에 대한 기본 설정, 시각적 설정 등과 같은 개인화 기능을 제공할 수 있습니다.
• 알림: 일부 지리적 위치 앱은 지오펜싱을 사용하여 사용자가 특정 지역에 들어오거나 나갈 때 알림을 보냅니다. 또한 사용자가 이벤트 근처에 있을 때 알림을 보낼 수도 있습니다.
• 다른 서비스와의 통합: 많은 위치 정보 앱이 타사 서비스 또는 플랫폼과 통합하여 기능을 향상시킵니다. 예를 들어, Google은 Booking.com과 통합하여 호텔 옵션과 대중교통 정보를 가져오는 대중교통 플랫폼을 제공합니다.

위치 기반 앱의 유형

위치 기반 애플리케이션에는 여러 유형이 있지만, 몇 가지 주요 애플리케이션을 살펴보겠습니다.

내비게이션 앱

내비게이션 앱은 지리적 위치 앱의 가장 대표적인 예입니다. 일반적으로 지도 보기를 중심으로 위치 추적, 주변 비즈니스 찾기, 지리적 쿼리 수행, 운전 경로 제공 등의 기능을 제공합니다.

온디맨드 앱

온디맨드 앱은 위치 정보 앱의 또 다른 인기 있는 예입니다. 이러한 앱을 사용하면 차량 서비스, 음식 주문, 식료품 주문 등을 할 수 있습니다. 온디맨드 서비스는 사용자 위치를 사용하여 근처의 차량 서비스, 상점, 레스토랑을 표시합니다. 또한 주문에 대한 실시간 추적 기능도 제공합니다.

소셜 네트워크 및 데이트 앱

소셜 미디어 앱은 일반적으로 위치 정보 사용에 대해 투명하지 않습니다. 대부분의 소셜 미디어 앱은 사용자 위치를 사용하여 개인화된 경험을 제공하고, 사람들을 연결하고, 이미지와 사진에 태그를 지정하고, 지역적으로 인기 있는 콘텐츠를 표시합니다.

관광 앱

관광 앱은 사용자 위치를 기반으로 주변 호텔, 이벤트, 체험 등을 추천합니다.

피트니스 앱

대부분의 피트니스 앱, 특히 달리기 앱에는 위치 추적 기능이 내장되어 있습니다. 위치 추적 기능을 통해 사용자 경로를 추적하고 경로 거리, 평균 달리기 속도, 고도 차이 등을 계산할 수 있습니다.

위치 정보 앱을 만드는 과정

위치 기반 모바일 앱을 만드는 것은 어려운 작업일 수 있습니다. 하지만 걱정하지 마세요! 다음 단계를 따르면 훌륭한 위치 기반 앱을 만드는 데 큰 도움이 될 것입니다.

1단계: 위치 정보 앱의 목적 정의하기

위치 정보 앱을 만드는 첫 번째 단계는 앱의 목적과 주요 기능을 정의하는 것입니다. 앱이 어떤 문제를 해결하고 타겟 고객이 누구인지 자문해 보세요.

이를 파악했다면 이제 시장을 조사할 차례입니다. 경쟁업체를 찾아 기존의 모든 앱보다 더 나은 앱이 무엇인지 생각해 보세요.

2단계: 기술 선택

좋은 위치 정보 앱을 개발하는 데 있어 가장 중요한 부분은 올바른 기술 스택을 선택하는 것입니다. 앱은 백엔드와 프론트엔드로 나뉠 가능성이 높습니다.

백엔드 도구를 선택할 때는 어떤 유형의 데이터를 저장할 것인지, 데이터가 어디에 저장될 것인지 등을 고려하세요. 반대로 프론트엔드 기술을 선택할 때는 세련된 디자인의 반응형 앱을 구축할 수 있는 기술을 선택하세요.

또한 지리적 위치 API가 필요합니다. 지리적 위치 API를 선택할 때는 Google 지도, OpenStreetMap, MapBox 등 다양한 옵션을 고려하세요. 앱 유형에 가장 적합한 지리적 위치 API를 선택해야 합니다.

3단계: 앱 디자인

이 단계는 사용자 관점에서 가장 중요한 단계입니다. 앱을 디자인할 때는 앱이 매력적이고 사용하기 쉬우며 적절한 기능을 갖추고 있는지 확인하세요. 좋은 UI/UX 관행을 따르고 최종 사용자가 위치 기반 애플리케이션을 어떻게 사용할지 고려하세요.

4단계: MVP 구축

본격적인 애플리케이션을 만들기 전에 최소 실행 가능한 제품(MVP)을 만드는 것이 좋습니다. MVP에는 초기 사용자가 사용할 수 있는 충분한 기능이 포함되어야 하며, 이들은 피드백을 제공할 것입니다. 피드백을 통해 아이디어를 검증하고 제품을 개선할 수 있습니다.

5단계: 정식 버전 및 릴리스

마지막 단계는 정식 버전 앱을 빌드하는 것입니다. 프로젝트의 백로그를 확인하고 다른 모든 중요한 기능을 구현하세요. 모든 버그를 수정하고 지역 기반 앱을 출시하세요.

물론 릴리스 후에는 애플리케이션을 유지 관리해야 합니다. 지리적 위치 API는 시간이 지남에 따라 변경될 수 있습니다. 최신 운영 체제에 대한 지원을 추가하고, 버그를 수정하고, 새로운 기능을 추가하는 등의 작업을 수행해야 합니다.

위치 정보 앱을 개발하는 방법은 무엇인가요?

이 기사 섹션에서는 Back4app과 React Native를 사용하여 위치 정보 앱을 구축하는 방법과 Expo를 사용하는 방법을 살펴보겠습니다.

전제 조건

• 자바스크립트, 특히 ES6에 대한 경험.
• 리액트 네이티브 (및 엑스포)에 대한 기본적인 이해.
• 로컬 머신에 JavaScript IDE가 설치되어 있어야 합니다.
• 안드로이드 에뮬레이터 또는 실제 안드로이드 기기.

Back4app이란 무엇인가요?

Back4app은 고급 코딩 기술 없이도 최신 애플리케이션을 빠르게 구축할 수 있는 훌륭한 도구입니다. 이 플랫폼에는 사용자 관리, 인증, 실시간 데이터베이스, 클라우드 코드 기능, 소셜 통합, API 등과 같은 유용한 기능이 많이 포함되어 있습니다.

Back4app을 사용하면 백엔드나 복잡한 인프라에 대한 걱정 없이 주요 기능 및 디자인과 같은 앱의 중요한 부분에 집중할 수 있습니다.

무엇보다도 Back4app은 테스트하고 사용해 볼 수 있는 무료 요금제를 제공합니다. 앱이 성장하면 투명하고 예측 가능한 가격의 프리미엄 요금제로 원활하게 업그레이드할 수 있습니다.

프로젝트 개요

Back4app의 강력한 기능을 보여드리기 위해 간단한 위치 정보 앱을 만들어 보겠습니다. 이 앱을 통해 사용자는 지도를 보고, 데이터베이스에 저장된 장소를 보고, 지리 공간 쿼리를 수행할 수 있습니다. 지리적 쿼리에는 거리별로 장소 정렬, 거리 내 장소 찾기 등이 포함됩니다. 앱의 백엔드는 Back4app에서 처리하고 프런트엔드에서는 React Native와 Google Maps를 활용할 것입니다.

백4앱 앱 만들기

다음 단계를 수행하려면 Back4app 계정이 필요합니다. 아직 계정이 없다면 지금 바로 무료로 가입하세요!

로그인하면 앱 목록으로 리디렉션됩니다. 새 앱을 만들려면 “새 앱 만들기”를 클릭합니다.

Back4app을 사용하면 두 가지 유형의 앱을 배포할 수 있습니다:

1. BaaS(백엔드 서비스) – 본격적인 백엔드 솔루션 또는
2. 서비스형 컨테이너(CaaS) – 컨테이너화된 소프트웨어를 배포하기 위한 플랫폼입니다.

지리적 위치 앱을 구축하는 것이므로 ‘서비스형 백엔드’를 사용하겠습니다.

그런 다음 앱에 멋진 이름을 지정하고 데이터베이스로 “NoSQL”을 선택한 다음 “만들기”를 클릭합니다.

Back4app은 애플리케이션에 필요한 모든 것을 준비하는 데 약간의 시간이 걸립니다. 애플리케이션이 준비되면 앱의 데이터베이스 보기로 리디렉션됩니다.

데이터베이스 클래스 생성

이제 데이터베이스를 관리해야 합니다.

프로젝트 소개에서 언급했듯이 데이터베이스에 장소를 저장하고 지도에 표시하고 싶습니다. 이러한 장소를 저장하기 위해 새로운 데이터베이스 클래스를 만들어야 합니다.

“클래스 만들기” 버튼을 클릭해 새 클래스를 만듭니다. 이름을 장소로 지정하고 ‘공개 읽기 및 쓰기’를 활성화한 다음 ‘클래스 만들기 및 열 추가’를 클릭합니다.

다음으로 다음 세 개의 열을 추가합니다:

+-------------+-------------+--------------------+----------+
| Data type   | Name        | Default value      | Required |
+-------------+-------------+--------------------+----------+
| String      | name        | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+
| String      | description | <leave blank>      | no       |
+-------------+-------------+--------------------+----------+
| GeoPoint    | location    | <leave blank>      | yes      |
+-------------+-------------+--------------------+----------+

클래스를 만든 후에는 데이터베이스에 몇 가지 샘플 장소를 추가합니다. 예시:

또는 이 미국 주 데이터베이스 내보내기를 가져올 수도 있습니다. 가져오려면 화면 오른쪽 상단의 점 3개 버튼을 사용하여 ‘가져오기 > 클래스 데이터’를 선택한 다음 파일을 선택합니다.

데이터베이스 클래스를 성공적으로 생성하고 채웠습니다. 이제 프로젝트의 백엔드 부분이 완성되었습니다. 정말 쉬웠습니다!

코드 프론트엔드

이 섹션에서는 위치 정보 앱의 프런트엔드 부분을 다루겠습니다.

프로젝트 초기화

다음 단계를 수행하려면 Node가 설치되어 있어야 합니다. 설치되어 있지 않은 경우 다운로드하세요.

먼저 엑스포 프로젝트를 생성하세요:

$ npx create-expo-app@latest back4app-geolocation-app --template blank@sdk-49

최신 버전의 엑스포 SDK를 사용하기 위해 blank@sdk-49 템플릿을 사용했습니다.

엑스포는 프로젝트에 필요한 모든 것을 준비하는 데 약 1분 정도 걸립니다. 프로젝트가 준비되면 현재 디렉터리를 해당 디렉토리로 변경합니다. 그런 다음 엑스포 개발 서버를 시작합니다:

$ cd back4app-geolocation-app
$ expo start

키보드의 A를 눌러 에뮬레이터 또는 연결된 Android 기기에서 앱을 엽니다.

리액트 네이티브 맵

지도를 표시하기 위해 react-native-maps를 사용하겠습니다. 리액트 네이티브 맵은 iOS와 안드로이드용 지도 컴포넌트를 제공하는 훌륭한 패키지입니다. 구글 맵과 MapKit을 지원합니다.

먼저 npm을 통해 설치하세요:

$ npx expo install react-native-maps

그런 다음 App.js 콘텐츠를 다음과 같이 바꾸어 를 포함하도록 변경합니다:

// App.js

import React from "react";
import {StyleSheet, View} from "react-native";
import MapView from "react-native-maps";

const initialRegion = {
  latitude: 30.0000,
  longitude: -100.0000,
  latitudeDelta: 64,
  longitudeDelta: 64,
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    zIndex: 10,
    width: "100%",
    height: "100%",
  },
});

지금 앱을 열면 지도를 볼 수 있을 것입니다.

사용자 위치 가져오기

사용자 위치를 가져오기 위해 expo-location 패키지를 활용합니다.

먼저 npm을 통해 설치하세요:

$ npx expo install expo-location

사용자의 위치에 액세스하기 전에 사용자의 권한을 요청해야 합니다. 이를 위해 사용효과() 에 요청ForegroundPermissionsAsync() 라는 내장된 엑스포 함수를 다음과 같이 사용할 수 있습니다:

// App.js

import React, {useEffect, useState} from "react";
import {StyleSheet, View} from "react-native";
import MapView, {Marker} from "react-native-maps";
import * as Location from "expo-location";

// ...

export default function App() {

  const [location, setLocation] = useState(null);

  useEffect(() => {
    (async () => {
      let {status} = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.error("Permission to access location was denied.");
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        {location && (
          <Marker
            title="You are here"
            description={`
              ${location.coords.latitude.toFixed(4)},
              ${location.coords.longitude.toFixed(4)}
            `}
            coordinate={{
              latitude: location.coords.latitude,
              longitude: location.coords.longitude,
            }}
            pinColor="blue"
          />
        )}
      </MapView>
    </View>
  );
}

// ...

1. 앱이 시작되면 사용자에게 대략적인 위치에 액세스할 수 있는 권한을 요청합니다. 접근 권한이 부여되면 useState()를 사용하여 위치를 위치 상태에 저장합니다.
2. 사용자의 위치를 표시하도록 반환 문을 업데이트했습니다( 위치가 null이 아닌 경우).

앱을 다시 실행하면 현재 위치를 나타내는 파란색 마커를 볼 수 있을 것입니다.

Parse 설치

아시다시피 Back4app은 Parse 플랫폼을 기반으로 합니다. 일반적으로 Back4app 데이터베이스 또는 Back4app과 상호 작용하려면 Parse SDK를 설치해야 합니다.

먼저 Parse SDK를 설치합니다:

$ npx expo install [email protected] @react-native-async-storage/async-storage

최신 버전은 Expo SDK 49와 잘 작동하지 않기 때문에 Parse 버전 3.5.1을 사용했습니다.

다음으로, 임포트 바로 아래에 App.js에 Parse 인스턴스를 만듭니다:

// App.js

// ...

import Parse from "parse/react-native.js";
import AsyncStorage from "@react-native-async-storage/async-storage";

Parse.setAsyncStorage(AsyncStorage);
Parse.initialize(
  process.env.EXPO_PUBLIC_PARSE_APPLICATION_ID,
  process.env.EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY,
);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

애플리케이션 ID와 JavaScript 키를 하드 코딩하는 대신 환경 변수를 활용합니다. SDK 49부터 엑스포는 .env.local 파일에서 환경 변수를 자동으로 로드합니다.

프로젝트 루트에 다음 내용으로 .env.local 파일을 생성합니다:

EXPO_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
EXPO_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

교체해야 합니다. 및 를 실제 ID와 키로 바꾸세요. 자격 증명을 얻으려면 Back4app 앱으로 이동하여 사이드바에서 ‘앱 설정 > 보안 및 키’를 선택합니다.

데이터베이스에서 장소 가져오기

데이터베이스에서 장소를 가져오기 위해 이전 단계에서 생성한 Parse 인스턴스를 사용합니다.

먼저 Place 클래스에서 새 Parse.Query를 생성한 다음 find()를 실행하여 쿼리를 실행해야 합니다. 그런 다음 결과를 마커 형식으로 변환합니다.

다음과 같이 App.js를 수정합니다:

// App.js

// ...

export default function App() {

  // ...

  const [places, setPlaces] = useState([]);

  useEffect(() => {
    // ...

    // fetch `Place` objects from the database
    const placesQuery = new Parse.Query("Place");
    placesQuery.find().then((places) => {
      places = places.map((place) => {
        return {
          title: place.get("name"),
          description: place.get("description"),
          coordinate: {
            latitude: place.get("location").latitude,
            longitude: place.get("location").longitude,
          },
        };
      });
      setPlaces(places);
    });
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={initialRegion}
        style={styles.map}
      >
        // ...
        {places.map((place, index) => (
          <Marker
            key={index}
            title={place.title}
            description={place.description}
            coordinate={place.coordinate}
          />
        ))}
      </MapView>
    </View>
  );
}

// ...

1. 사용State() 를 사용하여 장소에 대한 마커를 보관하는 또 다른 상태를 만들었습니다.
2. 앱 시작 시 데이터베이스에서 장소를 가져오도록 useEffect() 훅을 업그레이드했습니다.
3. 지도 위에 장소 마커를 표시하도록 렌더링 기능을 변경했습니다.

앱을 다시 한 번 열면 모든 장소를 볼 수 있을 것입니다.

지리적 쿼리

이 마지막 섹션에서는 Back4app을 사용하여 지리공간 쿼리를 수행하는 방법을 살펴보겠습니다.

Parse에는 GeoPoint라는 클래스가 있습니다. 지오포인트 클래스는 위도/경도 지점을 나타내며 두 지오포인트간의 거리를 계산하고 근접성 기반 쿼리를 수행할 수 있게 해줍니다.

이 클래스를 활용하여 다음 두 가지 기능을 구현하겠습니다:

1. 사용자 위치에서 거리별로 장소를 정렬합니다.
2. 사용자 위치에서 X킬로미터 이내의 장소를 찾습니다.

App.js에 다음을 추가합니다:

// App.js

// ...

const maxDistance = 3000;

export default function App() {

  // ...

  const sortPlacesByProximity = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.near("location", locationGeoPoint);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  };

  const findPlacesWithinDistance = async () => {
    let parseQuery = new Parse.Query("Place");
    let locationGeoPoint = new Parse.GeoPoint(
        location.coords.latitude,
        location.coords.longitude
    );
    parseQuery.withinKilometers("location", locationGeoPoint, maxDistance);

    let results = await parseQuery.find();
    for (let result of results) {
      console.log(result.get("name"));
    }
  }

  const moveUserToRandomLocation = () => {
    setLocation({
      coords: {
        latitude: Math.random() * (-78.848974 - -103.520833) + 31.3845,
        longitude: Math.random() * (-78.848974 - -123.885444) + -123.885444,
      }
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button
          title="Sort places by proximity"
          color="#239658"
          onPress={sortPlacesByProximity}
        />
        <Button
          title={`Find places within ${maxDistance} km`}
          color="#239658"
          onPress={findPlacesWithinDistance}
        />
        <Button
          title="Move user to random location"
          color="#061124"
          onPress={moveUserToRandomLocation}
        />
      </View>
      // ...
    </View>
  );
}

const styles = StyleSheet.create({
  // ...
  buttonContainer: {
    zIndex: 25,
    width: "100%",
    position: "absolute",
    bottom: 0,
    marginVertical: 4,
    display: "flex",
    gap: 4,
  },
});

1. sortPlacesByProximity( ) 및 findPlacesWithinDistance()는 먼저 사용자의 위치를 GeoPoint로 변환하고 Parse.Query를 만든 다음 특정 지리적 함수를 실행합니다.
2. moveUserToRandomLocation() 은 사용자를 미국 내 임의의 위치로 이동하는 데 사용됩니다. 이 메서드는 주로 앞서 언급한 두 가지 메서드를 테스트하는 데 사용됩니다.
3. 또한 해당 기능을 트리거할 수 있는 3개의 버튼도 추가했습니다.

파일 상단에 있는 가져오기 기능을 잊지 마세요:

import {Button, StyleSheet, View} from "react-native";

서버를 다시 실행하면 다음과 같은 내용이 표시됩니다:

‘근접성별로 장소 정렬’ 버튼을 클릭하여 지리적 쿼리를 테스트합니다:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma
LOG  Florida
LOG  New York

거리 내 기능도 동일하게 수행합니다:

LOG  Arizona
LOG  Idaho
LOG  Oklahoma

마지막으로 사용자를 임의의 위치로 이동하고 지리적 쿼리를 다시 테스트합니다.

결론

이 문서에서는 지리적 위치 앱을 성공적으로 구축했습니다. 이 앱을 통해 사용자는 지도를 보고, 자신의 위치를 확인하고, 데이터베이스에서 장소를 가져오고, 지리적 쿼리를 수행할 수 있습니다. 이제 위치 정보 앱의 작동 방식과 구축 방법을 잘 이해하셨을 것입니다.

다음은 이해도를 테스트하기 위해 구현할 수 있는 몇 가지 아이디어입니다:

• 실시간 사용자 위치 추적(디바이스가 움직이면 사용자 마커가 이동해야 함)
• 사용자 위치 기록(사용자가 자신의 위치 기록을 볼 수 있어야 함)
• 탐색(사용자 위치에서 사용자 지정 위치까지의 경로 표시)

소스 코드는 back4app-geolocation-app GitHub 리포지토리에서 확인할 수 있습니다.