교통벌금 플랫폼 개발 중 배운 기술적 교훈

출처: Dev.to

첫눈에 교통 단속과 교통 카메라를 위한 플랫폼을 개발하는 것은 매우 간단해 보입니다:
카메라 지점

하지만 기술적인 부분에 들어가면 데이터 양과 지속적으로 변하는 정보가 생각보다 복잡해집니다.
특히 위치 기반 시스템, 성능 최적화, 모바일 사용자 행동이 결합되면서 작아 보였던 프로젝트가 완전히 다른 차원으로 확장되었습니다.
이 글에서는 교통 단속, 카메라 지점 및 실시간 데이터 중심 프로젝트에서 마주친 기술적인 이슈들을 공유하고자 합니다.

1. 위치 데이터가 예상보다 더 동적이었다

초기에는 데이터를 단순 리스트 형태로 생각했습니다:

[
 {
   "city":"İstanbul",
   "location":"E-5",
   "camera":"Aktif"
 }
]

시간이 지나면서 데이터가 늘어났습니다:
새로운 단속 지점들
정적인 데이터 모델은 금방 한계를 드러냈습니다.

그 후 데이터를 구조화된 필드로 분리했습니다:

{
  "id":124,
  "city":"İstanbul",
  "lat":41.0082,
  "lng":28.9784,
  "type":"mobese",
  "status":"active"
}

이 구조는 필터링과 성능 면에서 큰 장점을 제공했습니다.

2. 지도 페이지 성능이 예상보다 크게 영향을 미쳤다

첫 번째 버전에서는 모든 카메라 지점을 한 번에 로드하려 했습니다.
논리는 간단했습니다:

locations.forEach(location => {
  new Marker(location);
});

초기에는 잘 동작했습니다.
하지만 데이터가 늘어나면서 높은 메모리 사용량이 문제로 떠올랐습니다.

그 뒤에는 보이는 영역에 있는 데이터만 로드하도록 변경했습니다:

const visibleLocations = allLocations.filter(item => {
  return mapBounds.contains(item);
});

사용자가 보지 않는 데이터를 처리하지 않음으로써 상당한 성능 향상을 얻었습니다.

3. 모바일 사용자가 예상보다 더 까다로웠다

교통 관련 콘텐츠는 대부분 이동 중인 사용자가 방문합니다.
따라서 데스크톱을 기준으로 개발한 많은 솔루션이 모바일에서는 기대에 미치지 못했습니다.
예를 들어, 무거운 지도는 첫 로드 시간을 크게 늘렸습니다.

간단한 최적화 예시:

![Image: trafik kamera noktası]

작아 보이지만 전체 로드량을 크게 줄일 수 있었습니다.

4. 과도한 DOM 요소가 숨은 문제를 만들 수 있다

한 도시에는 수백 개의 카메라 혹은 단속 지점이 존재할 수 있습니다.
첫 접근 방식은 다음과 같았습니다:

카메라 지점
카메라 지점
카메라 지점

데이터가 늘어나면서 DOM이 급격히 커졌습니다.

그 후 필요한 요소만 생성하도록 바꿨습니다:

const visibleItems = items.slice(start, end);

이 방법은 특히 모바일 기기에서 더 부드러운 경험을 제공했습니다.

5. SEO 측면에서 위치 데이터는 별도 접근이 필요하다

위치 기반 프로젝트에서는 사용자의 의도가 크게 달라집니다.
예시:

• “교통 카메라”
• “내 주변 교통 단속”

두 검색어는 전혀 다른 검색 행동을 보입니다.

따라서 의미 있는 URL 구조가 중요해졌습니다.

예시:

{
  "@context":"https://schema.org",
  "@type":"Place",
  "name":"Trafik Denetim Noktası"
}

구조화된 데이터는 작아 보이지만 검색 엔진에 더 명확한 신호를 전달합니다.

6. 때로는 적은 기능이 더 좋은 결과를 만든다

처음에는 더 많은 기능을 추가하면 사용자 경험이 향상될 것이라 생각했습니다:

• 실시간 카운터

하지만 대부분의 사용자는 빠른 정보만을 원했습니다.

그 결과 간결한 구조가 더 좋은 결과를 냈습니다:

• 더 적은 JavaScript

특히 모바일 환경에서 차이를 크게 만들었습니다.

결론
교통 단속 및 카메라 중심 프로젝트는 처음엔 단순한 데이터 리스트처럼 보이지만, 규모가 커지면 다양한 문제에 직면합니다:

• 성능
• 작은 시스템이라도 생각보다 많은 최적화가 필요할 수 있음

사용한 자료

• OpenStreetMap Documentation: https://wiki.openstreetmap.org/wiki/Main_Page
• https://leafletjs.com/reference.html
• Trafik Cezaları
• https://schema.org/Place