본문으로 건너뛰기

마케팅은 마선생

v1
작성 2026-04-19읽는 시간 10분

코드 한 줄 없이 만든, 실제로 결제되는 마케팅 SaaS 이야기

마케팅은 마선생 랜딩 — 헤드라인과 실시간 AI 상담 데모(홍대 수제 도넛집 브랜드 네이밍 예시)

항목내용
서비스명마케팅은 마선생
도메인ma.d-onworks.com
만든 사람디온웍스 (바이브 코더, 코드 1줄 못 씀)
사용 도구Claude Code + Next.js 16 + Supabase + Gemini API
가격Free / Pro 월 12,900원 / Team 월 29,800원
상태2026-04 정식 런칭 · 실제 결제 작동 중

이 서비스는 뭐예요?​

마케팅 대행사에 견적 한 번 받아 보신 적 있으세요? 월 300만 원부터 시작해서 1,000만 원까지 부릅니다. 그 돈이면 가게 월세를 냅니다. 그렇다고 내가 직접 하자니 — 광고 세팅, 카피라이팅, SEO(검색 노출 최적화), 콘텐츠 기획이 죄다 다른 분야의 일이에요.

마케팅은 마선생(ma.d-onworks.com)은 그 35가지 마케팅 분야를 한 나의 AI로 압축한 서비스예요. 한 대화창에서 "인스타에 뭐 올릴까요?" 하고 한글로 물어보면 그 분야 전문가가 답하는 구조로 묶어 놨습니다.

표현을 바꿔 볼게요. 병원을 한번 떠올려 보세요. 내과·외과·피부과·치과가 다 따로 있고, 환자는 증상에 맞춰 진료과를 고릅니다. 그런데 마케팅은 마선생은 "증상만 얘기하면 AI가 알아서 진료과를 고르고 처방까지 내려 주는 1차 종합 병원" 에 가까워요. "가게 이름 좀 지어 주세요" 하면 브랜딩 전문가가, "네이버 광고 얼마부터 시작해요?" 하면 광고 운영 전문가가 앞으로 나옵니다.

마선생 제품소개 페이지 — 하나의 AI, 35명의 전문가

그리고 하나 더 말씀드릴게요. 이 서비스는 제가 코드 한 줄도 직접 쓰지 않고 만들었습니다. Claude Code(클로드 코드 · AI와 한글로 대화하며 코드를 짜는 CLI 도구)와 한국어로 대화하면서 설계하고, Next.js로 풀스택을 올리고, Supabase에 인증·결제를 붙이고, Gemini를 두뇌로 꽂았어요. 이 글은 그 "어떻게 만들었는가"를 끝까지 풀어 보여 드리는 기록입니다.

누구를 위해 만들었나요?​

카피 팀 자리에 앉아 고객 얘기를 몇 번 들어 봤어요. 세 분만 꼽아 드릴게요.

① 홍대에서 수제 도넛 가게를 준비 중인 사장님

  • 아침마다 반죽하느라 손이 꽉 차는데, 밤엔 "인스타에 뭘 올려야 하나" 유튜브 강의를 10개째 보는 중
  • 대행사는 부담. 알바생 뽑을 돈도 빠듯

② 5명짜리 초기 SaaS 스타트업 대표

  • 개발자는 있는데 마케터가 없음. 대표가 겸직
  • 런칭 문구·가격 설계·런칭 전략을 한꺼번에 결정해야 하는데 기준이 없음

③ 1인 유튜버·작가·디자이너

  • 본인 작품은 좋은데 "팔릴 문장"을 못 쓰겠음
  • 유료 강의는 들었지만 막상 내 제품에 어떻게 적용할지 막막

이분들의 공통점은 한 줄로 정리됩니다 — "시간도 예산도 부족한 1인 결정권자". 혼자 결정해야 하는데, 결정할 정보의 분야가 너무 넓어서 배우다가 지쳐 버리는 사람들.

실제 화면으로 먼저 보여 드릴게요​

글로만 설명하면 안 와닿죠. 진짜로 돌아가고 있는 제품이에요.

① 로그인하면 바로 이 대시보드​

마선생 대시보드 — 좌측 35개 스킬, 우측 채팅

왼쪽 사이드바에 7개 카테고리 × 35개 스킬이 전부 들어 있어요. "전략 & 기획", "리서치 & 분석", "SEO & 검색 최적화", "콘텐츠 제작", "광고 & 아웃리치", "전환율 최적화", "성장 & 수익" — 실제 마케팅 팀에서 나눠 맡는 직무와 똑같이 구분해 놨습니다.

재미있는 부분은 상단의 "스킬 자동 매칭 모드" 예요. 사용자가 스킬을 고르지 않아도, 질문을 던지면 마선생이 "이건 소셜 콘텐츠 전문가가 답해야겠다" 판단해서 해당 스킬로 자동 진입합니다. 병원 1차 진료의와 똑같은 구조예요.

② 진짜 질문, 진짜 답변​

예시 하나 보실까요? "안녕 마선생! 인스타에 올릴 콘텐츠 아이디어 3개 줘봐 (홍대 수제 도넛 가게)" 라고 한 줄 던졌을 때의 실제 답변이에요.

마선생 실제 대화 화면 — 홍대 도넛 가게 컨텐츠 상담

상단 배지를 보세요 — "스킬: 소셜 콘텐츠" 로 자동 매칭됐어요. 그리고 마선생은 바로 답을 쏟아 내는 게 아니라, "목표가 뭐예요? 매장 방문 늘리기? 온라인 주문? 홍대 도넛 맛집 되기?" 를 먼저 되물어요.

이게 핵심이에요. 일반 챗봇은 "예쁜 해시태그 3개" 같은 얕은 답을 주지만, 마선생은 "전략을 세우려면 정보가 필요하다" 는 전제가 프롬프트에 박혀 있어요. 이 되묻기 패턴이 실제 마케팅 컨설턴트의 1차 미팅과 똑같습니다.

③ 결제·크레딧·구독까지 전부 살아 있음​

사용자 메뉴 — Pro 플랜 123/1,500 크레딧

데모가 아니에요. 좌하단을 보시면 Pro · 123 / 1,500 크레딧 이 떠 있어요. 실제로 결제해서 Pro 플랜 쓰고 있고, 이번 달 123 크레딧 소진한 상태입니다.

구독 관리, 사용량 대시보드, 보고서 기록, 테마 설정 — 일반 SaaS(구독형 소프트웨어)가 갖춰야 할 기본기가 다 들어 있고, 이걸 전부 코드 한 줄 안 쓰고 AI와 대화만으로 구현했어요.

어떤 로직으로 움직이나요?​

비개발자용 비유​

마선생을 "호텔 프런트데스크" 로 생각하시면 쉬워요.

  1. 손님(사용자)이 프런트에서 부탁을 해요 — "저녁 식사 예약"
  2. 프런트(마선생 라우터)가 담당 부서로 인계해요 — 레스토랑팀
  3. 담당 부서(전문 스킬)가 매뉴얼대로 처리해요 — 좌석 확인, 예약, 컨펌
  4. 결과를 손님에게 전달해요

프런트는 "어느 부서에 보낼지" 만 판단하면 되고, 실제 전문 지식은 각 부서가 가지고 있어요. 마선생은 이 구조를 AI로 재현한 거예요.

기술 스택 (실제)​

영역기술역할
프레임워크Next.js 16 (App Router)랜딩·가격·대시보드 전부 풀스택
UIReact 19 + Tailwind CSS v4채널톡 벤치마킹 디자인 토큰
AI 두뇌Gemini API35개 스킬 프롬프트 + 스킬 매칭 라우터
인증Supabase Auth구글 OAuth (카카오는 비즈앱 심사 대기)
데이터베이스Supabase Postgres사용자·구독·사용량·대화 이력
결제Bootpay SDK v2일반결제 + 정기결제 빌링키
차감제자체 구현1 크레딧 = 1,000 토큰, Gemini 실비 역산
배포Vercelma.d-onworks.com 커스텀 도메인

진짜 중요한 건 프롬프트 자산​

코드는 Claude Code가 써 줬지만, 35개 스킬의 프롬프트 매뉴얼은 전부 우리가 직접 채웠어요. 카피라이팅 스킬 하나만 해도 — 전환 카피라이터가 쓰는 실제 프레임워크, "기능 vs 혜택" 매핑 표, CTA(행동 유도 버튼) 공식, 페이지 구조 체크리스트가 전부 한글 매뉴얼로 들어 있습니다.

이게 "일반 챗봇"과 "분야별 전문가"의 갈림길이에요. 모델은 같은 Gemini여도, 어떤 매뉴얼을 학습시키느냐에 따라 결과물 품질이 3배 넘게 벌어집니다.

바이브 코딩으로 어떻게 만들었나요?​

시간 순서대로 풀어 드릴게요. 실제로 밟은 과정이에요.

1단계 · PRD를 사람 언어로 먼저 씀​

Claude Code를 열고 마크다운 한 장에 제품의 모든 결정을 적었어요. "홈에 Next.js 템플릿이 그대로 노출 중 → 교체", "인증 가드 없음 → 접근 제어 미들웨어 필수", "글로벌 표준 Saas를 벤치마크로 쓸 것", "요금제는 Free/Pro 12,900/Team 29,800" 같이 결정 사항을 표로 정리하는 게 핵심이에요. 이게 AI에게 주는 헌법 역할을 합니다. PRD(Product Requirements Document · 제품 요구사항 문서)는 어렵게 생각 안 하셔도 돼요. "뭘 만들지, 왜 만들지, 뭘 안 할지"를 한 장에 적은 게 전부예요.

2단계 · Playwright로 벤치마크 실측​

Claude Code에 Playwright MCP(웹 브라우저를 자동 조작하는 확장 도구)를 연결해 자동으로 디자인 토큰을 뽑아냈어요. 컬러, 폰트 크기, 간격, 그림자, 라운딩까지 전부 JSON으로 추출. 이걸 docs/design-tokens.md 한 장에 박제했습니다.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

# Playwright MCP 추가 (Claude Code 대화창 안)
! claude mcp add playwright -- npx @playwright/mcp@latest

이 한 줄로 AI가 웹 페이지를 눈으로 보고, 측정하고, 스크린샷을 찍어요.

3단계 · frontend-design 스킬로 HTML 목업 선생산​

페이지 구현 전에 단일 HTML 파일 4개 로 먼저 그렸어요. Stitch 같은 비주얼 툴 대신 .claude/frontend-design 스킬에 "홈/제품/가격/사례 4페이지"를 주문했고, 목업 HTML을 브라우저에서 검토 → 확정 → Next.js로 이식했습니다.

목업을 먼저 뽑는 이유는 "실제 코드에 손대기 전에 디자인 방향을 확정" 하기 위해서예요. 코드에 넣고 고치면 3배 느려집니다.

4단계 · 35개 스킬 프롬프트 채우기​

제일 오래 걸린 단계예요. 각 스킬마다 SKILL.md 한 장에 — 역할 정의, 작업 전 수집할 컨텍스트, 원칙, 출력 형식, 체크리스트를 채웠습니다. 마케팅 실전서·현장 매뉴얼을 한글로 옮기는 작업이에요. 이게 유료 서비스의 진짜 엔진입니다.

5단계 · Supabase로 인증·결제·사용량 한번에​

  • Supabase Auth(인증 서비스)로 구글 로그인 붙이기 (카카오는 비즈앱 심사 대기 중)
  • profiles.credits_monthly_used / quota 컬럼 + usage_events 테이블 + 트리거로 자동 누적
  • /api/chat 진입 시 credits_monthly_used >= quota 체크 → 429 반환
  • request_id UNIQUE 제약으로 이중 차감 방지

"토큰"을 그대로 보여 주면 사용자가 겁을 먹어요 (행동경제학의 '손실 회피 효과' — 숫자가 빠르게 줄어드는 걸 보면 이성보다 감정이 먼저 반응합니다). 그래서 1 크레딧 = 1,000 토큰 으로 단위 변환했어요. Free 100 / Pro 1,500 / Team 3,500 크레딧. 숫자를 친숙하게 만드는 것도 UX(사용자 경험 설계)예요.

6단계 · Vercel에 올리고 도메인 연결​

git push origin main 한 번이면 Vercel이 빌드하고 ma.d-onworks.com 로 배포됩니다. DNS는 Google Domains, SSL은 Vercel 자동 발급. 여기까지 첫 커밋부터 정식 런칭까지 약 3일 걸렸어요.

교육생이 이런 서비스를 만들려면​

기술보다 마인드셋이 먼저예요. 바이브 코딩을 하면 할수록 확실히 느끼는 부분이에요.

① "코드를 짠다"가 아니라 "제품을 운영한다"로 생각하세요​

비개발자가 빠지기 쉬운 함정이 "코드부터 배워야지"예요. 그 순간 1년은 공부로 날아갑니다. 바이브 코딩의 핵심은 "코드를 외우지 말고, 제품의 설계도를 외워라" 예요. 무슨 페이지가 있어야 하는지, 누가 어떤 버튼을 누르는지, 돈은 어떻게 들어오고 나가는지. 이 설계도 언어를 AI에게 정확히 전달할 수 있느냐가 핵심이고, 코드는 AI가 씁니다.

② PRD 한 장이 전부의 8할​

저는 제품 만들 때 PRD.md 한 장을 먼저 써요. 왜 만드는지, 누가 쓸지, 뭐가 들어가야 하는지, 뭘 안 할지. 이 문서를 Claude Code에게 읽히면 그때부터 AI는 같은 목표를 향해 달리는 팀원이 됩니다. 프롬프트를 아무리 잘 써도 PRD 없이는 코스가 이탈해요.

③ 검증 가능한 작은 단위로 쪼개세요​

"마케팅 SaaS 만들어 줘" → 망해요. "랜딩 페이지 Hero 섹션 목업 먼저" → 성공해요.

한 번에 3시간짜리 작업을 던지면 AI도 중간에 길을 잃어요. 10분~20분짜리 작업으로 쪼개고, 매번 눈으로 확인하고 다음으로 넘어가세요. 이게 "쪼개기" 스킬이고, 이것만 익혀도 제품 하나는 나옵니다.

④ 수치 증거 없이는 "잘 된다"고 말하지 마세요​

AI가 "완성됐습니다" 하면 그냥 믿지 마세요. "GEMINI API로 글생성 성공했어?", "응답 시간 몇 밀리초?" 를 물어보세요. 이게 "바이브 코딩의 품질 관문"이에요. 숫자로 증명 못 하면 아직 안 끝난 거예요.

⑤ 세 번 고쳐도 안 풀리면 되돌아가세요​

같은 파일 두 번 고치는데 안 풀리면 — 근본 원인을 다시 보세요. 임시 fix 3번 쌓으면 코드는 더 복잡해집니다. 이 지점에서 자존심 버리고 Claude Code에게 "지금까지 고친 걸 전부 롤백하고 처음부터 다시 설계해 보자" 하세요.

같이 공부하실래요?​

여기까지 읽으시면서 "내 아이디어도 이렇게 만들어 볼 수 있을까?" 싶으신 분들이 계실 거예요. 바이브 코딩은 결국 같이 해 봐야 늘어요. 혼자 끙끙 앓지 마시고 편하게 열어 주세요.

  • 어떤 제품을 만들고 싶은지 같이 이야기하기
  • PRD 한 장 같이 써 보기
  • 막힌 지점 같이 풀어보기

상담은 언제든 무료입니다. 제가 돕는 과정에서 저도 공부가 되니까, 오히려 제가 고마운 자리예요. 같이 만들어 가요.

👉 편하게 연락: 프로필의 문의하기 폼 👉 먼저 혼자 공부해 보고 싶다면: 바이브 코딩 20강 무료 커리큘럼 👉 마케팅은 마선생 무료로 써 보기: ma.d-onworks.com — 카드 등록 없음

궁금해하실 것들​

Q. AI가 진짜 전문가만큼 해 주나요? A. 각 분야의 실전 매뉴얼을 한글로 주입했어요. '일반 챗봇'이 아니라 '분야별 전문가' 가 답합니다. 단, 완벽 대체가 아니라 결정을 돕는 파트너로 쓰세요. 최종 실행은 사람이 합니다.

Q. 저는 컴퓨터도 잘 못 다뤄요. A. 채팅 앱 쓸 수 있으면 충분합니다. 설치도 가입도 1분. 한글로 "인스타에 뭐 올릴까요?" 한 줄이면 끝나요.

Q. 디온웍스는 진짜 1인 개발로 이런 걸 다 만드나요? A. 네, 대표 본인이 코드는 못 쓰지만 AI 팀원 여러 명을 붙여서 만듭니다. 이 사이트 ai.d-onworks.com 자체도 같은 방식으로 만들어졌어요.

Q. 보안은 괜찮나요? A. 인증은 Supabase + Google OAuth(구글 계정으로 로그인하는 표준 방식), 모든 외부 입력은 스키마 검증, SQL은 파라미터 바인딩만 허용, .env(비밀 값 파일)는 절대 커밋하지 않습니다. D-ONWORKS 공통 보안 위생 규칙을 모든 제품에 적용해요.

참고 링크​

▸개정 이력1건
  • v12026-04-19초판

이 글이 도움이 되었나요?