AI와 함께 만드는 마케팅 분석 웹앱 — 바이브 코딩으로 완성한 개발 스토리

AI와 함께 만드는 마케팅 분석 웹앱 — 바이브 코딩으로 완성한 개발 스토리

한 줄이면 충분했던 시작

"마케팅 대행사를 운영하는 지인이 매주 보고서를 수작업으로 만들고 있다"

이 한 마디가 새로운 프로젝트의 시작이었습니다. 온라인 쇼핑몰 여러 곳에 상품을 등록하고, 판매 데이터를 수집하고, 광고 성과를 분석해서 주간 보고서를 만드는 일. 숙련된 마케터라도 일주일에 한 번씩 몇 시간씩 투자해야 하는 반복 작업이었죠.

"이거 자동화할 수 있지 않을까?"

비개발자인 제가 AI 코딩 툴과 함께 도전한 Ad-Pulse 개발 스토리를 공유합니다.

1단계: 노트북 한 대로 시작한 실험

처음 목표는 단순했습니다. "내 노트북에서만 돌아가도 좋으니 일단 만들어보자."

클라우드 서비스를 사용하면 비용이 발생하고, 고객 데이터 보안 문제도 신경 써야 합니다. 그래서 AI가 추천해 준 SQLite라는 로컬 데이터베이스로 시작했어요. 마치 개인용 가계부 프로그램처럼, 설치하면 내 컴퓨터 안에서만 돌아가는 방식이었습니다.

앱을 켜면 자동으로 서버가 시작되고, 닫으면 함께 종료됩니다. 설치 파일만 공유하면 누구든 같은 환경을 만들 수 있어서 실험용으로는 완벽했죠.

"내가 컴퓨터에 설치하는 앱까지 만들 수 있다니!"

이때 처음으로 AI 코딩의 가능성을 실감했습니다.

2단계: 데스크톱 앱의 첫 완성품

웹 기술을 감싸는 데스크톱 껍데기, Electron을 활용해 진짜 앱다운 앱을 만들었습니다. Mac 사용자는 앱스토어에서 다운받는 것처럼 설치할 수 있고, 개발 중에도 실제 배포 버전과 거의 동일한 환경에서 테스트가 가능했어요.

이 단계에서 관리자가 데이터를 업로드하고 간단한 그래프를 볼 수 있는 MVP(최소 기능 제품)를 완성했습니다.

3단계: "팀 전체가 함께 써야겠다"

몇 번의 피드백을 받고 나니 요구사항이 바뀌기 시작했습니다.

"집에서만 쓰는 게 아니라 팀 전체가 같이 쓰면 좋겠어요." "밖에서도 접속하고 싶어요."

노트북 한 대로는 도저히 감당할 수 없는 상황. 방향을 완전히 틀기로 했습니다.

겉으로는 데스크톱 앱을 유지하되, 핵심 기능은 클라우드에 올리는 하이브리드 방식으로요. 마치 자가 발전기를 쓰다가 본격적인 전력 회사와 계약하는 느낌이었습니다.

데이터베이스도 클라우드, 사용자 인증도 클라우드, 배포도 클라우드. 자동 백업에 어디서나 접속 가능한 진짜 서비스가 되었습니다.

4단계: 최신 기술 스택으로 리모델링

클라우드 버전을 만들면서는 Next.js 15 + React 19라는 최신 웹 프레임워크를 선택했습니다. 뼈대는 최신식으로, 공사는 AI와 함께.

"로그인 페이지 만들어줘" "데이터 저장소와 연결해줘"

이런 요구사항을 던지면 AI가 필요한 코드와 설명을 제공합니다. 저는 그걸 검수하고 한두 줄씩 손보는 역할에 집중했어요. 덕분에 혼자서도 팀 단위 속도로 개발할 수 있었습니다.

5단계: 보안과 안정성 챙기기

클라우드에 올린다고 해서 데이터를 막연히 맡긴 건 아닙니다.

• 데이터베이스 구조부터 접근 권한 정책까지 원클릭 세팅 스크립트 제작
• AI 생성 코드의 보안 허점 지속적 체크
• 사용자는 본인의 AI API 키를 직접 관리해서 사용량과 비용 통제

이렇게 하면 서비스 제공자 입장에서는 서버 비용과 AI 토큰 청구 문제를 피할 수 있고, 사용자는 자신만의 데이터 보안을 유지할 수 있습니다.

특히 Next.js 프레임워크가 갑자기 동작 방식을 바꾸는 바람에 전체 코드에서 await를 추가해야 하는 상황이 발생했는데, AI에게 "어디가 위험한지 찾아줘"라고 요청해 빠르게 해결했습니다.

6단계: 핵심 기능 — AI 멘토 시스템

Ad-Pulse가 진짜 하고 싶은 일은 데이터 입력을 AI 인사이트로 연결하는 것입니다.

엑셀이나 CSV 파일을 업로드하면:

1. 열 이름이 제각각이어도 자동으로 표준화
2. 총 매출, 판매 채널, 상품별 성과 등 핵심 지표 추출
3. AI에게 "여기서 배울 점은 뭐야?" 질문

AI가 정확한 분석을 하려면 어떤 데이터를 어떤 방식으로 전달해야 하는지 세심한 설계가 필요합니다. 그래서 "프롬프트 버전" 개념을 도입해 질문과 답변 형식을 지속적으로 개선하고 있어요.

위기와 해결의 연속

갑작스러운 프레임워크 업데이트

어느 날 로그인 기능이 전부 작동하지 않았습니다. 원인은 프레임워크의 규칙 변경. AI에게 "바뀐 규칙에 맞춰 전부 고쳐줘"라고 부탁해 수십 개 파일을 한 번에 수정했습니다.

폰트 로딩 문제

원격 서버에서 폰트를 받아오지 못한다는 경고가 발생. 단순한 네트워크 인증 문제였지만, 사용자에게는 "문제없이 대체 폰트를 사용하고 있다"고 안내해 무사히 넘어갔습니다.

이런 경험들 덕분에 **"AI와 페어 프로그래밍을 하면 버그 대응도 이렇게 빠를 수 있구나"**라는 확신을 얻었어요.

현재 진행 상황과 앞으로의 계획

전체 진행률: 약 90% 

완료된 부분:

• ✅ 로컬 → 클라우드 인프라 전환
• ✅ 사용자 인증 및 데이터 보안 시스템
• ✅ 기본 데이터 업로드 및 저장 기능
• ✅ AI API 연동 기반 구조
• 📊 CSV 업로드 전용 관리 화면
• 🤖 원클릭 AI 분석 및 리포트 생성

앞으로 할 일:

• 📋 직관적인 대시보드 UI 개선
• 분석 데이터 고도화를 위한 프롬프트 튜닝