[애드베이터] 엘리베이터 광고 플랫폼

5 more properties

문제 인식 및 정의(Problem)

솔루션(Solution)

기술 개요(Technical Overview)

디자인 시스템(Design System)

팀 소개(Team)

Links

Problem

"고객은 바로 근처에 있지만, 광고는 닿지 못하고 있습니다.”

우리 동네 사장님들의 가장 큰 고민, 바로 "어떻게 하면 효과적으로 마케팅을 할 수 있을까?"입니다.

팬데믹 이후 많은 것이 디지털 전환되면서, 지역 주민을 대상으로 하는 동네 자영업자들에게도 디지털 마케팅은 필수가 되었습니다.

그러나 문제는 여기에 있습니다. 오프라인에서는 물리적으로 가까운 고객들이, 온라인에서는 흩어져 있다는 것.

일반적인 디지털 마케팅에선 이들을 효과적으로 타겟팅하기 어렵고, 지역 단위 광고가 가능한 플랫폼은 광고비용이 높아 부담이 됩니다.

이러한 이유로, 지역 마케팅은 온라인이 아닌 오프라인에서 이루어질 때 더 효과적입니다.

“지역 주민과 연결되는 가장 효과적인 방법, 엘리베이터TV”

아파트 엘리베이터 내부에 설치된 엘리베이터TV는 지역 마케팅에 있어 가장 효과적인 수단입니다.

강제 노출 효과

광고 회피도가 단 20%로, 대부분의 주민이 광고를 확인합니다.

지역 주민 직접 타겟팅

특정 아파트 단지에 사는 고객에게 정확히 도달합니다.

광고비 부담이 적음

4주 광고 상품 중 가장 비싼 상품이 1대당 15,000원으로, 소규모 예산으로도 집행이 가능합니다.

“ : 그래서 엘리베이터TV 광고, 얼마나 한다고요?”

그렇다면 왜 엘리베이터 TV 광고는 동네 사장님들 사이에서 널리 활용되지 못하고 있을까요?

저희는 그 이유를 "광고 집행 과정의 번거로움"에서 찾았습니다. 광고비용을 확인하고, 집행하기까지의 과정이 귀찮고 복잡하기 때문입니다.

현재 엘리베이터 TV 광고를 확인하고 의뢰하려면 다음과 같은 절차를 거쳐야 합니다.

사장님이 직접 진행할 경우

내 가게 주변의 아파트 단지가 무엇이 있는지 알아본다.

각 아파트 단지 관리사무소 번호를 알아낸다.

각 아파트 관리사무소에 엘리베이터TV 설치 여부와 업체 이름을 알아낸다.

각 아파트 단지 엘리베이터TV 업체별로 각각 광고 견적 문의를 한다.

광고 대행업체를 통해 진행할 경우

광고 대행업체 블로그나 사이트를 통해 광고 대행 업체 연락처를 알아낸다.

광고 대행업체에 광고하고 싶은 지역을 문의한다.

광고 대행업체로부터 해당 지역에 엘리베이터TV가 설치된 아파트 단지 목록과 가격 리스트를 받는다.

그 중 집행하고 싶은 아파트 단지를 선택하여 전달하면, 광고 대행업체가 대신 각 엘리베이터 TV 업체에 견적서를 접수한다.

광고 집행 전, 광고 비용과 광고 가능한 대상 및 위치를 명확히 확인하기조차 어렵기 때문에 사장님들이 쉽게 접근하지 못하고 있는 상황입니다.

Solution

애드베이터(adVator)를 소개합니다!

애드베이터(adVator)는 광고(advertisement)와 엘리베이터(elevator)의 합성어로, 광고를 엘리베이터에서 보여주고, 광고 효과를 한층 높여준다는 의미를 담고 있습니다.

가게 근처 아파트 단지의 엘리베이터TV에 광고를 게재함으로써, 디지털 마케팅보다 적은 비용으로 지역 밀착형 마케팅을 실현할 수 있습니다.

애드베이터는 기존 엘리베이터TV 광고의 복잡한 집행 절차를 간소화해, 더 많은 사장님들이 이 효과적인 지역 밀착형 마케팅 수단을 접할 수 있도록 진입 장벽을 낮췄습니다.

지도 기반 엘리베이터TV 광고 상품 탐색

가게 근처 아파트 단지를 한눈에

내 가게 주변의 아파트 단지를 지도에서 확인하고, 각 단지의 위치, 광고상품등급, 4주 기준 광고 비용을 쉽게 확인할 수 있어요.

‘견적 카트’로 간편한 비용 계산

관심 있는 아파트 단지를 몇 개 선택하면, 4주 기준 총 광고 비용을 자동으로 계산하여 예산을 미리 확인할 수 있어요.

🤝🏻

다른 사장님들이 선택한 광고 확인

어떤 아파트 단지를 선택할 지 고민이 된다면, 각 아파트 단지 별로 몇 명의 사장님이 선택했는지 확인할 수 있어요.

간편한 광고 견적 문의서 제출

한 번에 완료하는 견적 문의

한 번의 작성으로 여러 업체에 동시에 견적을 제출할 수 있어요.

애드베이터는 발전하고 있어요!

“광고 집행을 더 간단하게, 광고 효과는 더 크게 만들 수 없을까?“

저희는 애드베이터의 비즈니스 가능성과 발전 방향에 대해 계속 고민하고 있어요.

애드베이터의 비즈니스 가능성, 비전, 그리고 로드맵이 궁금하시다면 아래에 링크된 페이지에서 확인하실 수 있습니다.

애드베이터의 비전과 로드맵 더 알아보기

Technical Overview

아키텍처 구조도

GCP 상에 서버와 DB를 각각 하나의 인스턴스로 배포해 운영합니다. 사용자가 웹 사이트 상에서 광고 견적을 요청하면 서버에서 이를 취합해 AdVator, 광고 업체 DB에 정보를 저장하고, 각 광고 업체 담당자에게 메일을 발송합니다.

ERD

핵심 기능 FE BE

메인화면 
- 아파트 단지 검색(GPS, 지역), 아파트 단지 필터링(등급, 업체), 아파트 단지 정렬(가격), 지도 기반 시각화

•

아파트 단지 검색 - GPS : Haversine 공식을 활용해 구면 상의 두 지점의 경도, 위도를 통해 거리를 구해 반경 1km 내의 아파트 단지 검색 기능을 구현했습니다.

•

아파트 단지 검색 - 지역명 : QueryDSL을 활용해 아파트 단지 주소의 시, 구, 법정동을 기준으로 필터링 해 지역 내 아파트 단지 검색 기능을 구현했습니다.

•

아파트 단지 필터링 : QueryDSL을 활용해 아파트 단지의 등급 및 업체를 기준으로 필터링하는 기능을 구현했습니다. 아파트 단지 검색 및 정렬과 함께 사용될 수 있습니다.

•

아파트 단지 정렬 - 가격 : Comparator를 활용해 아파트 단지의 총 가격 순(오름차순, 내림차순)으로 정렬하는 기능을 구현했습니다.

•

지도 기반 시각화 : Kakao Maps API를 활용해 검색된 아파트 단지를 지도에 마커로 표시하는 기능을 구현했습니다. 사용자 상호작용(지도 이동, 확대/축소 등)에 따라 데이터를 실시간으로 갱신합니다.

견적서 작성 화면 
- 선택된 단지 정보 표시, 사용자 정보 저장, 견적서 저장, 아파트 별 견적 요청 수 갱신, 메일 전송

•

선택된 단지 정보 표시 : 선택된 아파트 단지를 카드 형태로 목록화하여 시각적으로 표시하고, 총 선택 수량을 표시해 현재 선택한 항목을 직관적으로 확인할 수 있도록 구성했습니다.

•

사용자 정보 저장 : 사용자가 입력한 업체명, 업종, 사업 유형, 연락처 등 정보를 상태로 관리하며, 동적으로 입력값을 처리할 수 있도록 구현했습니다.

•

메일 전송 : 견적서를 취합해 Google SMTP를 통해 각 광고 업체별 담당자에게 메일을 발송합니다.

활용 라이브러리 및 개발 환경

프론트엔드 
- React, Typescript, Vite, Recoil, React Query, MUI, Kakao Maps API

•

Typescript : 데이터가 하나의 객체에 많은 정보를 담고 있는 구조인 만큼, 정적 타입을 도입해 코드의 안정성을 높이고, 개발 단계에서 타입 오류를 사전에 방지하기 위해 사용했습니다.

•

Recoil : 데이터가 여러 컴포넌트에 걸쳐 사용되면서 props로 전달하는 복잡도를 줄이고, 전역 상태 관리를 간편하게 처리하기 위해 도입했습니다.

•

React Query : 서버 상태 관리를 위해 사용했으며, 데이터 fetching, caching, 동기화 및 업데이트 작업을 효율적으로 처리하기 위해 채택했습니다.

•

MUI : 다양한 UI 컴포넌트를 제공해 개발 속도를 높이고, 해커톤의 제한된 시간 안에 컴포넌트를 직접 제작하는 부담을 줄이기 위해 사용했습니다.

•

Kakao Maps API : 카카오맵을 활용해 지도 서비스를 구현했으며, 특정 위치를 표시하고 커스텀 마커 및 다양한 지도 인터랙션 기능을 처리하기 위해 사용했습니다.

백엔드
- Java21, SpringBoot 3, DataJPA, MySql, GCP, SMTP, Swagger

•

SMTP : 사용자에게 받은 견적 요청을 각 광고 업체에 전달하기 위해 사용했습니다. 또한, reply 메일 주소를 설정해 업체의 답장이 사용자에게 전달되도록 했습니다.

•

Swagger : API 연동 과정에서 프론트와의 효율적인 소통을 위해 API 문서 자동화 도구를 사용했습니다.

트러블 슈팅 FE BE

카드 리스트에서 스크롤이 정상적으로 작동하지 않는 문제를 발견했습니다.

해당 문제는 상위 컨테이너에 높이가 지정되지 않아 스크롤 기준 영역이 정의되지 않았고, overflow 속성이 하위 컴포넌트와 개별 Card 요소에 잘못 적용되면서 레이아웃 충돌이 발생한 것이 원인이었습니다.

이를 해결하기 위해 상위 컨테이너에 명확한 height 값을 지정해 스크롤 기준을 설정하고, overflow 속성을 카드 리스트 컨테이너에만 적용하도록 수정했으며, 개별 Card 요소에서 불필요한 overflow 속성을 제거하여 문제를 해결했습니다.

서비스 메인 화면에서 아파트 단지 별 견적 요청 수를 디스플레이하는 부분에서 개발 보완사항을 발견했습니다.

아파트 단지 별 견적 요청 수를 관리할 때 동시성 제어 관련 이슈가 있어 이를 제어하기 위해 NamedLock를 고려했습니다.

Design System

엘리베이터 버튼을 모티브로 디자인하여 엘리베이터 TV 광고 중개 플랫폼의 정체성을 강조했으며 사용자들에게 신뢰감을 주는 서비스로 인식될 수 있도록 브랜드 아이덴티티를 구축했습니다. 메인 컬러로는 파란색을, 서체로는 Pretendard를 선택하여 안정감과 신뢰도를 전달하고 지나치게 가벼운 느낌을 배제함으로써 동네 상권 자영업자들에게 믿음직한 광고 중개 플랫폼으로 자리 잡고자 했습니다.