vroomfan

고객사가 loplat SDK를 통해 손쉽게 광고 마케팅을 할 수 있도록 UI를 제공하는 서비스입니다. Vue.js를 사용한 방대한 양의 기존 코드를 이해하고 꾸준히 리팩토링을 진행했습니다. 마케팅 캠페인 관련 UI, 지오펜스 지도 UI 등 다양한 기능을 추가 개발했습니다.

소개 페이지: https://www.loplat.com/loplat-x

기술 스택

Vue, Element UI, Naver Map API, Google Map API, webpack, babel

작업 내용

• 지오펜스를 ploygon 또는 circle로 그릴 수 있도록 UI를 구현했습니다.

  • 지오펜스 생성, 수정 기능을 구현했습니다.
  • 네이버 지도(국내용)와 구글 지도(해외용) 모두 동일한 기능을 지원하도록 했습니다.

• 캠페인 목록 정렬 기능, csv 다운로드 기능, 캠페인 상태에 따른 filter 기능을 구현했습니다.

• 캠페인 방문 성과 페이지를 구현했습니다.

  • 로플랫의 위치 인식 기술을 이용하여 집행한 광고 캠페인의 성과를 확인할 수 있는 페이지입니다.

• 캠페인 선택, 브랜드 선택, 지역 선택 Modal 컴포넌트 UI를 구현했습니다.

• 고객사가 설정한 캠페인 내용을 요약하는 UI를 개발했습니다.

• 그 외 사이트 곳곳에서 발생하는 버그 및 UI 변경 사항에 대응하는 상시 업무를 맡았습니다.

  • loplat X의 메인 기능인 캠페인 생성, 수정, 복사 페이지의 전체 UI를 리뉴얼하는 작업을 진행했습니다.
  • 수십 개의 지오펜스에 대해 하나씩 GET 요청을 하는 로직을 bulk로 묶어 한 번에 요청하도록 개선했습니다.
  • ADID 정보를 포함한 csv 파일을 업로드하여 사용자 세그먼트를 설정할 수 있는 기능을 개발했습니다.
  • 캠페인과 관련된 알림 메일을 발송하는 데 쓰이는 mailjet template을 작성했습니다.

• loplat X를 점진적으로 React로 migration하는 업무를 도왔습니다.

  • iframe을 이용하여 Vue와 React 웹페이지를 연결하는 설계를 구상했습니다.
  • migration에 필요한 UI 컴포넌트들을 라이브러리화 했습니다.
  • 서비스의 핵심 기능이자 복잡한 코드로 이루어져있던 지도 UI를 React로 리팩토링했습니다.
  • storybook에 msw를 적용하여 테스트 환경을 구축했습니다.