뒤로가기
걷기만 했는데 꽃이 심어졌다. 어떻게 작동하는 걸까? 프론트 개발자 입장에서 추정해봤다.
위치 수집과 저장
꽃을 심기 시작하면, 앱은 사용자의 위치를 실시간으로 추적하기 시작한다.
이때 예상되는 기술 흐름은 다음과 같다:
- CLLocationManager를 통한 실시간 위치 수집
- 일정 간격으로 좌표를 샘플링하여 배열에 저장 -> 너무 가까운 위치는 무시하여 노이즈 제거
- 앱을 닫아도 백그라운드에서 계속 추적 (배터리 최적화 필요)
저장 포맷은 아마도?
꽃을 심은 경로는 단순 좌표가 아닌 시간 + 위치 + 심은 꽃 종류 등 메타데이터가 포함되어 있을 가능성이 높다.
{
"startTime": "2025-05-03T13:10:00",
"endTime": "2025-05-03T14:45:00",
"flowerType": "red",
"coordinates": [
[127.029, 37.498],
[127.030, 37.499],
...
]
}
지금 5월이라 또 가정의 달이라고, 이달의 꽃은 카네이션, 장미 등등.. 난리났다.
각각 꽃 이름을 다 고유명사로 짓기에는 한계가 있을테니 시즌-꽃-색상
이렇게 짓지 않았을까?
25-5-rose-red (25년 5월 시즌 빨간색 장미꽃)
지도 위 시각화
꽃을 심고 나면, 지도 위에 꽃잎들이 길을 따라 자동 배치된다.
이를 구현하려면 다음과 같은 절차가 필요하다:
- MKPolyline 또는 커스텀 캔버스를 이용해 라인을 그림
- 일정 간격으로 꽃 모양 아이콘을 offset에 따라 반복 배치
- 아이콘은 애니메이션 또는 이미지 뷰로 간단하게 처리 가능
성능 문제는?
- 꽃이 많아지면 오브젝트 수도 급격히 증가 -> 렌더링 최적화 필수
- 과거 기록도 남기려면 서버 측에 저장하고, 맵 확대 시에만 불러오는 식의
lazy loading
전략이 유력 - 그래서 아이폰 12 mini 에서는 꽃을 오래 심으면 앱이 자꾸 꺼진다 ㅜㅜ
실시간 위치 추적과 일반 걸음 기록은 다르다
피크민 블룸은 항상 걸음을 기록하지만, 꽃을 심을 때만 파란 위치 아이콘이 뜨는 것을 보면 두 기능은 서로 다르게 작동한다.
🌱 일반 걸음 기록
- 아이폰에서 피트니스 API 또는 HealthKit과 연동되어 걸음 수만 수집
- 이때는 정확한 위치 정보는 사용하지 않음 -> 아이폰 상단에 파란색 위치 아이콘이 뜨지 않음
🌸 꽃을 심을 때는 실시간 GPS 추적
- 사용자가 ‘꽃 심기’ 버튼을 누르는 순간부터,
- CLLocationManager가 실시간으로 위치를 추적하며 경로를 저장 -> 아이폰 상단에 파란 위치 추적 아이콘이 표시됨
- 이후 종료 버튼을 누르면 기록이 서버에 업로드되거나 저장됨
맵 전체가 아닌, 현재 위치 중심 반경 N미터만 렌더링한다
피크민 블룸을 실행하면, 꽃이 원형으로 촤라락 펼쳐지듯 한 번에 맵에 나타난다.
이걸 보면 전체 데이터를 로딩하는 게 아니라, 현재 위치 기준 반경 약 200~300m 정도만 요청하고 시각화하는 것으로 보인다. (더 넓을수도?)
예상되는 흐름
- 앱 실행 / 맵 이동 감지
- 현재 위치를 기준으로 일정 반경 (ex. 200m) 설정
- 서버에 꽃 정보 요청
GET /flowers?lat=${lat}&lng=${lng}&radius=200
- 응답 받은 꽃 데이터 기준으로 렌더링
- 경로 따라 꽃 아이콘 배치
- 종류별로 다른 텍스처 사용
- 일정 간격마다 반복 표시
- 사용자가 이동할 경우,
- 일정 거리 이상 벗어나면 새 요청
- 이전에 본 영역은 로컬 캐시로 보여줌
왜 반경 단위로 렌더링할까?
- 퍼포먼스 때문: 전체 도시 데이터를 한 번에 불러오면 부하가 너무 큼
- 프라이버시 때문: 다른 유저의 꽃 경로를 멀리까지 보여줄 필요 없음
- 인터랙션 유도: 근처만 보여줘야 걷고 이동하게 만들 수 있음
결론
피크민 블룸은 단순한 위치 기반 게임이 아니라, 실시간 GPS 추적 + 사용자 입력 이벤트 + 거리 기반 로딩 전략이 모두 섞인 정교한 구조를 갖고 있다.
이런 구조를 보면 ‘걷기’라는 일상적인 활동도 얼마나 다양하게 확장 가능한지 실감하게 된다.
프론트엔드 카테고리와 관련된 최신 글
피크민 블룸은 어떻게 꽃길🌸을 남길까?
Next.js 마이그레이션: 서버 컴포넌트(SSC)와 클라이언트 컴포넌트(CSC) 선택하기
최고의 프로젝트 구조를 찾아서....
React Query로 데이터 처리의 효율성 높이기
스파게티 코드 갱생시키기 프로젝트