- 카드 grid: grid-cols-2 md:grid-cols-5 → grid-cols-1 sm:grid-cols-2 lg:grid-cols-5
(모바일 orphan 방지)
- ContactModal service를 state로 lift (modalService) — Custom Build CTA에서
"외주 개발 문의" 자동 선택. 모달 close 시 "일반 문의"로 리셋.
- 카드 화살표 span에 aria-hidden 추가 (a11y)
- 카드 Link 의 redundant inline style 제거
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- /services/music/samples 신규: 6개 장르 샘플 갤러리 + 구매 CTA
- 음악 페이지 #samples 섹션: 가장 인기 1개(featured)만 노출 + 갤러리 링크
- TopNav/Hero 보조 CTA '샘플' → /services/music/samples 로 통일
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Evidence 섹션에 '예시' 배지/면책 문구 (실샘플 전 법적 리스크 정리)
- JSON-LD Offer에 price/priceCurrency/availability 추가 (39k/99k/149k/29k/무료)
- 모바일에서 3-tier 가격 칩 세로 스택 (🔥프로 강조 유지)
- Hero '샘플 결과 보기' 앵커 /services/music#samples로 통일
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- TopNav 한국어화 (홈/샘플/가격/팩 상세), API 제거
- Hero 배지: 상품 형태 명시 "프롬프트·템플릿 팩 (PDF + 에셋)"
- Hero CTA: "₩39,000 팩 자세히 보기" (기대↔페이지 정렬)
- Hero 하단 3-tier 가격 요약 + 프로 티어 "가장 많이 팔림" 강조
- Final CTA 음악 단일화 ("오늘 밤 첫 AI 뮤비"), 문의는 서브 링크로 격하
- Other Products 헤더 "박재오가 만든 다른 도구" + 운영자 1줄
- layout 메타데이터·OG·Twitter·keywords 전면 음악 중심 재편
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 사이드바: AI상품/무료도구/외주의뢰 3그룹 구조로 개편 (ARIA 시맨틱)
- 홈페이지: AI 상품 중심 재작성 (히어로+상품카드+무료도구+외주축소)
- SEO: 메타데이터·OG태그·JSON-LD를 AI 상품 포지셔닝으로 변경
- 프롬프트 페이지: 프리미엄 상품 5개에 PortOne PaymentButton 연결
- AI 키트 페이지: 월 구독 CTA 2곳에 PaymentButton 연결
- 사주: 유료 전환 복원(4,900원) + PaymentButton 연결
- 코드 품질: 인라인 스타일→globals.css, emoji→SVG, 미사용 데이터 제거
- DB 마이그레이션 005: 전체 18개 상품 등록 SQL 추가
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- lib/gtag.ts: GA4 이벤트 유틸리티 (trackCTAClick, trackToolDemo, trackDownload, trackOutboundClick)
- ContactModal/ContactForm: 공용 trackEvent로 리팩토링 + generate_lead 이벤트
- 홈/tools/automation/prompt/website: CTA 클릭 이벤트 추적 추가
- 홈/freelance/ai-kit: IntersectionObserver 스크롤 리빌 애니메이션 신규 추가
- automation/prompt: GA4 trackCTAClick 적용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
[DB]
- supabase/migrations/002_project_milestones.sql 추가
quotes.user_id 컬럼 + project_milestones 테이블 생성 SQL
[API]
- GET /api/projects — 로그인 사용자의 프로젝트+마일스톤 조회
- POST /api/projects/link — 견적서 토큰으로 계정에 프로젝트 연결
- GET/POST /api/admin/milestones — 관리자 마일스톤 목록/기본 7단계 초기화
- PATCH/DELETE /api/admin/milestones/[id] — 관리자 단계별 상태·메모 업데이트
[UI — 마이페이지]
- '프로젝트 현황' 탭 신규 추가 (Tab type 확장)
- 진행률 바, 단계별 타임라인, 개발자 메모 표시
- 견적서 코드 입력 → 계정 연결 폼
[UI — 관리자 견적서 편집]
- '진행 단계' 탭 추가: 기본 7단계 초기화, 단계별 status/메모 편집
[마케팅 카피]
- page.tsx PROMISES 4번째 추가: "진행 현황 마이페이지 실시간 확인"
- freelance 보증 카드 5번째 추가: 실시간 진행 현황 (그리드 2×5)
- services/website trust badge 5번째 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- page.tsx: 홈 서비스 목록 website 가격 50만원→20만원, 기간 7일→3일 (실제 페이지와 일치)
이벤트 배너 AI 자동화→스타터 20% 할인 (주력 서비스와 방향 통일)
- services/website: FAQ 3→5개 (앱/모바일 개발 가능 여부, 계약금·취소 방식 추가)
- freelance: 웹사이트 제작 포트폴리오 1건 추가 (기업 브랜드 홈페이지·Next.js)
자동화 4건만 있던 포트폴리오에 웹 개발 사례 보강
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- services/website: 하단 CTA 그라디언트→솔리드+대각 패턴, 방사형 오브 제거
CTA 카피 "지금 바로 시작하세요"→"내일도 고민만 하실 건가요?" 전환 강화
CTA 버튼·스크롤탑 버튼 linear-gradient→#6366f1 솔리드
모바일 반응형 CSS 블록 추가 (portfolio/process/pricing/hero 1컬럼)
Hero 타이틀·배지 웹앱·앱 개발 포함 문구로 확장
- page.tsx: 서비스카드 가격/기간 hidden sm:flex→항상 표시 (모바일 대응)
- freelance: 개발자 기술 배지 hidden sm:flex→flex flex-wrap (모바일 표시)
후기 그리드 md:grid-cols-3→sm:grid-cols-2 md:grid-cols-3
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[제거]
- gradient orbs 배경 장식 전면 제거
- Bento 그리드 레이아웃 제거
- 가짜 통계 (47+, 98% 만족도) 제거
- 가짜 고객 후기 제거
- Tech stack 무한 마퀴 제거
[추가]
- 에디토리얼 헤로 (좌측 정렬, 개인 목소리)
- 박재오 personal story 섹션 (7년 경력 구체화)
- 고객 pain points 섹션 (SVG 아이콘 기반)
- 약속 3가지 에디토리얼 행 구조
- 실제 운영 서비스 증거 섹션 (live 링크)
- 서비스 목록 테이블형 에디토리얼 레이아웃
- 무료 이벤트 + CTA 통합 섹션
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[균형 복원]
- PROOF_SERVICES: 1개 → 3개 (쟁승메이드 + AI 사주 분석 + AI 자동화 키트)
로또·주식 제거로 생긴 3열 그리드 공백 해결
- SUBSCRIPTION_SERVICES: 3개 → 4개 (AI 사주 분석 추가)
4열 그리드에 맞게 복원
[Supanova 디자인 강화 — 마케터·UX·상품 전문가 관점]
- 서비스 카드에 아이콘(SVG) + 1줄 설명 추가: 가격만 있던 카드 → "나에게 왜 필요한가" 즉시 이해
- flex-col 레이아웃으로 카드 높이 통일, 설명이 중간을 채우는 구조
- hover 시 -translate-y-1 + shadow-lg로 클릭 유도 강화
- PROOF_SERVICES 카드: accentColor별 컬러 배지 + 배경 글로우 + hover 효과 추가
- Hero 우측 패널: 1개 → 3개 서비스 표시, 배지 색상을 서비스별로 분리
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- app/services/ai-kit/page.tsx: AI 자동화 월 구독 키트 서비스 페이지 신규 생성 (19,900원/월)
- 6종 자동화 도구(업무일지·이메일·매출분석·SNS·회의록·상품설명) 소개
- PaymentButton 결제 연동, 후기·FAQ·CTA 포함
- lib/products.ts: 신규 상품 7종 추가
- prompt_image_gen(12,900) / prompt_resume(9,900) / prompt_email(10,900)
- prompt_marketing(12,900) / prompt_report(10,900) / ai_kit_monthly(19,900)
- app/services/prompt/page.tsx: 프리미엄 패키지 CTA를 ContactModal → PaymentButton으로 교체
- app/components/Sidebar.tsx: AI 자동화 키트 메뉴 항목 추가 (NEW 배지)
- app/page.tsx: SUBSCRIPTION_SERVICES에 AI 자동화 키트 항목 추가
- app/admin/dashboard/page.tsx: 월 100만원 목표 수익 추적 카드(MonthlyGoalCard) 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Sidebar navItems에서 로또·주식 제거
- 홈 PROOF_SERVICES·SUBSCRIPTION_SERVICES에서 제거
- /services/lotto, /services/stock → 홈으로 redirect
- 원본 페이지 코드는 git 기록에 보존
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[SEO 인프라]
- app/sitemap.ts: Next.js App Router 사이트맵 자동 생성 (/sitemap.xml)
- app/robots.ts: 크롤러 허용/차단 규칙 + 사이트맵 경로 등록
- app/layout.tsx: JSON-LD 구조화 데이터 추가 (Person + LocalBusiness + OfferCatalog 스키마)
- GA4 config 업데이트 (send_page_view, custom_map)
[서비스 페이지 SEO 메타태그 강화]
- automation: 'AI 업무 자동화 외주' 키워드 12종 최적화
- prompt: 'ChatGPT 프롬프트 잘 쓰는 법', '이미지 생성 프롬프트' 등 구매형 키워드 추가
- website: '소상공인 홈페이지 제작 외주', '홈페이지 제작 비용' 등 롱테일 키워드 추가
[GA 이벤트 트래킹]
- ContactModal: contact_attempt / generate_lead / contact_error 이벤트 추가
(전환 추적 핵심 — 어떤 서비스에서 문의가 오는지 GA에서 확인 가능)
[홈페이지 콘텐츠 위젯]
- 'AI 자동화 실전 팁' 블로그 포스트 3종 카드 섹션 추가 (블로그 연동 준비)
[콘텐츠 자산 (CONTENT/ 폴더)]
- brand-story.md: 풀/숏/초단문/유튜브 채널 소개용 4종 브랜드 스토리 원고
- youtube-scripts.md: 유튜브 숏츠 스크립트 10편 (훅→문제→시연→CTA 구조)
- sns-calendar.md: 30일 SNS 포스팅 캘린더 (블로그·스레드·카카오·블라인드 채널별)
- blog-drafts.md: 네이버 블로그 SEO 초안 10편 (키워드·소제목·본문 완성)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[STRATEGY.md]
- 마케터/인플루언서/사업가 3인 원탁 회의 기반 전략 플레이북 작성
- Phase 1~4 로드맵, 숨겨진 니즈 분석, 후기 수집 전략, 크몽 신규 서비스 카피 포함
[app/page.tsx - Phase 1 실행]
- Hero에 "AI 자동화 전문" 배지 + AI 자동화 서브카피 인라인 강조 추가
- 서비스 순서 재정렬: 자동화·프롬프트 → 상단 (전략 집중 서비스 우선)
- 프롬프트 가격 표시 9,900원~로 업데이트 + SALE 배지
- 자동화 서비스 HOT 배지 추가
- "한정 3팀 무료 체험 후기 수집" 배너 섹션 추가 (소셜 프루프 수집)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
경력 연수 강조에서 포지션/현재성 강조로 카피 방향 전환.
숫자(7)에 의존하는 문구 대신 '현직 대기업'이 최신 기술 역량과
신뢰를 더 직접적으로 전달함.
대상 파일: app/layout.tsx, app/page.tsx, app/freelance/layout.tsx,
app/services/prompt/page.tsx, MARKETING.md, README.md
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- app/page.tsx: 대시보드 카드 그리드 → 스크롤형 마케팅 랜딩페이지 전환
· Hero: 좌우 분할 레이아웃 (외주 개발 포지셔닝 + 운영 서비스 신뢰 카드)
· Section 2: 신뢰 증거 Bento Grid (계약서·패널티·AS·소스코드·보고)
· Section 3: "URL로 직접 확인" 운영 증거 섹션 (다크 bg)
· Section 4: 구독/설치형 서비스 보조 스트립 (레이어 분리 명확화)
· Section 5: 기술 스택 CSS 마퀴 애니메이션
· Section 6: 최종 단일 CTA (압도적 강조)
- app/freelance/page.tsx: 고객 후기 섹션 추가 (포트폴리오 → 후기 → 프로세스 순)
· 3개 후기 카드 (별점·후기·결과·의뢰인)
· Spring easing hover 인터랙션 적용
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 홈페이지 제작: 50→20만, 150→100만, 300→200만원
- 업무 자동화: 10→5만, 중간→자동화심화 15만원 (이름 변경 포함)
- 주식 자동매매: 스타터 99→49k/29→9.9k, 프로 199→99k/49→29k
- 홈 서비스 카드 가격 동기화 (stock, automation)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 관리자 견적서 CRUD (WBS/항목/향후관리/특이사항 5탭 편집기)
- 고객용 공개 견적서 페이지 (optional 항목 선택 + 실시간 총액 + 수락)
- 마케팅 SVG 에셋 6종 (썸네일 5개 + 배너 1개) + 관리자 에셋 페이지
- 전체 카피 강화: 크레덴셜 제거 → URL증거/환불보장/계약서/납기패널티 중심
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 홈 카드: 월 4,900원 → 900원~, 플랜명 골드/플래티넘/다이아로 수정
- 관리자 대시보드: 활성 구독자 수 카드 추가
- 관리자 회원 목록: 구독 현황(플랜명, 만료일) 컬럼 추가
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 전체 디자인 시스템 개편: 딥 네이비 (#04102b) + 로열 블루 (#1a56db) 팔레트
- 홈 대시보드: 가운데 정렬, 서비스별 고유 카드 디자인 (로또/주식/프롬프트/자동화)
- 서비스 페이지 4종: 각 서비스 테마 색상 + 장식 요소 + 가운데 정렬 레이아웃
- 외주 개발 페이지: 라이브 카운터 (진행중/상담중/납품완료), 수직 타임라인
- ContactModal 컴포넌트: 서비스별 모달 문의폼 + 체크리스트 (페이지 이동 없이 문의)
- CookieRun 폰트 적용 (Regular/Bold/Black, 상업적 이용 가능 라이선스)
- 실명 '박재오' → '쟁토리' 전체 변경, 7년차 강조 홈 페이지에만 표시
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Resend API 통합 (이메일 발송)
- ContactForm 클라이언트 컴포넌트 생성
- API Route (/api/contact) 구현
- 입력 검증 및 에러 처리
- 성공/실패 메시지 표시
- 환경변수 설정 (.env.local, .env.example)
- 배포 가이드 작성 (DEPLOYMENT.md)
- Resend 설정 방법
- Vercel 배포 가이드
- 가비아 도메인 연결 방법
- 트러블슈팅 가이드
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
