🖥️ Project Overview

• 프로젝트 이름: 자영업자도 손쉽게 광고 제작부터 집행, 광고 결과까지 원스톱으로 해결 가능한 서비스 ‘KT 바로광고'
• 프로젝트 목적: KT 바로광고의 기존 원스톱 광고 솔루션을 AI를 활용하여 광고 집행뿐만 아니라 광고 제작 영역까지 지원합니다. 이를 통해 소상공인들의 광고 집행 과정의 진입 장벽을 완화하고, KT바로광고의 새로운 솔루션으로 제안합니다.

🖥️ Team

• 팀 이름: HMH ("하면해"라는 뜻의 밈을 차용하여 신한청년해커톤에서 Gen Z의 젊은 열정, 도전의식, 패기를 보여줍니다)
• 팀 멤버:

🐰김유림	🐻한정욱	🐱이연진
팀장	팀원	팀원
Design	FE	BE

🖥️ Key Features

1. 광고 업종, 소재 심의 시뮬레이션

   • 사업자등록증·광고 영상 분석으로 업종·소재 적합성 사전 점검

2. AI 활용 광고 영상 제작

   • 네이버 지도 가게 링크만 입력하면, 생성된 광고 영상 저장 후 가게 홍보에 재사용 가능

3. 사용자 참여형 광고 QR

   • QR 기반 인터랙티브 광고: 고객 참여 데이터와 광고 성과 측정

4. 광고 데이터 리포트

   • QR 링크 이용자 수 트래킹으로 실시청자 수 정보 제공

🖥️ Technology Stack

👉🏻 FE

Language

Framework · State · Data Fetching · Styling · Deploy

---

👉🏻 AI & Video

Language

AI · Video Processing

👉🏻Cooperation

🖥️ Past presentation slides

🖥️ Function Description

HMH_businessUpload.webm

사업자등록증의 업종을 기반으로 적합성을 사전에 검증 및 구글의 OCR 기술을 활용해 텍스트 자동 추출

HMH_deviceSelection.webm

광고주가 광고 지역, 일정 ,예산을 입력하면 AI가 업종, 위치, 예산 데이터를 기반으로 광고주에게 최적화된 송출기기를 추천

HMH_AutoBudgetDistribution.webm

AI가 업종에 맞게 분배한 예산 확인 후 결제

HMH_naverCrawlPage.webm

네이버 플레이스의 가게 링크와 영상에서 강조하고 싶은 가게 키워드를 입력

campaignProduction.mp4

• 광고주가 원하는 광고 템플릿을 선택하고, 광고에 사용할 사진 추가가능
  
• 우측에 표시되는 이미지는 앞서 입력한 네이버 플레이스 링크를 기준으로 크롤링된 사진이며, 사용자는 이를 확인한 뒤
  불필요한 이미지를 삭제하거나 원하는 사진을 추가하여 최종적으로 광고에 사용할 이미지 선택
  
• 사용자가 입력한 키워드와 네이버 플레이스의 정보를 기반으로 AI가 자동으로 광고문구 생성
  

default.mp4

기업측에서 사용하는 비디오 분석 리포트 ffmpeg를 통해 분석한 영상의 규격 및 해상도 정보와 Google Cloud Video API를 활용한 검사결과 확인 가능

[서비스 시연 영상]
https://youtu.be/5_XBmdblgHk

📀 AI로 제작한 광고영상

꽃집
https://storage.googleapis.com/hackathon_hmh/Four_Seasons%20_video.mp4

식당
https://storage.googleapis.com/hackathon_hmh/template2Video.mp4

카페
https://storage.googleapis.com/hackathon_hmh/sandwichTemplate.mp4

---

🧩 Challenges & Solutions

1. 소재 가이드 및 업종 제약사항 검증의 복잡성

Problem
광고 소재 가이드라인과 업종별 제약사항이 PDF 문서 형태로만 제공되어
소상공인이 직접 이해하고 검증하기에 진입 장벽이 높았습니다.

Solution

• FFmpeg를 활용해 광고 영상의 규격, 해상도, 용량을 자동 검증
• Google Cloud Video Intelligence를 통해
  • 객체 인식
  • 텍스트 추출(OCR)
  • 유해성 및 부적합 요소 검사
    → 광고 집행 전 단계에서 소재 적합성을 자동으로 사전 검증하도록 개선했습니다.

---

2. 영상 생성 AI의 한계 (퀄리티 · 비용 · 언어 인식)

Problem
기존 영상 생성 AI는

• 낮은 결과 퀄리티
• 높은 비용
• 한국어 문구를 외국어로 오인식하는 문제가 있었습니다.

Solution

• 문구를 제외한 단일 이미지 기반 영상 생성
• 생성된 영상에 대해 서버 단에서 문구·편집을 후처리
  → 영상 퀄리티를 안정화하면서 비용 문제를 해결했습니다.

---

🛠️ Tech Stack Summary

• React
• TypeScript
• Next.js
• Tailwind CSS
• Zustand
• React Query
• FFmpeg
• Google Cloud Video Intelligence

---

📚 Related Articles

🔗 신한 스퀘어 브릿지 해커톤 후기

• Description: 신한 스퀘어 브릿지 해커톤을 마무리하며 프로젝트와 팀 경험을 회고했습니다.
• Date: 2025.09.09
• Read Time: 5분
• Tags: 신한 해커톤 회고록 혁신상
• URL: https://velog.io/@nowrobin/%EC%8B%A0%ED%95%9C-%EC%8A%A4%ED%80%98%EC%96%B4-%EB%B8%8C%EB%A6%BF%EC%A7%80-%ED%95%B4%EC%BB%A4%ED%86%A4-%ED%9B%84%EA%B8%B0

---

🔗 웹에서 영상 편집 해보기 (FFmpeg)

• Description: 웹 환경에서 FFmpeg를 활용해 영상 분석·편집을 진행한 경험을 정리했습니다.
• Date: 2025.08.31
• Read Time: 10분
• Tags: Next.js FFmpeg 영상 분석
• URL: https://velog.io/@nowrobin/%EC%9B%B9%EC%97%90%EC%84%9C-%EC%98%81%EC%83%81-%ED%8E%B8%EC%A7%91-%ED%95%B4%EB%B3%B4%EA%B8%B0-ffmpeg

---

🔗 개발을 하기 위해 문제를 푼다?

• Description: 기능 구현을 넘어 문제 해결 중심의 개발에 대해 고민한 글입니다.
• Date: 2025.07.30
• Read Time: 8분
• Tags: 개발자 문제 해결
• URL: https://velog.io/@nowrobin/%EA%B0%9C%EB%B0%9C%EC%9D%84-%ED%95%98%EA%B8%B0%EC%9C%84%ED%95%B4-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%91%BC%EB%8B%A4